feat(curriculum) : remove jQuery from legacy applied accessibility (#55916)

Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2024-09-03 18:27:35 -04:00
parent 3c85dac5f5
commit ed1152fcb2
22 changed files with 94 additions and 98 deletions
@@ -28,7 +28,7 @@ Camper Cat happens to be both a coding ninja and an actual ninja, who is buildin
 Your `img` tag should have an `alt` attribute and it should not be empty.

 ```js
-assert($('img').attr('alt'));
+assert.isNotEmpty(document.querySelector('img')?.getAttribute('alt'));
 ```

 # --seed--
@@ -31,25 +31,25 @@ Camper Cat is setting up a Mortal Kombat tournament and wants to ask his competi
 Your code should add one `input` tag for the date selector field.

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

 Your `input` tag should have a `type` attribute with a value of `date`.

 ```js
-assert($('input').attr('type') == 'date');
+assert.equal(document.querySelector('input')?.getAttribute('type'), 'date');
 ```

 Your `input` tag should have an `id` attribute with a value of `pickdate`.

 ```js
-assert($('input').attr('id') == 'pickdate');
+assert.equal(document.querySelector('input')?.getAttribute('id'),'pickdate');
 ```

 Your `input` tag should have a `name` attribute with a value of `date`.

 ```js
-assert($('input').attr('name') == 'date');
+assert.equal(document.querySelector('input')?.getAttribute('name'), 'date');
 ```

 # --seed--
@@ -27,7 +27,9 @@ Camper Cat is testing different styles for an important button, but the yellow (
 Your code should change the text `color` for the `button` to the dark blue.

 ```js
-assert($('button').css('color') == 'rgb(0, 51, 102)');
+const button = document.querySelector('button');
+const buttonColor = window.getComputedStyle(button).color; 
+assert.equal(buttonColor, 'rgb(0, 51, 102)');
 ```

 # --seed--
@@ -26,13 +26,13 @@ Camper Cat is experimenting with using color for his blog text and background, b
 Your code should only change the lightness value for the text `color` property to a value of 15%.

 ```js
-assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
+assert.match(code ,/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi);
 ```

 Your code should only change the lightness value for the `background-color` property to a value of 55%.

 ```js
-assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
+assert.match(code ,/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi);
 ```

 # --seed--
@@ -22,26 +22,19 @@ The link text that Camper Cat is using is not very descriptive without the surro
 Your code should move the anchor `a` tags from around the words `Click here` to wrap around the words `information about batteries`.

 ```js
-assert(
-  $('a')
-    .text()
-    .match(/^(information about batteries)$/g)
-);
+assert.match(document.querySelector('a')?.textContent, /^(information about batteries)$/g);
 ```

 The `a` element should have an `href` attribute with a value of an empty string `""`.

 ```js
-assert($('a').attr('href') === '');
+assert.isEmpty(document.querySelector('a')?.getAttribute('href'));
 ```

 The `a` element should have a closing tag.

 ```js
-assert(
-  code.match(/<\/a>/g) &&
-    code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
-);
+assert.isTrue(code.match(/<\/a>/g)?.length === code.match(/<a href=(''|"")>/g)?.length);
 ```

 # --seed--
@@ -35,49 +35,49 @@ Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax),
 Your code should have one `audio` tag.

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

 Your `audio` element should have a closing tag.

 ```js
-assert(
-  code.match(/<\/audio>/g).length === 1 &&
-    code.match(/<audio.*>[\s\S]*<\/audio>/g)
-);
+assert.match(code,/<audio.*>[\s\S]*<\/audio>/g);
+assert.lengthOf(code.match(/<\/audio>/g),1);
 ```

 The `audio` tag should have the `controls` attribute.

 ```js
-assert($('audio').attr('controls'));
+assert.exists(document.querySelector('audio')?.getAttribute('controls'));
 ```

 Your code should have one `source` tag.

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

 Your `source` tag should be inside the `audio` tags.

 ```js
-assert($('audio').children('source').length === 1);
+const audio = document.querySelector('audio');
+const children = audio.querySelectorAll(`:scope ${'source'}`);
+assert.lengthOf(children,1);
 ```

 The value for the `src` attribute on the `source` tag should match the link in the instructions exactly.

 ```js
-assert(
-  $('source').attr('src') ===
-    'https://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3'
+assert.equal(
+  document.querySelector('source')?.getAttribute('src'),
+  'https://cdn.freecodecamp.org/curriculum/applied-accessibility/screen-reader.mp3'
 );
 ```

 Your code should include a `type` attribute on the `source` tag with a value of audio/mpeg.

 ```js
-assert($('source').attr('type') === 'audio/mpeg');
+assert.equal(document.querySelector('source')?.getAttribute('type'), 'audio/mpeg');
 ```

 # --seed--
@@ -34,39 +34,40 @@ Camper Cat is hard at work creating a stacked bar chart showing the amount of ti
 Your code should have one `figure` tag.

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

 Your code should have one `figcaption` tag.

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

 Your code should not have any `div` tags.

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

 Your code should not have any `p` tags.

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

 The `figcaption` should be a child of the `figure` tag.

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

 Your `figure` element should have a closing tag.

 ```js
-assert(
-  code.match(/<\/figure>/g) &&
-    code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
+assert.isTrue(
+    code.match(/<\/figure>/g)?.length === code.match(/<figure>/g)?.length
 );
 ```

@@ -33,13 +33,13 @@ Camper Cat expects a lot of interest in his thoughtful blog posts and wants to i
 Your code should have a `for` attribute on the `label` tag that is not empty.

 ```js
-assert($('label').attr('for'));
+assert.isNotEmpty(document.querySelector('label')?.getAttribute('for'));
 ```

 Your `for` attribute value should match the `id` value on the email `input`.

 ```js
-assert($('label').attr('for') == 'email');
+assert.equal(document.querySelector('label')?.getAttribute('for'), 'email');
 ```

 # --seed--
@@ -22,13 +22,17 @@ Camper Cat's choice of light gray text on a white background for his recent blog
 Your code should change the text `color` for the `body` to the darker gray.

 ```js
-assert($('body').css('color') == 'rgb(99, 99, 99)');
+const body = document.querySelector('body');
+const bodyColor = window.getComputedStyle(body).color; 
+assert(bodyColor == 'rgb(99, 99, 99)');
 ```

 Your code should not change the `background-color` for the `body`.

 ```js
-assert($('body').css('background-color') == 'rgb(255, 255, 255)');
+const body = document.querySelector('body');
+const backgroundColor = window.getComputedStyle(body).backgroundColor; 
+assert.equal(backgroundColor , 'rgb(255, 255, 255)');
 ```

 # --seed--
@@ -26,13 +26,13 @@ Camper Cat has some big ideas for his ninja weapons page. Help him set up his ma
 Your code should have one `main` tag.

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

 The `main` tags should be between the closing `header` tag and the opening `footer` tag.

 ```js
-assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
+assert.match(code,/<\/header>\s*?<main>\s*?<\/main>/gi);
 ```

 # --seed--
@@ -30,13 +30,13 @@ Camper Cat has coded a skeleton page for the blog part of his website. He's plan
 Your `img` tag should have an `alt` attribute.

 ```js
-assert(!($('img').attr('alt') == undefined));
+assert.isTrue(document.querySelector('img')?.hasAttribute('alt'));
 ```

 The `alt` attribute should be set to an empty string.

 ```js
-assert($('img').attr('alt') == '');
+assert.isEmpty(document.querySelector('img')?.getAttribute('alt'));
 ```

 # --seed--
@@ -42,25 +42,29 @@ Camper Cat created a really cool stacked bar chart for his training page, and pu
 Your code should set the `position` property of the `sr-only` class to a value of `absolute`.

 ```js
-assert($('.sr-only').css('position') == 'absolute');
+const srOnly = document.querySelector('.sr-only');
+const position = window.getComputedStyle(srOnly).position; 
+assert.equal(position, 'absolute');
 ```

 Your code should set the `left` property of the `sr-only` class to a value of `-10000px`.

 ```js
-assert($('.sr-only').css('left') == '-10000px');
+const srOnly = document.querySelector('.sr-only');
+const left = window.getComputedStyle(srOnly).left;
+assert.equal(left, '-10000px');
 ```

 Your code should set the `width` property of the `sr-only` class to a value of `1` pixel.

 ```js
-assert(code.match(/width:\s*?1px/gi));
+assert.match(code , /width:\s*?1px/gi);
 ```

 Your code should set the `height` property of the `sr-only` class to a value of `1` pixel.

 ```js
-assert(code.match(/height:\s*?1px/gi));
+assert.match(code , /height:\s*?1px/gi);
 ```

 # --seed--
@@ -28,25 +28,25 @@ Camper Cat wants the links around the two blog article titles to have keyboard s
 Your code should add an `accesskey` attribute to the `a` tag with the `id` of `first`.

 ```js
-assert($('#first').attr('accesskey'));
+assert.isTrue(document.querySelector('#first')?.hasAttribute('accesskey'));
 ```

 Your code should add an `accesskey` attribute to the `a` tag with the `id` of `second`.

 ```js
-assert($('#second').attr('accesskey'));
+assert.isTrue(document.querySelector('#second')?.hasAttribute('accesskey'));
 ```

 Your code should set the `accesskey` attribute on the `a` tag with the `id` of `first` to `g`. Note that case matters.

 ```js
-assert($('#first').attr('accesskey') == 'g');
+assert.equal(document.querySelector('#first')?.getAttribute('accesskey'), 'g');
 ```

 Your code should set the `accesskey` attribute on the `a` tag with the `id` of `second` to `c`. Note that case matters.

 ```js
-assert($('#second').attr('accesskey') == 'c');
+assert.equal(document.querySelector('#second')?.getAttribute('accesskey'), 'c');
 ```

 # --seed--
@@ -20,19 +20,19 @@ Camper Cat's training page is making good progress. Change the `div` he used to
 Your code should have one `footer` tag.

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

 Your code should not have any `div` tags.

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

 Your code should have an opening and closing `footer` tag.

 ```js
-assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g));
+assert.match(code,/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g);
 ```

 # --seed--
@@ -24,28 +24,27 @@ Camper Cat is writing some great articles about ninja training, and wants to add
 Your code should have one `header` tag.

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

 Your `header` tags should wrap around the `h1`.

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

 Your code should not have any `div` tags.

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

 Your `header` element should have a closing tag.

 ```js
-assert(
-  code.match(/<\/header>/g) &&
-    code.match(/<\/header>/g).length === code.match(/<header>/g).length
-);
+assert.isTrue(code.match(/<\/header>/g)?.length === code.match(/<header>/g)?.length);
 ```

 # --seed--
@@ -22,28 +22,27 @@ Camper Cat included navigation links at the top of his training page, but wrappe
 Your code should have one `nav` tag.

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

 Your `nav` tags should wrap around the `ul` and its list items.

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

 Your code should not have any `div` tags.

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

 Your `nav` element should have a closing tag.

 ```js
-assert(
-  code.match(/<\/nav>/g) &&
-    code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
-);
+assert.isTrue(code.match(/<\/nav>/g)?.length === code.match(/<nav>/g)?.length);
 ```

 # --seed--
@@ -26,28 +26,25 @@ Camper Cat's Mortal Kombat survey results are in! Wrap a `time` tag around the t
 Your code should have a `p` element which includes the text `Thank you to everyone for responding to Master Camper Cat's survey.` and include a `time` element.

 ```js
-assert(timeElement);
+assert.exists(timeElement);
 ```

 Your added `time` tags should wrap around the text `Thursday, September 15<sup>th</sup>`.

 ```js
-assert(
-  timeElement &&
-    timeElement?.innerHTML?.trim() === 'Thursday, September 15<sup>th</sup>'
-);
+assert.strictEqual(timeElement?.innerHTML?.trim(), 'Thursday, September 15<sup>th</sup>');
 ```

 Your added `time` tag should have a `datetime` attribute that is not empty.

 ```js
-assert(datetimeAttr && datetimeAttr?.length);
+assert(datetimeAttr?.length != 0);
 ```

 Your added `datetime` attribute should be set to a value of `2016-09-15`.

 ```js
-assert(datetimeAttr === '2016-09-15');
+assert.equal(datetimeAttr , '2016-09-15');
 ```

 # --seed--
@@ -30,25 +30,25 @@ Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix
 Your code should have 6 `h3` elements.

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

 Your code should have 6 `h3` closing tags.

 ```js
-assert((code.match(/\/h3/g) || []).length === 6);
+assert.lengthOf((code.match(/\/h3/g) || []) ,6);
 ```

 Your code should not have any `h5` elements.

 ```js
-assert($('h5').length === 0);
+assert.isEmpty(document.querySelectorAll('h5'));
 ```

 Your code should not have any `h5` closing tags.

 ```js
-assert(/\/h5/.test(code) === false);
+assert.notMatch(code, /\/h5/);
 ```

 # --seed--
@@ -28,13 +28,13 @@ Camper Cat created a new survey to collect information about his users. He knows
 Your code should add a `tabindex` attribute to the `p` tag that holds the form instructions.

 ```js
-assert($('p').attr('tabindex'));
+assert.isNotNull(document.querySelector('p')?.getAttribute('tabindex'));
 ```

 Your code should set the `tabindex` attribute on the `p` tag to a value of 0.

 ```js
-assert($('p').attr('tabindex') == '0');
+assert.equal(document.querySelector('p')?.getAttribute('tabindex'), '0');
 ```

 # --seed--
@@ -36,25 +36,25 @@ Another thing to note is that some browsers may place you in the middle of your
 Your code should add a `tabindex` attribute to the `search` `input` tag.

 ```js
-assert($('#search').attr('tabindex'));
+assert.isNotNull(document.querySelector('#search')?.getAttribute('tabindex'));
 ```

 Your code should add a `tabindex` attribute to the `submit` `input` tag.

 ```js
-assert($('#submit').attr('tabindex'));
+assert.isNotNull(document.querySelector('#submit')?.getAttribute('tabindex'));
 ```

 Your code should set the `tabindex` attribute on the `search` `input` tag to a value of 1.

 ```js
-assert($('#search').attr('tabindex') == '1');
+assert.equal(document.querySelector('#search')?.getAttribute('tabindex'), '1');
 ```

 Your code should set the `tabindex` attribute on the `submit` `input` tag to a value of 2.

 ```js
-assert($('#submit').attr('tabindex') == '2');
+assert.equal(document.querySelector('#submit')?.getAttribute('tabindex'), '2');
 ```

 # --seed--
@@ -30,13 +30,13 @@ Camper Cat used `article` tags to wrap the posts on his blog page, but he forgot
 Your code should have three `article` tags.

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

 Your code should not have any `div` tags.

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

 # --seed--
@@ -40,34 +40,31 @@ Camper Cat wants information about the ninja level of his users when they sign u
 Your code should have a `fieldset` tag around the radio button set.

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

 The `fieldset` element should have a closing tag.

 ```js
-assert(
-  code.match(/<\/fieldset>/g) &&
-    code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
-);
+assert.isTrue(code.match(/<\/fieldset>/g)?.length === code.match(/<fieldset>/g)?.length);
 ```

 Your code should have a `legend` tag around the text asking what level ninja a user is.

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

 Your code should not have any `div` tags.

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

 Your code should no longer have a `p` tag around the text asking what level ninja a user is.

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

 # --seed--