Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Hello, my code seems to be missing step 14 and 15. I looked over it, but I can’t seem to fix it. I added a pseudo class, and tried to fix it, but it still seems to not be able to pass.

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 for="name">Full Name</label>
<label for="email">Email Address</label>
 <input type="text" id="name" placeholder="Enter Your Name"/>
 <input type="email" id="email" placeholder="Enter Your Email"/>
 <select id="position">
<option value=""disabledselected>Choose your Option</option>
<option value="Developer" >Developer</option>
<option value="Coffee man">Coffee Man
</option>
<option value="Greeter">Greeter</option>
    </select>
<fieldset class="radio-group">
 <legend>Avalability</legend>
 <input type="radio" id="full-time" name="availability">
<label for="full-time">Full-Time</label>

 <input type="radio" id="part-time" name="availability">
 <label for="part-time">Part-Time</label>
</fieldset>
<textarea id="message" placeholder="Write your inpsiration here">
</textarea>
<button type="submit">Submit</button>
    </form>
    </div>

</body>
</html>

/* file: styles.css */
body{
padding:20px;
font-family:Sans serif;
display:block;
}
input:focus, textarea:focus{
border-color:yellow;
}
input:invalid, select:invalid,
textarea:invalid {
border-color:red;
}
input:valid, select:valid, 
textarea:valid {
border-color:green;
}
button:hover {
background-color:blue;
}
.radio-group input[type="radio"]:checked + label{
border-color:green;
background-color:green;
box-shadow:gray;
}
.radio-group label{
  font-weigth:normal;
}

input:nth-child(1){
border-radius:10px;
}
button{
color:white;
background-color:green;
border-radius:5px;
}
button:hover{
  color:maroon;
}
label{
font-family:Sans Serif;
font-weight:5px;
}

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Where is the code to satisfy this?

  1. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a border color, background color and a box shadow when the radio button is selected.

And I do not see the code for this either

  1. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected.

Can you point out which code you believe satisfy these?

3

I think for step 14 ,my code was on the CSS page, I put it as .radio-group input[type="radio] + label. For step 15 I believe I might have missed, it I will double check this.

4

On step 15 ,are the instructions asking to make a :checked pseudo-class for each individual select option, or for it as a whole? I don’t understand.

5

the requirement is to style the checked input element, your code doesn’t do that.

it is asking to style the label element of the selected radio button. But check what kind of styling it is asking for, you are missing that.

6

Okay. Thank You! I will try that.

7

I tried to fix it, but step 15 is still asking me to create a :checked psuedo-class when I think I did put it in. It looks alright to me, am I missing something?

8

https://www.freecodecamp.org/learn/full-stack-developer/lab-job-application-form/lab-job-application-form

9

can you show your updated code please?

10

Sure, how would I post it? my computer doesn’t have the <> icon that normally allows to input code.

11

You can type the backticks yourself.

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 (').

12 
body{
padding:20px;
font-family:Sans serif;
display:block;
text-align:center;
}
input:focus, textarea:focus{
border-color:yellow;
}
input:invalid, select:invalid,
textarea:invalid {
border-color:red;
}
input:valid, select:valid, 
textarea:valid {
border-color:green;
}
button:hover {
background-color:blue;
}
.radio-group input[type="radio"]:checked + label {
color:green;
accent-color:green;
}



.radio-group input[type="radio"]{
  margin-top:16px;
  width:10%;

}


.radio-group input[type="radio"]:checked {
border-color:green;
background-color:green;
  box-shadow:gray;
}

input:nth-child(1){
border-radius:10px;
}

button{
color:white;
background-color:green;
border-radius:5px;
}
button:hover{
  color:maroon;
}
.message{
  padding:16px;
  
}
13

double check the box-shadow, see how many values it takes

14

Alright, thank you. I’ll try that

15

Thank you, that worked.