mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
fix(curriculum): specific assert methods now used in registration form workshop (#59890)
This commit is contained in:
+1
-1
@@ -9,7 +9,7 @@ dashedName: step-11
|
||||
|
||||
In the previous lecture videos, you learned how to work with `rem` units. Remember that `rem` unit stands for root `em`, and is relative to the font size of the `html` element.
|
||||
|
||||
As `label` elements are inline by default, they are all displayed side by side on the same line, making their text hard to read.
|
||||
As `label` elements are inline by default, they are all displayed side by side on the same line, making their text hard to read.
|
||||
|
||||
To make them appear on separate lines, add `display: block` to the `label` element, and add a `margin` of `0.5rem 0`, to separate them from each other.
|
||||
|
||||
|
||||
+2
-2
@@ -10,8 +10,8 @@ dashedName: step-21
|
||||
Within each corresponding `label` element, and immediately after the `input` element, add a space and add the following text:
|
||||
|
||||
```md
|
||||
Personal
|
||||
Business
|
||||
Personal
|
||||
Business
|
||||
```
|
||||
|
||||
# --hints--
|
||||
|
||||
+2
-2
@@ -21,13 +21,13 @@ You should add `I accept the terms and conditions` text to the `label` following
|
||||
assert.equal(document.querySelector('fieldset:nth-child(3) + label')?.innerText.trim(), 'I accept the terms and conditions');
|
||||
```
|
||||
|
||||
You should use an `a` element to link to the terms and conditions.
|
||||
You should use an `a` element to link to the terms and conditions.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) + label a'));
|
||||
```
|
||||
|
||||
You should put the new text immediately after the `input` element in the `label`.
|
||||
You should put the new text immediately after the `input` element in the `label`.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('fieldset:nth-child(3) + label > input + a'));
|
||||
|
||||
+2
-2
@@ -16,13 +16,13 @@ Start, by giving the `input` elements in the second `fieldset` a class of `inlin
|
||||
You should give the first `input` a class of `inline`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[0]?.classList?.contains('inline'));
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-child(2) input')?.[0]?.classList?.contains('inline'));
|
||||
```
|
||||
|
||||
You should give the second `input` a class of `inline`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[1]?.classList?.contains('inline'));
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-child(2) input')?.[1]?.classList?.contains('inline'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
+2
-2
@@ -7,7 +7,7 @@ dashedName: step-59
|
||||
|
||||
# --description--
|
||||
|
||||
Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML.
|
||||
Make the `input` for the terms and conditions `inline` by adding the appropriate class in the HTML.
|
||||
|
||||
|
||||
# --hints--
|
||||
@@ -15,7 +15,7 @@ Make the `input` for the terms and conditions `inline` by adding the appropriate
|
||||
You should give the `input` a class of `inline`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
|
||||
assert.isTrue(document.querySelector('fieldset:nth-child(3) + label > input')?.classList?.contains('inline'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
+2
-2
@@ -15,7 +15,7 @@ In the previous lecture videos, you learned how to work with the `last-of-type`
|
||||
p:last-of-type { }
|
||||
```
|
||||
|
||||
That will select the last `p` element.
|
||||
That will select the last `p` element.
|
||||
|
||||
Create a new selector that targets the last `fieldset` element and set its `border-bottom` to `none`.
|
||||
|
||||
@@ -31,7 +31,7 @@ Your `fieldset:last-of-type` should have `border-bottom` set as `none`.
|
||||
|
||||
```js
|
||||
const borderBottom = new __helpers.CSSHelp(document).getStyle('fieldset:last-of-type')?.borderBottom;
|
||||
assert(borderBottom === 'none' || borderBottom === 'medium none' || borderBottom === 'medium');
|
||||
assert.oneOf(borderBottom, ['none', 'medium none', 'medium']);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
+8
-8
@@ -16,49 +16,49 @@ Use `first-name`, `last-name`, `email`, and `new-password` as values for the res
|
||||
The first `input` element should have an `id` of `first-name`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('input')?.[0]?.matches('#first-name'))
|
||||
assert.isTrue(document.querySelectorAll('input')?.[0]?.matches('#first-name'))
|
||||
```
|
||||
|
||||
The second `input` element should have an `id` of `last-name`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('input')?.[1]?.matches('#last-name'))
|
||||
assert.isTrue(document.querySelectorAll('input')?.[1]?.matches('#last-name'))
|
||||
```
|
||||
|
||||
The third `input` element should have an `id` of `email`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('input')?.[2]?.matches('#email'))
|
||||
assert.isTrue(document.querySelectorAll('input')?.[2]?.matches('#email'))
|
||||
```
|
||||
|
||||
The fourth `input` element should have an `id` of `new-password`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('input')?.[3]?.matches('#new-password'))
|
||||
assert.isTrue(document.querySelectorAll('input')?.[3]?.matches('#new-password'))
|
||||
```
|
||||
|
||||
The first `label` element should have a `for` attribute with a value of `first-name`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('label')?.[0]?.matches('label[for="first-name"]'))
|
||||
assert.isTrue(document.querySelectorAll('label')?.[0]?.matches('label[for="first-name"]'))
|
||||
```
|
||||
|
||||
The second `label` element should have a `for` attribute with a value of `last-name`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('label')?.[1]?.matches('label[for="last-name"]'))
|
||||
assert.isTrue(document.querySelectorAll('label')?.[1]?.matches('label[for="last-name"]'))
|
||||
```
|
||||
|
||||
The third `label` element should have a `for` attribute with a value of `email`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('label')?.[2]?.matches('label[for="email"]'))
|
||||
assert.isTrue(document.querySelectorAll('label')?.[2]?.matches('label[for="email"]'))
|
||||
```
|
||||
|
||||
The fourth `label` element should have a `for` attribute with a value of `new-password`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('label')?.[3]?.matches('label[for="new-password"]'))
|
||||
assert.isTrue(document.querySelectorAll('label')?.[3]?.matches('label[for="new-password"]'))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
+2
-2
@@ -42,13 +42,13 @@ assert.equal(document.querySelector('fieldset:nth-child(3) + label > input')?.re
|
||||
The `input` element should have an `id` of `terms-and-conditions`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('fieldset:nth-child(3) + label > input')?.matches('#terms-and-conditions'))
|
||||
assert.isTrue(document.querySelector('fieldset:nth-child(3) + label > input')?.matches('#terms-and-conditions'))
|
||||
```
|
||||
|
||||
The `label` element should have a `for` attribute with a value of `terms-and-conditions`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('fieldset:nth-child(3) + label')?.matches('label[for="terms-and-conditions"]'))
|
||||
assert.isTrue(document.querySelector('fieldset:nth-child(3) + label')?.matches('label[for="terms-and-conditions"]'))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
+8
-8
@@ -16,49 +16,49 @@ Use `profile-picture`, `age`, `referrer`, and `bio` as values for the respective
|
||||
The first `input` element should have an `id` of `profile-picture`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-of-type(3) input')?.[0]?.matches('#profile-picture'))
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-of-type(3) input')?.[0]?.matches('#profile-picture'))
|
||||
```
|
||||
|
||||
The second `input` element should have an `id` of `age`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-of-type(3) input')?.[1]?.matches('#age'))
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-of-type(3) input')?.[1]?.matches('#age'))
|
||||
```
|
||||
|
||||
The `select` element should have an `id` of `referrer`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('fieldset:nth-of-type(3) select')?.matches('#referrer'))
|
||||
assert.isTrue(document.querySelector('fieldset:nth-of-type(3) select')?.matches('#referrer'))
|
||||
```
|
||||
|
||||
The `textarea` element should have an `id` of `bio`.
|
||||
|
||||
```js
|
||||
assert(document.querySelector('fieldset:nth-of-type(3) textarea')?.matches('#bio'))
|
||||
assert.isTrue(document.querySelector('fieldset:nth-of-type(3) textarea')?.matches('#bio'))
|
||||
```
|
||||
|
||||
The first `label` element should have a `for` attribute with a value of `profile-picture`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[0]?.matches('label[for="profile-picture"]'))
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[0]?.matches('label[for="profile-picture"]'))
|
||||
```
|
||||
|
||||
The second `label` element should have a `for` attribute with a value of `age`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[1]?.matches('label[for="age"]'))
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[1]?.matches('label[for="age"]'))
|
||||
```
|
||||
|
||||
The third `label` element should have a `for` attribute with a value of `referrer`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[2]?.matches('label[for="referrer"]'))
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[2]?.matches('label[for="referrer"]'))
|
||||
```
|
||||
|
||||
The fourth `label` element should have a `for` attribute with a value of `bio`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[3]?.matches('label[for="bio"]'))
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[3]?.matches('label[for="bio"]'))
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
+4
-4
@@ -16,25 +16,25 @@ Use `personal-account`, and `business-account` as values for the respective `id`
|
||||
The first `input` element should have an `id` of `personal-account`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[0]?.matches('#personal-account'))
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[0]?.matches('#personal-account'))
|
||||
```
|
||||
|
||||
The second `input` element should have an `id` of `business-account`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[1]?.matches('#business-account'))
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[1]?.matches('#business-account'))
|
||||
```
|
||||
|
||||
The first `label` element should have a `for` attribute with a value of `personal-account`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[0]?.matches('label[for="personal-account"]'))
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[0]?.matches('label[for="personal-account"]'))
|
||||
```
|
||||
|
||||
The second `label` element should have a `for` attribute with a value of `business-account`.
|
||||
|
||||
```js
|
||||
assert(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[1]?.matches('label[for="business-account"]'))
|
||||
assert.isTrue(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[1]?.matches('label[for="business-account"]'))
|
||||
```
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user