Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Hey, having trouble with no.18, dunno what to do. pls help?

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 href="styles.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <form novalidate>
            <label for="name">Your Name:
                <input type="text" id="name" required />
            </label>
            <label for="email">Your Email Address:
                <input type="email" id="email" required />
            </label>
            <label for="position">Preferred interview time:</label>
            <select id="position" required>
                <option value="" disabled selected>Select a time</option>
                <option value="1">1:00</option>
                <option value="2">2:00</option>
                <option value="3">3:00</option>
                <option value="4">4:00</option>
            </select>

            <fieldset class="radio-group">
                <legend>Your Preferred Working Start Time:</legend>

                <label>
                    <input type="radio" name="availability" value="full" required>
                    Full Time
                </label>

                <label>
                    <input type="radio" name="availability" value="part" required>
                    Part Time
                </label>

                <label>
                    <input type="radio" name="availability" value="casual" required>
                    Casual
                </label>
            </fieldset>

            <label for="message">Additional message:</label>
            <textarea id="message" rows="4"></textarea>

            <button type="submit">Submit Form</button>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
input:focus,
textarea:focus {
  border-color: blue;
}

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

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

button:hover {
  background-color: teal;
}

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

input:first-of-type {
  text-decoration: none;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form
https://www.freecodecamp.org/learn/full-stack-developer/lab-job-application-form/lab-job-application-form

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement?

If this does not help you solve the problem, please reply with answers to these questions.