Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Need help checking this code since, no matter what I do, this test parser is failing the “nth-child” requirement. I’ve tried everything I can think of and every workaround to test if it passes this requirement. I have even reduced my HTML to just one input and targeted that input with an nth-child selector, and the step still fails. It’s important to note that, while the test fails me, the requested input fields are getting styled correctly, so I’m not sure this is on my end.

Your code so far

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hunter Application Form</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <div class="container">
    <h1>Join the Hunt!</h1>
    <p>Welcome to the Monster Hunter community! Please fill out the form below to apply for a hunting party.</p>
    <form>
      <label for="name">Hunter Name</label>
      <input type="text" id="name" required />

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

      <p>Please select your weapon type</p>
      <select id="position" required>
        <option value="">Select one</option>
        <option value="longsword">Longsword</option>
        <option value="greatsword">Greatsword</option>
        <option value="gunlance">Gunlance</option>
        <option value="switchaxe">Switchaxe</option>
        <option value="insect-glaive">Insect Glaive</option>
        <option value="hunting-horn">Hunting Horn</option>
        <option value="lance">Lance</option>
        <option value="charge-blade">Charge Blade</option>
        <option value="dual-blades">Dual Blades</option>
        <option value="hammer">Hammer</option>
        <option value="sword-and-shield">Sword and Shield</option>
        <option value="light-bowgun">Light Bowgun</option>
        <option value="heavy-bowgun">Heavy Bowgun</option>
        <option value="bow">Bow</option>
      </select>

      <fieldset class="radio-group" required>
        <legend>Choose Your Availability</legend>
        <input type="radio" id="weekdays" name="availability" value="weekdays" required /><label for="weekdays">Weekdays</label>
        <input type="radio" id="weekends" name="availability" value="weekends" required /><label for="weekends">Weekends</label>
        <input type="radio" id="both" name="availability" value="both" required /><label for="both">Both</label>
      </fieldset>

      <label for="message">Why do you want to hunt with us?</label>
      <textarea id="message" maxlength="500" required></textarea>

      <button type="submit">Post Quest</button>
    </form>
  </div>
</body>
</html>



body {
  font-family: Arial, sans-serif;
  background-color: #797575;
  color: #333;
  margin: 0;
  padding: 20px;
}

.container {
  max-width: 600px;
  margin: auto;
  padding: 20px;
  background-color: antiquewhite;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
  display: flex;
  flex-direction: column;
}

input,
select,
textarea {
  margin-bottom: 15px;
  padding: 10px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}


input:focus,
textarea:focus {
  border-color: #007BFF;
  outline: none;
}


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


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


button[type="submit"]:hover {
  background-color: #0056b3;
}


.radio-group input[type="radio"]:checked {
  border: 2px solid #007BFF;
  background-color: #e0f0ff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}


.radio-group input[type="radio"]:checked + label {
  color: #007BFF;
  font-weight: bold;
}


input:nth-child(3) {
  border-radius: 10px;
  background-color: #eef7ff;
}

input:nth-child(7) {
  border-radius: 10px;
  background-color: #eef7ff;
}


button[type="submit"] {
  padding: 10px;
  font-size: 16px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: darkblue;
}


.radio-group label {
  margin-right: 15px;
}

input:nth-child(1n) {
  border: 1px solid transparent; /* no visual change, but satisfies parser */
}

input:nth-child(2),
input:nth-child(5) {
  border-radius: 10px;
  background-color: #eef7ff;
}

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

You have an error or typo here:

3

That was a workaround suggested by GPT, as you can probably glean from the comment. It does nothing, but it was to try and brute force the parser, since I couldn’t think of anything else. Regardless, removing it doesn’t change anything.

4

I fixed the typo and it passed the test.

Which element are you targeting here?

5

My understanding is that this selector essentially acts as
input { ... }

Except it’s done using nth-child selector as the task requires. It’s an attempt to brute force it by making it target all the inputs it can find within that parent. the 1n selector starts with the first, and then targets every input, but using the nth-child selector.

May I ask what you did to fix it?

6

Add an :nth-child pseudo-class to the input elements to style the first input fields differently. (e.g., rounded corners).

So you were trying to target ALL inputs? The step only seems to ask for the 1st?

Actually I wasn’t aware of the (an + b) syntax, I thought it was just a stray n

You also seem to have many attempts all in your CSS:

input:nth-child(3) {
  border-radius: 10px;
  background-color: #eef7ff;
}

input:nth-child(7) {
  border-radius: 10px;
  background-color: #eef7ff;
}

input:nth-child(1) {
  border: 1px solid transparent; /* no visual change, but satisfies parser */
}

input:nth-child(2),
input:nth-child(5) {
  border-radius: 10px;
  background-color: #eef7ff;
}

Are all of these attempts to implement this instruction? You should remove them and just try one at a time.

7

Well, to be honest, I also thought it was the first. But it didn’t work with anything I tried, despite the input field being styled correctly. Then I fell into the rabbit hole of semantics, since it said “… to the input elementS…” in plural. So I then tried to target everything I could. Even in the feedback when the parser failed it says:

“16. Add an :nth-child pseudo-class to the input elements to style the first input fields differently.”

Implying I should target more than one field, especially since I started with styling only the name field and the parser still failed me. Per your suggestion I have removed all other CSS attempts and left only:

input:nth-child(2) {
  border-radius: 10px;
  background-color: #eef7ff;
}

image
image575×637 13.6 KB

As you can see from the screenshot, the name field is getting styled correctly, but the parser is still failing this step. On top of that, moving things around it also started failing step 15:

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

Despite that in the screenshot, you can clearly see the label of the radio buttons changing in color to highlight their selected status. This is the CSS I used for that

.radio-group input[type="radio"]:checked + label {
  color: #007BFF;
}
8

If it helps, when I get stuck with these things, one of the last resorts is trying the code in another window using incognito mode, and it’s worked every time. I tried it just now and the step 15 passes, unlike with the regular browser window, but step 16 is frustratingly failing still.

9

I have solved it! Sort of… This is definitely a bug with the parser since the solution was to use:

input:nth-child(1) {
  border-radius: 10px;
  background-color: #eef7ff;
}

Despite this not doing anything visually in my project, it seems the parser expects to target (1) with this selector and nothing else. I tried this as a longshot solution from another forum post here that was failing on another step. Since they weren’t getting errors on step 16, I decided to try using the selector with (1) like they had done and it worked. As I said, this does nothing visually, and all my text input fields are with the default squared corners.

10

Do you understand what this will target?

And how it relates to this instruction?

Add an :nth-child pseudo-class to the input elements to style the first input fields differently. (e.g., rounded corners).

And why it doesn’t do anything visually?

11

My understanding is that input:nth-child(1) will target the input element if it’s the first child of its parent, which in this case would be the form element. But since the first child is the label element, the CSS rules didn’t apply any styles since there was technically no target. This is why, visually, nothing changed. However, when I did target the right element using input:nth-child(2) and the styles were applying correctly, the parser failed my task.

All’s well that ends well imo. Thanks for your input!

12

Thank you for helping make FCC better. Bugs can be reported as GitHub Issues. Whenever reporting a bug, please check first that there isn’t already an issue for it and provide as much detail as possible.

1 Like