Build a Job Application Form - Build a Job Application Form

HTML-CSS
1

Tell us what’s happening:

Lots of tasks im failing at. Helppppppp pleaaseee!

  • Failed:11. You should add a :focus pseudo-class to the input and textarea elements to change their border color when focused. Use a list selector in the given order.

  • Failed:12. The input, select and textarea elements should have an :invalid pseudo-class that changes the border color to red when invalid input is detected. Use a list selector in the given order.

  • Failed:13. The input, select and textarea elements should have a :valid pseudo-class that changes the border color to green when valid input is entered. Use a list selector in the given order.

  • 15. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a border color when the radio button is selected.

  • Failed:16. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a background color when the radio button is selected.

<!-- 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 href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form>
     <label for="name">Name:</label>
    <input type="text" id="name">
    <label for="email">Email:</label>
    <input type="email" id="email">
    <select id="position">
        <option id="fulltime"> Fullt iem</option>
        <option id="parttime"> PAre time</option>
    </select>
    <fieldset class="radio-group" name="availability">
        <input type="radio" id="fulltime" name="availability">
        <label for="fulltime">Full time</label>
        <input type="radio" id="parttime" name="availability">
        <label for="parttime">Part time</label>
        <label for="message">Any last words?</label>
        <textarea id="message">message</textarea>
    </fieldset>
    <button type="submit">Submit</button>
</form>
</div>
</body>
</html>

/* file: styles.css */

:is(input, select, textarea):focus {
  outline: 2px solid red;
}

input:valid,
select:valid,
#message:valid {
  outline: 2px solid green;
}

button:hover {
  background-color: pink;
}

.radio-group input[type="radio"]:checked {
  outline: 2px solid magenta;
  box-shadow: 2px 2px 2px black;
  
}

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

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

input:focus,
textarea:focus {
  outline: solid 2px pink;
}

Your browser information:

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

Challenge Information:

Build a Job Application Form - Build a Job Application Form

2

Your code has three problems: you wrote some CSS rules twice, forgot to write the :invalid rule, and your HTML has duplicate IDs and the textarea is inside the radio group.

3

what about now? i rewrote it and still got some things wrong :

  • Failed:11. You should add a :focus pseudo-class to the input and textarea elements to change their border color when focused. Use a list selector in the given order.
  • Failed:12. The input, select and textarea elements should have an :invalid pseudo-class that changes the border color to red when invalid input is detected. Use a list selector in the given order.
  • Failed:13. The input, select and textarea elements should have a :valid pseudo-class that changes the border color to green when valid input is entered. Use a list selector in the given order.
  • Failed:15. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a border color when the radio button is selected.
  • Failed:16. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a background color when the radio button is selected.
<!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 href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <form>
        <label for="name">Name: </label>
        <input type="text" id="name">
        <label for="email">Email: </label>
        <input type="email" id="email">
        <select id="position">
            <option> </option>
            <option id="clerk" value="clerk">Clerk </option>
            <option id="manager" value="manager">Manager</option>
            <option id="admin" value="admin">Admin</option>
            </select>
            <fieldset class="radio-group">
            <legend>Availability</legend>
              <input type="radio" id="fulltime" value="fulltime"
name="availability"> 
               <label for="fulltime">Full-Time </label>
               <input
type="radio"
id="parttime"
value="parttime"
name="availability">
               <label for="parttime">Part-Time</label>
               <input
type="radio"
id="flexibletime"
value="flexibletime"
name="availability">
               <label for="flexibletime">Flexible-time</label>
            </fieldset>
                                 <textarea id="message">Any last words?</textarea>
            <button type="submit">Submit</button>
    </form>
</div>
</body>
</html>

input:focus,
textarea:focus {
  outline: 2px solid pink; 
}

input:invalid,
select:invalid,
textarea:invalid {
  outline: 2px solid red;
}

input:valid,
select:valid,
textarea:valid {
  outline: 2px solid green;
}

button:hover {
  background-color: pink;
}

.radio-group input[type="radio"]:checked {
  outline: 2px solid purple;
  accent-color: pink;
  box-shadow: 2px 2px 2px gray;
}

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

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

Try using border instead of outline, and make sure your selectors are written exactly as input, select, textarea for the :focus, :invalid, and :valid rules.

5

That helped solve some problems, but I still got 13, 15 & 16 wrong. One thing I noticed is that the :focus and the :valid cannot have the same attribute otherwise :valid supercedes :focus. I kept rechecking the css until input, select and textarea did not look like input, sleect and textarea.

  • Failed:13. The input, select and textarea elements should have a :valid pseudo-class that changes the border color to green when valid input is entered. Use a list selector in the given order.
  • Failed:15. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a border color when the radio button is selected.
  • Failed:16. You should use the :checked pseudo-class on .radio-group input[type="radio"] to add a background color when the radio button is selected
<!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 href="styles.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <form>
        <label for="name">Name: </label>
        <input type="text" id="name">
        <label for="email">Email: </label>
        <input type="email" id="email">
        <select id="position">
            <option> </option>
            <option id="clerk" value="clerk">Clerk </option>
            <option id="manager" value="manager">Manager</option>
            <option id="admin" value="admin">Admin</option>
            </select>
            <fieldset class="radio-group">
            <legend>Availability</legend>
              <input type="radio" id="fulltime" value="fulltime"
name="availability"> 
               <label for="fulltime">Full-Time </label>
               <input
type="radio"
id="parttime"
value="parttime"
name="availability">
               <label for="parttime">Part-Time</label>
               <input
type="radio"
id="flexibletime"
value="flexibletime"
name="availability">
               <label for="flexibletime">Flexible-time</label>
            </fieldset>
                                 <textarea id="message">Any last words?</textarea>
            <button type="submit">Submit</button>
    </form>
</div>
</body>
</html>

input:focus,
textarea:focus {
  border: 2px solid pink; 
}

input:invalid,
select:invalid,
textarea:invalid {
  border: 2px solid red;
}

input:valid,
select:valid,
textarea:valid {
  outline: 2px solid green;
}

button:hover {
  background-color: pink;
}

.radio-group input[type="radio"]:checked {
  outline: 2px solid purple;
  accent-color: pink;
  box-shadow: 2px 2px 2px gray;
}

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

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

nvm i tweaked it a bit and it worked i solved em all

the only problem is that while i passed all the tasks, it practically doesnt work. Like it doesnt work in the preview nor does it work when i load it up in my chrome from my local files. the radio buttons dissapear when i check em and my inputs dont go pink when in focus :person_shrugging:

input:focus,
textarea:focus {
  border: 2px solid pink; 
}

input:invalid,
select:invalid,
textarea:invalid {
  border: 2px solid red;
}

input:valid,
select:valid,
textarea:valid {
  border: 2px solid green;
}

button:hover {
  background-color: pink;
}

.radio-group input[type="radio"]:checked {
  border: 2px solid purple;
  background-color: pink;
  box-shadow: 2px 2px 2px gray;
}

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

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

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.