diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f803d5241e6a0433a523a1.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f803d5241e6a0433a523a1.md index 72fb515042e..f6de61ab09e 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f803d5241e6a0433a523a1.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f803d5241e6a0433a523a1.md @@ -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. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f8604682407e0d017bbf7f.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f8604682407e0d017bbf7f.md index 11bbf312976..7c8790c0fb6 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f8604682407e0d017bbf7f.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60f8604682407e0d017bbf7f.md @@ -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-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60fab8367d35de04e5cb7929.md index ec960f7bdf7..eb145b3f64f 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60fab8367d35de04e5cb7929.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60fab8367d35de04e5cb7929.md @@ -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')); diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60fadfa2b540b70dcfa8b771.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60fadfa2b540b70dcfa8b771.md index 9f9ff259b9a..b80156c36f9 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60fadfa2b540b70dcfa8b771.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60fadfa2b540b70dcfa8b771.md @@ -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-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60ffefd6479a3d084fb77cbc.md index 1988268832e..c713edd67c3 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60ffefd6479a3d084fb77cbc.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/60ffefd6479a3d084fb77cbc.md @@ -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-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62b30924c5e4ef0daba23b5e.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62b30924c5e4ef0daba23b5e.md index 61e1e896ad6..3c1b50860a8 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62b30924c5e4ef0daba23b5e.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62b30924c5e4ef0daba23b5e.md @@ -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-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff8b9dab5ac88e4d3d43a3.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff8b9dab5ac88e4d3d43a3.md index 463760a8b5e..d65d5495f25 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff8b9dab5ac88e4d3d43a3.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff8b9dab5ac88e4d3d43a3.md @@ -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-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff8e998d3e7eae14d6ae3b.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff8e998d3e7eae14d6ae3b.md index 21a80b4a25b..0338ebb15ad 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff8e998d3e7eae14d6ae3b.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff8e998d3e7eae14d6ae3b.md @@ -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-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff919a7b5612c0670923a5.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff919a7b5612c0670923a5.md index d085303e3ce..622d4993cca 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff919a7b5612c0670923a5.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/62ff919a7b5612c0670923a5.md @@ -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-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/65045fa2267ce52da6a73676.md b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/65045fa2267ce52da6a73676.md index 38689229366..146be6b94ad 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-registration-form/65045fa2267ce52da6a73676.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-registration-form/65045fa2267ce52da6a73676.md @@ -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"]')) ```