From 1cfefc3841749ce9edf51be58e693acd8e3550f9 Mon Sep 17 00:00:00 2001 From: Anna Date: Mon, 26 Aug 2024 07:29:07 -0400 Subject: [PATCH] feat(curriculum) : no jQuery in cafe menu (#55907) Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com> --- .../5f33294a6af5e9188dbdb8f3.md | 2 +- .../5f332a88dc25a0fd25c7687a.md | 4 +- .../5f332b23c2045fb843337579.md | 4 +- .../5f344fbc22624a2976425065.md | 2 +- .../5f344fc1520b6719f2e35605.md | 2 +- .../5f3477cbcb6ba47918c1da92.md | 10 ++--- .../5f356ed60a5decd94ab66986.md | 6 ++- .../5f356ed69db0a491745e2bb6.md | 6 +-- .../5f356ed6cf6eab5f15f5cfe6.md | 8 ++-- .../5f35e5c4321f818cdc4bed30.md | 8 ++-- .../5f3c866d5414453fc2d7b480.md | 44 +++++++++---------- .../5f3c866daec9a49519871816.md | 18 +++++--- .../5f3c866de7a5b784048f94b1.md | 4 +- .../5f3cade9993019e26313fa8e.md | 18 ++++---- .../5f3cade99dda4e6071a85dfd.md | 10 +++-- .../5f3ef6e056bdde6ae6892ba2.md | 9 +++- .../5f3ef6e07276f782bb46b93d.md | 10 ++--- .../5f3ef6e0819d4f23ca7285e6.md | 6 +-- .../5f3ef6e087d56ed3ffdc36be.md | 10 +++-- .../5f3ef6e0b431cc215bb16f55.md | 9 +++- .../5f3ef6e0e0c3feaebcf647ad.md | 6 +-- .../5f459fd48bdc98491ca6d1a3.md | 6 +-- .../5f46e7a4750dd05b5a673920.md | 4 +- .../5f4701b942c824109626c3d8.md | 5 ++- .../5f475e1c7f71a61d913836c6.md | 8 ++-- .../5f716ad029ee4053c7027a7a.md | 14 ++++-- .../5f716bee5838c354c728a7c5.md | 32 ++++++++------ .../5f7692f7c5b3ce22a57788b6.md | 32 +++++++------- .../5f7b87422a560036fd03ccff.md | 7 +-- 29 files changed, 169 insertions(+), 135 deletions(-) diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md index ec9b4675f12..a604495b16f 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md @@ -26,7 +26,7 @@ assert(code.match(/<\/main>/i)); You should not change your `body` element. Make sure you don't accidentally delete your closing tag. ```js -assert($('body').length === 1); +assert.lengthOf(document.querySelectorAll('body'), 1); ``` Your `main` tag should be within your `body` tag. diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md index 895bf375d76..b67240e4123 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md @@ -26,13 +26,13 @@ assert(code.match(/<\/h1>/i)); You should not change your existing `main` element. ```js -assert($('main').length === 1); +assert.lengthOf(document.querySelectorAll('main'), 1); ``` Your `h1` element should be nested in your `main` element. ```js -assert($('h1')[0].parentElement.tagName === "MAIN"); +assert.equal(document.querySelector('h1')?.parentElement?.tagName, "MAIN"); ``` Your `h1` element should have the text `CAMPER CAFE`. diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md index 1429ca2c597..5fc1e2ed5ad 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md @@ -26,13 +26,13 @@ assert(code.match(/<\/p>/i)); You should not change your existing `h1` element. Make sure you did not delete the closing tag. ```js -assert($('h1').length === 1); +assert.lengthOf(document.querySelectorAll('h1'),1); ``` Your `p` element should be below your `h1` element. ```js -assert($('p')[0].previousElementSibling.tagName === 'H1'); +assert.equal(document.querySelector('p')?.previousElementSibling?.tagName, 'H1'); ``` Your `p` element should have the text `Est. 2020`. diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md index 7c4da595452..b4ede64d9bb 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md @@ -26,7 +26,7 @@ assert(code.match(/<\/h2\s*>/i)); You should not change your existing `section` element. Make sure you did not delete the closing tag. ```js -assert($('section').length === 1); +assert.lengthOf(document.querySelectorAll('section'),1); ``` Your `h2` element should be within your `section` element. diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md index 62732b38991..89f2a5e7cc8 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md @@ -26,7 +26,7 @@ assert(code.match(/<\/section\s*>/i)); You should not change your existing `main` element. Make sure you didn't delete the closing tag. ```js -assert($('main').length === 1); +assert.lengthOf(document.querySelectorAll('main'),1); ``` Your `section` element should be within your `main` element. diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md index b49a67a0b29..a1fdc9bc4ef 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md @@ -20,21 +20,21 @@ Add the following within the `head` element: Your code should have two `meta` elements. ```js -assert(code.match(//g).length === 2); +assert.lengthOf(code.match(//g),2); ``` Your `meta` element should have a `name` attribute with a value of `viewport`. ```js -const meta = $('meta'); -assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/)); +const meta = document.querySelectorAll('meta'); +assert.exists(meta[0]?.outerHTML?.match(/name=('|")viewport\1/) || meta[1]?.outerHTML?.match(/name=('|")viewport\1/)); ``` Your `meta` element should have a `content` attribute with a value of `width=device-width, initial-scale=1.0`. ```js -const meta = $('meta'); -assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/)); +const meta = document.querySelectorAll('meta'); +assert.exists(meta[0]?.outerHTML?.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1]?.outerHTML?.match(/content=('|")width=device-width, initial-scale=1.0\1/)); ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md index b4cce805660..f1b8929a344 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md @@ -27,8 +27,10 @@ assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i)); Your `body` should have a white background. ```js -const bodyCSS = $('body').css('background-color'); -assert(bodyCSS === "rgba(0, 0, 0, 0)") +const body = document.querySelector("body"); +const compStyles = window.getComputedStyle(body); +const backgroundColor = compStyles?.getPropertyValue('background-color'); +assert.equal(backgroundColor,"rgba(0, 0, 0, 0)") ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md index 45631a27c68..f079d57f9da 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md @@ -14,19 +14,19 @@ To apply the class's styling to the `div` element, remove the `id` attribute and Your `div` should still render. Make sure you haven't malformed the `
` tag. ```js -assert($('div').length === 1); +assert.lengthOf(document.querySelectorAll('div'),1); ``` Your `div` element should have the `menu` class. ```js -assert($('div').attr('class').includes('menu')); +assert.isTrue(document.querySelector('div').classList.contains('menu')); ``` Your `div` element should no longer have the `menu` id. ```js -assert(!$('div#menu').length); +assert.lengthOf(document.querySelectorAll('div#menu'),0); ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md index ae79c027890..44b3a2d694b 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md @@ -16,8 +16,7 @@ Inside the opening `div` tag, add the `id` attribute with a value of `menu`. Your opening `
` tag should have an `id` attribute set to `menu`. ```js -const div = $('div')[0]; -assert(div.id === 'menu'); +assert.strictEqual(document.querySelector('div')?.id, 'menu'); ``` You should have a closing `
` tag. @@ -29,14 +28,13 @@ assert(code.match(/<\/div>/i)); You should not change your existing `body` element. Make sure you did not delete the closing tag. ```js -assert($('body').length === 1); +assert.lengthOf(document.querySelectorAll('body'), 1); ``` Your `div` tag should be nested in the `body`. ```js -const div = $('div')[0]; -assert(div.parentElement.tagName === 'BODY'); +assert.equal(document.querySelector('div')?.parentElement?.tagName, 'BODY'); ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md index dc05e636a18..55b7edefe1d 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md @@ -14,7 +14,7 @@ It’s looking good. Time to start adding some menu items. Add an empty `article You should have an opening `
` tag. ```js -assert(code.match(/
/i)); +assert.match(code,/
/i); ``` You should have a closing `
` tag. @@ -26,14 +26,14 @@ assert(code.match(/<\/article>/i)); You should not change the existing `h2` element. ```js -assert($('h2').length === 1); +assert.lengthOf(document.querySelectorAll('h2'),1); ``` Your `article` element should come after your `h2` element. ```js -const article = $('article')[0]; -assert(article.previousElementSibling.tagName === 'H2'); +const article = document.querySelector('article'); +assert.equal(article?.previousElementSibling?.tagName, 'H2'); ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md index 6b98d3b93fb..c3254d6c576 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md @@ -21,58 +21,58 @@ Mocha 4.50 You should have five `article` elements. ```js -assert($('article').length === 5); +assert.lengthOf(document.querySelectorAll('article'),5); ``` Each `article` element should have two `p` elements. ```js -const articles = $('article'); -assert(articles[0].children.length === 2); -assert(articles[1].children.length === 2); -assert(articles[2].children.length === 2); -assert(articles[3].children.length === 2); -assert(articles[4].children.length === 2); +const articles = document.querySelectorAll('article'); +assert.lengthOf(articles?.[0]?.children, 2); +assert.lengthOf(articles?.[1]?.children, 2); +assert.lengthOf(articles?.[2]?.children, 2); +assert.lengthOf(articles?.[3]?.children, 2); +assert.lengthOf(articles?.[4]?.children, 2); ``` Your first `article` element should have `p` elements with the text `French Vanilla` and `3.00`. ```js -const children = $('article')[0].children; -assert(children[0].innerText.match(/French Vanilla/i)); -assert(children[1].innerText.match(/3\.00/i)); +const children = document.querySelector('article')?.children; +assert.match(children?.[0]?.innerText, /French Vanilla/i); +assert.match(children?.[1]?.innerText, /3\.00/i); ``` Your second `article` element should have `p` elements with the text `Caramel Macchiato` and `3.75`. ```js -const children = $('article')[1].children; -assert(children[0].innerText.match(/Caramel Macchiato/i)); -assert(children[1].innerText.match(/3\.75/i)); +const children = document.querySelectorAll('article')?.[1]?.children; +assert.match(children?.[0]?.innerText, /Caramel Macchiato/i); +assert.match(children?.[1]?.innerText, /3\.75/i); ``` Your third `article` element should have `p` elements with the text `Pumpkin Spice` and `3.50`. ```js -const children = $('article')[2].children; -assert(children[0].innerText.match(/Pumpkin Spice/i)); -assert(children[1].innerText.match(/3\.50/i)); +const children = document.querySelectorAll('article')?.[2]?.children; +assert.match(children?.[0]?.innerText, /Pumpkin Spice/i); +assert.match(children?.[1]?.innerText, /3\.50/i); ``` Your fourth `article` element should have `p` elements with the text `Hazelnut` and `4.00`. ```js -const children = $('article')[3].children; -assert(children[0].innerText.match(/Hazelnut/i)); -assert(children[1].innerText.match(/4\.00/i)); +const children = document.querySelectorAll('article')?.[3]?.children; +assert.match(children?.[0]?.innerText, /Hazelnut/i); +assert.match(children?.[1]?.innerText, /4\.00/i); ``` Your fifth `article` element should have `p` elements with the text `Mocha` and `4.50`. ```js -const children = $('article')[4].children; -assert(children[0].innerText.match(/Mocha/i)); -assert(children[1].innerText.match(/4\.50/i)); +const children = document.querySelectorAll('article')?.[4]?.children; +assert.match(children?.[0]?.innerText, /Mocha/i); +assert.match(children?.[1]?.innerText, /4\.50/i); ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md index cf3d226a001..fd7f00df1fa 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md @@ -14,27 +14,33 @@ dashedName: step-30 You should not change the existing `article` element. ```js -assert($('article').length === 1); +assert.lengthOf(document.querySelectorAll('article'),1); ``` Your `article` element should have two `p` elements. ```js -assert($('article').children('p').length === 2); +const article = document.querySelector('article'); +const paragraphChildren = article?.querySelectorAll(`:scope ${'p'}`); +assert.lengthOf(paragraphChildren,2); ``` Your first `p` element should have the text `French Vanilla`. ```js -const firstP = $('article').children('p')[0]; -assert(firstP.innerText.match(/French Vanilla/i)); +const article = document.querySelector('article'); +const paragraphChildren = article?.querySelectorAll(`:scope ${'p'}`); +const firstP = paragraphChildren?.[0]; +assert.match(firstP?.innerText, /French Vanilla/i); ``` Your second `p` element should have the text `3.00`. ```js -const secondP = $('article').children('p')[1]; -assert(secondP.innerText.match(/3\.00/i)); +const article = document.querySelector('article'); +const paragraphChildren = article?.querySelectorAll(`:scope ${'p'}`); +const secondP = paragraphChildren?.[1]; +assert.match(secondP?.innerText, /3\.00/i); ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md index bd4c2e4d98c..fe3a170031a 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md @@ -30,9 +30,7 @@ assert.lengthOf(elements, 1); Your first `article` element should have the `item` class. ```js -const el = document.querySelectorAll('article')[0]; - -assert.equal(el.className, 'item'); +assert.equal(document.querySelector('article')?.className, 'item'); ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md index 689d382de91..9a6f394e6a4 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md @@ -14,26 +14,26 @@ Now that you know it works, you can change the remaining `article` and `p` eleme You should only have five `article` elements. ```js -assert($('article').length === 5); +assert.lengthOf(document.querySelectorAll('article'),5); ``` You should only have five `.item` elements. ```js -assert($('.item').length === 5); +assert.lengthOf(document.querySelectorAll('.item'),5); ``` Your `.item` elements should be your `article` elements. ```js -const articles = $('article'); -const items = $('.item'); -assert(articles[0] === items[0]); -assert(articles[1] === items[1]); -assert(articles[2] === items[2]); -assert(articles[3] === items[3]); -assert(articles[4] === items[4]); +const articles = document.querySelectorAll('article'); +const items = document.querySelectorAll('.item'); +assert.equal(articles?.[0], items?.[0]); +assert.equal(articles?.[1], items?.[1]); +assert.equal(articles?.[2], items?.[2]); +assert.equal(articles?.[3], items?.[3]); +assert.equal(articles?.[4], items?.[4]); ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md index c607e4ef551..ab16c44822e 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md @@ -14,25 +14,27 @@ You will come back to styling the menu in a few steps, but for now, go ahead and You should have an opening `section` tag. ```js -assert(code.match(/
/ig).length === 2); +assert.lengthOf(code.match(/
/ig) ,2); ``` You should have a closing `section` tag. ```js -assert(code.match(/<\/section>/ig).length === 2); +assert.lengthOf(code.match(/<\/section>/ig) ,2); ``` You should not change the existing `main` element. ```js -assert($('main').length === 1); +assert.lengthOf (document.querySelectorAll('main'), 1); ``` Your new `section` element should be nested in the `main` element. ```js -assert($('main').children('section').length === 2); +const main = document.querySelector('main'); +const sections = main?.querySelectorAll(`:scope ${'section'}`); +assert.lengthOf(sections,2); ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md index 11cb2ac80ee..17c0abd2285 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md @@ -30,13 +30,18 @@ assert(hasFontFamily); Your `h1` element should have a `font-family` of `Impact`. ```js -assert($('h1').css('font-family').match(/impact/i)); +const h1Element = document.querySelector("h1"); + +const headingFont = window.getComputedStyle(h1Element)?.getPropertyValue('font-family'); +assert.match(headingFont,/impact/i); ``` Your `h2` element should have a `font-family` of `Impact`. ```js -assert($('h2').css('font-family').match(/impact/i)); +const h2Element = document.querySelector("h2"); +const headingFont = window.getComputedStyle(h2Element)?.getPropertyValue('font-family'); +assert.match(headingFont,/impact/i); ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md index 991ba78ef97..1ca30b088e8 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md @@ -14,26 +14,26 @@ Add a `footer` element below the `main` element, where you can add some addition You should have an opening `