Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

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

Loving
Loving

what am I doing wrong with the label element above?

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

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

Link to the challenge:

2

You should not add more content. The word ‘Loving’ written in white should only appear once.
The one inside the label is correct. the one outside should be deleted

3

mod edit: removed solution

4

Your code: [quote=“zurajanaiyo, post:1, topic:621795”]

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

[/quote]

the <input> is the checkbox or radio button or like an <input="text">
the <label> is the text outside of the <input>
how many label texts do you need for <input id="loving>?

reading the question more attentively can help you spot the error, this happens to me as well, sometimes in coding the solution is much easier that what you might think initially :slightly_smiling_face:

5

I removed your code. Please do not try to give the solution for the challenges.

Thanks

1 Like
6

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