Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Okay guys, for the life of me I cannot get Test (grading) part 18 to work. I have tried so many options I honestly am just lost at where I am with my code, what I have done, not done, or already tried numerous times. How do I get test 18 to work? What am I missing with my HTML or CSS?

Part 18 of the testing section***

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>
    <div class="container">
        <form>
            <label for="name">Enter your full name:</label>
            <input type="text" id="name" name="name">

            <label for="email">Enter your email:</label>
            <input type="email" id="email" name="email">


            <label for="position">Select a Job Position:</label>
            <select id="position" name="position">
                <option value="cyber-analyst">Cyber Analyst</option>
                <option value="hr">HR</option>
            </select>


            <fieldset class="radio-group">
                <legend>Availability</legend>

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

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


            <label for="message">Enter your message:</label>
            <textarea id="message" name="message"></textarea>
            <!-- part 10 button -->
            <button type="submit">Submit</button>
        </form>
    </div>
</body>
</html>

/* file: styles.css */
input:focus,
textarea:focus {
  border-color: red;
}

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

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

button:hover {
  background-color: red;
}

.radio-group input[type="radio"]:checked {
  border-color: green;
  background-color: brown;
  box-shadow: 10px 10px 10px black;
}


input:first-of-type {
  border-radius: 8px; 
}

// this is the area I am trying to finish part 18 of grading
.radio-group input[type="radio"]:checked {
  color: yellow;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.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

To start with, why do you have duplicated ruleset?

3

In your HTML, you have nested the radio input element inside its label element. I suggest changing that to make it easier to style the label when the radio button is checked. Try putting the radio input first then the label element after it. Once you’ve made that change, you can refer to this reference to style that label when the radio button is checked:

1 Like
4

I tried it this way as well

.radio-group input[type="radio"]:checked {
  color:yellow
  border-color: green;
  background-color: brown;
  box-shadow: 10px 10px 10px black;
}

and nothing happened so I figured I may need to do it separately. Like I said I am about three hours deep into this last testing piece, I cannot recall the sheer amount of ways I have tried to get this to work so I am sure there has been some overlap at this point at duplicating.

5

It is done nested because that is the only way I could get test mark number 9 to check as good. Also reading forms online showed it done this way, so I followed based on my research.

6

Test #9 is about associating label elements to their input elements. You have done that. There is no reason Test #9 should not pass by simply rearranging your HTML, unless you borked something else in the process. :slight_smile:

7

Not sure, still learning. But yeah, still sitting here messing with it and cannot get number 18 to pass.

8

that is not selecting the label, you need to change the text color of the label

9

Okay so here is what a working answers looks like for people in the future:
– removed –

10

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

Thanks.