feat(curriculum): remove jquery from applied visual design (freeCodeCamp#55921)

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

Author: a2937

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md

@@ -40,7 +40,7 @@ The element now has an id of `thumbnail`. With this selector, use the example CS
 Your code should add a `box-shadow` property for the `thumbnail` id.
 
 ```js
-assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
+assert.match(code,(/#thumbnail\s*?{\s*?box-shadow/g));
 ```
 
 You should use the given CSS for the `box-shadow` value.

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md

@@ -38,18 +38,20 @@ assert(
 Your code should add a `padding` property to the `h4` element and set it to 10 pixels.
 
 ```js
-assert(
-  $('h4').css('padding-top') == '10px' &&
-    $('h4').css('padding-right') == '10px' &&
-    $('h4').css('padding-bottom') == '10px' &&
-    $('h4').css('padding-left') == '10px'
-);
+const h4Element = document.querySelector("h4"); 
+const h4style = window.getComputedStyle(h4Element);
+assert.equal(h4style?.paddingTop, "10px");
+assert.equal(h4style?.paddingRight, "10px");
+assert.equal(h4style?.paddingBottom, "10px");
+assert.equal(h4style?.paddingLeft, "10px");
 ```
 
 The `height` property on the `h4` element should be removed.
 
 ```js
-assert(!($('h4').css('height') == '25px'));
+const h4Element = document.querySelector("h4"); 
+const h4style = window.getComputedStyle(h4Element);
+assert.notEqual(h4style?.height, '25px');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md

@@ -20,25 +20,33 @@ This page will use a shade of teal (`#09A7A1`) as the dominant color, and its or
 The `header` element should have a `background-color` of #09A7A1.
 
 ```js
-assert($('header').css('background-color') == 'rgb(9, 167, 161)');
+const headerElement = document.querySelector('header'); 
+const headerStyle = window.getComputedStyle(headerElement);
+assert.equal(headerStyle?.backgroundColor, 'rgb(9, 167, 161)');
 ```
 
 The `footer` element should have a `background-color` of #09A7A1.
 
 ```js
-assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
+const footerElement = document.querySelector('footer'); 
+const footerStyle = window.getComputedStyle(footerElement);
+assert.equal(footerStyle?.backgroundColor, 'rgb(9, 167, 161)');
 ```
 
 The `h2` element should have a `color` of #09A7A1.
 
 ```js
-assert($('h2').css('color') == 'rgb(9, 167, 161)');
+const h2Element = document.querySelector('h2'); 
+const h2Style = window.getComputedStyle(h2Element);
+assert.equal(h2Style?.color, 'rgb(9, 167, 161)');
 ```
 
 The `button` element should have a `background-color` of #FF790E.
 
 ```js
-assert($('button').css('background-color') == 'rgb(255, 121, 14)');
+const buttonElement = document.querySelector('button'); 
+const buttonStyle = window.getComputedStyle(buttonElement);
+assert.equal(buttonStyle?.backgroundColor, 'rgb(255, 121, 14)');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md

@@ -28,11 +28,10 @@ Add a `height` property to the `h4` tag and set it to 25px.
 Your code should change the `h4` `height` property to a value of 25 pixels.
 
 ```js
-assert(
-  Math.round(document.querySelector('h4').getBoundingClientRect().height) ===
-    25 &&
-    /h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, ''))
-);
+const spaceFreeText = document.querySelector("style")?.textContent?.replace(/\s/g, ''); 
+const h4Element = document.querySelector('h4');
+assert.equal(Math.round(h4Element?.getBoundingClientRect()?.height),25);
+assert.match(spaceFreeText,/h4{\S*height:25px(;\S*}|})/);
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md

