Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening: just can not pass # 15

I know I’m missing this and it will be a simple miss. # 15 is a dusey… Hours now, please I need help.

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">
        <h1>Job Application Form</h1>
        <form>
            <label for="name">Name</label>
            <input type="text" id="name">

            <label for="email">Email</label>
            <input type="email" id="email">

            <label for="position">Job Position</label>
            <select id="position">
                <option>Front-End Developer</option>
                <option>Full Stack Developer</option>
            </select>
            <fieldset class="radio-group">
                <legend>Availability</legend>
                <input type="radio" name="availability" id="full-time" value="full-time" checked>
                <label for="full-name">Full Time</label>
                
                <input type="radio" name="availability" id="part-time" value="part-time">
                <label for="part-time">Part Time</label>
                
            </fieldset>
            <textarea id="message">Message</textarea>
            <button type="submit">Submit</button>
        </form>
    </div>

</body>
</html>

/* file: styles.css */
body {
  font-family: arial, sans-serif;
  padding: 20px;
}
.container {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}
form {
  display: flex;
  flex-direction: column;
}

input:focus, textarea:focus {
  border-color: yellow;
  outline: none !important;
}
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 {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.radio-group input[type="radio"]:checked {
  border-color: green;
  background-color: green;
  box-shadow: inset 0 0 0 5px white;
}

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

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

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

double check your buttons - check in the preview, can you click on the label to select the radio button for both? are they both correctly associated?

3

Still confused, not seeing what wrong?

4

have you checked on the preview? did you try to click on both labels? did the button get selected?

5

On the preview i can click on one and color will change. then click on the other and it will be selected and colored. The original check is undone.

6

interesting, because if I click on “Part time” (on the words), the radio button is selected, but then when I click on “Full time”, the radio button is not selected. That means that the label is not linked to the radio button

are you clicking on the words?

7

on the circle to the left of part time or full time.

8

the circle (radio button) is not the label, the label is the text

if you click on the text (label) it happens what I described above. One of your labels is not associated with its radio button

9

I don’t understand, both radio buttons have a label exactly the same. how does one work and the other not?

10

yes did this and i follow you. but both of my label are linked.

11

if I click the circle beside the text it works. but not on the text “Full Time”. Looked at both label and don’t see the problem.

12

[quote=“mitchelhathcock, post:1, topic:743836”]

[/quote]Hi, Fellas .
You need to read again and again the lecture on Pseudo-classes and google a lot.
I was on this matter for 3 days , but Now isolve it.
it is so easy to solve it.
think a lot.

1 Like
13

one of them is not associated properly, look at the for attribute, does that match the id of the input?

1 Like
14

Omg… I was STUMPED on this for hours. Thank you so much… Gotta watch that speelangs. lol…