Need help with step 58 of learn html by building a cat photo anpp

HTML-CSS
1

Hello, if anyone can help walk me through this step please.

image
image4032×3024 1.78 MB

This is what the step requires: Associate the text Loving with the checkbox by nesting only the
text loving in a label element and giving it an appropriate for attribute.

2

Hi and welcome to the community!
You can use the help button to create a topic that helps us see your code and have a link to your project. It’s better than sharing screenshots. The Help button appears right next to Reset, after you try checking your code at least three times.

For your code as to why it is failing, there are a couple of points to look for:
Check if the opening and closing tags of label are written correctly. The for attribute must be inside the opening label tag. You can try to go step by step. Add your label tags first. Then the for attribute, and then the text between the tags. Also note that the text Loving with L is the one that should be between the tags and not inside the for attribute.
I hope this helps!

3

That’s clearly a typing error, your id is having ‘loving’ in lowercase which should be in uppercase like your for attribute.

4

please use the HELP button to ask for help, do not share a picture of your screen, it is difficult to read

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge. This button only appears if you have tried to submit an answer at least three times.

image
image622×306 7.96 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

5

Tell us what’s happening:

I cannot solve the code for this step. I am supposed to “Associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute” but everything i’ve tried has not worked. please help

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">
            <label=Loving>Loving<</label>
> Loving
            

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

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 58

6

thank you for your help! I tried what you had suggested but I still cannot get the code right.

7

Can you share your updated code?

8

Hi again,
it looks like you’ve mixed things up. Where is the for attribute inside the label tag? Remember, a label just like other elements has an opening tag <label> and a closing tag </label>. The for attribute is added inside the opening tag. The for attribute’s value should match the value of the id of the input which means it should be in lowercase.
Next is the text Loving that should be added between the opening and closing tags.
You have to take everything step by step to understand it better. For example an extra < in <</label> or extra > Loving should be removed.
Good luck!

9

Welcome to the forum @lux33

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

Happy coding

10

hi there (I am not a native English speaker, so I am so sorry if I made some linguistic mistakes ), so there are many mistakes on your code , this is yours :

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

1/ you should remove the " " with the words loving and checkbox
2/after the word label you should add the attribute itself , which is for
3/you have an extra closing angle bracket (>) at the closing label tag
4/after the equal symbol , the word loving should be same as loving on the id attribute , that means all the letter should be lowercase , litterally the same
Try these and show us the last version !