Help me with one of the course problems

HTML-CSS
1

Hello, I’ve been struggling on the “Basic HTML and HTML5: Create a Set of Radio Buttons” challenge. I gave up, skipped to the end of the video, Copy and pasted it and it still didn’t work! Please help.

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

Challenge: Create a Set of Radio Buttons

Link to the challenge:

2

Hi and welcome to the forum.

You forgot to include your code! We can’t help you unless you show us what you have tried so far.

3

I did post the code at first but… Since I’m a new member I could only post 2 links per post…
Here is the code:

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

It looks like you need to nest the radio buttons inside of the labels. There is an example of nesting in the challenge description.

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

5

Hello, I saw that it said " Each of your two radio button elements should be nested in its own label element." But I don’t quiet understand what that means.
PS. Thanks for the tip on making my posts look better!

6

There is an example in the challenge description. Nesting works like this :

<parent>
  <nested>
</parent>
7

I know what nesting IS but whenever I nest said things it doesn’t work, could you please just send the solution?

8

This isn’t nested though. Your radio button is not nested inside the label.

Here on the forums, we don’t give people our code; we try to help them fix their own code.

9

Please just give me the correct code, I’ve been trying to figure out why this hasn’t been working for the past 20 minutes. Please.

10

Hello, I finally figured it out, sorry if I was being rude. I was just really mad. :stuck_out_tongue:

11

I knew you could get there without me giving you the answer. Good work!

1 Like