Learn HTML by Building a Cat Photo App - Step 55

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
Nothing I have tried so far is working. I thought I had a decent handle on this but I’m starting to go cross-eyed trying to figure out what I am doing wrong here. Any assistance would be greatly appreciated.

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

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

Link to the challenge:

2

Hey!
Whenever you’re facing any issues with the challenge, Look at the hints!

image

Here, the challenge expects you to “nest” (to put inside) the text Loving inside of opening and closing label tags.

an example of this would be:

<button> my button </button>

above, the text “my button” is nested inside of the button element.

Hope this helps! :smile:

3

I think the closing tag for label is missing. The following code worked for me

Loving
4

No worries, it is complicated the way they’ve described it.
So let’s unpack the instructions (I’ve quoted your answer above for ease of reference as well)
The last part of the instructions say:

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.

And the original code they gave was:

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

So first they are referring to “the text Loving”, so clearly that is the last word in the given code.
They also say “associate [Loving] with the checkbox”. But how? We will come back to that in a bit.
Then they talk about a “label element”. Well what does that look like?

<label>some words<\label>

So the label element has two parts. Does your solution use two parts to the label element? (check)
(btw. the word ‘nesting’ then means to put the word Loving inside something)

Next, they said to place it to right of the checkbox input element. You have done that.
However, if you look carefully at the original line of code there is a space located between the input element and the word Loving. In your solution you have removed that space. So try to put that back in between the input element and your (corrected) label.

Finally, let us talk about the ‘for’ attribute. You’ve used it which is definitely what the question wanted but your tag is pointing to something called “Loving”. What we want is to make an association between the label for Loving and the input checkbox to its left.

So that means the for attribute should link between the current label “Loving” and the associated input’s id. Here’s that check box code again:
<input id="loving" type="checkbox">

Notice the id element? It is “loving” So then use that instead of “Loving” in your for-attribute and you will have a proper association.

To recap:

  • fix the label element (it should have a left-side and a right-side with the word Loving in between)
  • add back the missing space
  • fix the for attribute to point to the id of the associated check-box

Hope this helps

5

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