Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

In building a Job Application Form, step 17 is failing however, the text is changing color. I am not sure why it is not passing. I am using the .radio-group input[type=“radio”]:checked + label pseudo class. In the preview it is working fine but not the test portion of the lab.
Below is my code.

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>
<main>
        <h1>Web Accessibility Job Application Form</h1>
        <div class="container">
        <form>
        <label for="name">Full Name</label>
        <input type="text" id="name" name="name" placeholder="Full Name" required>
        <label for="email">Email Address</label>
        <input type="email" id="email" name="email" placeholder="johndoe@gmail.com" required>
        <label for="position">Position</label>
        <select id="position" name="position" required>
        <option value="">Select a position</option>
        <option value="tester">Accessibility Tester</option>
        <option value="frontend">Frontend Developer</option>
        <option value="strategist">Accessibility strategist</option>
        </select>
        <fieldset class="radio-group">
        <legend>Availability</legend>
    <input type="radio" name="availability" value="full-time" id="full-time" checked>
   <label for="full-time">Full Time</label>
    <input type="radio" name="availability" value="part-time" id="part-time">
    <label for="part-time">Part Time</label>
    <input type="radio" name="availability" value="freelance" id="freelance">
    <label for="freelance">Freelance</label>
        </fieldset>
        <label for="message">Why do you want to be part of the Web Accessibility Team?</label>
        <textarea id="message" name="message" minlength="50" maxlength="500" required></textarea>
        <br>
        <button type="submit">Submit Form</button>
        </form>
        </div>
        </main>
</body>
</html>


/* file: styles.css */
body {
            font-family: Arial, Helvetica, sans-serif;
            line-height: 1.6;
            background-color: white;
            margin: auto;
            padding: 2rem;
            color: black;
            }

            main {
            background-color: darkgray;
            max-width: 600px;
            margin: 0 auto;
            padding: 2rem;
            border-radius: 8px;
            position: relative;
            }

            h1 {
            text-align: center;
            margin-bottom: 1.6rem;
            font-size: 1.4rem;
            color: blue;
            }

            .container {
                width: 100%;
                position: relative;
                z-index: 0;
                background-color: white;
                padding-bottom: 2rem;
               /* overflow: visible;*/
            }

            label {
                display: block;
                margin: 1rem 0 0.3rem;
                color: black;
                font-weight: bold;
            }

            /* Inputs, Selects, Textareas */
            input[type="text"],
            input[type="email"],
            select,
            textarea {
            width: 100%;
            padding: 1rem;
            border: 2px solid lightgrey;
            font-size: 1rem;
            border-radius: 6px;
            box-sizing: border-box;
            transition: border-color 0.3s, box-shadow 0.3s;
            }

            input:first-of-type {
            background-color: white;
            }

            /* Specific ID styling */
            #message {
                background-color: white;
                color: black;
            height: 250px;
            border: 2px solid black;
            padding: 1.5rem;
            border-radius: 6px;
            margin-top: 1.5rem;
            resize: none;
            position: relative;
            z-index: 1;
            margin-bottom: 2rem;
                }
         

            #name {
            font-weight: bold;
            }

            #email {
            font-style: italic;
            }

            #position {
            background-color: white;
            }

            input:invalid,
            select:invalid,
            textarea:invalid {
            border-color: red;
            }
            input:valid,
            select:valid,
            textarea:valid {
            border-color: green;
            }
            button {
            margin-top: 1.5rem;
            padding: 0.75rem 1.5rem;
            background-color: navy;
            color: floralwhite;
            border: none;
            border-radius: 7px;
            font-size: 1.1rem;
            cursor: pointer;
            transition: background-color 0.3s ease;
            }
            button:hover {
            background-color: aqua;
            }
            /* Radio group styles */
            .radio-group {
            margin-top: 1.2rem;
            }
            .radio-group legend {
            font-weight: bold;
            margin-bottom: 0.8rem;
            }
            .radio-group label {
                display: inline-block;
            margin-right: 1rem;
            padding: 0.5rem;
            border-radius: 7px;
            transition: all 0.3s ease;
            color: black;
            cursor: pointer;
            }
            /* Radio button selected states */
            .radio-group input[type="radio"]:checked {
            border-color: lightcoral;
            background-color: navy;
            box-shadow: 0 0 5px grey;
            }
            /* Change label text color when radio selected */
        .radio-group input[type="radio"]:checked + label {
            color: red;
            }
            input:focus,textarea:focus {
                border-color: gold;
                }

##uild a Job Application Form

2

Did the instructions ask you to check one of the input radio elements?

3

if that is the issue, if you open a github issue we can update the tests to accept that I guess

4

I just checked to see if the code passed with that excluded and it did not. I’ll keep looking…

5

I took out the checked attribute from my HTML code of the “full-time” input, but that did not make it pass the test either.

6

Yes, I know. But I did finally figure out what the problem is…wasn’t easy. lol.

Please remove the following from your .radio-group label selector:

7

Thank you very much. I would not have thought of that at all. LOL It finally worked.