Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

I’m following the steps in this part, but the website says that the code is wrong, telling me to add the text: “Loving” in the label element, but I’ve already tried everything and the website says it’s wrong, what should I do?

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <!-- TODO: Add link to cat photos -->
        <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>
            <legend>What's your cat's personality?</legend>

<!-- User Editable Region -->

           <label for="Loving"> <input id="loving" type="checkbox"> Loving</label>

<!-- 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/119.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.
Learning to describe problems is hard, but it is an important part of learning how to code.
Also, the more you say, the more we can help!

3

Hi @coutopablo053 !
Your label element is currently nesting the text Loving and the input tag. This shouldn’t be the case, it should nest the text only. Let your opening label tag come after the input tag to correct this. Then the id and for attribute values should be the same.

1 Like
4

So could you tell me how to do this step?
Because even doing it the way you said, the site still says it’s wrong, and that it’s necessary to have the for attribute inside the label element, I’ve been trying every possible method for almost an hour, and I’ve looked for answers on the forum, but even So I didn’t find the exact result, thanks for the explanation

1 Like
5

Let me see the code that you made the changes to.

1 Like
6 
<input id="loving" type="checkbox" <label for="Loving"></label>

I did it the way you asked and I’ve also tried creating it this way: <input id="loving" type="checkbox">Loving <label for="Loving"></label>

7

This text should be nested…

In this label element.

<label for="Loving"></label>

2 Likes
8

sorry, but would you be editing the code? Because below your statement “In this label element”, I can’t see which location should be changed, and also I showed two codes, the first was the result was the code I tried after your solution, and the second was another way that I tried

9

My bad, I edited the post to show where the text should go.

1 Like
10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.