From dea4b43584b3c88bd5863a6c1813dbf99bccfc93 Mon Sep 17 00:00:00 2001 From: Anna Date: Thu, 21 Nov 2024 00:45:15 -0500 Subject: [PATCH] chore(curriculum): update lab orbit and earlier asserts (#57194) Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com> --- .../66def5467aee701733aaf8cc.md | 4 +- .../66f26c32ec6f90df01a44f60.md | 4 +- .../66e45c8140f9fda5c105ae26.md | 6 +- .../lab-event-hub/66ebd4ae2812430bb883c787.md | 4 +- .../66bf6bacf178eac7b96d4f5e.md | 6 +- .../66c06d618d075c7f7f1b890a.md | 2 +- .../66c06fad3475cd92421b9ac2.md | 2 +- .../66db57ad34c7089b9b41bfd6.md | 8 +- .../66a37f37ef5823a313de8c26.md | 76 ++++++++++--------- 9 files changed, 59 insertions(+), 53 deletions(-) diff --git a/curriculum/challenges/english/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md b/curriculum/challenges/english/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md index daf5ab0a9bc..c9ada8aca75 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md +++ b/curriculum/challenges/english/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md @@ -245,9 +245,9 @@ try { const bookmarkAnchorsDisplayed = document.querySelectorAll('#category-list label>a'); assert.lengthOf(bookmarkAnchorsDisplayed, 2); assert.strictEqual(bookmarkAnchorsDisplayed[0].innerText, "example1"); - assert(bookmarkAnchorsDisplayed[0].href.endsWith("example1.com")); + assert.isTrue(bookmarkAnchorsDisplayed[0].href.endsWith("example1.com")); assert.strictEqual(bookmarkAnchorsDisplayed[1].innerText, "example4"); - assert(bookmarkAnchorsDisplayed[1].href.endsWith("example4.com")); + assert.isTrue(bookmarkAnchorsDisplayed[1].href.endsWith("example4.com")); } finally { resetLocalStorage(); } diff --git a/curriculum/challenges/english/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md b/curriculum/challenges/english/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md index 4aae6dac09e..da408120f9d 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md +++ b/curriculum/challenges/english/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md @@ -81,8 +81,8 @@ Your `type=text` input field should have an `id`, a `name`, and a `required` att ```js const el = document.querySelector('.form-container form input[type="text"]'); - -assert(!!el && el.required); +assert.exists(el); +assert.isTrue(el.required); assert.isNotEmpty(el?.getAttribute('id')); assert.isNotEmpty(el?.getAttribute('name')); ``` diff --git a/curriculum/challenges/english/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md b/curriculum/challenges/english/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md index 3d9eae65a81..f063714b41c 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md +++ b/curriculum/challenges/english/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md @@ -114,7 +114,7 @@ assert.equal(body?.marginLeft, 'auto'); Your `body` element should set its width using `vw`. ```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.width?.endsWith('vw')); +assert.isTrue(new __helpers.CSSHelp(document).getStyle('body')?.width?.endsWith('vw')); ``` Your `body` should use `calc` to set its `min-height` to `100vh - 100px`. @@ -132,13 +132,13 @@ assert.isAtLeast(document.querySelectorAll('hr')?.length, 1); The width of your `hr` elements should be set using a percent value. ```js -assert(new __helpers.CSSHelp(document).getStyle('hr')?.width.endsWith('%')); +assert.isTrue(new __helpers.CSSHelp(document).getStyle('hr')?.width.endsWith('%')); ``` The width of your `section` elements should be set using a percent value. ```js -assert(new __helpers.CSSHelp(document).getStyle('section')?.width.endsWith('%')); +assert.isTrue(new __helpers.CSSHelp(document).getStyle('section')?.width.endsWith('%')); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md b/curriculum/challenges/english/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md index d4a67e543e0..837d75a0986 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md +++ b/curriculum/challenges/english/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md @@ -215,7 +215,7 @@ const imgElements = document.querySelectorAll('#past-events article img'); assert.strictEqual(imgElements.length, 2); for (let img of imgElements) { - assert(img.getAttribute("src")); + assert.exists(img.getAttribute("src")); } ``` @@ -226,7 +226,7 @@ const imgElements = document.querySelectorAll('#past-events article img'); assert.strictEqual(imgElements.length, 2); for (let img of imgElements) { - assert(img.getAttribute("alt")); + assert.exists(img.getAttribute("alt")); } ``` diff --git a/curriculum/challenges/english/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md b/curriculum/challenges/english/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md index e41205fee7b..212b0f31f3c 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md +++ b/curriculum/challenges/english/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md @@ -58,7 +58,7 @@ Initially, the `span` elements should contain the code `♡` to represent an ```js const inputs = document.querySelectorAll('ul li span.favorite-icon'); -assert(inputs.length) +assert.isNotEmpty(inputs) for (let input of inputs) { assert.strictEqual(input.innerHTML.charCodeAt(0), 9825); @@ -69,7 +69,7 @@ When the `span` element is clicked, and it contains the class `filled`, you shou ```js const spanElements = document.querySelectorAll('.favorite-icon'); -assert(spanElements.length); +assert.isNotEmpty(spanElements); spanElements.forEach(span => span.classList.add('filled')); @@ -85,7 +85,7 @@ When the `span` element is clicked, and it doesn't contain the class `filled`, y ```js const spanElements = document.querySelectorAll('.favorite-icon'); -assert(spanElements.length); +assert.isNotEmpty(spanElements); spanElements.forEach(span => span.classList.remove('filled')); diff --git a/curriculum/challenges/english/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md b/curriculum/challenges/english/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md index f55c01671d9..ab7859f04d1 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md +++ b/curriculum/challenges/english/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md @@ -98,7 +98,7 @@ const condition3 = randomNumber === 3 && selectedFortune === fortune3; const condition4 = randomNumber === 4 && selectedFortune === fortune4; const condition5 = randomNumber === 5 && selectedFortune === fortune5; -assert(condition1 || condition2 || condition3 || condition4 || condition5); +assert.isTrue(condition1 || condition2 || condition3 || condition4 || condition5); ``` You should output the `selectedFortune` to the console. diff --git a/curriculum/challenges/english/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md b/curriculum/challenges/english/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md index ad4ad3aea69..716a826599d 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md +++ b/curriculum/challenges/english/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md @@ -31,7 +31,7 @@ Fulfill the user stories below and get all the tests to pass to complete the lab You should define a function named `isLeapYear`. ```js -assert(typeof isLeapYear === 'function'); +assert.isFunction(isLeapYear); ``` The `isLeapYear` function should take a number as an argument. diff --git a/curriculum/challenges/english/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md b/curriculum/challenges/english/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md index 1a5a5b25f92..43680fdb946 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md +++ b/curriculum/challenges/english/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md @@ -65,7 +65,7 @@ for (let image of images) { } } -assert(srcCount === 1); +assert.strictEqual(srcCount, 1); ``` Within the `.gallery` `div`, you should an image element with the `src` set to `https://cdn.freecodecamp.org/curriculum/labs/storm-thumbnail.jpg`. @@ -81,7 +81,7 @@ for (let image of images) { } } -assert(srcCount === 1); +assert.strictEqual(srcCount, 1); ``` Within the `.gallery` `div`, you should an image element with the `src` set to `https://cdn.freecodecamp.org/curriculum/labs/trees-thumbnail.jpg`. @@ -97,7 +97,7 @@ for (let image of images) { } } -assert(srcCount === 1); +assert.strictEqual(srcCount, 1); ``` You should have a `div` element with the class of `lightbox` inside your `body` element. @@ -142,7 +142,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.lightbox')?.left, '0px') Your `.lightbox` element should have a background color. ```js -assert(new __helpers.CSSHelp(document).getStyle('.lightbox')?.backgroundColor); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.lightbox')?.backgroundColor); ``` Your `.lightbox` element should be hidden initially. diff --git a/curriculum/challenges/english/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md b/curriculum/challenges/english/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md index 0098a7858cc..ed947fd50bf 100644 --- a/curriculum/challenges/english/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md +++ b/curriculum/challenges/english/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md @@ -50,19 +50,23 @@ The contents of the `body` element should be centered on the page by setting the ```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.height === '100vh' && new __helpers.CSSHelp(document).getStyle('body')?.display === 'flex' && new __helpers.CSSHelp(document).getStyle('body')?.justifyContent === 'center'&& new __helpers.CSSHelp(document).getStyle('body')?.alignItems === 'center'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh') +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('body')?.display, 'flex'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('body')?.justifyContent, 'center'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('body')?.alignItems, 'center'); ``` You should have a main `div` with the class `space`. ```js -assert(document.querySelector('div')?.getAttribute('class') === 'space'); +assert.strictEqual(document.querySelector('div')?.getAttribute('class'), 'space'); ``` The `space` `div` should have a width and height of `200px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.space')?.width === '200px' && new __helpers.CSSHelp(document).getStyle('.space')?.height === '200px'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.width, '200px') +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.space')?.height, '200px'); ``` You should have a `div` with the class `earth` inside the `.space` `div`. @@ -74,34 +78,36 @@ assert.exists(document.querySelector('div.space div.earth')); The `earth` div should be the first child of the `space` `div`. ```js -assert(document.querySelector('.space > div')?.getAttribute('class') === 'earth'); +assert.strictEqual(document.querySelector('.space > div')?.getAttribute('class'), 'earth'); ``` The `earth` `div` should have a width and height of `100px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.earth')?.width === '100px' && new __helpers.CSSHelp(document).getStyle('.earth')?.height === '100px'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.earth')?.width, '100px'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.earth')?.height, '100px'); ``` The `earth` `div` should use `absolute` positioning. ```js -assert(new __helpers.CSSHelp(document).getStyle('.earth')?.position === 'absolute'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.earth')?.position, 'absolute'); ``` The `earth` `div` should have a `top` and `left` position of `50%`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.earth')?.top === '50%' && new __helpers.CSSHelp(document).getStyle('.earth')?.left === '50%'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.earth')?.top, '50%') +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.earth')?.left, '50%'); ``` The `earth` `div` should be moved back and up by `50%` by setting the `transform` property to `translate(-50%, -50%)`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.earth')?.transform === 'translate(-50%, -50%)'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.earth')?.transform, 'translate(-50%, -50%)'); ``` You should have a `div` with the class `orbit` inside the `.space` `div`. @@ -113,25 +119,26 @@ assert.exists(document.querySelector('div.space div.orbit')); The `orbit` class `div` should come after the `earth` class `div`. ```js -assert(document.querySelector('.earth')?.nextElementSibling?.classList?.contains('orbit')); +assert.isTrue(document.querySelector('.earth')?.nextElementSibling?.classList?.contains('orbit')); ``` The `orbit` `div` should have a width and height of `200px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.orbit')?.width === '200px' && new __helpers.CSSHelp(document).getStyle('.orbit')?.height === '200px'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.orbit')?.width, '200px') +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.orbit')?.height, '200px'); ``` The `orbit` `div` should use `absolute` positioning. ```js -assert(new __helpers.CSSHelp(document).getStyle('.orbit')?.position === 'absolute'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.orbit')?.position, 'absolute'); ``` The `orbit` `div` should be positioned at the center of the `space` `div` using a `transform` property that shifts it by `-50%` on both the vertical and horizontal axes. ```js -assert(new __helpers.CSSHelp(document).getStyle('.orbit')?.transform === 'translate(-50%, -50%)'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.orbit')?.transform, 'translate(-50%, -50%)'); ``` You should have a `div` with the class `moon` inside the `.orbit` `div`. @@ -143,99 +150,100 @@ assert.exists(document.querySelector('div.space div.orbit div.moon')); The `moon` `div` should have a width and height of `30px`. ```js -assert(new __helpers.CSSHelp(document).getStyle('.moon')?.width === '30px' && new __helpers.CSSHelp(document).getStyle('.moon')?.height === '30px'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.moon')?.width, '30px') +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.moon')?.height, '30px'); ``` The `moon` `div` should be positioned using `absolute` positioning. ```js -assert(new __helpers.CSSHelp(document).getStyle('.moon')?.position === 'absolute'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.moon')?.position, 'absolute'); ``` The top edge of the `.moon` element should be aligned with the top edge of its containing block. ```js -assert(new __helpers.CSSHelp(document).getStyle('.moon')?.top === '0px'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.moon')?.top, '0px'); ``` You should move the left edge of the `.moon` element to the center of the containing block (`50%` from the left side). ```js -assert(new __helpers.CSSHelp(document).getStyle('.moon')?.left === '50%'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.moon')?.left, '50%'); ``` The `.moon` `div` should be adjusted horizontally by translating it to `-50%` across the x-axis. ```js -assert(new __helpers.CSSHelp(document).getStyle('.moon')?.transform === 'translateX(-50%)'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.moon')?.transform, 'translateX(-50%)'); ``` Your `.earth` `div` element should have a background color. ```js -assert(new __helpers.CSSHelp(document).getStyle('.earth')?.backgroundColor); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.earth')?.backgroundColor); ``` Your `.earth` element should have `border-radius` of `50%` to make it look like a circle. ```js -assert(new __helpers.CSSHelp(document).getStyle('.earth')?.borderRadius === '50%'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.earth')?.borderRadius, '50%'); ``` Your `.moon` `div` element should have a background color. ```js -assert(new __helpers.CSSHelp(document).getStyle('.moon')?.backgroundColor); +assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.moon')?.backgroundColor); ``` Your `.moon` element should have `border-radius` of `50%` to make it look like a circle. ```js -assert(new __helpers.CSSHelp(document).getStyle('.moon')?.borderRadius === '50%'); +assert.strictEqual(new __helpers.CSSHelp(document).getStyle('.moon')?.borderRadius, '50%'); ``` You should have a `@keyframes` rule. ```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1); +assert.lengthOf(new __helpers.CSSHelp(document).getCSSRules('keyframes'), 1); ``` Your new `@keyframes` rule should be named `orbit`. ```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'orbit'); +assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'orbit'); ``` Your `@keyframes orbit` rule should have a `0%` selector. ```js -const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules -assert(rules?.[0]?.keyText === '0%' || rules?.[0]?.keyText === '0%'); +const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules; +assert.strictEqual(rules?.[0]?.keyText, '0%'); ``` Your `@keyframes orbit` rule should have a `100%` selector. ```js const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules -assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%'); +assert.isTrue(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%'); ``` Your `0%` selector should have a `transform` property set to `rotate(0deg) translate(-50%, -50%)`. ```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform === 'rotate(0deg) translate(-50%, -50%)'); +assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform, 'rotate(0deg) translate(-50%, -50%)'); ``` Your `100%` selector should come after your `0%` selector. ```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText === '100%') +assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText, '100%') ``` Your `100%` selector should have a `transform` property set to `rotate(360deg) translate(-50%, -50%)`. ```js -assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform === 'rotate(360deg) translate(-50%, -50%)') +assert.strictEqual(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform, 'rotate(360deg) translate(-50%, -50%)') ``` Your `.orbit` selector should have an `animation` property set to `orbit 5s linear infinite`. @@ -243,12 +251,10 @@ Your `.orbit` selector should have an `animation` property set to `orbit 5s line ```js const orbitStyles = new __helpers.CSSHelp(document).getStyle('.orbit'); -assert( - orbitStyles?.animationName === "orbit" && - orbitStyles?.animationDuration === "5s" && - orbitStyles?.animationTimingFunction === "linear" && - orbitStyles?.animationIterationCount === "infinite" -); +assert.strictEqual(orbitStyles?.animationName, "orbit"); +assert.strictEqual(orbitStyles?.animationDuration, "5s"); +assert.strictEqual(orbitStyles?.animationTimingFunction, "linear"); +assert.strictEqual(orbitStyles?.animationIterationCount, "infinite"); ```