Build a Job Application Form - Build a Job Application Form

Curriculum Help
1

Tell us what’s happening:

Step 12 is still failing even though my CSS contains input:focus, textarea:focus { border-color: #4f46e5; outline: none; }. Step 11 passes. I restarted the lesson, refreshed the page, tried outline: 0, and also tried Safari Private mode, but Step 12 still fails. Could this be a test issue?

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>
</head>
<body>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Job Application</title>

  <link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>Job Application</h1>
  <div class="container">

    <h1>Job Application</h1>
    <p>Join our team and start your next chapter.</p>

    <form>

      <!-- Name -->
      <label for="name">Full Name</label>
      <input
        type="text"
        id="name"
        name="name"
        placeholder="Enter your full name"
        required
      >

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

      <!-- Position -->
      <label for="position">Job Position</label>
      <select id="position" name="position" required>
        <option value="">Choose a position</option>
        <option value="web-developer">Web Developer</option>
        <option value="software-engineer">Software Engineer</option>
        <option value="graphic-designer">Graphic Designer</option>
        <option value="ui-ux-designer">UI/UX Designer</option>
        <option value="data-analyst">Data Analyst</option>
      </select>

      <!-- Availability -->
      <fieldset class="radio-group">

        <legend>Availability</legend>

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

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

      </fieldset>

      <!-- Message -->
      <label for="message">Message</label>
      <textarea
        id="message"
        name="message"
        placeholder="Tell us why you'd be a great fit..."
        required
      ></textarea>

      <!-- Submit -->
      <button type="submit">Submit Application</button>

    </form>

  </div>

</body>
</html>
</body>
</html>

/* file: styles.css */
/* General styling */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 30px;
  min-height: 100vh;
  font-family: Arial, sans-serif;
  background-color: #eef2ff;
  color: #1e293b;
}

.container {
  width: 90%;
  max-width: 600px;
  margin: 40px auto;
  padding: 40px;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}

h1 {
  text-align: center;
  color: #4f46e5;
}

.container > p {
  text-align: center;
  color: #64748b;
  margin-bottom: 30px;
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

label {
  margin-top: 10px;
  font-weight: bold;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px;
  font-size: 15px;
  border: 2px solid #cbd5e1;
  border-radius: 8px;
  background-color: white;
}


/* STEP 11 + 12 */

input:focus,
textarea:focus {
  border-color: #4f46e5;
  outline: none;
}


/* STEP 13 */

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


/* STEP 14 */

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


/* STEP 15 */

button:hover {
  background-color: #3730a3;
}


/* STEP 16 + 17 + 18 */

.radio-group input[type="radio"]:checked {
  border-color: #4f46e5;
  background-color: #c7d2fe;
  box-shadow: 0 0 8px rgba(79, 70, 229, 0.7);
}


/* STEP 19 */

.radio-group input[type="radio"]:checked + label {
  color: #4f46e5;
}


/* STEP 20 */

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


/* Radio group */

.radio-group {
  margin-top: 20px;
  padding: 20px;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
}

.radio-group legend {
  padding: 0 8px;
  font-weight: bold;
}

.radio-group input[type="radio"] {
  width: auto;
}


/* Textarea */

textarea {
  min-height: 130px;
  resize: vertical;
}


/* Button */

button {
  margin-top: 20px;
  padding: 14px;

  border: none;
  border-radius: 8px;

  background-color: #4f46e5;
  color: white;

  font-size: 16px;
  font-weight: bold;

  cursor: pointer;
}


/* Mobile */

@media (max-width: 600px) {
  body {
    padding: 15px;
  }

  .container {
    width: 100%;
    padding: 25px;
  }
}

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.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

Hi @umerabdullah12380

It looks like you have a nested set of boilplate code.

Also, there are two h1 elements.

Happy coding

3

Thanks for the reply! I tried the suggestions, but Step 12 is still failing. Step 11 passes, and my selector is:

input:focus,
textarea:focus {
  border-color: blue;
  outline: none;
}

I also tried restarting the lesson, refreshing, Private Browsing, and outline: 0, but the test still fails. Could someone specifically help me with Step 12?

4

Hi @umerabdullah12380

Please post your full updated code.

Happy coding

5

Thanks for replying! This is my fully updated code. Step 12 keeps failing.

Job Application Form
Name Email Position Availability Full-Time Part-Time Message Submit 
  input:focus,
textarea:focus {
  border-color: blue;
  outline: none;
}

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

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

button:hover {
  background-color: blue;
}

.radio-group input[type="radio"]:checked {
  border-color: blue;
  background-color: lightblue;
  box-shadow: 0 0 5px blue;
}

.radio-group input[type="radio"]:checked + label {
  color: blue;
}

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

please edit your code to be readable

There are two ways you can format your code to make it easier to read and test:

  1. After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

1356×380 401 KB

  1. Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

image
image482×117 7.55 KB

7

Hi @umerabdullah12380

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