Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:
Hi! I’ve been working on this step for a while and I haven’t been able to get help from others who have posted on step 56. I’m also using a book on HTML and CSS. Could anyone give me some hints? I know I’m missing an attribute but there hasn’t been a time I got it to work using an attribute.

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> 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/112.0.0.0 Safari/537.36

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

Link to the challenge:

2

Hey Olivia, it says in the instructions to nest the input inside a label and to give that label element a for attribute that links back to the input.

When they say nest they mean putting the input element inside of a label , in much the same way as the following, where there is a span element inside of a p element:

<p>
<span>Some text</span>
</p>

Follow the same guidelines of nesting with the input acting like the span and the label acting like the p here.

And then, inside of the label element, be sure to put a for="" attribute that links to the input. All you need is the id of the input element.

3

Hi!

Your label for “Loving” needs a for="" attribute to match the input element

4

Thank you for the great explanation. I tried following your lead by adding the for=“” but than it appears in my final product as check box with For=“” Loving.

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

I know it’s probably something super simple. I’m still wrapping my head around all this.

5

You are super close!

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

All you have to do is just end that loving input with a >. And then put the for="loving" inside of the label element itself.

If you still can’t figure it out, this is the final solution so you can see how it’s done:

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

I put it in as blurred because it gives away the challenge basically,

2 Likes
6

Are you able to explain why we have to put loving after typing for=“loving” ?

7

Hi Olivia,

In this instance, this is a label and an input element. The label, that has the for attribute, is associated with the input element because of that for attribute. Since the id of the input element is loving, then when you click on the label element with a matching for attribute of loving, it will put the cursor inside the text box allowing you to immediately start typing.

If you’ve ever clicked on text above an input box on a website, and it let you start typing, that is what is happening here.

2 Likes
8

Thank you for the explanation! This has been helpful. :call_me_hand:

1 Like
9

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