Learn HTML by Building a Cat Photo App - Step 55

Tell us what’s happening:
Describe your issue in detail here.

  **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">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_5) 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:

Hello there.

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more information you give us, the more likely we are to be able to help.

Ahh yes. Sorry, I forgot to add the description. So the question I’m stuck on is Step 55 on the HTML chapter. My current line of code looks as follows:
.
And even though this seems to be the solution after having read some previous posts regarding this question, my question still isn’t answered right. So, I was wondering what I was doing incorrectly in this situation.

Tell us what’s happening:
I’m stuck on step 55 for the HTML chapter. I’ve read other posts and it seems this is the right line of code but there must be something missing since it won’t be marked as correct. Any help is greatly appreciated. Thank you!!

  **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"></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_5) 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:

The step is as follows:

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 only nesting the text Loving in a label element and place it to the right side of the checkbox input element.

alrighty! You are given the following line of code:

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

And we know this line of code is a checkbox and if you look in the preview area you can see what it looks like. It has the word Loving on the right hand side of the box.

We are asked to do the following:
nest the text Loving in a label element and place it to the right side of the checkbox input element.

In your attempt, you added a label element to the right of the checkbox element.
So far so good. However, you are missing 3 things (I’m copying these instructions below from the exercise fyi).

1- add a for attribute with the same value as the input element’s id
2- nest the text Loving in your label element
3- undo the change you made to the id attribute’s value. The original value is pasted in this post for you. (You will need this to stay as-is)

Try to parse these steps carefully.
You already have the for attribute, but is its value the exact same value as the checkbox’s id? (recall the original code gave us the id as follows <input id="loving" type="checkbox"> Loving)

And, did you nest the word Loving in the label? (not: did you add it to the tag, but did you nest it in the label.)

Below is an example of me nesting the word BIRD in an anchor tag.
<a href="a link">BIRD</a>

This is one of the hardest steps you will face in the first half of this course I believe. But it can be done!

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