Build a Job Application Form - Step 18

HTML-CSS
1

Tell us what’s happening:

Can’t get past question 18, not entirely sure why or what I did wrong along the way

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 href="styles.css" rel="stylesheet">
    <title>Job Application Form</title>
</head>
<body>
    <h1>Looking to work with StoneSignal Studio?</h1>
    <div class="container">
        <form>
            <label>Name:<input type="text" id="name" required></label><br>
            <label>E-Mail:<input type="email" id="email" required></label><br>
            <label>Select Position Desired:<select id="position">
            <option>None</option>
            <option>UI/UX Designer</option>
            <option>Graphic Designer</option>
            <option>Tester</option>
        </select>
        <fieldset class="hard-stuff">
            <label for="comp">What type of compensation are you willing to work for? (Select all that apply):</label><br>
            <label><input type="checkbox">W-2</label>
            <label><input type="checkbox">Revenue Share Agreement</label>
            <label><input type="checkbox">Sweat-Equity</label>
            <label><input type="checkbox">Contract/1099</label>
        </fieldset>
        <label id="radio-group">Select Availability:</label>
        <fieldset class="radio-group">
            <label><input type="radio" name="availability"> Concerning(60+ hours a week)</label><br>
            <label><input type="radio" name="availability"> Full Time (35-60 hours a week)</label><br>
            <label><input type="radio" name="availability"> Part Time (15-35 hours a week)</label><br>
            <label><input type="radio" name="availability"> Needs a Hobby (less than 15 hours a week)</label>
        </fieldset>
        <label>Explain your expected contributions and returns:<textarea id="message" required></textarea></label><br>
        <button type="submit">Submit</button>
    </div>

</body>
</html>

/* file: styles.css */
h1{
  font-size: 1.5rem;
  text-align: center;
  border: 2px solid orange;
  background-color: darkgreen;
}
body{
  background-color: midnightblue;
  color: lightgray;
}
input:focus, textarea:focus{
  border-color: yellow;
}

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

button:hover{
  background-color: green;
}
.radio-group input[type="radio"]:checked {
  border: 2px solid black;
  background-color: darkgreen;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}
.radio-group input[type="radio"]:checked +label{
  color: brown;
}
input:first-of-type{
  color: blue;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

are you able to test in the preview and see if clicking on a radio button changes the text color of the associated label as they asked?
(if it is not working, what would you suspect is the issue?)

btw. did you learn how to use the Chrome browser dev tools in fCC? (I’m not sure if the new curriculum covers it or not, but it would help you to check into the issue)

1 Like
3

My first instinct is that I assigned the label incorrectly; clicking on a radio button doesn’t change the color of anything to what I coded it to change to, including the label.

I don’t remember learning that yet, but if it’s before this lesson then I should for sure go back and learn it again

4

do you mean that you think the html is incorrect or the selector in css is incorrect?
Is there a way to confirm your hunch (either way)?

Which line(s) of code in the CSS are supposed to change the label’s color when its radio button is checked?

And w.r.t. the html, if you’re unsure if it is correct, one way to double check it is to run it through an online html validator like this one:

(you can paste the html into it to get a report on any syntax errors found, if any)

5

if you click on the label, does the radio button get checked? if it does, then you assigned the labels correctly and the issue is with the css

1 Like