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 -->

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

<!-- 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/114.0.0.0 Safari/537.36 Edg/114.0.1823.67

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

Link to the challenge:

2

Welcome to our community!

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!

1 Like
3

In this lesson it is explained the following:
"There’s another way to associate an <input> element’s text with the element itself. You can nest the text within a <label> element and add a for attribute with the same value as the <input> element’s id attribute.

look at your code again and you’ll spot the error easily

by the way writing HTML tags, atttributes and values in lowercase is best. I have never seen anyone writing HTML with uppercase characters

these are the rules stated by Documents - HTML5

when in doubt with some rules, I recommend you to see their website or GitHub pages

The World Wide Web Consortium (W3C) develops standards and guidelines to help everyone build a web based on the principles of accessibility, internationalization, privacy and security

1 Like
4

Screenshot 2023-07-11 140014
Screenshot 2023-07-11 140014882×686 112 KB

Hi dear… Please check the screen shot i have uploaded here. i dont know where i am doing mistake. please help me if i am wrong

5

Screenshot 2023-07-11 140014
Screenshot 2023-07-11 140014882×686 112 KB

hello dear. you can see my screen shot. I am using label element but it gives me an error. I dont know where i am doing mistake. waiting for your kind response.

6

If you have others telling the solution you will never learn

Fundamental part of working with code is that you have to find the solution yourself as much as possible or break it down and find help by using google, stackoverflow or youtube or freeCodeCamp

This is the code you have at the start before you modify it:

 <input id="loving" type="checkbox"> Loving

what should the text “Loving” be nested in?
should you move code around or not in this lesson?
re-read what you are truly asked to pass this challenge

1 Like
7

As for i understand, the challenge asks me to nest the “Loving” text inside label element and use ‘for’ attribute for same value as input element id attribute. i have done this… thanks for kind suggestions. I have just joined today this plateform. I am new here,but I want to learn .

8

great… I done it. Thanks for your support. May you have happiness in your life.

9

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