Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

loving shows up as an option just fine so I am not sure what is wrong with this code… Please help and explain with as much detail as you can i am only a couple days into trying to learn coding and very confused easily and often

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
        <figure>
          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
        </figure>
      </section>
      <section>
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
          </fieldset>
          <fieldset>

<!-- User Editable Region -->

            <legend>What's your cat's personality?</legend>
            <legend><input type="checkbox" value="loving">Loving
</legend>
            

<!-- User Editable Region -->

          </fieldset>
          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>
        </form>
      </section>
    </main>
  </body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

You added more than

an input with its type attribute set to checkbox and give it the option of:

Loving

Do not add anything that wasn’t part of the instructions, because that confuses the tests.

1 Like
3

what did I add that wasn’t supposed to be there?

4

What did the part of the instructions that I quoted ask you to add?

5

This is what I have now I thought perhaps to get rid of the extra loving? Im so confused it seems like just what it asked… Also do i not need a label element??

6

Do not add anything that is not in the instructions. I have quoted the part of the instructions that lists the only things you are supposed to add.

Can you list what the three things you are told to add are in the part of the instructions I quoted?

7
Loving

I added 1. the input
2. type=checkbox
3. and the option of loving
again as far as I can tell I added the three things asked?

8

You added those three things and more stuff that wasn’t asked for

9

I physically dont see how though… I removed the end loving and now I don’t know how I could simplify it anymore!? This is what it looks like now not even chat gpt understands what I mean

<legend>
            <input type="checkbox" value="loving">
           </legend>
10

ChatGPT isn’t capable of understanding. It guessed combinations of words based upon what you wrote.

This was the original code.

You should add only what was required after this line.

I see two things here that were not on your list, and you removed the third thing that was on your list from your code.

11

which of this items is for the legend?

1 Like
12

but the legend was added in the step before? Do I remove it now or is this line of code meant to be after legend?

13

phew I finally got it

1 Like