Learn HTML by Building a Cat Photo App - Step 55

Tell us what’s happening:
I feel like i am nesting what they are asking me to nest but i am confused when they say “loving shouldnt be to the right of the checkbox anymore”

  **Your code so far**
<html>
<body>
  <h1>CatPhotoApp</h1>
  <main>
    <section>
      <h2>Cat Photos</h2>
      <!-- TODO: Add link to cat photos -->
      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</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>
          <label for="Loving">
          <input id="loving" type="checkbox"> Loving
          </label>
        </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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

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

Link to the challenge:

Only the text “Loving” should be inside of the label, not the input element.

Original line of code given was this:

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

Notice that in this line of code there is an input element of checkbox type and there is a single space following by a single word Loving on the right hand side of the input tag.

So now when we review the instructions, pay attention to how they refer to the word Loving.

Instructions given were:
Associate the text Loving with the checkbox by only nesting the text Loving in a label element and place it to the right side of the checkbox input element.

  • we are asked to associate the word that was given to us Loving with the checkbox that was given to us. How though?
  • we are told that this is done by “only nesting the text … in a label element”. Let’s think about this. Only nesting the text.
    The text is Loving and we need to nest it.
    only nesting the text… (nothing else, just the text)

In your solution, do you think you only nested the text Loving? (Or did you nest a little more than that?)

The other thing you should pay attention to is how to relate the label back to the checkbox. In order for the browser to understand that a specific label belongs to a specific input element, the for attribute value must match an existing input element’s id value exactly. (not its text but its id) Think about it, what is the id of the input element here?

1 Like

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