Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

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>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 <label for="loving"> </label>type="checkbox"> Loving

<!-- 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/117.0.0.0 Safari/537.36 OPR/103.0.0.0

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

3

I am not understanding. “Associate the text Loving with the checkbox by nesting only the text Loving in a label element and giving it an appropriate for attribute.”

4

i don’t understand what to do again

<input> Loving

5

Can you try talking about what you don’t understand?

6

Please use the Ask For Help button to create your own topic. Thanks!

7

i don’t understand the code anymore

8

Ok. Then maybe you need to go back to the beginning? Me feeding you answers won’t help with you not understanding enough to even try talking about the problems you are encountering!

I’m perfectly willing to help, but I need something to go off of. “I don’t understand the code anymore” doesn’t give me anything to work with.

10

help with the problem

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

Like I said, please, please try to talk about what has you stuck!

Here you have an HTML tag inside an HTML tag. Since that isn’t shown in any of the examples you’ve seen so far, that’s probably not right.

12

they said the loving should be wraped in a label and i have tried and tried i still don’t get it

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

You still have an HTML tag inside of an HTML tag, so that’s not going to work.

Yes. Where is the text ‘Loving’ in the original code?

15

This is close to how it started - but don’t change the capitalization of ‘Loving’!

How did you wrap this text ‘cat photos’ in an a element?

16

In Order to label an input you need to have (label) nested in (input). Below I have an example of what that could look like.

(input)
(label id=“loving” type=“checkbox”)
Loving (/label)
(/input)

You need to insert all the id/type information within the first label tag.
Visual:
(label id=“Insert id name” type=“insert type”)

After that you nest what words you want displayed inside the label tags.
As seen above that should all be nested within the input tags.

Replace all ( )’s with < >’s

17

There is no type attribute for the label in this Step

18

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