@@ -28,17 +28,17 @@ The code editor has a CSS rule to style all `a` tags black. Add a rule so that w
 The anchor tag `color` should remain black, only add CSS rules for the `:hover` state.
 
 ```js
-assert($('a').css('color') == 'rgb(0, 0, 0)');
+const anchorElement = document.querySelector("a"); 
+const anchorStyle = window.getComputedStyle(anchorElement);
+assert.equal(anchorStyle?.color, 'rgb(0, 0, 0)');
 ```
 
 The anchor tag should have a `color` of blue on hover.
 
 ```js
-assert(
-  code.match(
+assert.match(code,
     /a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi
-  )
-);
+  );
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md

@@ -30,37 +30,43 @@ Change the `background-color` of each `div` element based on the class names (`g
 Your code should use the `hsl()` function to declare the color green.
 
 ```js
-assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
+assert.match(code,/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi);
 ```
 
 Your code should use the `hsl()` function to declare the color cyan.
 
 ```js
-assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
+assert.match(code,/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi);
 ```
 
 Your code should use the `hsl()` function to declare the color blue.
 
 ```js
-assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
+assert.match(code,/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi);
 ```
 
 The `div` element with class `green` should have a `background-color` of green.
 
 ```js
-assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
+const greenElement = document.querySelector(".green");
+const greenStyle = window.getComputedStyle(greenElement); 
+assert.equal(greenStyle?.backgroundColor, 'rgb(0, 255, 0)');
 ```
 
 The `div` element with class `cyan` should have a `background-color` of cyan.
 
 ```js
-assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
+const cyanElement = document.querySelector(".cyan");
+const cyanStyle = window.getComputedStyle(cyanElement); 
+assert.equal(cyanStyle?.backgroundColor, 'rgb(0, 255, 255)');
 ```
 
 The `div` element with class `blue` should have a `background-color` of blue.
 
 ```js
-assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
+const blueElement = document.querySelector(".blue");
+const blueStyle = window.getComputedStyle(blueElement); 
+assert.equal(blueStyle?.backgroundColor, 'rgb(0, 0, 255)');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-heading-element-versus-a-paragraph-element.md

@@ -20,7 +20,10 @@ To make the heading significantly larger than the paragraph, change the `font-si
 Your code should add a `font-size` property to the `h4` element set to 27 pixels.
 
 ```js
-assert($('h4').css('font-size') == '27px');
+
+const h4Element =document.querySelector('h4')
+const h4Style = window.getComputedStyle(h4Element);
+assert.equal(h4Style?.fontSize,'27px');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md

@@ -27,11 +27,12 @@ Your code should change the `width` property of the card to 245 pixels by using
 
 ```js
 const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
-assert(
-  fullCard &&
-    /width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
-    $('.fullCard').css('maxWidth') === 'none'
-);
+const fullCardElement = document.querySelector('.fullCard');
+const fullCardStyle = window.getComputedStyle(fullCardElement); 
+assert.match(code,/\.fullCard\s*{[\s\S]+?[^}]}/g); 
+
+assert.match(fullCard?.[0],/width\s*:\s*245px\s*(;|})/gi);
+assert.equal(fullCardStyle?.maxWidth, 'none');
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md

@@ -22,7 +22,7 @@ Alter the animation rate for the element with the class name of `star-1` by chan
 The `@keyframes` rule for the `star-1` class should be 50%.
 
 ```js
-assert(code.match(/twinkle-1\s*?{\s*?50%/g));
+assert.match(code,/twinkle-1\s*?{\s*?50%/g);
 ```
 
 # --seed--

curriculum/challenges/english/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md

@@ -26,7 +26,9 @@ To keep the ball bouncing on the right on a continuous loop, change the `animati
 The `animation-iteration-count` property should have a value of `infinite`.
 
 ```js
-assert($('#ball').css('animation-iteration-count') == 'infinite');
+const ballElement = document.querySelector('#ball');
+const ballStyle = window.getComputedStyle(ballElement); 
+assert.equal(ballStyle?.animationIterationCount, 'infinite');
 ```
 
 # --seed--