Please help - I cant get pass this test

HTML-CSS
1

Tell us what’s happening:

i cant get pass this error even though i did it correctly, or did i?

ERROR: Each of your two radio button elements should be nested in its own label element.

code:

Indoor Outdoor Submit

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://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="/submit-cat-photo">
<input id="indoor" type="radio" name="indoor-outdoor">
<label for="indoor">Indoor</label>
<input id="outdoor" type="radio" name="indoor-outdoor">
<label for="outdoor">Outdoor</label>

  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2

Your radio buttons are not nested inside of labels. There is an example in the challenge description of how to nest your radio buttons inside of the labels.

3

Hey @anon72809977!

You’ve to nest your input elements inside of label elements.

For Example,

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

Hi, @anon72809977! Your input must be nested inside your label tags :slightly_smiling_face:

5

@jatinrao it’s great that you know how to solve the challenge, but here an the forum we try to help guide people to fix their own code rather than giving them the solution so that they will be able to tackle similar problems on their own in the future. Thanks.

6

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

Thank you for understanding.

7

The wording in the challenge should guide you…

two radio button elements should be nested in its own label element.

<an-element>
       <nested-element>
              <p>nested elements sit inside other elements</p>
       </nested-element>
</an-element>

hope that might help. :thinking:

1 Like
8

Put your ’ input ’ tag inside of ’ label ’ .

like this :

outdoor

This is known as nested tags.

9

i know everyone is telling me this but i honestly have no idea what this means

12

Nevermind, I got it, thanks everyone!

1 Like
13

@anon72809977 use like this

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

<a href="#"><img src="https://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="/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>
  <input type="text" placeholder="cat photo URL" required>
  <button type="submit">Submit</button>
</form>
</main>

Working Spanshot

Screenshot 2020-05-23 at 2.06.21 AM
Screenshot 2020-05-23 at 2.06.21 AM1224×1826 279 KB

14

It’s great that you know how to solve the problem, but here on the forums we try to help people learn how to fix their own code. Thanks.

15

Ditto what @JeremyLT said:

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge.

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

As such, I have blurred your solution. Thank you for understanding.