fix(curriculum): specific assert methods now used in registration form workshop (#59890)

This commit is contained in:
Clarence
2025-04-22 18:42:17 +01:00
committed by GitHub
parent 5a1cb8ee2a
commit 10d8fc6a82
10 changed files with 33 additions and 33 deletions
@@ -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.
@@ -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--
@@ -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'));
@@ -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--
@@ -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--
@@ -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--
@@ -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--
@@ -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--
@@ -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--
@@ -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"]'))
```