mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-03-04 08:05:48 -05:00
chore(curriculum): test input and label are linked (#60909)
This commit is contained in:
@@ -20,6 +20,7 @@ demoType: onClick
|
||||
1. You should have a `fieldset` element with class of `radio-group`.
|
||||
1. Inside `.radio-group` you should have a set of `input` elements with the type `radio` and relevant labels for selecting availability options (e.g., Full-Time, Part-Time). The group `name` should be `availability`.
|
||||
1. You should have a `textarea` element with the id `message` for entering a message.
|
||||
1. You should associate every `input` element with a `label` element.
|
||||
1. You should have a `button` element with the type `submit` for submitting the form.
|
||||
1. Add a `:focus` pseudo-class to the `input` and `textarea` elements to change their border color when focused.
|
||||
1. The `input`, `select` and `textarea` elements should have an `:invalid` pseudo-class that changes the border color to red when invalid input is detected.
|
||||
@@ -83,6 +84,18 @@ You should have a `textarea` element with the id `message` for entering a messag
|
||||
assert.isNotEmpty(document.querySelectorAll("div.container > form textarea#message"));
|
||||
```
|
||||
|
||||
You should associate every `input` element with a `label` element.
|
||||
|
||||
```js
|
||||
const els = document.querySelectorAll('input');
|
||||
assert.isNotEmpty(els);
|
||||
els.forEach(input => {
|
||||
const label = document.querySelector(`label[for="${input.id}"]`) || input.parentElement;
|
||||
assert.exists(label);
|
||||
assert.equal(label.tagName, "LABEL");
|
||||
})
|
||||
```
|
||||
|
||||
You should have a `button` element with the type `submit` for submitting the form.
|
||||
|
||||
```js
|
||||
|
||||
Reference in New Issue
Block a user