Learn HTML by building a cat photo step 56

HTML-CSS
1

The exercise says:

Step 56

There’s another way to associate an input element’s text with the element itself. You can nest the text within a label element and add a for attribute with the same value as the input element’s id attribute.

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

MY code is:

Loving
Loving

i cannot for the life of me see why this is not right i have searched and verified the syntax and usage. i made sure the for statement references the correct id which is loving.

i am stuck here not able to move forward what am i missing.

any help very gratefully received.

1 Like
3

2023-06-19_12-52-15
2023-06-19_12-52-151797×964 88.8 KB

4

Welcome to our community!

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 Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for 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

Welcome to the community :smiley:

if you want to show your code use a three back tics ``` before and after a code block
you can use ALT+ 096 if you cant find one on your keyboard

If you try a step three times a help button appears, clicking it will create a post with your code and a link.

Looking at your screen shot I can see that the ‘label’ element is before the ‘input’ element.

also the extra word ‘Loving’ at the end should not be there

6

all the examples have the label element before the Input element

<form>
 <label for="favorite-animal">Favorite Animal</label><br>
 <input name="favorite-animal" id="favorite-animal">
</form>

so i cant see any issue with that, and the text of the exercise does not say to remove the pre-existing Loving text that was from the previous exercise>

Step 56

There’s another way to associate an input element’s text with the element itself. You can nest the text within a label element and add a for attribute with the same value as the input element’s id attribute.

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

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

io have tried so many permutations of this now its getting frustrating.

7

Tell us what’s happening:
Describe your issue in detail here.

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <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>
      </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>

<!-- User Editable Region -->

            <label for="loving">Loving</label>
              <input id="loving" type="checkbox"> 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/113.0.0.0 Safari/537.36 OPR/99.0.0.0

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

Link to the challenge:

8

Ok i resolved this by putting the code in this format:

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

However this exercise needs some work it is misleading and all the examples show the label element being used before the input element on line but the checking for this exercise is looking for a very specific layout that is counter to all of the information supplied else where:

https://html.com/tags/label/#:~:text=The%20element%20is%20used,in%20the%20associated%20input%20field.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

https://www.geeksforgeeks.org/html-label-tag/

maybe some work to do on this one.

2 Likes
9

Some of the steps are very specific.

I also found it confusing at first.
Its natural to want to do what is shown earlier.

But this can lead to trouble later. There are often many ways to do the same thing.

It may not be something that is obvious at first, but steps like this encourage you to find the most simplistic thing you need to do.

This is a great skill to have when thinking through big projects later, much more manageable and less likely to over complicate the project.

Tho I understand how frustrating it is… :pensive:

1 Like
10

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