I 'm finding it difficult on this challenge

HTML-CSS
1

Tell us what’s happening:
Describe your issue in detail here.

   **Your code so far**


<h2>CatPhotoApp</h2>
<main>
 <p>Click here to view more <a href="#">cat photos</a>.</p>

 <a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>

 <p>Things cats love:</p>
 <ul>
   <li>cat nip</li>
   <li>laser pointers</li>
   <li>lasagna</li>
 </ul>
 <p>Top 3 things cats hate:</p>
 <ol>
   <li>flea treatment</li>
   <li>thunder</li>
   <li>other cats</li>
 </ol>
 <form action="https://www.freecatphotoapp.com/submit-cat-photo">
   <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
   <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
   <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
   <label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
   <label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
   <input type="text" placeholder="cat photo URL" required>
   <button type="submit">Submit</button>
 </form>
 <label for="indoor">
   <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">indoor</label>
   <label for="outdoor">
     <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">
    </label>
</main>

   **Your browser information:**

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36 Edg/91.0.864.67

Challenge: Use the value attribute with Radio Buttons and Checkboxes

Link to the challenge:

Capture5
Capture51600×900 327 KB

please i need assistance on this one

2

This is an example of a value attribute.

value="indoor"

Your task is to add value attributes to each of the radio and checkboxes.

You can look at the FCC sample again on how to do that.

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

Hope that helps!

3

Also, I just noticed this.

All of your radio and checkboxes need to be inside the form.

You need to delete this extra radio buttons here

You need to add the value attributes here

4

i did exactly this,but it didn’t work

5

It would help to see your updated code.

But the code you shared earlier, doesn’t have the value attributes.

6

is it possible to do a meeting so you will guide me.i already diid this yet i’m stuck

7

It would help for you to post your updated code.

Right now, I am just going off of your original post which is incorrect.

So if you made changes to your code, it would help to see that revised version.

8

snippy
snippy1600×900 313 KB

this is it

9

There are a few issues here.

Line 21: the label text is supposed to be Indoor. not indoor

Line 22: you have an extra input right after the opening label tag and there are duplicate ids.
This is incorrect.

<input id="outdoor"><input id="outdoor"

also remember to have the capital O for Outdoor here

line 24: you wrote value="energetic" for the lazy input. It is supposed to be value="lazy"

line 25: You are still missing the value attribute for energetic.

Also, it looks like you deleted the type attribute out of the loving label in line 23.

It might be easier to delete what you have and just start from here.
You can copy and paste this inside your form and then add the value attributes.

   <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
   <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
   <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
   <label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
   <label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>

Hope that helps!

10

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