Build a Job Application Form - Build a Job Application Form

Curriculum Help
1

Tell us what’s happening:

I did my best to write the code and there were some issues with it, so I used Claude to point out the issues and after fixing them there were still a lot of criteria which the code didn’t pass.
I should point out that when I used :valid and :invalid pseudo-classes; the code didn’t work properly, and it didn’t pass the correspondent criteria either

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" type="text/css" />
</head>
<body>
    <div class="container">
        <h1>Job Application Form</h1>
        <form>
            <label for="name">Full Name: </label>
            <input type="text" id="name" name="name" required placeholder="Enter your name:"/>
            <label for="email">Email: </label>
            <input type="email" id="email" name="email" required placeholder="Enter your Email:" />
            <label for="position">Position: </label>
            <select name="position" id="position">
                <option selected value="" disabled>select a position</option>
                <option value="designer">Designer</option>
                <option value="developer">Developer</option>
                <option value="product-manager">Product Manager</option>
            </select>
            <fieldset class="radio-group">
                <legend>Availability</legend>
                
                <label ><input type="radio"
                class="radio-btn" name="availability" 
                value="full-time required"/> Full-Time</label>
                
                <label > <input type="radio"
                class="radio-btn" name="availability" 
                value="part-time"/> Part-Time</label>
            </fieldset>

            <label for="message">Why do you want this job?</label>
            <textarea id="message" placeholder="Write your motivation" rows="8" cols="20" name="motivation"></textarea>  
        	<button type="submit">Submit Application</button>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
* {
  box-sizing: border-box;
}

.container {
  width: 80%;
  padding: 30px;
  border-radius: 4px;
  box-shadow: 0 2px 4px gray;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

.container h1 {
  margin: 10px;
  padding: 20px;
  text-align: center;
}

label, legend {
  font-size: 1.3rem;
  display: block;
  margin: 8px 0;
}

input:not([type="radio"]), select, textarea {
  width: 100%;
  border: 1px solid red;
  box-shadow: 0 0 2px 2px rgb(226, 109, 109);
  border-radius: 4px;
  padding: 6px 0 6px 6px;
  height: 35px;

}


:is(input:not([type="radio"]), select, textarea):user-valid {
  border: 2px solid green;
  box-shadow: 0 0 2px 2px rgb(95, 237, 95);
}

:is(input:not([type="radio"]), select, textarea):user-invalid {
  border: 1px solid red;
  box-shadow: 0 0 2px 2px rgb(226, 109, 109);

}


:is(input:not([type="radio"]), select, textarea):focus {
  outline: none;
  border: 2px solid green;
  box-shadow: 0 0 2px 2px rgb(95, 237, 95);
  
}


fieldset {
  margin: 30px 0;
  border: 1px solid gray;
  border-radius: 6px;
  box-shadow: 0 0 2px 2px rgba(128, 128, 128, 0.522);
}

fieldset legend {
  background-color: #fff;
} 

fieldset label {
  display: inline-block;
  
}

.radio-group input[type="radio"]{
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid gray;
  display: inline-grid;
  place-content: center;
  cursor: pointer;

  }

  .radio-group input[type="radio"]::before{
    content: "";
    width: 10px;
    height: 10px;  
    border-radius: 50%; 
    background-color: limegreen;
    transform: scale(0);
    transition: all .2s ease-in;
  }

.radio-group input[type="radio"]:checked {
  border: 2px solid limegreen;
  box-shadow: 0 0 2px 2px rgb(174, 222, 174);

}

.radio-group input[type="radio"]:checked::before {
  transform: scale(1.0);
}

label:has(input[type="radio"]) {
  cursor: pointer;
}
label:has(input:checked) {
  color: limegreen;
}

textarea{
  height: auto;
  min-height: 150px;
  resize: vertical;
}
button{
  width: 100%;
  margin: 10px auto;
  padding: 10px;
  background-color: green;
  color: white;
  font: inherit;
  border: none;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgb(16, 18, 16);
  transition: all .2s ease-in;
  cursor: pointer;

}

button:hover {
  background-color: rgb(48, 202, 48);
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-job-application-form/66faac4139dbbd5dd632c860.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

try to follow the user stories more nearly, like no user story mentions :is

3

thank you for ur response,
sorry for making a fuss. thought if it is in the lesson then we ought to use it

should put them like this

some other bits of the code also needed to be modified