Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

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

Loving Error!!!1. You should make sure the checkbox element is still present, and you did not make any changes to it. It should stay as it was in the starting code.

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>

<!-- User Editable Region -->

            <legend>What's your cat's personality?</legend>         
            
            <input type="checkbox"id="loving" value="loving"> 
            <label for="loving">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/129.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

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 you say, the more we can help!

3
Loving what is the error in this code? i am facing this "You should make sure the checkbox element is still present, and you did not make any changes to it. It should stay as it was in the starting code."
4

i write this code
Loving
based on this " Associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute." instruction, but code does not working , and it is shwoing this error “1. You should make sure the checkbox element is still present, and you did not make any changes to it. It should stay as it was in the starting code.”

5 
        <input type="checkbox" id="loving" value="loving">
6

they need to be on the same line

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

See this was the actual code, Now figure out what you need to do ?

Hope You Understand :partying_face:.

8

Indoor
Outdoor

9

Hi there!

Welcome to the FCC forum. Did you have any question?

10

Hello there @Zaini
First thing first: Please understand what the lesson want you do or want from you?

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

So it simply asks you to apply a label after input and use "for" and the text "Loving" associated with it. Which you did correctly. I don't see anywhere that they asks you to add **value="loving"** Remove that and you should pass the test.

I hope my reply will help you, let me know. Thanks.

1 Like