Cat Photo App - Step 61- added checked but not working :(

*I’ve added the checked attribute, to the first radio button. the spaces are there. I’ve tried to place it in every position inside the element.

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="indoor" checked 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 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36

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

Link to the challenge:

This exercise asked for two things. You did one of those things perfectly.

i added it to the second one but its still saying that the checked attribute ios missing from the first

You added checked two times to the same element (radio button element has it twice)

removed it and got the same result

Please copy the code so I can take a closer look.

Actually I just noticed that you added checked to the label element. That is not where it should go as labels can never be checked.

of course! sorry

Hello there, try adding the word “checked” beside the first checkbox of id= loving.

1 Like

You have to remove the word checked from the label.

Also you are still not adding it to the first checkbox.

Btw pictures of code are not readable like actual code.
Copy the code next time instead of showing a screenshot.

1 Like

this worked! I just have two questions about the logic of this;

1.Why was the first one not showing the attribute?

2.Why does the placement in the second checkbox matter, but not in the first?

<input id="loving" type="checkbox" checked name="personality" value="loving"> <label for="loving">Loving</label>

As you see in the above code we have a label and an input, we will separate it into 2 parts like this so we understand better.

<input id="loving" type="checkbox" checked name="personality" value="loving"> 
<label for="loving">Loving</label>

The question was

Make the first radio button and the first checkbox selected by default.

 <input id="loving" type="checkbox" **checked** name="personality" value="loving"> 
<label for="loving">Loving</label>

So we had to add “checked” to the input, not the label as you did before.
Hope you understood it .

2 Likes

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