Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
What this problem want to say I dont know. The text Loving should be wrapped in a label element.

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"><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/112.0.0.0 Safari/537.36

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

Link to the challenge:

2

“Associate the text Loving with the checkbox by nesting only the text Loving in a label element”

You have nested both the input and the text Loving in a label element.

1 Like
3

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.

I write down following code which give the error

4

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
5

Loving

6

` Loving

7

~ Loving

8
9 
<label for="loving"><input id="loving" type="checkbox"> Loving</label>
10

This is the same code as originally posted at the top of this thread. So it still has the same problem. The instructions say:

"Associate the text Loving with the checkbox by nesting only the text Loving in a label element”

Notice the emphasis on “only the text Loving”.

You have nested both the input and the text Loving in the label. You only want to nest the text Loving in the label.

1 Like
11

Sir I am learning the html coding since last 2 days. So I dont know the meaning or what to say in ---- Notice the emphasis on “only the text Loving ”.

12

To nest something means to place it inside of something. So “nesting only the text Loving” means to place only the text Loving inside the label. You have placed both the input and the text Loving inside of the label.

1 Like
13

I still dont understand sir. would you recoding to this code please?

14

Sir I still dont understand. Would you recode the code which I given please?

<label for="loving"><input id="loving" type="checkbox"> Loving</label>
15

Sorry, we don’t give code answers in here. Can you explain what you don’t understand?

1 Like
16

I dont understand the meaning of following sentence

You have nested both the input and the text Loving in the label . You only want to nest the text Loving in the label .

17

Do you understand that you have nested both the input and the text Loving in the label you added? Do you see how the opening <label> tag is before the input and the closing </label> tag is after the word Loving? This means that both of them are nested in the label.

You only want the word Loving to be nested in the label. So what would you need to change so that only the word Loving is nested in the label?

1 Like
18

This is what you’re supposed to do…

19

@blaquiix

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

1 Like