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

Co-authored-by: Krzysztof G. <[email protected]>

Author: a2937

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.

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`.

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`.

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.

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.

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(/<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--

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--

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 `<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--

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 `<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');
 ```
 
 

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 `<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--