Build a Job Application Form - Build a Job Application Form

Curriculum Help
1

Tell us what’s happening:

You should use the :checked pseudo-class on .radio-group input[type=“radio”] to add a border color when the radio button is selected.
Someone help me spot /interpret my wrong moves please?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Job Application Form</title>
<link rel="stylesheet" href="styles.css">  
</head>
<body>
<div class="container">
<form>
<label><input type="text" id="name" name="fullname">Full-Name</label> 

 <label><input type="email" id="email"></label>

<label><select id="position"><option>Hr.manager</option></select></label>

<fieldset class="radio-group"><label for="radio-button"><input   type="radio" id="radio-button" name="availability">Full-Time</label>

<label for="radio-button"><input type="radio" id="radio-button"name="availability">Part-Time</label>

<label><textarea id="message"></textarea></label> 

<button type="submit">submit</button>

</fieldset>
</form>
</div>
</body>
</html>


/* file: styles.css */
body{background-color:rgb(243, 194, 243);
text-align:center;
margin:25px;
}
fieldset{
  margin:25px;
  padding:25px;
}

input:focus, textarea:focus { 
border-color:brown;
outline:none;
}

 input:invalid, select:invalid, textarea:invalid{
  border-color:red;
 }

 input:valid, select:valid, textarea:valid{ border-color:green;}

 button:hover{background-color:green;}

input[type="radio"] :checked {border: red;
} 

radio:checked{color:yellow;}

input:first-of-type{color :yellow;}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Hi @Allan1,

.radio-group input[type="radio"]

I don’t see a selector like this in your code.

Edit:

  • Looking at the radio buttons in your HTML, please note that an id value must be unique.
  • Also, the borders of your name and email fields are green even though no data has been entered. What do you think you need to add to those fields to fix that?
  • Please don’t wrap your radio buttons with a label. Instead, it’s typical to put the radio button before the label.

Happy coding

3

remember that spaces have meaning

also that radio is not a valid selector