fix(curriculum): use specific assert methods in workshop cafe menu steps 53-65 (#59984)

Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
This commit is contained in:
Clarence
2025-04-29 12:04:15 +01:00
committed by GitHub
parent 6de79433ca
commit c555f69883
11 changed files with 40 additions and 40 deletions
@@ -17,14 +17,14 @@ You should set the `max-width` property to `500px`.
```js ```js
const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px'); const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px');
assert(hasMaxWidth); assert.isTrue(hasMaxWidth);
``` ```
Your `.menu` element should have a `max-width` of `500px`. Your `.menu` element should have a `max-width` of `500px`.
```js ```js
const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width'); const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width');
assert(menuMaxWidth === '500px'); assert.equal(menuMaxWidth, '500px');
``` ```
# --seed-- # --seed--
@@ -14,39 +14,39 @@ Since all `4` sides of the menu have the same internal spacing, remove the four
You should remove the `padding-left` property. You should remove the `padding-left` property.
```js ```js
assert(!code.match(/padding-left/i)); assert.notMatch(code, /padding-left/i);
``` ```
You should remove the `padding-right` property. You should remove the `padding-right` property.
```js ```js
assert(!code.match(/padding-right/i)); assert.notMatch(code, /padding-right/i);
``` ```
You should remove the `padding-top` property. You should remove the `padding-top` property.
```js ```js
assert(!code.match(/padding-top/i)); assert.notMatch(code, /padding-top/i);
``` ```
You should remove the `padding-bottom` property. You should remove the `padding-bottom` property.
```js ```js
assert(!code.match(/padding-bottom/i)); assert.notMatch(code, /padding-bottom/i);
``` ```
You should set the `padding` property to `20px`. You should set the `padding` property to `20px`.
```js ```js
const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px'); const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px');
assert(hasPadding); assert.isTrue(hasPadding);
``` ```
Your `.menu` element should have a `padding` value of `20px`. Your `.menu` element should have a `padding` value of `20px`.
```js ```js
const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding'); const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding');
assert(menuPadding === '20px'); assert.equal(menuPadding, '20px');
``` ```
# --seed-- # --seed--
@@ -15,37 +15,37 @@ You should not remove the `padding-left` or `padding-right` properties.
```js ```js
const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left'); const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
assert(paddingLeft === '20px'); assert.equal(paddingLeft, '20px');
const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right'); const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
assert(paddingRight === '20px'); assert.equal(paddingRight, '20px');
``` ```
You should set the `padding-top` property to `20px`. You should set the `padding-top` property to `20px`.
```js ```js
const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px'); const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
assert(hasPaddingTop); assert.isTrue(hasPaddingTop);
``` ```
You should set the `padding-bottom` property to `20px`. You should set the `padding-bottom` property to `20px`.
```js ```js
const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px'); const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
assert(hasPaddingBottom); assert.isTrue(hasPaddingBottom);
``` ```
Your `.menu` element should have a `padding-top` of `20px`. Your `.menu` element should have a `padding-top` of `20px`.
```js ```js
const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top'); const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top');
assert(menuPaddingTop === '20px'); assert.equal(menuPaddingTop, '20px');
``` ```
Your `.menu` element should have a `padding-bottom` of `20px`. Your `.menu` element should have a `padding-bottom` of `20px`.
```js ```js
const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom'); const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom');
assert(menuPaddingBottom === '20px'); assert.equal(menuPaddingBottom, '20px');
``` ```
# --seed-- # --seed--
@@ -23,7 +23,7 @@ Your `body` should have a `font-family` of `sans-serif`.
```js ```js
const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family'); const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family');
assert(bodyFontFamily === 'sans-serif'); assert.equal(bodyFontFamily, 'sans-serif');
``` ```
# --seed-- # --seed--
@@ -17,14 +17,14 @@ You should use an `h1, h2` selector.
```js ```js
const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2'); const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2');
assert(h1h2Selector); assert.exists(h1h2Selector);
``` ```
You should set the `font-family` to `Impact`. You should set the `font-family` to `Impact`.
```js ```js
const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'].toLowerCase() === 'impact'); const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'].toLowerCase() === 'impact');
assert(hasFontFamily); assert.isTrue(hasFontFamily);
``` ```
Your `h1` element should have a `font-family` of `Impact`. Your `h1` element should have a `font-family` of `Impact`.
@@ -15,21 +15,21 @@ You should have an `.established` selector.
```js ```js
const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established'); const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established');
assert(hasEstablished); assert.exists(hasEstablished);
``` ```
You should set the `font-style` property to `italic`. You should set the `font-style` property to `italic`.
```js ```js
const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic'); const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic');
assert(hasFontStyle); assert.isTrue(hasFontStyle);
``` ```
Your `.established` selector should set the `font-style` property to `italic`. Your `.established` selector should set the `font-style` property to `italic`.
```js ```js
const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style'); const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style');
assert(establishedFontStyle === 'italic'); assert.equal(establishedFontStyle, 'italic');
``` ```
# --seed-- # --seed--
@@ -29,7 +29,7 @@ Your `established` class element should have italic text.
const establishElement = document.querySelector('.established'); const establishElement = document.querySelector('.established');
const establishedFont = window.getComputedStyle(establishElement)?.getPropertyValue('font-style'); const establishedFont = window.getComputedStyle(establishElement)?.getPropertyValue('font-style');
assert.equal(establishedFont,"italic"); assert.equal(establishedFont, "italic");
``` ```
# --seed-- # --seed--
@@ -16,39 +16,39 @@ Make sure that the link opens in a new tab by adding a `target` attribute with t
You should not modify the existing `footer` element. You should not modify the existing `footer` element.
```js ```js
assert(document.querySelectorAll("footer").length === 1); assert.lengthOf(document.querySelectorAll("footer"), 1);
``` ```
You should not modify the existing `address` element. You should not modify the existing `address` element.
```js ```js
assert(document.querySelectorAll("address").length === 1); assert.lengthOf(document.querySelectorAll("address"), 1);
``` ```
Your new `p` element should be nested within your `address` element. You should have exactly one `p` element. Your new `p` element should be nested within your `address` element. You should have exactly one `p` element.
```js ```js
assert(document.querySelectorAll("footer > address > p").length === 1); assert.lengthOf(document.querySelectorAll("footer > address > p"), 1);
assert(document.querySelectorAll("footer p").length === 1); assert.lengthOf(document.querySelectorAll("footer p"), 1);
``` ```
Your new `a` element should be nested within your new `p` element. You should have exactly one `a` element. Your new `a` element should be nested within your new `p` element. You should have exactly one `a` element.
```js ```js
assert(document.querySelectorAll("footer > address > p > a").length === 1); assert.lengthOf(document.querySelectorAll("footer > address > p > a"), 1);
assert(document.querySelectorAll("footer a").length === 1); assert.lengthOf(document.querySelectorAll("footer a"), 1);
``` ```
Your new `a` element should have the text `Visit our website`. Your new `a` element should have the text `Visit our website`.
```js ```js
assert(document.querySelector("footer > address > p > a")?.innerText === "Visit our website"); assert.equal(document.querySelector("footer > address > p > a")?.innerText, "Visit our website");
``` ```
Your new `a` element should link to `https://www.freecodecamp.org`. Remember that `a` elements use the `href` attribute to create a link. Your new `a` element should link to `https://www.freecodecamp.org`. Remember that `a` elements use the `href` attribute to create a link.
```js ```js
assert(document.querySelector("footer > address > p > a")?.href === "https://www.freecodecamp.org/"); assert.equal(document.querySelector("footer > address > p > a")?.href, "https://www.freecodecamp.org/");
``` ```
Your new `a` element should have the `target` attribute set to `_blank`. Your new `a` element should have the `target` attribute set to `_blank`.
@@ -17,7 +17,7 @@ You should add `serif` as a fallback for the `Impact` font.
```js ```js
const fontFamily = new __helpers.CSSHelp(document).getStyle('h1, h2')?.getPropertyValue('font-family'); const fontFamily = new __helpers.CSSHelp(document).getStyle('h1, h2')?.getPropertyValue('font-family');
assert(fontFamily === 'Impact, serif'); assert.equal(fontFamily, 'Impact, serif');
``` ```
# --seed-- # --seed--
@@ -17,28 +17,28 @@ You should set the `padding-left` property to `20px`.
```js ```js
const hasPaddingLeft = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-left'] === '20px'); const hasPaddingLeft = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-left'] === '20px');
assert(hasPaddingLeft); assert.isTrue(hasPaddingLeft);
``` ```
You should set the `padding-right` property to `20px`. You should set the `padding-right` property to `20px`.
```js ```js
const hasPaddingRight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-right'] === '20px'); const hasPaddingRight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-right'] === '20px');
assert(hasPaddingRight); assert.isTrue(hasPaddingRight);
``` ```
Your `.menu` element should have a `padding-left` of `20px`. Your `.menu` element should have a `padding-left` of `20px`.
```js ```js
const menuPaddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left'); const menuPaddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
assert(menuPaddingLeft === '20px'); assert.equal(menuPaddingLeft, '20px');
``` ```
Your `.menu` element should have a `padding-right` of `20px`. Your `.menu` element should have a `padding-right` of `20px`.
```js ```js
const menuPaddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right'); const menuPaddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
assert(menuPaddingRight === '20px'); assert.equal(menuPaddingRight, '20px');
``` ```
# --seed-- # --seed--
@@ -16,29 +16,29 @@ Add two new type selectors (`h1` and `h2`). Use the `font-size` property for bot
You should use an `h1` selector. You should use an `h1` selector.
```js ```js
const hasH1 = new __helpers.CSSHelp(document).getStyle('h1'); const h1Style = new __helpers.CSSHelp(document).getStyle('h1');
assert(hasH1); assert.exists(h1Style);
``` ```
You should use an `h2` selector. You should use an `h2` selector.
```js ```js
const hasH2 = new __helpers.CSSHelp(document).getStyle('h2'); const h2Style = new __helpers.CSSHelp(document).getStyle('h2');
assert(hasH2); assert.exists(h2Style);
``` ```
Your `h1` element should have a `font-size` of `40px`. Your `h1` element should have a `font-size` of `40px`.
```js ```js
const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size'); const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size');
assert(h1FontSize === '40px'); assert.equal(h1FontSize, '40px');
``` ```
Your `h2` element should have a `font-size` of `30px`. Your `h2` element should have a `font-size` of `30px`.
```js ```js
const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size'); const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size');
assert(h2FontSize === '30px'); assert.equal(h2FontSize, '30px');
``` ```
# --seed-- # --seed--