Build a Job Application Form - Build a Job Application Form

Pine · May 13, 2025, 8:19pm

Tell us what’s happening:

hello,
I have tried running the test so far, seems it not responding to my command. Tried using ctrl and enter still noting.
How do I resolve this issue please?

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>
    <h1 class="subject">Job Application Form</h1>
    <div class="container">
        <form>
            <label class="all-label" for="full-name"><strong>Full Name:</strong></label><br>
            <input type="text" id="name" name="name" "required" placeholder="Enter your full name" "required"><br>
            <label class="all-label" for="email"><strong>E-mail:</strong></label><br>
            <input type="email" id="email" name="email" "required" placeholder="Enter your email" "required"><br>
            <label class="all-label" for="position"><strong>Position:</strong></label><br>
            <select class="select-all" name="position" id="position">
                
                <option "disable" value="position">Select a position</option>               
                 <option value="developer">Developer</option>                <option value="designer">Designer</option>                <option  value="manager">Manager</option></select><br><br>
<fieldset class="radio-group">
    <legend>Availability:</legend>
    <input type="radio" id="full-time" name="availability">   <label for="full-time" value="F">Full-time</label>

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

    <p><strong>Why do you want this Job</strong></p>
    <textarea id="message" name="write your motivation" rows="5" cols="70" placeholder="What motivated you for this role?"></textarea>
    <footer>
    <button type="submit">Submit Application</button>
    </footer>

        </form>
    </div>

</body>
</html>

/* file: styles.css */

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

NotVeryHelpful · May 13, 2025, 8:38pm

I just tried your code copy paste. It ran test. Maybe try to open it up in a new tab and run the test. Make sure you scroll through all of the test at the bottom it’s not gonna give you a success page because you have a few errors to fix.

a1legalfreelance · May 13, 2025, 8:59pm

Hi. Can you please post your CSS as well. Put 3 backticks before and after your code in the forum post.

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.

Pine · May 16, 2025, 2:12am

Tell us what’s happening:

Hello, I need help please.
how do I get to solve step 14 and 15, I have tried so many tactics. It clearly states the below:
1.using : checked class on radio-group input, type-radio to add border- colour background and box shadow.
2.use : checked on radio buttons to change the text colour and associate label when option is selected.
Aside from the above mentioned problem, I also found out that my field set elements changes with any effect I add at input[first of type]. How to I solve this too?

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>
    <h1 class="subject">Job Application Form</h1>
    <div class="container">
        <form>
            <label class="all-label" for="full-name"><strong>Full Name:</strong></label><br>
            <input type="text" id="name" name="name" "required" placeholder="Enter your full name" "required"><br>
            <label class="all-label" for="email"><strong>E-mail:</strong></label><br>
            <input type="email" id="email" name="email" "required" placeholder="Enter your email" "required"><br>
            <label class="all-label" for="position"><strong>Position:</strong></label><br>
            <select class="select-all" name="position" id="position">
                
                <option "disable" value="position">Select a position</option>               
                 <option value="developer">Developer</option>                <option value="designer">Designer</option>                <option  value="manager">Manager</option></select><br><br>
<fieldset class="radio-group">
    <legend>Availability:</legend>
    <input type="radio" id="full-time"name="availability">   <label for="full-time" value="F">Full-time</label>

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

    <p><strong>Why do you want this Job</strong></p>
    <textarea id="message" name="write your motivation" rows="5" cols="70" placeholder="What motivated you for this role?"></textarea>
    <footer>
    <button type="submit"><bold>Submit Application</bold></button>
    </footer>

        </form>
    </div>

</body>
</html>

/* file: styles.css */
body{font-family: sans-sarif;
color: black;
background-color: white;

}
.container {
  max-width: 90%; margin: 5px;  background: white;  border-radius:16px;  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 25px;}
h1{ text-align: center;}
input:first-of-type {margin: 10px 0 10px 0;
width:   90%;

padding: 10px 0px 10px 5px;
border:1px solid red;
border-radius: 0.5em; }
input[type=email]   {margin: 10px 2px 10px 0;
width:   90%;padding: 10px 0px 10px 5px;border:1px solid red;
border-radius: 0.5em;  }
.select-all  {margin: 5px 0 10px 0;
width:   92%; padding: 10px 0px 10px 5px;border:1px solid red;
border-radius: 0.5em;  }

fieldset{
  width: 88%;
  
  margin: 0;
  border:1px solid red;
border-radius: 0.2em; 

}
.radio-group:checked{color: blue;
}
textarea{ width: 92%;
border-color: red;}

button{width: 93%; margin: 12px 0 12px 0;
background-color: green;
padding: 0.80rem;
box-shadow: none;
border-radius: 0.3em;
border-color: green;
font-weight: bold;
font-size: 1rem;
color:white;

}
button:hover{background-color:blue;}


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

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

input:focus, textarea:focus {
border-color: black;
}
.radio-group input[type=radio]:checked
{
  color: blue;
}
.radio-group label[for=full-time]:checked{ 
  color: red;
}

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

NotVeryHelpful · May 16, 2025, 2:55am

I would do the following.

Make sure on your radio inputs you are giving it an “ID” that is equal to your label’s “FOR” attribute. This is what links them…
Look at the “Next Sibling Combinators”: Next-sibling combinator - CSS: Cascading Style Sheets | MDN.
You’re looking to create a new selector based on that document that combines your “radio buttons checked” plus your “label” element .
Make all your property adjustments there.

Pine · May 18, 2025, 8:41am

Thank you will try this out.

Pine · May 21, 2025, 2:43am

Hello.
my code is still failing;
options 14,15, 15 and 17 ad I know i am not doing somethhing rifgt, need help please.

a1legalfreelance · May 21, 2025, 7:04am

Hi. It doesn’t solve the problems but your syntax is wrong here:

input[type=radio]:checked

Look at test 14.

Same for the CSS code just below that, but there are other issues with your other code to work through. Hopefully someone else can help. I don’t have time right now.

Pine · May 23, 2025, 8:31pm

Thank you, i have managed to pass the steps except for step 17 which says using checked pseudo to add text colour to associate lables.

ILM · May 23, 2025, 9:06pm

can you share your updated code?

When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

Topic		Replies	Views
Build a Job Application Form - Build a Job Application Form HTML-CSS	6	34	May 30, 2025
Build a Job Application Form - Build a Job Application Form HTML-CSS	1	73	April 3, 2025
Build a Job Application Form - Build a Job Application Form HTML-CSS	2	90	March 19, 2025
Build a Job Application Form - Build a Job Application Form HTML-CSS	9	211	February 13, 2025
Build a Job Application Form - Build a Job Application Form HTML-CSS	2	99	March 21, 2025

Build a Job Application Form - Build a Job Application Form

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics