Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Far now what is the problem 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 -->

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

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

You appear to have created this post without editing the template. Please edit your post to 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

You moved the text Loving before the input instead of leaving it where it was, after the input. You’ve done everything else correctly. You just need to put Loving back where it was.

1 Like
4

I’m doing it but its not working i don’t know why? Is it a server problem or else?
As you said Loving

5

You’ll need to paste your updated HTML in here using the following method so we can see exactly what you did.

To display your code in here you need to wrap it in triple back ticks. On a line by itself type three back ticks. Then on the first line below the three back ticks paste in your code. Then below your code on a new line type three more back ticks. The back tick on my keyboard is in the upper left just above the Tab key and below the Esc key. You may also be able to use Ctrl+e to automatically give you the triple back ticks while you are typing in the this editor and the cursor is on a line by itself. Alternatively, with the cursor on a line by itself, you can use the </> button above the editor to add the triple back ticks.

1 Like
6 
       <label for="loving"> <input id="loving" type="checkbox"> Loving</label>
7

You are getting closer. Let’s look at the instructions again:

"Associate the text Loving with the checkbox by nesting → only the text Loving in a label element ←

What are you nesting inside the label element?

8

As you can see the
only Loving word

9

Really? You don’t see anything else between the opening <label> tag and the closing </label> tag?

10

no nothing!ok i think my brain is just hanged

11

please could u write down the solution here

12

Sorry, we can’t just give you the solution. But let’s look at the last thing you pasted in:

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

I explained that the instructions are asking you to nest only the text “Loving” in a label element. Do you see anything else nested in the label element besides the word “Loving”? I sure do. I hope you do as well. You need to get that extra stuff out of the label element. Only the word “Loving” should be in the label element.

3 Likes
13

I got it, your real guidance is so much appreciate.

1 Like
15

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