feat(curriculum) : no jQuery in cafe menu (#55907)

Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>
2026-09-24 23:01:18 +08:00 · 2024-08-26 13:29:07 +02:00
parent f13bebd734
commit 1cfefc3841
29 changed files with 169 additions and 135 deletions
@@ -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.
@@ -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`.
@@ -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`.
@@ -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.
@@ -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.
@@ -20,21 +20,21 @@ Add the following within the `head` element:
 Your code should have two `meta` elements.

 ```js
-assert(code.match(/<meta.*?\/?>/g).length === 2);
+assert.lengthOf(code.match(/<meta.*?\/?>/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--
@@ -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--
@@ -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 `<div>` 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--
@@ -16,8 +16,7 @@ Inside the opening `div` tag, add the `id` attribute with a value of `menu`.
 Your opening `<div>` 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 `</div>` 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');
 ```


@@ -14,7 +14,7 @@ It’s looking good. Time to start adding some menu items. Add an empty `article
 You should have an opening `<article>` tag.

 ```js
-assert(code.match(/<article>/i));
+assert.match(code,/<article>/i);
 ```

 You should have a closing `</article>` 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--
@@ -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--
@@ -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--
@@ -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--
@@ -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--
@@ -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(/<section>/ig).length === 2);
+assert.lengthOf(code.match(/<section>/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--
@@ -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--
@@ -14,26 +14,26 @@ Add a `footer` element below the `main` element, where you can add some addition
 You should have an opening `<footer>` tag.

 ```js
-assert(code.match(/<footer>/i));
+assert.match(code,(/<footer>/i));
 ```

 You should have a closing `</footer>` tag.

 ```js
-assert(code.match(/<\/footer>/i));
+assert.match(code,(/<\/footer>/i));
 ```

 You should not modify the existing `main` element.

 ```js
-assert($('main').length === 1);
+assert.lengthOf(document.querySelectorAll('main'), 1);
 ```

 Your `footer` element should be below your `main` element.

 ```js
-const footer = $('footer')[0]
-assert(footer.previousElementSibling.tagName === 'MAIN');
+const footer = document.querySelector('footer');
+assert.strictEqual(footer?.previousElementSibling?.tagName, 'MAIN');
 ```

 # --seed--
@@ -14,19 +14,19 @@ Add an empty `article` element under the `Desserts` heading. Give it a `class` a
 You should not change your existing `h2` element.

 ```js
-assert($('h2').length === 2);
+assert.lengthOf(document.querySelectorAll('h2'),2);
 ```

 Your `article` element should be below your `h2` element.

 ```js
-assert($('section')[1].children[1].tagName === 'ARTICLE');
+assert.strictEqual(document.querySelectorAll('section')?.[1]?.children?.[1]?.tagName, 'ARTICLE');
 ```

 Your new `article` element should have the `item` class.

 ```js
-assert($('section')[1].children[1].className === 'item');
+assert.strictEqual(document.querySelectorAll('section')?.[1]?.children?.[1]?.className, 'item');
 ```

 # --seed--
@@ -14,20 +14,22 @@ Now apply the `established` class to the `Est. 2020` text.
 You should set the `class` of the `p` element to `established`.

 ```js
-assert(code.match(/<p class=('|")established\1>/i));
+assert.match(code,/<p class=('|")established\1>/i);
 ```

 Your `established` class should be on the element with the text `Est. 2020`.

 ```js
-const established = $('.established');
-assert(established[0].innerText.match(/Est\.\s2020/i));
+assert.match(document.querySelector('.established')?.innerText, /Est\.\s2020/i);
 ```

 Your `established` class element should have italic text.

 ```js
-assert($('.established').css('font-style') === 'italic');
+const establishElement = document.querySelector('.established');
+
+const establishedFont = window.getComputedStyle(establishElement)?.getPropertyValue('font-style');
+assert.equal(establishedFont,"italic");
 ```

 # --seed--
@@ -14,13 +14,18 @@ Add a second `p` element below the one with the link and give it the text `123 F
 You should add a second `p` element to your `footer`.

 ```js
-assert($('footer').children('p').length === 2);
+const footer = document.querySelector('footer');
+const children = footer?.querySelectorAll(`:scope ${'p'}`);
+assert.lengthOf(children , 2);
 ```

 Your new `p` element should have the text `123 Free Code Camp Drive`. Make sure your new element comes after your existing element.

 ```js
-assert($('footer').children('p').last().text().match(/123 Free Code Camp Drive/i));
+const footer = document.querySelector('footer');
+const children = footer.querySelectorAll(`:scope ${'p'}`) || [];
+const lastChild = [...children]?.at(-1);
+assert.match(lastChild?.textContent, /123 Free Code Camp Drive/i);
 ```

 # --seed--
@@ -14,19 +14,19 @@ Add an `h2` element in the new section and give it the text `Desserts`.
 You should not change your existing `section` element.

 ```js
-assert($('section').length === 2);
+assert.lengthOf(document.querySelectorAll('section'), 2);
 ```

 You should add an `h2` element in your second `section` element.

 ```js
-assert($('section')[1].children[0].tagName === 'H2');
+assert.strictEqual(document.querySelectorAll('section')?.[1]?.children?.[0]?.tagName, 'H2');
 ```

 Your new `h2` element should have the text `Desserts`.

 ```js
-assert($('h2')[1].innerText.match(/Desserts/i));
+assert.match(document.querySelectorAll('h2')?.[1]?.innerText, /Desserts/i);
 ```

 # --seed--
@@ -14,14 +14,14 @@ Go ahead and add another `hr` element between the `main` element and the `footer
 You should add a second `hr` element.

 ```js
-assert($('hr').length === 2);
+assert.lengthOf(document.querySelectorAll('hr'), 2);
 ```

 Your new `hr` element should be between the `main` element and the `footer` element.

 ```js
-assert($('hr')[1].previousElementSibling.tagName === 'MAIN');
-assert($('hr')[1].nextElementSibling.tagName === 'FOOTER');
+assert.equal(document.querySelectorAll('hr')?.[1]?.previousElementSibling?.tagName, 'MAIN');
+assert.equal(document.querySelectorAll('hr')?.[1]?.nextElementSibling?.tagName, 'FOOTER');
 ```

 # --seed--
@@ -20,13 +20,13 @@ assert(code.match(/class=('|")address\1/i));
 Your `.address` element should be your `p` element.

 ```js
-assert($('.address')[0].tagName === 'P');
+assert.equal(document.querySelector('.address')?.tagName, 'P');
 ```

 Your `.address` element should have the text `123 Free Code Camp Drive`.

 ```js
-assert($('.address')[0].innerText.match(/123 Free Code Camp Drive/i));
+assert.match(document.querySelector('.address')?.innerText, /123 Free Code Camp Drive/i);
 ```

 # --seed--
@@ -14,13 +14,14 @@ Now add the `bottom-line` class to the second `hr` element so the styling is app
 You should add the `class` attribute with the value `bottom-line`.

 ```js
-assert(code.match(/class=('|")bottom-line\1/i));
+assert.match(code,/class=('|")bottom-line\1/i);
 ```

 Your `bottom-line` class should be applied to your second `hr` element.

 ```js
-assert($('hr')[1].className === 'bottom-line');
+const hrList = document.querySelectorAll("hr"); 
+assert.isTrue(hrList?.[1]?.classList?.contains('bottom-line'));
 ```

 # --seed--
@@ -14,19 +14,21 @@ Add one last image under the `Desserts` heading using the url `https://cdn.freec
 You should add a second `img` element.

 ```js
-assert($('img').length === 2);
+assert.lengthOf(document.querySelectorAll('img'),2);
 ```

 Your new `img` element should have a `src` of `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`.

 ```js
-assert($('img').last().attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg');
+const lastImage = [...document.querySelectorAll('img')].at(-1);
+assert.equal(lastImage?.src, 'https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg');
 ```

 Your new `img` element should have an `alt` of `pie icon`.

 ```js
-assert($('img').last().attr('alt').match(/pie icon/i));
+const lastImage = [...document.querySelectorAll('img')].at(-1);
+assert.match(lastImage?.alt,/pie icon/i);
 ```

 # --seed--
@@ -14,25 +14,31 @@ Nest two `p` elements inside your `article` element. The first one's text should
 You should not change your existing `article` element.

 ```js
-assert($('article').length === 6);
+assert.lengthOf(document.querySelectorAll('article'), 6);
 ```

 Your new `article` element should have two `p` elements.

 ```js
-assert($('article').last().children('p').length === 2);
+const newArticle = [...document.querySelectorAll('article')].at(-1);
+const paragraphs = newArticle?.querySelectorAll(`:scope ${'p'}`);
+assert.lengthOf(paragraphs, 2);
 ```

 Your first `p` element should have the text `Donut`.

 ```js
-assert($('article').last().children('p')[0].innerText.match(/Donut/i));
+const newArticle = [...document.querySelectorAll('article')].at(-1);
+const paragraph = newArticle?.querySelector(`:scope ${'p'}`);
+assert.match(paragraph?.innerText, /Donut/i);
 ```

 Your second `p` element should have the text `1.50`.

 ```js
-assert($('article').last().children('p')[1].innerText.match(/1\.50/i));
+const newArticle = [...document.querySelectorAll('article')].at(-1);
+const paragraphs = newArticle?.querySelectorAll(`:scope ${'p'}`);
+assert.match(paragraphs?.[1]?.innerText, /1\.50/i);
 ```

 # --seed--
@@ -28,39 +28,45 @@ assert(articles.length === 4)
 You should have four `.dessert` elements.

 ```js
-assert($('.dessert').length === 4);
+assert.lengthOf(document.querySelectorAll('.dessert'),4);
 ```

 You should have four new `.price` elements.

 ```js
-assert($('section').last().find('.price').length === 4);
+const section = [...document.querySelectorAll('section')].at(-1);
+const prices = section.querySelectorAll(`:scope ${'.price'}`);
+assert.lengthOf(prices, 4);
 ```

 Your `section` element should have eight `p` elements.

 ```js
-assert($('section').last().find('p').length === 8);
+const section = [...document.querySelectorAll('section')].at(-1);
+const paragraphs = section.querySelectorAll(`:scope ${'p'}`);
+
+assert.lengthOf(paragraphs,8);
 ```

 Your `.dessert` elements should have the text `Donut`, `Cherry Pie`, `Cheesecake`, and `Cinnamon Roll`.

 ```js
-const dessert = $('.dessert');
-assert(dessert[0].innerText.match(/donut/i));
-assert(dessert[1].innerText.match(/cherry pie/i));
-assert(dessert[2].innerText.match(/cheesecake/i));
-assert(dessert[3].innerText.match(/cinnamon roll/i));
+const dessert = document.querySelectorAll('.dessert');
+assert.match(dessert?.[0]?.innerText, /donut/i);
+assert.match(dessert?.[1]?.innerText, /cherry pie/i);
+assert.match(dessert?.[2]?.innerText, /cheesecake/i);
+assert.match(dessert?.[3]?.innerText, /cinnamon roll/i);
 ```

 Your new `.price` elements should have the text `1.50`, `2.75`, `3.00`, and `2.50`.

 ```js
-const prices = $('section').last().find('.price');
-assert(prices[0].innerText.match(/1\.50/));
-assert(prices[1].innerText.match(/2\.75/));
-assert(prices[2].innerText.match(/3\.00/));
-assert(prices[3].innerText.match(/2\.50/));
+const section = [...document.querySelectorAll('section')].at(-1);
+const prices = section?.querySelectorAll(`:scope ${'.price'}`);
+assert.match(prices?.[0]?.innerText, /1\.50/);
+assert.match(prices?.[1]?.innerText, /2\.75/);
+assert.match(prices?.[2]?.innerText, /3\.00/);
+assert.match(prices?.[3]?.innerText, /2\.50/);
 ```

 You should not have any spaces between your `p` elements.
@@ -14,37 +14,37 @@ To complete the styling, add the applicable class names `flavor` and `price` to
 You should have five `.flavor` elements.

 ```js
-assert($('.flavor').length === 5);
+assert.lengthOf(document.querySelectorAll('.flavor'), 5);
 ```

 You should have five `.price` elements.

 ```js
-assert($('.price').length === 5);
+assert.lengthOf(document.querySelectorAll('.price'), 5);
 ```

 Your `.flavor` elements should be your `p` elements with the text `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut`, and `Mocha`.

 ```js
-const p = $('p');
-const flavor = $('.flavor');
-assert(p[1] === flavor[0]);
-assert(p[3] === flavor[1]);
-assert(p[5] === flavor[2]);
-assert(p[7] === flavor[3]);
-assert(p[9] === flavor[4]);
+const p = document.querySelectorAll('p');
+const flavor = document.querySelectorAll('.flavor');
+assert.equal(p?.[1], flavor?.[0]);
+assert.equal(p?.[3], flavor?.[1]);
+assert.equal(p?.[5], flavor?.[2]);
+assert.equal(p?.[7], flavor?.[3]);
+assert.equal(p?.[9], flavor?.[4]);
 ```

 Your `.price` elements should be your `p` elements with the text `3.00`, `3.75`, `3.50`, `4.00`, and `4.50`.

 ```js
-const p = $('p');
-const price = $('.price');
-assert(p[2] === price[0]);
-assert(p[4] === price[1]);
-assert(p[6] === price[2]);
-assert(p[8] === price[3]);
-assert(p[10] === price[4]);
+const p = document.querySelectorAll('p');
+const price = document.querySelectorAll('.price');
+assert.equal(p?.[2], price?.[0]);
+assert.equal(p?.[4], price?.[1]);
+assert.equal(p?.[6], price?.[2]);
+assert.equal(p?.[8], price?.[3]);
+assert.equal(p?.[10], price?.[4]);
 ```

 # --seed--
@@ -14,19 +14,20 @@ For the two `p` elements you just added, add `dessert` as the value of the first
 You should have one `p` element with the `dessert` class.

 ```js
-assert($('.dessert').length === 1);
+assert.lengthOf(document.querySelectorAll('.dessert'), 1);
 ```

 Your `p` element with the text `Donut` should have the `dessert` class.

 ```js
-assert($('.dessert')[0].innerText.match(/donut/i));
+assert.match(document.querySelector('.dessert')?.innerText, /donut/i);
 ```

 Your `p` element with the text `1.50` should have the `price` class.

 ```js
-assert($('.price').last().text().match(/1\.50/));
+const lastElement = [...document.querySelectorAll('.price')].at(-1);
+assert.match(lastElement?.textContent, /1\.50/);
 ```

 You should not have any spaces between your `p` elements.