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

<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"><label for="Loving"</label>
          </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; rv:106.0) Gecko/20100101 Firefox/106.0

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

Link to the challenge:

This is the task 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.

This was my attempted solution
<input id="loving" type="checkbox"><label for="Loving"</label>

Test:Sorry, your code does not pass. Hang in there.

Hint: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.

Please help

As you can see, there is no closing angle bracket at the end of the opening ‘label’ tag. The attribute for=“smth” should have the same text as 'input’s id=“smth” ’ (no difference made by upper or lower cases). The given word “Loving” should be between ‘label’ tags with a blank space at the front of the word.

Hello DobarBREND
The solution provided hasn’t worked yet,
I am not sure how to go about this one:

The given word “Loving” should be between ‘label’ tags with a blank space at the front of the word

Particularly this one “with a blank space at the front of the word”
Please advice

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Please post your code in a code block if you need more help.

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

a few problems here.

  • you have erased the text Loving that was provided initially. You can restart to restore it and add your label around it or you can type it in between the opening tag and the closing tag of label.
  • the for attribute needs to go inside the label opening tag. Right now it is outside it.
  • you need a single space between the end of the input tag and the opening label tag.
<input id="loving" type="checkbox"> <label for="loving">Loving</label>

I’ve got it right, thank you so much :grinning:

We have blurred this solution so that users who have not completed this challenge can read the discussion in this thread without giving away the solution.

Alright and thanks, got it

1 Like