Build a Job Application Form

Curriculum Help
,
1

i don t understand why my code doesnt pass, it works perfectly well in the preview but whenever i try to submit the code there is always an error message saying that i need to use the :checked pseudo class to turn the label green when my radio buttons are checked, but they already do, it works.

<!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>
    <div class="container">
        <h1>Job Application Form</h1>
        <form>
            <label for="name">Full Name: </label>
            <input type="text" id="name" placeholder="Enter your name" required >
            <label for="email">Email: </label>
            <input id="email" type="email" placeholder="Enter your email" required>
            <label for="position">Position: </label>
            <select id="position" required>
    <option value="clerk">clerk</option>
    <option value="mage">mage</option>
    <option value="">whatever</option>
    </select>
            <fieldset class="radio-group">
                <legend>Availability</legend>
                <input type="radio" name="availability" value="full-time" id="full">
                <label for="full">Full-time</label>
                <input type="radio" name="availability" value="part-time" id="part">
                <label for="part">Part-time</label>
            </fieldset>
            <label for="message">Why do you want this Job?</label>
            <textarea id="message" cols="50" rows="5" required></textarea>
            <button type="submit">Submit application</button>
        </form>
    </div>
</body>

</html>

body{
  font-family: Arial, sans-serif;
  background-color: #ffffff
}
h1{
  text-align: center
}
.container{
  box-shadow: 0 4px 8px rgb(0,0,0, 0.5);
  border-radius: 10px;
  margin: 20px auto;
  padding: 30px 20px;
  width: 50%;
  min-width: 250px;
}
input:not(.radio-group input), textarea, select{
  width: 95%;
  padding: 10px;
  margin-bottom: 20px;
 
}
input:not(.radio-group input),select, textarea{
  display: block;
  border-radius: 3px;
}
input:invalid, select:invalid, textarea:invalid {
  border-color: red
}
input:valid, select:valid, textarea:valid{
  border-color: green
}
label{
  font-weight: 600;
  transition: color 0.4s linear;
}
button{
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  background-color: green;
  color: white;
  border-radius: 10px; 
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.5s ease;
}
button:hover{
  background-color: black;
  transform: scale(0.99)
}
button:active{
  background-color: green;
}
input:focus, textarea:focus{
  border: 2px solid yellow;
  outline: none;
}
input:first-of-type{
  color: black;
}
.radio-group input[type="radio"]:checked{
  background-color: green;
  border-color: green;
  box-shadow: inset 0 0 0 3px white;
}
.radio-group input[type="radio"]{
  appearance: none;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 50%;
  transition: background-color  0.4s ease-out
}
input[type="radio"]:checked + label {
  color: green;
}
2

Welcome to the forum @shadowlevainqueur,

Would you please post a link to this challenge?

3

Build a Job Application Form: Build a Job Application Form | freeCodeCamp.org

Please remove this transition. It causes a delay that trips up the tests.

Edit: Also the one on the label selector.

Happy coding

4

In label, remove transition: color 0.4s linear; and in .radio-group input[type=“radio”]{ transition: background-color 0.4s ease-out

5

Thanks it worked, i would have never thought about that, i spent hours trying to figure out yesterday :sweat_smile: