diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md index ae7572fa05c..e15882d5d17 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537c5f81f0cf325b4a854c.md @@ -22,7 +22,7 @@ assert.exists(document.querySelector('body')?.querySelector('header')); Your `header` element should have a `class` with `header` as the value. ```js -assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header')); +assert.isTrue(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header')); ``` Your `header` element should have an `h1` element inside it. @@ -34,7 +34,7 @@ assert.exists(document.querySelector('.header')?.querySelector('h1')); Your `h1` element should have the text `css flexbox photo gallery` inside it. ```js -assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery'); +assert.equal(document?.querySelector('.header')?.querySelector('h1')?.innerText, 'css flexbox photo gallery'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md index 7461f43485f..7e6ce46cd49 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537c9eecea6a335db6da79.md @@ -16,25 +16,25 @@ Inside that `.gallery` element, create nine `img` elements. You should create a `div` element in your `body` element. ```js -assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1); +assert.isAtLeast(document.querySelector('body')?.querySelectorAll('div')?.length, 1); ``` Your new `div` element should have a `class` with `gallery` set as the value. ```js -assert(document.querySelector('body')?.querySelector('.gallery')); +assert.exists(document.querySelector('body')?.querySelector('.gallery')); ``` Your new `div` element should come after your `.header` element. ```js -assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery')); +assert.exists(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery')); ``` Your `.gallery` element should have nine `img` elements. ```js -assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9); +assert.lengthOf(document.querySelector('.gallery')?.querySelectorAll('img'), 9); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md index 6766539792c..5bfdaedfc4b 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61537d86bdc3dd343688fceb.md @@ -15,61 +15,61 @@ All nine of your `img` elements should have a `src` attribute. ```js const images = [...document.querySelectorAll('img')]; -assert(images.every(image => image.getAttribute('src'))); +assert.isTrue(images.every(image => image.getAttribute('src'))); ``` Your first `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` set as the `src` attribute value. ```js -assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg'); +assert.equal(document.querySelectorAll('img')?.[0]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg'); ``` Your second `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` set as the `src` attribute value. ```js -assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg'); +assert.equal(document.querySelectorAll('img')?.[1]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg'); ``` Your third `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` set as the `src` attribute value. ```js -assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg'); +assert.equal(document.querySelectorAll('img')?.[2]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg'); ``` Your fourth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` set as the `src` attribute value. ```js -assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg'); +assert.equal(document.querySelectorAll('img')?.[3]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg'); ``` Your fifth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` set as the `src` attribute value. ```js -assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg'); +assert.equal(document.querySelectorAll('img')?.[4]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg'); ``` Your sixth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` set as the `src` attribute value. ```js -assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg'); +assert.equal(document.querySelectorAll('img')?.[5]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg'); ``` Your seventh `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` set as the `src` attribute value. ```js -assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg'); +assert.equal(document.querySelectorAll('img')?.[6]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg'); ``` Your eighth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` set as the `src` attribute value. ```js -assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg'); +assert.equal(document.querySelectorAll('img')?.[7]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg'); ``` Your ninth `img` element should have `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` set as the `src` attribute value. ```js -assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg'); +assert.equal(document.querySelectorAll('img')?.[8]?.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md index c3de674b58a..21fe74acc19 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615380dff67172357fcf0425.md @@ -24,7 +24,7 @@ assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img')); Your `.gallery img` selector should have a `width` property set to `100%` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width, '100%'); ``` Your `.gallery img` selector should have a `max-width` property set to `350px` as the value. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md index 7f754c701b7..4e1c4ae12e1 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153908a366afb4d57185c8d.md @@ -25,7 +25,7 @@ When you are done, set an explicit `flex-direction` of `row` on the `.gallery` e Your `.gallery` selector should have a `flex-direction` property set to `row` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection, 'row'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md index 60f0140aab4..d61fb58008d 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615392916d83fa4f02f7e2cf.md @@ -18,7 +18,7 @@ Make it so your flex items wrap to the next row when they run out of space. Your `.gallery` selector should have a `flex-wrap` property set to `wrap` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap, 'wrap'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md index 6f8a34d2768..97b5db2b666 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153938dce8b294ff8f5a4e9.md @@ -16,7 +16,7 @@ Give your `.gallery` selector a `justify-content` property with `center` as the Your `.gallery` selector should have a `justify-content` property set to `center` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent, 'center'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md index 8803a6b2e21..731729e261f 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153947986535e5117e60615.md @@ -16,7 +16,7 @@ To vertically center your images, give your `.gallery` selector an `align-items` Your `.gallery` selector should have an `align-items` property set to `center` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems, 'center'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md index 1994f1565aa..7b1e24dde32 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61539e07e7430b528fbffe21.md @@ -25,7 +25,7 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight, Your `.gallery` selector should have a `max-width` property set to `1400px` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth, '1400px'); ``` Your `.gallery` element should be centered using a `margin` with `0 auto` as the value. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md index fa88f83ba50..b1641e280d4 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/61539f32a206bd53ec116465.md @@ -16,7 +16,7 @@ Give your `.gallery img` selector the `object-fit` property and set it to `cover Your `.gallery img` selector should have an `object-fit` property set to `cover` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit, 'cover'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md index 23268a5f389..80e54e04370 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a04847abee57a3a406ac.md @@ -18,7 +18,7 @@ Give your `.gallery` flex container a `gap` property with `16px` as the value. Your `.gallery` selector should have a `gap` property with `16px` set as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap, '16px'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md index 639e9b7cb6a..f5400790774 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3485f0b20591d26d2a1.md @@ -14,7 +14,7 @@ Smooth out your images a bit by giving the `.gallery img` selector a `border-rad Your `.gallery img` selector should have a `border-radius` property with `10px` set as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px'); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius, '10px'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md index 44bec2cf271..e3a5b776f63 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3952facd25a83fe8083.md @@ -25,13 +25,13 @@ Create a new selector using an `::after` pseudo-element on the `.gallery` elemen Your `.gallery::after` selector should have an empty string `""` set for the `content` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\""); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content, "\"\""); ``` Your `.gallery::after` selector should have `350px` set for the `width` property. ```js -assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px"); +assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width, "350px"); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md index 971b0ddd65b..6b198c06a65 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/6153a3ebb4f7f05b8401b716.md @@ -19,8 +19,10 @@ All nine of your `img` elements should have a `alt` attribute with text describi ```js const images = [...document.querySelectorAll('img')]; -assert(images.every(image => image.getAttribute('alt'))); -assert(images.every(image => image.getAttribute('alt').length >= 5)); +images.forEach((image) => { + const alt = image.getAttribute('alt'); + assert.isAtLeast(alt?.length, 5); +}); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md index 9765d1e93b3..7b236aa9f9d 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-flexbox-photo-gallery/615f171d05def3218035dc85.md @@ -33,13 +33,13 @@ assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px Your `body` selector should have a `font-family` property set to `sans-serif` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif'); +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'sans-serif'); ``` Your `body` selector should have a `background-color` property set to `#f5f6f7` as the value. ```js -assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)'); +assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor, 'rgb(245, 246, 247)'); ``` # --seed--