CodeCow/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-06-19 21:09:51 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

chore(curriculum): update lab orbit and earlier asserts (#57194)

Browse Source 
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
This commit is contained in:
Anna 2024-11-21 00:45:15 -05:00 committed by GitHub
parent f5288c0336
commit dea4b43584
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
9 changed files with 59 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
curriculum/challenges/english/25-front-end-development/lab-bookmark-manager-app/66def5467aee701733aaf8cc.md
View File

@ -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();
}

4
curriculum/challenges/english/25-front-end-development/lab-contact-form/66f26c32ec6f90df01a44f60.md
View File

@ -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'));
```

6
curriculum/challenges/english/25-front-end-development/lab-event-flyer-page/66e45c8140f9fda5c105ae26.md
View File

@ -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--

4
curriculum/challenges/english/25-front-end-development/lab-event-hub/66ebd4ae2812430bb883c787.md
View File

@ -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"));
}
```

6
curriculum/challenges/english/25-front-end-development/lab-favorite-icon-toggler/66bf6bacf178eac7b96d4f5e.md
View File

@ -58,7 +58,7 @@ Initially, the `span` elements should contain the code `&#9825;` 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'));

2
curriculum/challenges/english/25-front-end-development/lab-fortune-teller/66c06d618d075c7f7f1b890a.md
View File

@ -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.

2
curriculum/challenges/english/25-front-end-development/lab-leap-year-calculator/66c06fad3475cd92421b9ac2.md
View File

@ -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.

8
curriculum/challenges/english/25-front-end-development/lab-lightbox-viewer/66db57ad34c7089b9b41bfd6.md
View File

@ -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.

76
curriculum/challenges/english/25-front-end-development/lab-moon-orbit/66a37f37ef5823a313de8c26.md
View File

@ -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");
```