Build a Job Application Form - Build a Job Application Form

Curriculum Help
1

Tell us what’s happening:

I am getting following error when I have done it: You should use the selector for the :focus pseudo-class for input and textarea to also remove the default outline when focused. input:focus, textarea:focus {
border-color: #007BFF;
outline: none;
}

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>
    <label for="name">Full Name: </label>
    <input type="text" name="fullname" id="name">
    <label for="email">Email: </label>
    <input type="email" name="email" id="email">
    <label for="position">Job Position: </label>
    <select name="job-position" id="position">
      <option value="manager">Manager</option>
      <option value="director">Director</option>
      <option value="salesteam">Sales Team</option>
    </select>
    <fieldset class="radio-group">
      <input type="radio" name="availability" id="available">
      <label for="available">Available</label>
      
      
      <input type="radio" name="availability" id="unavailable">
      <label for="unavailable">Unavailable</label>
      
      
       <label for="message">Message: </label>
      <textarea name="message" id="message"></textarea>
    </fieldset>
    <button type="submit">Submit</button>
  </form>
</div>
</body>
</html>

/* file: styles.css */
/* file: styles.css */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
}

.container {
    max-width: 600px;
    margin: 50px auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

form {
    display: flex;
    flex-direction: column;
}

input, select, textarea {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
}

input:focus, textarea:focus {
    border-color: #007BFF;
    outline: none;
}

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

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

.radio-group {
    margin-bottom: 15px;
}

.radio-group input[type="radio"] {
    display: none;
}

.radio-group label {
    margin-right: 10px;
    padding: 5px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
}

.radio-group input[type="radio"]:checked {
    border-color: #007BFF;
    background-color: #007BFF;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.radio-group input[type="radio"]:checked + label{
  color: cadetblue;
}


textarea {
    resize: vertical;
}

button {
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

button:hover {
    background-color: #0056b3;
}

input:first-of-type {
    border-radius: 8px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15

Challenge Information:

Build a Job Application Form - Build a Job Application Form

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

Welcome to the forum @S-12,

Your solution works from my end. Please try one of the following steps to move forward.

Click on the “Restart Step” button and force a refresh of your page with CTRL + F5 then try to paste the code in again.

or - Try the step in incognito or private mode.

or - Disable any/all extensions that interface with the freeCodeCamp website (such as Dark Mode, Ad Blockers, or Spellcheckers), and set your browser zoom level to 100%. Both of these factors can cause tests to fail erroneously.

or - Ensure your browser is up-to-date or try a different browser.

I hope one of these will work for you.

Happy coding

3

We have blurred this solution (with [spoiler][/spoiler] tags) so that users who have not completed this challenge can read the discussion in this thread without giving away the solution.