Cat Photo App tutorial - PLEASE FRICKIN' HELPPPP

HTML-CSS
1

Tell us what’s happening:

Loving

I have to put a label element around the text; Loving. BUT-

The tutorial says that I also have to put it around the “checkbox” attribute. And it gets rid of the checkbox attribute when I do it.

I’ve been stuck on this for about 28 minutes. Any suggestions?

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
        <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>catnip</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 -->

            <input id="loving" type="checkbox"> Loving

**HERE IS WHERE I AM STRUGGLING**

<!-- 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 58

2

Hi and welcome to the forum!
Try putting the label tags around the text Loving. Then give the label a for attribute with the same value as the id of the checkbox. By checkbox attribute, do you mean the element itself? Anyway there is no mention of using the label around the checkbox. Just put it around the text.
Good luck!

3

f you’re noticing that the “checkbox attribute” (likely meaning attributes like type="checkbox" or the checked property) is being removed, double-check that:

  • You’re not accidentally writing something like <label type="checkbox"> (the type="checkbox" belongs on the <input> element, not on the <label>).
  • Your tags are properly closed.
5

that is not mentioned in the instructions

which part of the instructions are you interpreting like this?

6

Ok. So I managed to make the text “Loving”. But it’s not letting me put the “'for” attribute.

7

Well, it says that every time I attempt to submit my final product.

8

What does the text says exactly?

9

Which really confuses me.

11

You should be able to add the for attribute inside the opening label tag.
Can you share your latest code?

13
Loving :nerd_face:
14

I’ve edited your post to improve the readability of the code. 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 (').

15

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. How to Help Someone with Their Code Using the Socratic Method

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.

16

If the tutorial mentions “put it around the ‘checkbox’ attribute,” it may be worded confusingly. The intention is only to help you associate the label’s text with your input element—not to wrap or move the attribute value itself.

17

Associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute.

The step says nothing about “put it around the ‘checkbox’ attribute”. I’m not sure where you saw that?

18

Screenshot 2025-05-12 at 3.17.35 PM
Screenshot 2025-05-12 at 3.17.35 PM1678×836 65.3 KB

19

that says that you have not yet given a for attribute to your label element

20

Alright, gotcha. I agree- spoiler solutions are unbeneficial.

21

Please post your actual code instead of pictures. Thanks