Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

I am creating a job application form and I can’t get through stepn11, 13 and 18…what are the common mistakes that I may have?

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>
            <!-- Full Name -->
            <label for="name">Full Name</label>
            <input type="text" id="name" name="name" required>

            <!-- Email Address -->
            <label for="email">Email Address</label>
            <input type="email" id="email" name="email" required>

            <!-- Job Position (Select Dropdown) -->
            <label for="position">Select a Job Position</label>
            <select id="position" name="position" required>
                <option value="">--Please choose an option--</option>
                <option value="developer">Developer</option>
                <option value="designer">Designer</option>
                <option value="manager">Manager</option>
                <option value="analyst">Analyst</option>
                <option value="administrator">Administrator</option>
            </select>

            <!-- Availability (Radio Buttons) -->
            <fieldset class="radio-group">
                <legend>Availability</legend>
                <label for="full-time">
                    <input type="radio" id="full-time" name="availability" value="full-time" required> Full-Time
                </label>
                <label for="part-time">
                    <input type="radio" id="part-time" name="availability" value="part-time" required> Part-Time
                </label>
                <label for="freelance">
                    <input type="radio" id="freelance" name="availability" value="freelance" required> Freelance
                </label>
            </fieldset>

            <!-- Message -->
            <label for="message">Enter your message:</label>
            <textarea id="message" name="message" rows="4" cols="50" placeholder="Write your message here..." required></textarea>

            <!-- Submit Button -->
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>


/* file: styles.css */
/* Focused state: Change border color using a list selector */
input:focus, select:focus, textarea:focus {
  border-color: #4CAF50;  /* Green border when focused */
  outline: none;          /* Remove default outline */
}

/* Valid input: Change border color to green using a list selector */
input:valid, select:valid, textarea:valid {
  border-color: #4CAF50;  /* Green border when input is valid */
}

/* Invalid input: Change border color to red */
input:invalid, select:invalid, textarea:invalid {
  border-color: red;  /* Red border when invalid */
}

/* Button hover effect: Change background color when hovered */
button {
  padding: 10px 20px;
  background-color: #4CAF50; /* Default green background */
  color: white;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  transition: background-color 0.3s ease; /* Smooth transition */
}

button:hover {
  background-color: #45a049; /* Darker green when hovered */
}

/* Styles when radio button is checked */
.radio-group input[type="radio"]:checked {
  border-color: #4CAF50;  /* Green border */
  background-color: #4CAF50; /* Green background */
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.5); /* Green box shadow */
}

/* Change label text color when associated radio button is checked */
.radio-group input[type="radio"]:checked + label {
  color: #4CAF50; /* Green text color when checked */
}

/* First input field (Full Name) with different styling */
input:first-of-type {
  border-radius: 12px; /* Rounded corners for the first input */
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.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:

  • What is the requirement of the first failing test?
  • Check the related User Story and ensure it’s followed precisely.
  • What line of code implements this?
  • Are there any errors or messages in the console?

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