Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

I’ve been fiddling with this line for the last 30 minutes and can’t figure it out. The prompt is " Associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute. " And I’m just really lost on what that means. If someone could guide me in the right direction, I’d appreciate it! Thanks.

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

<!-- User Editable Region -->

         <label id="loving" type="checkbox"> </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/120.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

Welcome to the community.

This is what we begin this step with at the start.

 <input id="loving" type="checkbox"> Loving

The instructions ask us to enter the label element tags around the text Loving, that is after the input element.

It should appear input first and slip the two label tags so they touch Loving on each side.

Make sure to add the for attribute to the opening label tag. It should have a value that is the same as the id for the input “loving”

I hope this helps you.

Wishing you good progress on your coding journey.

4

It passed on my end. Could you please submit your updated code for review?

5

I just got it to pass. For some reason I had to use <label/? to get mine to pass. Just happened to hit the key and submit lol. Thank you for all your help!

6

Well done!
You are very welcome!
Keep up the good progress!

7

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