mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-05-28 18:26:54 +00:00
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:
+2
-2
@@ -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--
|
||||||
|
|||||||
+6
-6
@@ -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--
|
||||||
|
|||||||
+6
-6
@@ -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--
|
||||||
|
|||||||
+1
-1
@@ -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--
|
||||||
|
|||||||
+2
-2
@@ -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`.
|
||||||
|
|||||||
+3
-3
@@ -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--
|
||||||
|
|||||||
+1
-1
@@ -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--
|
||||||
|
|||||||
+8
-8
@@ -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`.
|
||||||
|
|||||||
+1
-1
@@ -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--
|
||||||
|
|||||||
+4
-4
@@ -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--
|
||||||
|
|||||||
+6
-6
@@ -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--
|
||||||
|
|||||||
Reference in New Issue
Block a user