Learn HTML by Building a Cat Photo App - Step 56

I’m having trouble understanding how to properly wrap the text" Loving" in a label with a for attribute and where in the code to place it. I’ve tried multiple ways.

Your code so far

        <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>
        <h2>Cat Lists</h2>
        <h3>Things cats love:</h3>
          <li>cat nip</li>
          <li>laser pointers</li>
          <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>  
        <h3>Top 3 things cats hate:</h3>
          <li>flea treatment</li>
          <li>other cats</li>
          <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>  
        <h2>Cat Form</h2>
        <form action="https://freecatphotoapp.com/submit-cat-photo">
            <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>
            <legend>What's your cat's personality?</legend>

<!-- User Editable Region -->

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

<!-- User Editable Region -->

          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
          <button type="submit">Submit</button>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/ Safari/537.36

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

Link to the challenge:

Where did the text Loving go?

Also, your for attribute value needs to be all lowercase, to match the id attribute.

I tried that and it said I still need my “checkbox” type in the code.


Your text Loving was missing.
also, the value of attribute for is asking is loving Not Loving. should be lowercase.

There is no checkbox changes on this Step?

What does your code look like when you try to do the two fixes I pointed out?

When I took out the checkbox it told me I needed to have the checkbox in the code. This is currently the line I’m working on.

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

This text ‘Loving’ is not inside of the label. To put something inside of an element, put it between the opening and closing tags.

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.

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

The text Loving is in the wront spot. Try placing it between the label element.

It doesn’t really help if you just make a bunch of comments repeating what other people have already said :laughing:

I tried removing it from the spot it was in and put it in the label element. When I do that it removes the text Loving next to the checkbox and still gives me the prompt that it isn’t correct.

Where did you put it when you tried to put the text ‘inside’ the label element? I suspect that you did not put the text between the opening and the closing tags but instead put the text inside of a tag as if it was an attribute.

Forgive me. I’m still learning the lingo. I removed the, Loving, after checkbox> and replaced it with <label for="Loving"></label>
I also tried changing Loving to loving but neither worked.

Here you broke the fix I gave you before!

To review vocabulary covered

  1. A tag is the thing that starts with a < and ends with a >

  2. An opening tag looks like <element> and a closing tag looks like </element>

  3. An attribute goes inside a tag and looks like attribute="value"

So, you need to make (and keep!) two fixes!!!

a) Make (and keep!!!) the value of your for attribute in all lowercase

b) Put the text Loving in between the opening and closing label tags

1 Like

JeremyLT, thank you for the detailed explanations. I was able to move forward. Can you please help me understand further how to know when to move text that worked previously and how to know where to move text when adding more details.

I’m not sure what “text that worked previously” would be here?

Loving, after the checkbox which worked in the previous lesson. How do I know that it needs to be moved and how do I know where within the Label to put it? I appreciate you time and effort. I was able to work out this lesson but for future lessons it would help to fully understand these details.

You don’t need to move the text Loving at all.

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

This doesn’t say to move the text Loving. It doesn’t go anywhere. You should only write a opening label tag and a closing label tag. No other changes should be made.

Thank you for your help!

1 Like

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