Build a Job Application Form - Build a Job Application Form

Curriculum Help
,
1

Tell us what’s happening:

all the 19 instructions has passed but no 12 is still failed after I added input:focus,

textarea:focus {

border-color: blue;

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>
    <main>
        <h1 class="title center">Job Application Form</h1>
        <div class="container">
            <form>
                <label for="name">Full Name: </label>
                <input type="text" name="full-name" id="name" placeholder="Enter your name" required />
                <label for="email">Email: </label>
                <input type="email" name="email" id="email" placeholder="Enter your email" required />
                <label for="position">Position: </label>
                <select name="position" id="position">
                    <option nonvalue="select-position">Select a Position</option>
                    <option value="developer">Developer</option>
                    <option value="designer">Designer</option>
                    <option value="manager">Manager</option>
                </select>
                <fieldset class="radio-group">
                    <legend>Availability</legend>
                    <input type="radio" id="full-time" name="availability"/>
                    <label for="full-time">Full Time</label> 
                    <input type="radio" id="part-time" name="availability"/>
                    <label for="part-time">Part-Time</label>
                </fieldset>
                <label for="message">Why do you want this job?</label>
                <textarea id="message" name="notes" rows="5" cols="40"></textarea>
                <button class="submit-btn" type="submit">Submit Application</button>
            </form>
        </div>
    </main>
</body>
</html>

/* file: styles.css */
body {
background-color: brown;
color: whitesmoke;
}
.container {
  background-color: #ffffff1a; 
  width: 80%; 
  max-width: 600px; border-radius: 10px; 
  margin: 20px auto; 
  padding: 10px 20px; box-shadow: 0 5px 15px black;}
.center {text-align: center;}
label {
  font-size: 1.4rem;
}
legend {font-size: 1.4rem;}
fieldset {
border: 1px solid gray;
border-radius: 5px;
margin: 20px 0;
padding: 20px;
}

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;
}

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

input[type="radio"]:checked + label {
  color: green;
  }

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

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/18.5 Safari/605.1.15

Challenge Information:

Build a Job Application Form - Build a Job Application Form

GitHub Link: https://github.com/freeCodeCamp/freeCodeCamp/blob/main/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md

2

Can you double check? The code submitted by you passes all the tests.

3

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.

4

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.

5

still not, I passed the other instructions but I have to skip number 12, and I can’t submit. and I can see that the “Build a Job Application Form still unchecked”, The same as build a nutrition label it’s also unchecked because the step no 44 is failed.

6

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.

Have you tried these instructions? If not, please give them a try. Otherwise, come back to this post and let us know.

7

tried, still failing, I even tried on the new private window but still failing no 12

8

tried all of those but still failing

9

Please share us your latest code.