diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a66d4a2b0453301e5a26.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a66d4a2b0453301e5a26.md index d3d3a903674..ba2d4cb3e51 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a66d4a2b0453301e5a26.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45a66d4a2b0453301e5a26.md @@ -14,14 +14,14 @@ Moving down to the `footer` element, make all the text have a value of `14px` fo You should have a `footer` selector. ```js -const hasFooter = new __helpers.CSSHelp(document).getStyle('footer'); -assert(hasFooter); +const footerStyle = new __helpers.CSSHelp(document).getStyle('footer'); +assert.exists(footerStyle); ``` Your `footer` selector should be below your comment. ```js -assert(code.match(/\/\*\s*FOOTER\s*\*\/\s*footer/i)); +assert.match(code, /\/\*\s*FOOTER\s*\*\/\s*footer/i); ``` You should set the `font-size` property to `14px`. @@ -29,14 +29,14 @@ You should set the `font-size` property to `14px`. ```js const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '14px'); -assert(hasFontSize); +assert.isTrue(hasFontSize); ``` Your `footer` element should have a `font-size` of `14px`. ```js const footerFontSize = new __helpers.CSSHelp(document).getStyle('footer')?.getPropertyValue('font-size'); -assert(footerFontSize === '14px'); +assert.equal(footerFontSize, '14px'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b0731d39e15d54df4dfc.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b0731d39e15d54df4dfc.md index 5700eb4b7b7..26ce10c9c7e 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b0731d39e15d54df4dfc.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b0731d39e15d54df4dfc.md @@ -16,8 +16,8 @@ To make the `footer` links the same color regardless if a link has been visited, You should use an `a` selector. ```js -const hasASelector = new __helpers.CSSHelp(document).getStyle('a'); -assert(hasASelector); +const aStyle = new __helpers.CSSHelp(document).getStyle('a'); +assert.exists(aStyle); ``` You should set the `color` property to `black`. @@ -30,7 +30,7 @@ Your `a` element should have a `color` of `black`. ```js const aColor = new __helpers.CSSHelp(document).getStyle('a')?.getPropertyValue('color'); -assert(aColor === 'black'); +assert.equal(aColor, 'black'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b25e7ec2405f166b9de1.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b25e7ec2405f166b9de1.md index d58009880a3..48f1f77d572 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b25e7ec2405f166b9de1.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b25e7ec2405f166b9de1.md @@ -16,22 +16,22 @@ Change the color of the footer `Visit our website` link to `grey` when a user ha You should use the `a:visited` pseudo-selector. ```js -const hasAVisited = new __helpers.CSSHelp(document).getStyle('a:visited'); -assert(hasAVisited); +const aVisitedStyle = new __helpers.CSSHelp(document).getStyle('a:visited'); +assert.exists(aVisitedStyle); ``` You should set the `color` property to `grey`. ```js const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => (x.style.color === 'grey' || x.style.color === 'gray')); -assert(hasColor); +assert.isTrue(hasColor); ``` Your `a:visited` should have a `color` of `grey`. ```js const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color'); -assert(aVisitedColor === 'grey' || aVisitedColor === 'gray'); +assert.oneOf(aVisitedColor, ['grey', 'gray']); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b3c93c027860d9298dbd.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b3c93c027860d9298dbd.md index 8b573cac5c0..094e8c8dd7c 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b3c93c027860d9298dbd.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b3c93c027860d9298dbd.md @@ -16,22 +16,22 @@ Change the color of the footer `Visit our website` link to be `brown` when a use You should use the `a:hover` pseudo-selector. ```js -const hasAHover = new __helpers.CSSHelp(document).getStyle('a:hover'); -assert(hasAHover); +const aHoverStyle = new __helpers.CSSHelp(document).getStyle('a:hover'); +assert.exists(aHoverStyle); ``` You should set the `color` property to `brown`. ```js const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'brown'); -assert(hasColor); +assert.isTrue(hasColor); ``` Your `a:hover` should have a `color` of `brown`. ```js const aHoverColor = new __helpers.CSSHelp(document).getStyle('a:hover')?.getPropertyValue('color'); -assert(aHoverColor === 'brown'); +assert.equal(aHoverColor, 'brown'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b45d099f3e621fbbb256.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b45d099f3e621fbbb256.md index 5a4d1e25717..9f81d9555d9 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b45d099f3e621fbbb256.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b45d099f3e621fbbb256.md @@ -16,22 +16,22 @@ Change the color of the footer `Visit our website` link to `white` when clicked You should use the `a:active` pseudo-selector. ```js -const hasAActive = new __helpers.CSSHelp(document).getStyle('a:active'); -assert(hasAActive); +const aActiveStyle = new __helpers.CSSHelp(document).getStyle('a:active'); +assert.exists(aActiveStyle); ``` You should set the `color` property to `white`. ```js const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'white'); -assert(hasColor); +assert.isTrue(hasColor); ``` Your `a:active` should have a `color` of `white`. ```js const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color'); -assert(aActiveColor === 'white'); +assert.equal(aActiveColor, 'white'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b4c81cea7763550e40df.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b4c81cea7763550e40df.md index 7aa85e49bbd..d31645b330f 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b4c81cea7763550e40df.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b4c81cea7763550e40df.md @@ -15,14 +15,14 @@ You should set the `color` property to `black` when the link is `visited`. ```js const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color'); -assert(aVisitedColor === 'black'); +assert.equal(aVisitedColor, 'black'); ``` You should set the `color` property to `brown` when the link is `active`. ```js const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color'); -assert(aActiveColor === 'brown'); +assert.equal(aActiveColor, 'brown'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b715301bbf667badc04a.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b715301bbf667badc04a.md index 57ca482ee4c..7058968b7d4 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b715301bbf667badc04a.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f45b715301bbf667badc04a.md @@ -17,14 +17,14 @@ You should set the `margin-top` property to `0`. ```js const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '0px'); -assert(hasMarginTop); +assert.isTrue(hasMarginTop); ``` Your `h1` element should have a `margin-top` of `0`. ```js const h1MarginTop = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-top'); -assert(h1MarginTop === '0px'); +assert.equal(h1MarginTop, '0px'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e270702a8456a664f0df.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e270702a8456a664f0df.md index 7a4fbacfed0..a79e10edb41 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e270702a8456a664f0df.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e270702a8456a664f0df.md @@ -15,14 +15,14 @@ You should set the `margin-bottom` property to `15px`. ```js const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '15px'); -assert(hasMarginBottom); +assert.isTrue(hasMarginBottom); ``` Your `h1` element should have a `margin-bottom` of `15px`. ```js const h1MarginBottom = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-bottom'); -assert(h1MarginBottom === '15px'); +assert.equal(h1MarginBottom, '15px'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e36e745ead58487aabf2.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e36e745ead58487aabf2.md index 33131418eb2..374e92ee8b7 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e36e745ead58487aabf2.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e36e745ead58487aabf2.md @@ -16,22 +16,22 @@ To decrease the default margin space below the address `p` element, create a cla You should add an `.address` selector. ```js -const hasAddress = new __helpers.CSSHelp(document).getStyle('.address'); -assert(hasAddress); +const addressStyle = new __helpers.CSSHelp(document).getStyle('.address'); +assert.exists(addressStyle); ``` You should set the `margin-bottom` property to `5px`. ```js const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px'); -assert(hasMarginBottom); +assert.isTrue(hasMarginBottom); ``` Your `.address` selector should have the `margin-bottom` property set to `5px`. ```js const addressMarginBottom = new __helpers.CSSHelp(document).getStyle('.address')?.getPropertyValue('margin-bottom'); -assert(addressMarginBottom === '5px'); +assert.equal(addressMarginBottom, '5px'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e7a4750dd05b5a673920.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e7a4750dd05b5a673920.md index 914cc03e631..df8a0b6a979 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e7a4750dd05b5a673920.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f46e7a4750dd05b5a673920.md @@ -14,7 +14,7 @@ Now apply the `address` class to the `p` element containing the street address ` You should apply the `class="address"` attribute. ```js -assert(code.match(/class=('|")address\1/i)); +assert.match(code, /class=('|")address\1/i); ``` Your `.address` element should be your `p` element. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475bb508746c16c9431d42.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475bb508746c16c9431d42.md index 7b89486cc38..f800194f7ee 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475bb508746c16c9431d42.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475bb508746c16c9431d42.md @@ -17,44 +17,44 @@ You should use an `img` selector. ```js const hasImg = new __helpers.CSSHelp(document).getStyle('img'); -assert(hasImg); +assert.exists(hasImg); ``` You should set the `display` property to `block`. ```js const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'block'); -assert(hasDisplay); +assert.isTrue(hasDisplay); ``` You should set the `margin-left` property to `auto`. ```js const marginLeftFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-left'] === 'auto'); -assert(marginLeftFilter.length === 2); +assert.lengthOf(marginLeftFilter, 2); ``` You should set the `margin-right` property to `auto`. ```js const marginRightFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-right'] === 'auto'); -assert(marginRightFilter.length === 2); +assert.lengthOf(marginRightFilter, 2); ``` Your `img` element should have a `display` of `block`. ```js const imgDisplay = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('display'); -assert(imgDisplay === 'block'); +assert.equal(imgDisplay, 'block'); ``` Your `img` element should have a `margin-left` and `margin-right` of `auto`. ```js const imgMarginLeft = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-left'); -assert(imgMarginLeft === 'auto'); +assert.equal(imgMarginLeft, 'auto'); const imgMarginRight = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-right'); -assert(imgMarginRight === 'auto'); +assert.equal(imgMarginRight, 'auto'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475e1c7f71a61d913836c6.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475e1c7f71a61d913836c6.md index 42df082ac6a..227aad7a35b 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475e1c7f71a61d913836c6.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f475e1c7f71a61d913836c6.md @@ -28,7 +28,7 @@ Your new `img` element should have an `alt` of `pie icon`. ```js const lastImage = [...document.querySelectorAll('img')].at(-1); -assert.match(lastImage?.alt,/pie icon/i); +assert.match(lastImage?.alt, /pie icon/i); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f47fe7e31980053a8d4403b.md b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f47fe7e31980053a8d4403b.md index 7009c298642..081e97a14d7 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f47fe7e31980053a8d4403b.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cafe-menu/5f47fe7e31980053a8d4403b.md @@ -19,14 +19,14 @@ You should set the `margin-top` property to `-25px`. ```js const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '-25px'); -assert(hasMarginTop); +assert.isTrue(hasMarginTop); ``` Your `img` elements should have a `margin-top` value of `-25px`. ```js const imgMarginTop = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-top'); -assert(imgMarginTop === '-25px'); +assert.equal(imgMarginTop, '-25px'); ``` # --seed--