Build a Job Application Form - Build a Job Application Form

Curriculum Help
1

Tell us what’s happening:

I can’t pass the 12th check. I did everything correctly in my opinion.

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" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="position">Position:</label>
    <select id="position" name="position" required>
      <option value="">Select a position</option>
      <option value="CEO">CEO</option>
      <option value="Manager">Manager</option>
      <option value="Coworker">Co-worker</option>
    </select>

    <fieldset class="radio-group">
      <legend>Availability</legend>

      <input type="radio" id="fulltime" name="availability" value="full-time">
      <label for="fulltime">Full-Time</label>

      <input type="radio" id="parttime" name="availability" value="part-time">
      <label for="parttime">Part-Time</label>
    </fieldset>

    <label for="message">Why do you want this job?</label>
    <textarea id="message" name="message" required></textarea>

    <button type="submit">Submit</button>

  </form>

</div>

</body>
</html>


/* file: styles.css */
/* Tests 11 & 12 — list selector in the given order */
input:focus,
textarea:focus {
  border-color: blue;
  outline: none;
}

/* Validation states — list selector in given order */
input:invalid,
select:invalid,
textarea:invalid {
  border-color: red;
}

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

/* Button hover */
button:hover {
  background-color: green;
}

/* Radio buttons checked state */
.radio-group input[type="radio"]:checked {
  border-color: blue;
  background-color: red;
  box-shadow: 0 0 0 3px rgba(74,144,226,.35);
}

/* Change label color when radio is selected */
input[type="radio"]:checked + label {
  color: blue;
}

/* First input field styled differently */
input:first-of-type {
  border-radius: 12px;
}

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/26.6.2 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

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.