Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Hello everyone. I’m unable to succeed tasks 18 & 19, what am I missing? Can you please tell me why it’s not working? Thank you.

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">
    <link rel="stylesheet" href="styles.css">
    <title>Job Application Form</title>
</head>
<body>
    <div class="container">
        <form>
            <legend>Full name</legend>
            <input type="text" id="name" placeholder="Full name" required>
            <label for="name">
            <legend>E-mail</legend>
            <input type="email" id="email" placeholder="E-mail Address" required>
            <label for="email">
            <select name="position" id="position" required>
                <legend>Select one option</legend>
                
                <option value="developer">Developer</option>
                <option value="designer">Designer</option>
                <option value="manager">Manager</option>
                </select>
                     <fieldset class="radio-group" required>
                <legend>Availability</legend>
                <input type="radio" id="full-time" name="availability" checked>
                <label for="full-time">Full-Time</label>
                <input type="radio" id="part-time" name="availability">
                <label for="part-time">Part-Time</label>
                <input type="radio" id="contract" name="availability">
                <label for="contract">Contract</label>
            </fieldset>
                    </fieldset>
<legend>Why you should be hired?</legend>
<textarea id="message" placeholder="Enter Your Message Here" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
</body>
</html>

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: #d6eeee;
  max-width: 600px;
}

.container {
  max-width: 600px;
  padding: 25px;
  margin: 40px auto;
  border-radius: 10px;
  box-shadow: 0 2px 2px 2px rgba(0, 99, 255, 0.25);
}

input, select, textarea {
  margin-bottom: 25px;
  padding: 10px;
  border: 5px solid purple;
  font-size: 18px;
}

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

input:focus, textarea:focus {
  border: 10px solid #956;
}

button:hover {
  background-color: #983563;
  transition: background-color 0.5s ease, transform 0.5s ease;
}

input:invalid, select:invalid, textarea:invalid {
  border: 2px solid red;
}

input:valid, select:valid, textarea:valid {
  border: 2px solid green;
}

.radio-group input[type="radio"]:checked {
  border-color: green;
  background-color: green;
  box-shadow: 2px 4px #d6eeee;
}

.radio-group label {
  margin-right: 10px;
  padding: 3px;
  border: 1px solid #444;
  cursor: pointer;
  border-radius: 1px;  
}

.radio-group input[type="radio"]:checked + label {
  background-color: #d48;
}

button {
  padding: 3px;
  background-color: #ccb73a;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 1);
  border-radius: 2px;
  font-size: 24px;
}

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 Edg/140.0.0.0

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.

3

no messages appear on my screen. These are the tasks I’m failing:

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

  • Add a :first-of-type pseudo-class to the input elements to style the first input field differently.

4

can you answer these too?