Learn HTML by Building a Cat Photo App - Step 61

The step 61 ask to add the first radio button and the first checkbox selected by default. So I added it as below code but is says: " The first checkbox is missing the checked attribute." I saw the other posts as well but I did not get a clear answer there. Can you kindly help? TY

My code:

<label>
<input checked id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor
</label>

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Ask for Help button located on the challenge (it looks like a question mark). This button only appears if you have tried to submit an answer at least three times.

The Ask for Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

1 Like

Thank you JeremyLT. I clicked the Ask For Help( attached below)
Im not sure what else to do here, should I edit and copy all my code above?

Screenshot 2023-11-30 at 13.43.30|552x454

Ah, please donā€™t delete all the pre-generated content in the post! We donā€™t have the steps memorized, so a link to the Step is very important.

Also, it helps to have all of your code instead of just this one bit.

2 Likes

Sorry to post 2 times, please forgive me Im a total newbie here . Iā€™m having issues with the step 61 which ask to add the checked attribute for the first radio button.

I added it as below code but is says: " The first checkbox is missing the checked attribute." I can not find what Iā€™m doing wrong here. Can you kindly help? TY

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" type="radio" name="indoor-outdoor" value="indoor" checked > 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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Learn HTML by Building a Cat Photo App - Step 61

This is your first check box:

This is the hint you are getting:

ā€œThe first checkbox is missing the checked attribute.ā€

Is this enough information to fix your issue?

1 Like

Thank you for your reply.

The above code that you mentioned is the not the first check box. If I add the ā€˜checkedā€™ in this one, it says: Your first radio button, with the id set to indoor , should have the checked attribute.

My understanding is to add the ā€˜checkedā€™ as below, but even when I do this still invalid.

So I completed all the other tasks except of 61 :(, so not sure how to solve it.

I think we might have to agree to disagree here :slight_smile:

There are only three check boxes on the page. They are grouped together in a fieldset as follows:

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

To me, the first check box is the one with an id of ā€œlovingā€, which is the one I pasted above. But I am open to a different interpretation.

Also, if you want to paste your current updated code in here so we can see exactly what you are doing (which will probably help) then please use the following method.

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

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