Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
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.

so i seem to hit a wall here, i tried looking for ways to go around it but i cant see to overcome it, can someone help explain whats the problem? thanks :slight_smile:

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" name> Loving</label> **
**            <input id="loving" type="checkbox" />**
          

<!-- 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/109.0.0.0 Safari/537.36

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

Link to the challenge:

2

They gave you at the start an input element and the word Loving next to it.
You moved the whole word to the left of the input.

You need it to stay on the right of the input then apply the label to it.

Other problems: you added a name attribute?

3

s[quote=“hbar1st, post:2, topic:589567, full:true”]

They gave you at the start an input element and the word Loving next to it.
You moved the whole word to the left of the input.

You need it to stay on the right of the input then apply the label to it.

Other problems: you added a name attribute?
[/quote]

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

you mean like this? but it still doesn’t seem to work

4

Now you have nested the input into the label.

They said to only nest Loving in the label.

5

123
123939×815 296 KB

hmm is something wrong with the test/tutorial/guide ?

6

You nested input inside the label.

That is not what is needed.
They just wanted the word Loving alone to be within the label

7

123

is this how you only nested the work Loving ? im lost but thanks @hbar1st for help appreciate it :smiley:

8

No.

Nesting is when you take something and put it within the tags of something else.

Here is an example:

<p>my nested text</p>
1 Like
9 
<label>Loving </label>  <input id="loving" type="checkbox"> Loving/>

should look something like this right? but still doesnt seem to work. this will make the text appear on the left

10

As per the challenge instructions:

Nest the text ‘Loving’ in a label element.
Do not include any spaces around the word, just enclose this word directly in label tags.

Place it to the right side of the input element.
This means you need to move your label element to the other side of your input element.

Make sure there is a space between the two elements.
So, you should have input element, one space, label element.

Finally, your input element should not have any text. Currently you have trailing text and an unnecessary /> after your input element.

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

Thanks guys! got it pheww kamsamida

12

We have blurred this solution (with [spoiler][/spoiler] tags) so that users who have not completed this challenge can read the discussion in this thread without giving away the solution.

It would be great if you can not post solutions on the forum to avoid this.

13

sorry wasnt thinking about it thanks tho

1 Like
14

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