Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

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

2

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.

1 Like
3

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.

1 Like
4

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

5

I would do the following.

  1. 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…
  2. Look at the “Next Sibling Combinators”: Next-sibling combinator - CSS: Cascading Style Sheets | MDN.
  3. You’re looking to create a new selector based on that document that combines your “radio buttons checked” plus your “label” element .
  4. Make all your property adjustments there.
6

Thank you will try this out.

7

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

8

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.

1 Like
9

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.

10

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.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

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