Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

I am stuck, I have no idea what I am doing wrong, it works, but it’s not exactly what it needs to be. I think the biggest issue is I am still learning, and I am not understanding the instructions, if someone could better explain what it is I’m supposed to do that would help substantially. An example would also work.

Current Instructions:

Step 56

There’s another way to associate an input element’s text with the element itself. You can nest the text within a label element and add a for attribute with the same value as the input element’s id attribute.

Associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute.

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" id="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/116.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hey there,

reset your task and read the goal carefully. It says that you have to create an association by wrapping the Loving text with a <label> element. And to create an association you have to give the label element a for="" attribute which matches the id="" of your <input> element.

3

Welcome to the community!

You are doing good.

This step says to only nest the text Loving between the opening and closing label tags. Do not move the input element. Just slip the label tag after it to nest only the Loving text. You have correctly added the for attribute to the opening label tag, and matched it to the input id.

Keep up the good progress!

4

This is technically invalid HTML.

id’s must be unique. This means that no two elements can have the same value for the id attribute. But this is an easy one to fix because you don’t need to put an id on the label and the instructions don’t ask you to.

5

@bbsmooth This is true, too.

6

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