freeCodeCamp Challenge Guide: Create a Set of Radio Buttons

freeCodeCamp Challenge Guide: Create a Set of Radio Buttons
0

#1

You can use radio buttons for questions where you want the user to only give you one answer.

Radio buttons are a type of input. They should all be nested in their own label element. Furthermore, all related radio buttons should have the same name attribute.

Here’s an example of a radio button:

<label><input type="radio" name="indoor-outdoor"> Indoor</label>

Create a Set of Radio Buttons-query
#2

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


#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…


#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?


#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?


#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.


#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


#14

https://kobra.io/#/e/-KqL_0G2Usicno6NUIIE


#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


#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)