Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
hello everybody my name is Diego this is my first project and my first experience learning any computer language I am on step 50 something and before this step I had not taken more than 1015 minutes solving and understanding for the most part the concept and relation between the terms and their function as well as relation however I’ve spent literally the past three days going crazy trying to figure it out …
I don’t just want the answer…
I actually want to fully understand the the recent why my logic doesn’t work resolving this Riddle…
… I will post the closest I’ve gotten to being sure it was the solution and
thank you all who calm with a little help keep in mind below that the original layout as well …

(tis is the original)
Loving

( this is the closest I I’ve gotten)

these were the instructions)
Associate the text Loving with the checkbox by only nesting the text Loving in a label element and place it to the right side of the checkbox input element.

Thank you Code Warriors!!!

Your code so far

<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <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"> Loving
          </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/108.0.0.0 Safari/537.36

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

Link to the challenge:

2

The original code was:
<input id="loving" type="checkbox"> Loving

And the main instruction was:

Associate the text Loving with the checkbox by only nesting the text Loving in a label element and place it to the right side of the checkbox input element.

So break up this sentence into parts.

  • Associate the text Loving with the checkbox
    • nest[…] the text Loving in a label element (and place it to the right side of the checkbox input element)

In addition they also said earlier

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.

Breaking this up also we get

  • nest the text within a label element
  • add a for attribute
  • with the same value as the input element’s id attribute

So there’s a lot to see here.
But take the related steps together.
For eg.

  • nest the text within a label element and
  • nest[…] the text Loving in a label element (and place it to the right side of the checkbox input element)

if you read these two together, they clearly are saying you need a label element.
But what are they saying you need to nest within it? (the clue: nest the text. it does not say: nest the input)
Where is the text in the original code?
For reference, the original code was:
<input id="loving" type="checkbox"> Loving

Then the second part of this is this group of sentences:

  • Associate the text Loving with the checkbox
  • add a for attribute
  • with the same value as the input element’s id attribute

What stands out here? There is a new for attribute. Where does it go?
What should its value be? We are trying to make it clear that the label and the input are associated. So think about that. What is the thing that will link them?

1 Like
3

You are a beautiful human being I just want you to know this tears roll down my cheeks I will be honest I’ve only read the first couple of sentences but I can already tell you’re a wise man thank you very much May God place you’re beautiful beautiful brain

1 Like
4

hi there, thanks, and I hope this helps you.
ps. I’m not male. :slight_smile:

5

This is exactly what I needed to move on I was growing frustrated to be honest with you ha ha ha ha ha ha but not once did I want to look for the answer only hints and additional support information but not the answer as it is recommended on this platform PS respects ha ha ha ha ha ha once again thank you very much as soon as I get off work I will get to reviewing this valuable valuable information if need be I’ll be in touch if everything else fails thank you thank you very much you’re beautiful beautiful human being

1 Like