Tell us what’s happening:
Stuck on steps 14 and 15. Tried everything but can’t seem to get it to work.
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">
<link rel="stylesheet" href="styles.css"/>
<title>Job Application Form</title>
</head>
<body>
<div class="container">
<h1>Job Application Form</h1>
<form>
<label for="name">Name:</label>
<input required type="text" id="name" placeholder="Full Name"/>
<label for="email">E-mail id:</label>
<input required type="email" id="email" placeholder="example@email.com"/>
<label for="phone-no">Phone Number:</label>
<input required type="number" id="phone-no" placeholder="Valid phone no."/>
<label for="position">Job Position</label>
<select id="position" required>
<option disabled selected value="1">Select</option>
<option value="2">Consultant</option>
<option value="3">Technical Support</option>
<option value="4">Human Resources</option>
<option value="5">Marketing</option>
<option value="6">S/W Engineering</option>
<option value="7">H/W Engineering</option>
<option value="8">SEO Engineer</option>
<option value="9">PR</option>
<option value="10">Operations</option>
</select>
<fieldset class="radio-group">
<legend>Availability</legend>
<label for="full-time">Full-Time</label>
<input required type="radio" name="availability" id="full-time">
<label for="part-time">Part-Time</label>
<input required type="radio" name="availability" id="part-time">
<label for="intern">Internship</label>
<input required type="radio" name="availability" id="intern">
</fieldset>
<textarea required type="text" id="message" rows="3">Enter field of interest</textarea>
<button type="submit" id="submit">Submit form</button>
</form>
</div>
</body>
</html>
/* file: styles.css */
body{
background-color:lightslategray;
font-family:"Sans-Serif","Georgia";
}
.container{
margin:20px;
padding:20px;
line-height:50px;
}
fieldset{
text-decoration:underline;
margin:30px;
padding:15px 10px;
}
form{
display:flex;
flex-direction:column;
margin:5px;
padding:5px;
}
textarea{
margin:20px;
padding:10px;
}
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:mediumturquoise;
}
.radio-group input[type="radio"]:checked{
border-color:5px lightcoral;
background-color:lavender;
box-shadow:5px burlywood;
}
.radio-group input[type="radio"]:checked label{
text-color:maroon;
}
input:nth-child(1){
border-radius:8px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:134.0) Gecko/20100101 Firefox/134.0
Challenge Information:
Build a Job Application Form - Build a Job Application Form