Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.
"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."

I’m lost. Can anyone help me? It says in the instructions that I should put the text “loving” to the right but when I do it tells me I should not have the word “loving” to the right of the checkbox. ??

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

            <input id="loving" type="checkbox"><label for="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/108.0.0.0 Safari/537.36

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

Link to the challenge:

2

did it say to put the text loving in the label or did it actually say Loving?
(capital L Loving?)

The original code looks like this
<input id="loving" type="checkbox"> Loving

Looking at this line of code, which word did the instruction say to place into the label?

3

When I switched it to what it says exactly within the directions ,

“”,

I’m given this answer:

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’m super confused on what this thing means by “right”, haha

4

Again look at the original code. I asked earlier, which word should be nested in the label. The answer was Loving. That means that the label’s opening tag should be to the left of this word. And the label’s closing tag is in the right of this word.

Before adding the label, the word Loving was on the right side of the input.

If you add the label correctly, the word Loving will no longer be on “the immediate right of the input” but it will be on the immediate right of the label opening tag.

Meanwhile the label opening tag will be on the immediate right of the input

5

I got it now thanks!

1 Like