Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I’m stuck on step 15. The code I’ve written is showing the correct result in the preview, but I always fail step 15 no matter how many little changes I make.

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" type="text/css" href="styles.css">
</head>
<body>
<header>
    <h1>Job Application Form</h1>
</header>
<div class="container">
    <form>
        <label for="name">Full Name:</label>
        <input type="text" id="name" required>
       <br> <label for="email">Email Address:</label>
        <input type="email" id="email" required>
        <br><label for="position">Desired Position:</label>
        <select id="position" required>
            <option></option>
            <option>Janitor</option>
            <option>Administrator</option>
            <option>Manager</option>
            <option>CEO</option>
        </select>
        <fieldset class="radio-group" name="availability" required>
            <legend>Availability</legend>
            <input type="radio" name="availability" id="fullTime" value="fullTime" >
            <label for="fullTime">Full Time</label>
            <input type="radio" name="availability" id="partTime" value="partTime" >
            <label for "partTime">Part Time</label>
        </fieldset>
        <p>Why do you want this job?</p>
        <textarea id="message" required></textarea>
        <button type="submit">Submit Application</button>
        <button type="reset">Reset Form</button>
    </form>
</div>
</body>
</html>

/* file: styles.css */
body {
  font-family: arial, sans-serif;
}

h1 {
  text-align: center;
}

p, legend, label:not(.availability) {
  font-weight: bold;
}

textarea {
  width: 100%;
  height: 15vh
}

input[type="text"], input[type="email"], select {
  margin-bottom: 5px;
  width: 100%;
  display: block
}

input:focus, textarea:focus {
  border: solid 1px lightblue;
}

input:invalid, select:invalid, textarea:invalid {
  border: solid 2px red;
}

input:valid, select:valid, textarea:valid {
  border: solid 2px green;
}

button {
width: 80vw;
background-color: lightblue;
margin: 10px auto 10px auto;
padding: 10px;
font-size: 1.2rem;
display: block

}

button:hover {
  background-color: aqua
}

input[type="radio"]:checked + label {
  color: purple;
}

.radio-group input[type="radio"]:checked{
  appearance: none;
  border-radius: 50%;
  height: 20px;
  width: 20px;
  box-shadow: 3px 3px lightgray;
  border: 2px solid green;
  background-color: aqua;
}

input:nth-child(1) {
  font-color: green
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Welcome to the forum @hayleyr

It looks like the attribute is missing something.

Happy coding

3

Yup, sure was! Thanks!

1 Like