Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
I cant figure it out. give ya boy some hints, cheers

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <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>
        <label> 
          <input id="loving" type="checkbox"> 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

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

Link to the challenge:

3

This is your code.
You should be seeing a hint right now?

Post it and I can explain it.

4

Not getting through my thick head, I tried nesting just the Loving element but to no avail.
I need some pointers

5

This is the hint I received after trying to submit my code:
The text Loving should no longer be located directly to the right of your checkbox. It should be wrapped in a label element. Make sure there is a space between the two elements.

1 Like
6

Okay so the words “nest only the word Loving” are important.

Right now you nested the whole input element inside the label plus the word loving.

Also once you fix that. Notice that the hint will say it should be on the right of the input (your opening tag is not on the right)

And that you will also need a for attribute as per the instructions.
The for attribute goes inside the label tag and has the exact same value as the input’s id tag.

8

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 (').

9

This hint needs to be followed carefully.

Also my hint to you too:

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

Now the hint is saying;
The new label element does not have a for attribute. Check that there is a space after the opening tag’s name.

But even after removing the for attribute Im still not getting pass this step

11

I also tried putting for element inside label element

12

Please show the code with the for inside the label opening tag.

Also make sure you do not have any extra spaces except for one space between the input and the label.

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

Hint I got was;
The new label element does not have a for attribute. Check that there is a space after the opening tag’s name.

14

Please put the for in the opening tag

15

Just look at what the hint is instructing you to do. So you can copy it and past the way it is. undoubtedly, it will work.
Mod edit: solution redacted

16

Thank you so much for taking the time to help someone on the forum today. The fact that you did it almost as soon as you joined speaks to a very helpful personality (as most people who join the forum only want help for themselves initially).

I do have to remove the code you posted though only because we want to encourage everyone to learn how to overcome coding issues themselves (with support of course like hints and tips but not complete solutions).

I look forward to your future contributions to this forum and to FCC as a whole.
Thank you for your understanding.

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

Test

Sorry, your code does not pass. Don’t give up.

Hint

The new label element should have a for attribute with the value loving. Expected loving, but found null.

Now its saying there is a ‘for’ attribute… Im getting very confused

18

Please try to read and follow my instructions this time.

If you don’t understand something I am saying then please ask a question and I will help you understand. But try to read these instructions first.

Also:

19

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