freeCodeCamp Challenge Guide: Create a Set of Radio Buttons

Guide
#1

Create a Set of Radio Buttons

To solve this challenge you can break it into pieces to better understand the steps:

  • Create the ‘containers’: lay down two label elements and give them the text content the challenge asks you ( one must have the text ‘Indoor’, one ‘Outdoor’, capitalization matter);
  • Create the ‘content’ : a radio button it’s just a input element with type=radio (create two of them);
  • Create a group of radio buttons: give both of your radio buttons the attribute name set to the same value ( the challenge instructions state that the group has to be named indoor-outdoor);
  • Nest each radio button in a label;

Good luck!

16 Likes
HOW TO MAKE RADIO Buttons answer
Create a Set of Radio Buttons-query
#2

i didn’t get it…
can someone pleaseeee explain this to me!!!

6 Likes
#3

take the example and copy paste twice inside the form. and change the indoor with outdoor.
other take the example and copy paste inside form and run test, check the outcome and u going to understand…

3 Likes
#4
indoor outdoor this was my code, but its not working.can someone tell me what the problem is?
#6

Here is my code which worked!:slight_smile:

.red-text { color: red; }

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}

CatPhotoApp

Click here for cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
<form action="/submit-cat-photo" Submit indoor outdoor
#7

Give your radio buttons the name attribute of indoor-outdoor.

-this is the part that I don’t understand. Can anyone let me know where to place the name attribute?

1 Like
#8

Hello team, I hate to say but, I am stuck!
I feel like I have the code correct, however, it’s not passing this code-challenge.

Any pointers?

Create-a-set-of-radio-buttons(1).png1015×1407 118 KB

6 Likes
#9

Hey team,
I resolved it with the help of another free code camper @kernel1203 .
I had a mistake on my spelling on the (“label”) if you noticed on on my screen shots above, also I had to place () at the bottom of not above it.

9 Likes
#10

So the name part doesnt affect the outcome, its just so when you are reading the code you know what it is

#11

cant see the code, send a pic

#13

<input type="radio"name=“indoor-outdoor”>indoor
<input type="radio"name=“indoor-outdoor”>outdoor

1 Like
#15
.red-text { color: red; }

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}

.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
border-radius: 50%;
}

.smaller-image {
width: 100px;
}

CatPhotoApp

Click here for cat photos.

A cute orange cat lying on its back.

Things cats love:

  • cat nip
  • laser pointers
  • lasagna

Top 3 things cats hate:

  1. flea treatment
  2. thunder
  3. other cats
Submit Indoor Outdoor
#16

6 Likes
#17

Why is it necessary to have both indoor and outdoor in the name attribute of the radio button? (Even if it’s only referring to one of them)

2 Likes
#19