Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

  1. You should use the :checked pseudo-class on radio buttons to change the text color of the associated label when the option is selected

Your code so far

<!-- file: index.html -->
<!-- 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="sytlesheet" href="styles.css"/>
</head>
<body>
    <h1>Job Application Form</h1>
    <div class="container">
        <form>
            <label for="name">Full Name:   <input type="text" id="name" required placeholder="Enter your name" /></label>
         
            
            <label for="email">Email:  <input type="email" id="email" required placeholder="Enter your email"/></label>
          
            
            <label for="position">Job Position:  <select id="position" required>
            <option id="select" value="select">Select a option</option>
            <option id="dev" value="dev">Front-end Developer</option>
            <option id="back-dev" value="back-dev">Back-end Developer</option>
            <option id="full-dev" value="full-dev">Full Stack Developer</option>
            <option id="devops" value="devops">Dev-Ops Engineer</option>
            </select></label>
          
            
           <fieldset class="radio-group">
  <legend>Availability</legend>

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

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


            <label for="message">Why should we choose you for this role? <textarea id="message" required rows="5"> </textarea></label>
           
            <button type="submit" id="submit">Submit</button>
        </form>
    </div>

</body>
</html>


/* file: styles.css */
/* file: styles.css */
body{
  font-family: arial, sans-serif;
  padding: 20px;
}
.container{
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
h1{
  text-align: center;
}

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

input, textarea, select{
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid white;
  border-radius: 4px;
  box-sizing: border-box;
}

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

input:focus, textarea:focus{
  border-color: violet;
}

.radio-group{
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.radio-group input[type="radio"]{
    margin-right: 10px;
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ccc;
    border-radius: 50%;
    outline: none;
    transition: border-color 0.2s;
  }
.radio-group input[type="radio"]:checked {
  border-color: green;
  background-color: green;
  box-shadow: inset 0 0 0 4px white; 
  color: green;
}
/* change label text color when radio is selected */
 .radio-group span + input[type="radio"]:checked {
  color: red;
  font-weight: bold;
}



.radio-group label{
  font-weight: normal;
  cursor: pointer;
  margin: 0;
}

label{
  font-weight: bold;
  display: block;
  margin-bottom: 5px;
}


input:nth-child(1){
  border-radius: 5px;
}

button{
  background-color: green;
  display: block;
  width: 100%;
  padding: 20px;
  font-size: 20px;
  border: 0px solid white;
  border-radius: 4px;
  color: white;
}

button:hover{
  background-color: black;
}
input:first-of-type{
  color:blue;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build a Job Application Form - Build a Job Application Form
https://www.freecodecamp.org/learn/full-stack-developer/lab-job-application-form/lab-job-application-form

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement?

If this does not help you solve the problem, please reply with answers to these questions.