Trouble with Radio Buttons

HTML-CSS
1

I’m really having trouble with this lesson. I’ve triple-checked the code (my dad and sister also checked). Unless we are really missing something, it appears that the video lesson may have an error? The weird thing is, the test website displays as it should even though it says my code is incorrect. Regardless, it’s not allowing me to advance to the next lesson.

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 (Windows NT 10.0; Win64; x64; rv:74.0) Gecko/20100101 Firefox/74.0.

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2

Hello @hoganatorg

I have copied and pasted your code and here is one reason that it did not pass:

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

I would suggest that you reread how you have written in order your <label> and <input> elements. Focus on this and you shall pass the test.

Hope this helps and happy coding!

4 Likes
3

I’ve been trying to do that but it doesn’t seem to be working. How do you nest something? I’m sorry, this is my first time coding!

4

That’s okay and understandable. I can’t tell you the answer, but I am happy to give you an explanation with a simple example.

So, imagine we have two elements - <div> and <p> and the code is looking like this:

<div>
     <p>I am a nested element</p>
</div>

So, the <div> element is the nest and the <p> is the nested element, but if you can think of it like an egg (the egg that is sitting within the birds nest, get it?).

So, if you look at the code above, the <p> element is sitting inside the <div> (between the <div>'s opening and closing tag.

So, going back to this:

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

So basically, ask yourself what element is the radio button and how should they be nested in its own label element?

I hope this will help you, let us know your update on this

3 Likes
5

Hello @hoganatorg!

Like was said by @Madalena.design : Check your code. :smiley: :+1:

Even the answer is in the same lesson in the left side: there’s a code there.

Saludos!!

2 Likes
6

Thank you both! It finally worked!

2 Likes
7

Thank you for letting us know. I am really happy to hear this. :slight_smile:

Happy coding!