Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Hello everyone, Please I need help with this step. I nested the text in a label element and added a for attribute with the same value as the input element’s id attribute. but I don’t know why it doesn’t work.
Here is the code snippet:

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

<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 -->

            <input id="loving" type="checkbox"> Loving<label for="loving"> 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/109.0.0.0 Safari/537.36

Challenge: Learn HTML by Building a Cat Photo App - Step 56

Link to the challenge:

2

You’re not nesting the word loving. You are just creating label with the word loving. Your label needs to go around the text “loving” after the input. You shouldnt be adding the word loving a second time

3

Ok, so it is something like this:
<input id="loving" type="checkbox"> <label for="loving">Loving</label>?

4

Yes, your snippet at the top of your post explanation is actually correct, that passes the test when I copy and paste it in. I just saw that, I was looking at the code you have in your challenge block with the rest of the code. That code is different from what you have in your snippet and is incorrect.

So your last reply should pass the challenge

5

Ok, there is this code there: <input id="loving" type="checkbox"> <label for="loving">Loving</label>
I posted him first. He doesn’t work.

And there is one<input id="loving" type="checkbox"> <label for="loving">Loving</label>? one I posted in your answer.

6

They are both the exact same code…the first one I copied and pasted and it passes the challenge for me. Try a different browser incase the one you are using is causing issues for this challenge

7

Ah thank you! I tried it works. I think I was wrong somewhere. THANKS

8

No worries, glad you got it working.

9

Sorry, I mistyped the code snippet that didn’t work. it’s this one:
<label for="loving">Loving</label> <input id="like" type="checkbox">.
It is with him that I have problems.

10

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