Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
Hi there, I put Loving in a label element to the right of to the right of the checkbox input element and I put the for attribute with the value loving into the input element. The output looks okay to me but it is not.

Loving

<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" for="loving"><label> 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.0 Safari/605.1.15

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

Link to the challenge:

2

that’s a decent first try.
One correction:

  • for attribute belongs inside the label not the input
    (to associate the label to the input)
3

I tried this but didn’t pass.

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

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

5

your code is no longer valid.

The current code has the following problems:

  • missing Loving between the label tags
  • missing > after the label opening tag
1 Like
7

Okay, I am new to all this. Thank you for that.

8

Look at the vid and the linked article to learn how to include your code Learn HTML by Building a Cat Photo App - Step 56 - #4 by hbar1st

1 Like
9

I find this one difficult. When I put the <> around label, the for element shows up as text along with the word loving. This made me think for had to be inside input, which I know isn’t right". When I don’t put the closing >after label, it looks right on the screen. I don’t know how to make the for part show up as red instead of text. (PS-can you please let me know if I did the backticks to make it more readable correctly?

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

the for attribute needs to be inside the label opening tag

11

ah ha! I got it!! Thank you

12

This is the correct answer
Loving

13

Mid edit: solution removed

14

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.

15

oops, sorry about that

17

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