Learn HTML by Building a Cat Photo App - Step 56

HTML-CSS
1

Tell us what’s happening:

Not sure what the issue is here, any help appreciated. Looks to be an issue with the “loving” ID

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 id="loving" 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/126.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 56

2

Don’t move the word Loving from its original location when you do this step.
Reset the code and add the label tags around the existing word without moving it.
Also make sure there are no additional spaces that were not there at the start when you are done.

3

Hey Buddy , Here Can you wrap the existed word Loving after your input into a label tag

As you put before input , then your test will be passed :partying_face:

Hope You Understand !!

4

Hi, i thik i just did that Loving Loving and it still not working? Please advise

Screenshot (7)
Screenshot (7)1920×1080 160 KB

5

don’t type Loving twice.

It’s already in the editor when you click reset. Just add the tags around it.

1 Like
6

Well Done, Nice trial :innocent:

But here you only need to put word Loving at once !!

This is my World of <label>Coding</label>

This this how you can do so too !!

Hope You Understand Champ !!

7

so i deleted it and the code still doesnt run?

Screenshot (8)
Screenshot (8)1920×1080 152 KB

8

don’t add any extra spaces as I said before. (there are too many spaces inside the label element around Loving)

9

also, check that you have not erased the > for input element
it looks like it is gone?

10

Did as you said best i understand, added back the ‘>’ and removed the spaces?

Screenshot (10)
Screenshot (10)1920×1080 156 KB

11

the tags are good now but you have erased the space that was there at the start between the input and the word Loving (add back the space between the input tag and the label opening tag).
Also your for attribute should have a value equal to the id of the input. (to me, it looks like it is not exactly equal)

12

thanks mate working now

1 Like