EJAY
May 1, 2026, 1:45pm
1
please i need help with test 18 of building a job application. i am stuck. please someone help. it’s already working in the preview but it’s not going through when i try to check the code so i can move on. someone please help.
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #eef2f5;
font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1.5rem;
}
.container {
max-width: 620px;
width: 100%;
background: white;
border-radius: 1.25rem;
box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08);
padding: 2rem;
}
form {
display: flex;
flex-direction: column;
gap: 1rem;
}
label {
font-weight: 500;
font-size: 0.8rem;
color: #1e293b;
margin-bottom: 0.2rem;
}
input:not([type="radio"]), select, textarea {
width: 100%;
padding: 0.7rem 0.8rem;
border: 1.5px solid #cbd5e1;
border-radius: 0.6rem;
font-size: 0.9rem;
font-family: inherit;
background: white;
transition: all 0.15s;
}
input[type="radio"] {
margin-right: 0.4rem;
accent-color: #2563eb;
width: 1rem;
height: 1rem;
vertical-align: middle;
}
.radio-group {
border: 1px solid #e2e8f0;
border-radius: 0.9rem;
padding: 0.6rem 1 rem 0.5rem;
}
legend {
font-size: 0.8rem;
font-weight: 600;
padding: 0 0.4rem;
color: #334155;
}
.radio-group label {
font-weight: normal;
font-size: 0.9rem;
margin-right: 1.5rem;
margin-bottom: 0;
transition: color 0.2s;
}
textarea {
resize: vertical;
min-height: 85px;
}
button[type="submit"] {
background-color: #0f172a;
color:white;
border: none;
padding: 0.75rem;
font-weight: 600;
border-radius: 2rem;
cursor: pointer;
margin-top: 0.3rem;
transition: 0.2s;
}
input:focus, textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
input[type="radio"]:invalid {
outline: 1px solid #ef4444; outline-offset: 1px;
}
input[type="radio"]:valid {
outline: 1px solid #22c55e; outline-offset: 1px,
}
button:hover {
background-color: darkgreen;
transform: translateY(-1px);
box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.2);
}
.radio-group input[type="radio"]:checked {
border: 2px solid #0c4e2e;
background-color: lightgreen;
box-shadow: 0 0 0 2px #22c55e, 0 0 0 4px rgba(34, 197, 94, 0.25);
accent-color: #15803d;
}
.radio-group input[type="radio"]:checked + label {
color: blue;
}
label {
color: purple;
}
input:first-of-type {
border-radius: 2rem;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36
Build a Job Application Form - Build a Job Application Form
dhess
May 1, 2026, 2:31pm
2
Hi @EJAY ,
MDN: Next Sibling Combinator
Since this selector targets a label that immediately follows this radio button, is the label written immediately after the radio button in your HTML?
Happy coding!
EJAY
May 1, 2026, 2:39pm
3
YES. It is already showing in the preview but not going through .
EJAY
May 1, 2026, 2:36pm
4
please look into my test 18 in building a job application. it is already working in the preview but it’s not going through when i check the code. please someone rectify this.
<!-- 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>
<input type="text" id="name" name="fullname" required placeholder="Full name">
<label for="email">Email address *</label>
<input type="email" id="email" name="fullname" required placeholder="Email address">
<label for="position">Job position *</label>
<select id="position" name="position" required>
<option value="" disabled selected>- Select a role -</option>
<option value="frontend">Frontend Developer</option>
<option value="backend">Backend Engineer</option>
<option value="design"> UI/UX Designer</option>
</select>
<fieldset class="radio-group">
<legend>Availability *</legend>
<input type="radio" id="fulltime" name="availability" value="full-time" required>
<label for="fulltime">Full-Time</label>
<input type="radio" id="parttime" name="availability" value="part-time" required>
<label for="parttime">Part-Time</label>
</fieldset>
<label for="message">Message / Cover letter *</label>
<textarea id="message" name="message" rows="3" required placeholder="Tell us about your experience..."></textarea>
<button type="submit">Submit Application</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #eef2f5;
font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 1.5rem;
}
.container {
max-width: 620px;
width: 100%;
background: white;
border-radius: 1.25rem;
box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.08);
padding: 2rem;
}
form {
display: flex;
flex-direction: column;
gap: 1rem;
}
label {
font-weight: 500;
font-size: 0.8rem;
color: #1e293b;
margin-bottom: 0.2rem;
}
input:not([type="radio"]), select, textarea {
width: 100%;
padding: 0.7rem 0.8rem;
border: 1.5px solid #cbd5e1;
border-radius: 0.6rem;
font-size: 0.9rem;
font-family: inherit;
background: white;
transition: all 0.15s;
}
input[type="radio"] {
margin-right: 0.4rem;
accent-color: #2563eb;
width: 1rem;
height: 1rem;
vertical-align: middle;
}
.radio-group {
border: 1px solid #e2e8f0;
border-radius: 0.9rem;
padding: 0.6rem 1 rem 0.5rem;
}
legend {
font-size: 0.8rem;
font-weight: 600;
padding: 0 0.4rem;
color: #334155;
}
.radio-group label {
font-weight: normal;
font-size: 0.9rem;
margin-right: 1.5rem;
margin-bottom: 0;
transition: color 0.2s;
}
textarea {
resize: vertical;
min-height: 85px;
}
button[type="submit"] {
background-color: #0f172a;
color:white;
border: none;
padding: 0.75rem;
font-weight: 600;
border-radius: 2rem;
cursor: pointer;
margin-top: 0.3rem;
transition: 0.2s;
}
input:focus, textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}
input:invalid, select:invalid, textarea:invalid {
border-color: red;
}
input:valid, select:valid, textarea:valid {
border-color: green;
}
input[type="radio"]:invalid {
outline: 1px solid #ef4444; outline-offset: 1px;
}
input[type="radio"]:valid {
outline: 1px solid #22c55e; outline-offset: 1px,
}
button:hover {
background-color: green;
transform: translateY(-1px);
box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.2);
}
.radio-group input[type="radio"]:checked {
border: 2px solid #0c4e2e;
background-color: #dcfce7;
box-shadow: 0 0 0 2px #22c55e, 0 0 0 4px rgba(34, 197, 94, 0.25);
accent-color: #15803d;
}
.radio-group input[type="radio"]:checked + label {
color: blue;
font-weight: 600;
}
input:first-of-type {
border-radius: 2rem;
}
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:150.0) Gecko/20100101 Firefox/150.0
Build a Job Application Form - Build a Job Application Form
hello!
EJAY:
transition: color 0.2s;
Please try removing this transition from .radio-group label selector.
dhess
May 1, 2026, 2:51pm
6
I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.
EJAY
May 1, 2026, 3:14pm
9
you are a genius. i really appreciate. Finally worked after a long trial. Thank you so much. more cheers to freecodecamp. love you all.
bro how did you do that i cant
dhess
May 5, 2026, 5:22pm
11
Please create your own topic when you have specific questions about your own challenge code. Only respond to another thread when you want to provide help to the original poster of the other thread or have follow up questions concerning other replies given to the original poster.
The easiest way to create a topic for help with your own solution is to click the Help button
Thank you.
located on each challenge. This will automatically import your code in a readable format and pull in the challenge URL while still allowing you to ask any question about the challenge or your code.