Learn HTML by Building a Cat Photo App - Step 56

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

Your code so far
I’m confuse and I feel like I don’t know what I’m doing

<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 -->

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

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

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

Link to the challenge:

look at the original code (reset the challenge).
<input id="loving" type="checkbox"> Loving

You see how this line makes a radio button with the label text Loving showing on its right hand side? (confirm by looking at the preview pane).

Now review the steps given to you:

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 only nesting the text Loving in a label element and place it to the right side of the checkbox input element.

What actions do they expect you to take?
1- associate the input element’s text (its label Loving in this case) with the element itself. How?

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

So try to follow along and let us know how it goes.

I dont understand what you are saying

hi there,

I said a lot of stuff. Which part did you not understand?

I dont understand where to place the label and Loving. It says I cant have right next to checkbox when I place under or above it still doesn’t work. And I dont know if label is like img where I dont have to close it.

label is not like image. It needs an opening tag and a closing tag.
The label’s opening tag should go on the immediate right of the word Loving
and the closing on the immediate left of it.
(in my previous post, that’s what the word 'nest the text (Loving) within a label element` means)

this is not response I get.

The text Loving should no longer be located directly to the right of your checkbox. It should be wrapped in a label element. Make sure there is a space between the two elements.

I can help you understand this hint.

Originally the code was an input tag followed by one space followed by the word Loving, correct?
So originally, the word Loving was on the immediate right side of the input tag.

If you have followed instructions to wrap it in a label element, then what is now on the right of the input? (Not the word Loving anymore)
Hopefully that helps a bit?

I appreciate I will found another way to learn how to code. Thanks

Hi There,
Before Free Code Camp I’ve tried a lot of places and to be honest is the one when I learn, sometimes not easy but in effective way.

That being said, in step 56 starts with this code:
<input id="loving" type="checkbox">

That simply means that you have one input with id loving and the type of this input is checkbox.

So if you write next to it some label like this:
<input id="loving" type="checkbox"> <label> Loving</label>
It means that this label is part of the form. But, if you try to click it, on Loving text, it will not select the checkbox.

If you add to that code “for” attribut as this:
<input id="loving" type="checkbox"> <label for="loving"> Loving</label>
You’re joining “Loving” text with the checkbox, so when you click “Loving” again, the checkbox will be selected.

This is the point of this step, to pair label with the checkbox to be selected.
The attribute for, indicates to which id you want to join the label (loving with loving).

1 Like

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.

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.

1 Like

I don’t think that method works. Hints doesn’t show how the code works. It just leaves some of us confused. Like there’s no explanation how things work or why certain codes work. I appreciate the assistance but as a beginner, I would like to know why certain things are connected.

We can tell you how things are connected without writing the answers for you

Hi @JeremyLT Thank you for the feedback and I think indeed make sense.