Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
The problem exactly is , i have no idea where to set the label for

  **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</for> </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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hey!
This is the hint that shows up when I try to run your code.

image

This step expects you to add a for "attribute" to your existing label element but you’re adding an element which is why your tests aren’t passing.

As a refresher, this is what an attribute looks like:

// attribute-name  value
           |        |
<button  class="value"> </button>

Hope this helps! :smile:

4 Likes
3

Hello!

The step requires you to add the for=“” attribute to the label element. Every attribute goes inside the opening tag of each element. You need to wrap the word in the label element and then add the attribute to the opening tag. The attribute has to be in correlation with the input, as the explanation says so. :wink:

4

Annotation 2022-09-22 105306
Annotation 2022-09-22 105306779×423 60.2 KB

i corrected myself and here is the new problem. am i not getting the spelling of loving right?

5

Please post your actual code instead of a picture. Thanks

6 
<input id="loving" type="checkbox"> <label for="loving" </label>
7

As the hint suggests, you need to have the text Loving nested too.

Nesting is when you add something as the child of another element. for example:

<div>
     <button></button>
</div>

above, the button is nested inside of the div.

to reiterate, you need the for attribute for your label element. but you also need the text “Loving” nested inside of your label element.

8

its not pasting as a normal line

9

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

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

A post was split to a new topic: Cat Photo App - Step 56

12

Are you sure you’re using the correct syntax here?

13

same issue when i use the lower case

14

what is wrong with it?

15

Every single tag must have both < and >

16

This is the syntax for a normal paired tag in HTML, try comparing it with yours

<div> </div>

17

thats the same thing i have been using

18

as @JeremyLT suggested, you’re missing an > at the end of your opening tag.

1 Like
19

Helped me tremendously thank you

1 Like
20

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