Learn HTML by Building a Cat Photo App - Step 61

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

<!-- User Editable Region -->

          <fieldset>
            <legend>Is your cat an indoor or outdoor cat?</legend>
  <label><input id checked="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>
<input id="loving" type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label>
<input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
<input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic"> Energetic</label>
          </fieldset>

<!-- User Editable Region -->

          <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 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36

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

Link to the challenge:

2

Don’t leave a space inside the label text

3

This is not how you add the checked attribute.

You have now made the id attribute invalid.

Reset the exercise and this time add the single word checked to the radio button and checkbox as required by the step.

1 Like
4

Thank you for your help. I have a hard time trying to understand what to do

1 Like
5

no problem. I want to suggest that you try to remember to select a post and mark it as the Solution when you complete a step in order to show that you are done and also to help the next person who reads it to see which post helped you.
Happy Coding.

6

Thank you I’m still learning, so I’m still struggling with minor details.

1 Like
7

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