feat(curriculum) : remove jQuery from bootstrap project (#55950)

Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2024-09-04 04:53:06 -04:00
parent c968c184d6
commit 973143bba5
31 changed files with 264 additions and 266 deletions
@@ -17,26 +17,27 @@ Nest three `button` elements within each of your `div` elements having the class
 Three `button` elements should be nested within each of your `div` elements with class `well`.

 ```js
-assert(
-  $('div.well:eq(0)').children('button').length === 3 &&
-    $('div.well:eq(1)').children('button').length === 3
-);
+const buttonOne = document.querySelectorAll('div.well')?.[0];
+const buttonOneChildren = buttonOne?.querySelectorAll(`:scope ${'button'}`);
+assert.lengthOf(buttonOneChildren,3);
+
+const buttonTwo = document.querySelectorAll('div.well')?.[1]
+const buttonTwoChildren = buttonTwo?.querySelectorAll(`:scope ${'button'}`);
+assert.lengthOf(buttonTwoChildren,3);
 ```

 You should have a total of 6 `button` elements.

 ```js
-assert($('button') && $('button').length > 5);
+assert.lengthOf(document.querySelectorAll('button'), 6);
 ```

 All of your `button` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/button>/g) &&
-    code.match(/<button/g) &&
-    code.match(/<\/button>/g).length === code.match(/<button/g).length
-);
+assert.match(code,/<\/button>/g);
+assert.match(code,/<button/g);
+assert.equal(code.match(/<\/button>/g).length,code.match(/<button/g).length);
 ```

 # --seed--
@@ -24,29 +24,29 @@ Use Font Awesome to add an `info-circle` icon to your info button and a `trash`
 You should add a `<i class="fas fa-info-circle"></i>` within your `info` button element.

 ```js
-assert(
-  $('.btn-info > i').is('.fas.fa-info-circle') ||
-    $('.btn-info > span').is('.fas.fa-info-circle')
+assert.isTrue(
+  document.querySelector('.btn-info > i')?.classList?.value === 'fas fa-info-circle' ||
+    document.querySelector('.btn-info > span')?.classList?.value === 'fas fa-info-circle'
 );
 ```

 You should add a `<i class="fas fa-trash"></i>` within your `delete` button element.

 ```js
-assert(
-  $('.btn-danger > i').is('.fas.fa-trash') ||
-    $('.btn-danger > span').is('.fas.fa-trash')
+assert.isTrue(
+  document.querySelector('.btn-danger > i')?.classList?.value === 'fas fa-trash' ||
+    document.querySelector('.btn-danger > span')?.classList?.value === 'fas fa-trash'
 );
 ```

 Each of your `i` elements should have a closing tag and `<i class="fas fa-thumbs-up"></i>` is in your `like` button element.

 ```js
-assert(
-  code.match(/<\/i>|<\/span/g) &&
-    code.match(/<\/i|<\/span>/g).length > 2 &&
-    ($('.btn-primary > i').is('.fas.fa-thumbs-up') ||
-      $('.btn-primary > span').is('.fas.fa-thumbs-up'))
+assert.match(code,/<\/i>|<\/span/g);
+assert.lengthOf(code.match(/<\/i|<\/span>/g),4)
+assert.isTrue(
+    document.querySelector('.btn-primary > i')?.classList?.value === 'fas fa-thumbs-up' ||
+      document.querySelector('.btn-primary > span')?.classList?.value === 'fas fa-thumbs-up'
 );
 ```

@@ -38,33 +38,34 @@ Use Font Awesome to add a `thumbs-up` icon to your like button by giving it an `
 You should add an `i` element with the classes `fas` and `fa-thumbs-up`.

 ```js
-assert($('i').is('.fas.fa-thumbs-up') || $('span').is('.fas.fa-thumbs-up'));
+assert.isTrue(document.querySelector('i')?.classList?.value === 'fas fa-thumbs-up' || document.querySelector('span')?.classList?.value === 'fas fa-thumbs-up');
 ```

 Your `fa-thumbs-up` icon should be located within the Like button.

 ```js
-assert(
-  ($('i.fa-thumbs-up').parent().text().match(/Like/gi) &&
-    $('.btn-primary > i').is('.fas.fa-thumbs-up')) ||
-    ($('span.fa-thumbs-up').parent().text().match(/Like/gi) &&
-      $('.btn-primary > span').is('.fas.fa-thumbs-up'))
-);
+const iconTextContent = document.querySelector('i.fa-thumbs-up')?.parentNode?.textContent;  
+const spanTextContent = document.querySelector('span.fa-thumbs-up')?.parentNode?.textContent;  
+assert.isTrue(
+  (iconTextContent?.match(/Like/gi) &&
+    document.querySelector('.btn-primary > i') === document.querySelector('.fas.fa-thumbs-up')) ||
+    (spanTextContent?.match(/Like/gi) &&
+      document.querySelector('.btn-primary > span') === document.querySelector('.fas.fa-thumbs-up')));
 ```

 Your `i` element should be nested within your `button` element.

 ```js
-assert(
-  $('button').children('i').length > 0 ||
-    $('button').children('span').length > 0
-);
+const button = document.querySelector('button'); 
+const i = button?.querySelectorAll("i");
+const span =  button?.querySelectorAll("span");
+assert(i.length > 0 ||span.length > 0);
 ```

 Your icon element should have a closing tag.

 ```js
-assert(code.match(/<\/i>|<\/span>/g));
+assert.match(code, /(<\/i>|<\/span>)\s*Like\s*<\/button>/g);
 ```

 # --seed--
@@ -27,19 +27,17 @@ Give the well on the left the id of `left-well`. Give the well on the right the
 Your left `well` should have the id of `left-well`.

 ```js
-assert(
-  $('.col-xs-6').children('#left-well') &&
-    $('.col-xs-6').children('#left-well').length > 0
-);
+const column = document.querySelectorAll('.col-xs-6')[0];
+const leftWall = column?.querySelectorAll(`:scope ${'#left-well'}`);
+assert.lengthOf(leftWall,1)
 ```

 Your right `well` should have the id of `right-well`.

 ```js
-assert(
-  $('.col-xs-6').children('#right-well') &&
-    $('.col-xs-6').children('#right-well').length > 0
-);
+const column = document.querySelectorAll('.col-xs-6')[1];
+const rightWall = column?.querySelectorAll(`:scope ${'#right-well'}`);
+assert.lengthOf(rightWall,1)
 ```

 # --seed--
@@ -17,13 +17,13 @@ Apply both the `btn` and `btn-default` classes to each of your `button` elements
 You should apply the `btn` class to each of your `button` elements.

 ```js
-assert($('.btn').length > 5);
+assert.lengthOf(document.querySelectorAll('.btn'),6);
 ```

 You should apply the `btn-default` class to each of your `button` elements.

 ```js
-assert($('.btn-default').length > 5);
+assert.lengthOf(document.querySelectorAll('.btn-default'), 6);
 ```

 # --seed--
@@ -19,29 +19,30 @@ Note that these buttons still need the `btn` and `btn-block` classes.
 You should create a new `button` element with the text `Info`.

 ```js
-assert(new RegExp('info', 'gi').test($('button').text()));
+const infoButton = document.querySelectorAll('button')?.[1]; 
+assert.match(infoButton.textContent,/info/gi);
 ```

 Both of your Bootstrap buttons should have the `btn` and `btn-block` classes.

 ```js
-assert($('button.btn-block.btn').length > 1);
+assert.lengthOf(document.querySelectorAll('button.btn-block.btn'),2);
 ```

 Your new button should have the class `btn-info`.

 ```js
-assert($('button').hasClass('btn-info'));
+const infoButton = [...document.querySelectorAll('button')].at(1);
+assert.isTrue(infoButton?.classList?.contains('btn-info'));
 ```

 All of your `button` elements should have closing tags.

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

 # --seed--
@@ -21,13 +21,13 @@ Remember that you can add several classes to the same element by separating each
 Your `h2` element should be centered by applying the class `text-center`

 ```js
-assert($('h2').hasClass('text-center'));
+assert.isTrue(document.querySelector('h2')?.classList?.contains('text-center'));
 ```

 Your `h2` element should still have the class `red-text`

 ```js
-assert($('h2').hasClass('red-text'));
+assert.isTrue(document.querySelector('h2')?.classList?.contains('red-text'));
 ```

 # --seed--
@@ -37,23 +37,22 @@ Add Bootstrap's `btn-block` class to your Bootstrap button.
 Your button should still have the `btn` and `btn-default` classes.

 ```js
-assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
+assert.isTrue(document.querySelector('button')?.classList?.contains('btn'));
+assert.isTrue(document.querySelector('button')?.classList?.contains('btn-default'));
 ```

 Your button should have the class `btn-block`.

 ```js
-assert($('button').hasClass('btn-block'));
+assert.isTrue(document.querySelector('button')?.classList?.contains('btn-block'));
 ```

 All of your `button` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/button>/g) &&
-    code.match(/<button/g) &&
-    code.match(/<\/button>/g).length === code.match(/<button/g).length
-);
+assert.match(code,/<\/button>/g);
+assert.match(code,/<button/g);
+assert.equal(code.match(/<\/button>/g).length, code.match(/<button/g).length);
 ```

 # --seed--
@@ -17,26 +17,23 @@ Create a new `button` element below your large kitten photo. Give it the `btn` a
 You should create a new `button` element with the text `Like`.

 ```js
-assert(
-  new RegExp('like', 'gi').test($('button').text()) &&
-    $('img.img-responsive + button.btn').length > 0
-);
+assert.match(document.querySelector('button')?.textContent, /like/gi);
+assert.lengthOf(document.querySelectorAll('img.img-responsive + button.btn'),1)
 ```

 Your new button should have two classes: `btn` and `btn-default`.

 ```js
-assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
+assert.isTrue(document.querySelector('button')?.classList?.contains('btn') )
+assert.isTrue(document.querySelector('button')?.classList?.contains('btn-default'));
 ```

 All of your `button` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/button>/g) &&
-    code.match(/<button/g) &&
-    code.match(/<\/button>/g).length === code.match(/<button/g).length
-);
+assert.match(code,/<\/button>/g);
+assert.match(code,/<button/g);
+assert.equal(code.match(/<\/button>/g).length ,code.match(/<button/g).length);
 ```

 # --seed--
@@ -21,35 +21,33 @@ Color your `h3` element with the `text-primary` Bootstrap class, and center it w
 You should add an `h3` element to your page.

 ```js
-assert($('h3') && $('h3').length > 0);
+assert.lengthOf(document.querySelectorAll('h3'),1);
 ```

 Your `h3` element should have a closing tag.

 ```js
-assert(
-  code.match(/<\/h3>/g) &&
-    code.match(/<h3/g) &&
-    code.match(/<\/h3>/g).length === code.match(/<h3/g).length
-);
+assert.match(code,/<\/h3>/g);
+assert.match(code,/<h3/g);
+assert.equal( code.match(/<\/h3>/g).length , code.match(/<h3/g).length);
 ```

 Your `h3` element should be colored by applying the class `text-primary`

 ```js
-assert($('h3').hasClass('text-primary'));
+assert.isTrue(document.querySelector('h3')?.classList?.contains('text-primary'));
 ```

 Your `h3` element should be centered by applying the class `text-center`

 ```js
-assert($('h3').hasClass('text-center'));
+assert.isTrue(document.querySelector('h3')?.classList?.contains('text-center'));
 ```

 Your `h3` element should have the text `jQuery Playground`.

 ```js
-assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text()));
+assert.match(document.querySelector('h3')?.textContent, /jquery(\s)+playground/gi);
 ```

 # --seed--
@@ -17,34 +17,31 @@ Create a `div` element below the `h3` tag, with a class of `row`.
 You should add a `div` element below your `h3` element.

 ```js
-assert(
-  $('div').length > 1 &&
-    $('div.row h3.text-primary').length == 0 &&
-    $('div.row + h3.text-primary').length == 0 &&
-    $('h3.text-primary + div.row').length > 0
-);
+assert.lengthOf(document.querySelectorAll('div'),2);
+assert.lengthOf(document.querySelectorAll('div.row h3.text-primary'),0);
+assert.lengthOf(document.querySelectorAll('div.row + h3.text-primary'),0)
+assert.lengthOf(document.querySelectorAll('h3.text-primary + div.row'),1);
 ```

 Your `div` element should have the class `row`

 ```js
-assert($('div').hasClass('row'));
+const newDiv = document.querySelectorAll('div')?.[1]; 
+assert.isTrue(newDiv?.classList?.contains('row'));
 ```

 Your `row div` should be nested inside the `container-fluid div`

 ```js
-assert($('div.container-fluid div.row').length > 0);
+assert.lengthOf(document.querySelectorAll('div.container-fluid div.row'),1);
 ```

 Your `div` element should have a closing tag.

 ```js
-assert(
-  code.match(/<\/div>/g) &&
-    code.match(/<div/g) &&
-    code.match(/<\/div>/g).length === code.match(/<div/g).length
-);
+assert.match(code,/<\/div>/g);
+assert.match(code,/<div/g);
+assert.equal(code.match(/<\/div>/g).length ,code.match(/<div/g).length);
 ```

 # --seed--
@@ -17,7 +17,7 @@ Give each of your `button` elements the class `target`.
 You should apply the `target` class to each of your `button` elements.

 ```js
-assert($('.target').length > 5);
+assert.lengthOf(document.querySelectorAll('.target'),6);
 ```

 # --seed--
@@ -21,35 +21,40 @@ Notice how the image is now just the right size to fit along the text?
 Your `h2` element and topmost `img` element should both be nested together within a `div` element with the class `row`.

 ```js
-assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0);
+const row = document.querySelector('div.row');
+const h2 = row?.querySelectorAll(`:scope ${'h2'}`)
+const image = row?.querySelectorAll(`:scope ${'img'}`)
+assert.lengthOf(h2,1);
+assert.lengthOf(image ,1);
 ```

 Your topmost `img` element should be nested within a `div` with the class `col-xs-4`.

 ```js
-assert(
-  $('div.col-xs-4:has(img)').length > 0 &&
-    $('div.col-xs-4:has(div)').length === 0
-);
+const column = document.querySelector('div.col-xs-4');
+const div = column?.querySelectorAll(`:scope ${'div'}`);
+const img = column?.querySelectorAll(`:scope ${'img'}`)
+assert.isEmpty(div);
+assert.lengthOf(img,1)
 ```

 Your `h2` element should be nested within a `div` with the class `col-xs-8`.

 ```js
-assert(
-  $('div.col-xs-8:has(h2)').length > 0 &&
-    $('div.col-xs-8:has(div)').length === 0
-);
+const column = document.querySelector('div.col-xs-8');
+const div = column?.querySelectorAll(`:scope ${'div'}`);
+const h2 = column?.querySelectorAll(`:scope ${'h2'}`)
+
+assert.isEmpty(div);
+assert.lengthOf(h2, 1);
 ```

 All of your `div` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/div>/g) &&
-    code.match(/<div/g) &&
-    code.match(/<\/div>/g).length === code.match(/<div/g).length
-);
+assert.match(code,/<\/div>/g);
+assert.match(code,/<div/g);
+assert.equal(code.match(/<\/div>/g).length,code.match(/<div/g).length);
 ```

 # --seed--
@@ -17,23 +17,22 @@ Nest one `div` element with the class `well` within each of your `col-xs-6` `div
 You should add a `div` element with the class `well` inside each of your `div` elements with the class `col-xs-6`

 ```js
-assert($('div.col-xs-6').not(':has(>div.well)').length < 1);
+const wells = document.querySelectorAll('div.col-xs-6 > div.well');
+assert.lengthOf( wells,2 ); 
 ```

 Both of your `div` elements with the class `col-xs-6` should be nested within your `div` element with the class `row`.

 ```js
-assert($('div.row > div.col-xs-6').length > 1);
+assert.lengthOf(document.querySelectorAll('div.row > div.col-xs-6'),2);
 ```

 All your `div` elements should have closing tags.

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

 # --seed--
@@ -23,35 +23,33 @@ Finally, remove the `smaller-image` class from your first `img` element and repl
 Your `h2` element should no longer have the class `red-text`.

 ```js
-assert(!$('h2').hasClass('red-text'));
+assert.isFalse(document.querySelector('h2')?.classList?.contains('red-text'));
 ```

 Your `h2` element should now have the class `text-primary`.

 ```js
-assert($('h2').hasClass('text-primary'));
+assert.isTrue(document.querySelector('h2')?.classList?.contains('text-primary'));
 ```

 Your paragraph elements should no longer use the font `Monospace`.

 ```js
-assert(
-  !$('p')
-    .css('font-family')
-    .match(/monospace/i)
-);
+const paragraphElement = document.querySelector('p');
+const paragraphFontFamily = window.getComputedStyle(paragraphElement)["font-family"]; 
+assert.notMatch(paragraphFontFamily,/monospace/i);
 ```

 The `smaller-image` class should be removed from your top image.

 ```js
-assert(!$('img').hasClass('smaller-image'));
+assert.isFalse(document.querySelector('img')?.classList?.contains('smaller-image'));
 ```

 You should add the `img-responsive` class to your top image.

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

 # --seed--
@@ -19,55 +19,49 @@ Make sure that `target1` to `target3` are in `#left-well`, and `target4` to `tar
 One `button` element should have the id `target1`.

 ```js
-assert(
-  $('#left-well').children('#target1') &&
-    $('#left-well').children('#target1').length > 0
-);
+const leftWall = document.querySelector('#left-well'); 
+const targetOne = leftWall?.querySelectorAll(`:scope ${'#target1'}`)
+assert.lengthOf(targetOne,1);
 ```

 One `button` element should have the id `target2`.

 ```js
-assert(
-  $('#left-well').children('#target2') &&
-    $('#left-well').children('#target2').length > 0
-);
+const leftWall = document.querySelector('#left-well'); 
+const targetTwo = leftWall?.querySelectorAll(`:scope ${'#target2'}`)
+assert.lengthOf(targetTwo,1);
 ```

 One `button` element should have the id `target3`.

 ```js
-assert(
-  $('#left-well').children('#target3') &&
-    $('#left-well').children('#target3').length > 0
-);
+const leftWall = document.querySelector('#left-well'); 
+const targetThree = leftWall?.querySelectorAll(`:scope ${'#target3'}`)
+assert.lengthOf(targetThree,1);
 ```

 One `button` element should have the id `target4`.

 ```js
-assert(
-  $('#right-well').children('#target4') &&
-    $('#right-well').children('#target4').length > 0
-);
+const leftWall = document.querySelector('#right-well'); 
+const targetFour = leftWall?.querySelectorAll(`:scope ${'#target4'}`)
+assert.lengthOf(targetFour,1);
 ```

 One `button` element should have the id `target5`.

 ```js
-assert(
-  $('#right-well').children('#target5') &&
-    $('#right-well').children('#target5').length > 0
-);
+const leftWall = document.querySelector('#right-well'); 
+const targetFive = leftWall?.querySelectorAll(`:scope ${'#target5'}`)
+assert.lengthOf(targetFive,1);
 ```

 One `button` element should have the id `target6`.

 ```js
-assert(
-  $('#right-well').children('#target6') &&
-    $('#right-well').children('#target6').length > 0
-);
+const leftWall = document.querySelector('#right-well'); 
+const targetSix = leftWall?.querySelectorAll(`:scope ${'#target6'}`)
+assert.lengthOf(targetSix,1);
 ```

 # --seed--
@@ -17,23 +17,24 @@ Let's nest your `h3` element within a `div` element with the class `container-fl
 Your `div` element should have the class `container-fluid`.

 ```js
-assert($('div').hasClass('container-fluid'));
+assert.isTrue(document.querySelector('div')?.classList?.contains('container-fluid'));
 ```

 Each of your `div` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/div>/g) &&
-    code.match(/<div/g) &&
-    code.match(/<\/div>/g).length === code.match(/<div/g).length
-);
+assert.match(code,/<\/div>/g);
+assert.match(code,/<div/g);
+
+assert.equal(code.match(/<\/div>/g).length ,code.match(/<div/g).length);
 ```

 Your `h3` element should be nested inside a `div` element.

 ```js
-assert($('div').children('h3').length > 0);
+const divElement = document.querySelector('div');
+const divChildren = divElement?.querySelectorAll(`:scope ${'h3'}`)
+assert.lengthOf(divChildren,1);
 ```

 # --seed--
@@ -17,37 +17,37 @@ Give each of your `button` elements text that corresponds to its id selector.
 Your `button` element with the id `target1` should have the text `#target1`.

 ```js
-assert(new RegExp('#target1', 'gi').test($('#target1').text()));
+assert.match(document.querySelector('#target1')?.textContent,/#target1/gi)
 ```

 Your `button` element with the id `target2` should have the text `#target2`.

 ```js
-assert(new RegExp('#target2', 'gi').test($('#target2').text()));
+assert.match(document.querySelector('#target2')?.textContent,/#target2/gi)
 ```

 Your `button` element with the id `target3` should have the text `#target3`.

 ```js
-assert(new RegExp('#target3', 'gi').test($('#target3').text()));
+assert.match(document.querySelector('#target3')?.textContent,/#target3/gi)
 ```

 Your `button` element with the id `target4` should have the text `#target4`.

 ```js
-assert(new RegExp('#target4', 'gi').test($('#target4').text()));
+assert.match(document.querySelector('#target4')?.textContent,/#target4/gi)
 ```

 Your `button` element with the id `target5` should have the text `#target5`.

 ```js
-assert(new RegExp('#target5', 'gi').test($('#target5').text()));
+assert.match(document.querySelector('#target5')?.textContent,/#target5/gi)
 ```

 Your `button` element with the id `target6` should have the text `#target6`.

 ```js
-assert(new RegExp('#target6', 'gi').test($('#target6').text()));
+assert.match(document.querySelector('#target6')?.textContent,/#target6/gi)
 ```

 # --seed--
@@ -19,31 +19,34 @@ Above your right-well, inside its `col-xs-6` `div` element, add a `h4` element w
 You should add an `h4` element to each of your `<div class="col-xs-6">` elements.

 ```js
-assert(
-  $('.col-xs-6').children('h4') && $('.col-xs-6').children('h4').length > 1
-);
+const columnSixes = document.querySelectorAll('.col-xs-6');
+const columnSixOneChildren = columnSixes?.[0]?.querySelectorAll(`:scope ${'h4'}`);
+assert.lengthOf(columnSixOneChildren,1); 
+
+const columnSixTwoChildren = columnSixes?.[1]?.querySelectorAll(`:scope ${'h4'}`);
+assert.lengthOf(columnSixTwoChildren,1); 
 ```

 One `h4` element should have the text `#left-well`.

 ```js
-assert(new RegExp('#left-well', 'gi').test($('h4').text()));
+const firstH4 = document.querySelectorAll('h4')?.[0]; 
+assert.match(firstH4?.textContent,/#left-well/gi); 
 ```

 One `h4` element should have the text `#right-well`.

 ```js
-assert(new RegExp('#right-well', 'gi').test($('h4').text()));
+const secondH4 = document.querySelectorAll('h4')?.[1]; 
+assert.match(secondH4?.textContent,/#right-well/gi); 
 ```

 All of your `h4` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/h4>/g) &&
-    code.match(/<h4/g) &&
-    code.match(/<\/h4>/g).length === code.match(/<h4/g).length
-);
+assert.match(code,/<\/h4>/g);
+assert.match(code,/<h4/g);
+assert.equal(code.match(/<\/h4>/g).length , code.match(/<h4/g).length);
 ```

 # --seed--
@@ -23,32 +23,33 @@ This is the last challenge we'll do for our Cat Photo App for now. We hope you'v
 Your form submission button and text input should be nested in a div with class `row`.

 ```js
-assert(
-  $('div.row:has(input[type="text"])').length > 0 &&
-    $('div.row:has(button[type="submit"])').length > 0
-);
+const textInput = document.querySelectorAll('div.row input[type="text"]'); 
+const submitInput = document.querySelectorAll('div.row button[type="submit"]');
+assert.lengthOf(textInput,1);
+assert.lengthOf(submitInput, 1);
 ```

 Your form text input should be nested in a div with the class `col-xs-7`.

 ```js
-assert($('div.col-xs-7:has(input[type="text"])').length > 0);
+const textInput = document.querySelectorAll('div.col-xs-7 input[type="text"]'); 
+assert.lengthOf(textInput ,1);
 ```

 Your form submission button should be nested in a div with the class `col-xs-5`.

 ```js
-assert($('div.col-xs-5:has(button[type="submit"])').length > 0);
+const submitInput  = document.querySelectorAll('div.col-xs-5 button[type="submit"]'); 
+assert.lengthOf(submitInput ,1);
 ```

 All of your `div` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/div>/g) &&
-    code.match(/<div/g) &&
-    code.match(/<\/div>/g).length === code.match(/<div/g).length
-);
+assert.match(code,/<\/div>/g);
+assert.match(code,/<div/g);
+
+assert.equal(code.match(/<\/div>/g).length,code.match(/<div/g).length);
 ```

 # --seed--
@@ -19,35 +19,33 @@ Fortunately, with Bootstrap, all we need to do is add the `img-responsive` class
 You should have a total of two images.

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

 Your new image should be below your old one and have the class `img-responsive`.

 ```js
-assert($('img:eq(1)').hasClass('img-responsive'));
+assert.isTrue(document.querySelectorAll('img')?.[1]?.classList?.contains('img-responsive'));
 ```

 Your new image should not have the class `smaller-image`.

 ```js
-assert(!$('img:eq(1)').hasClass('smaller-image'));
+assert.isFalse(document.querySelectorAll('img')?.[1]?.classList?.contains('smaller-image'));
 ```

 Your new image should have a `src` of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.

 ```js
-assert($('img:eq(1)').attr('src') === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg');
+assert.equal(document.querySelectorAll('img')?.[1]?.getAttribute('src') , 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg');
 ```

 Your new `img` element should have a closing angle bracket.

 ```js
-assert(
-  code.match(/<img/g) &&
-    code.match(/<img[^<]*>/g).length === 2 &&
-    code.match(/<img/g).length === 2
-);
+assert.match(code,/<img/g);
+assert.lengthOf(code.match(/<img[^<]*>/g), 2);
+assert.lengthOf(code.match(/<img/g), 2);
 ```

 # --seed--
@@ -23,23 +23,23 @@ Nest all three of your checkboxes in a `<div class="row">` element. Then nest ea
 All of your checkboxes should be nested inside one `div` with the class `row`.

 ```js
-assert($('div.row:has(input[type="checkbox"])').length > 0);
+const checkboxes = document.querySelectorAll(`div.row input[type="checkbox"]`); 
+assert.lengthOf(checkboxes,3);
 ```

 Each of your checkboxes should be nested inside its own `div` with the class `col-xs-4`.

 ```js
-assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2);
+const checkboxes = document.querySelectorAll(`div.col-xs-4 input[type="checkbox"]`); 
+assert.lengthOf(checkboxes,3);
 ```

 All of your `div` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/div>/g) &&
-    code.match(/<div/g) &&
-    code.match(/<\/div>/g).length === code.match(/<div/g).length
-);
+assert.match(code,/<\/div>/g);
+assert.match(code,/<div/g);
+assert.equal(code.match(/<\/div>/g).length ,code.match(/<div/g).length);
 ```

 # --seed--
@@ -23,23 +23,23 @@ Nest both your radio buttons within a `<div class="row">` element. Then nest eac
 All of your radio buttons should be nested inside one `div` with the class `row`.

 ```js
-assert($('div.row:has(input[type="radio"])').length > 0);
+const radioButtons = document.querySelectorAll(`div.row input[type=radio]`); 
+assert.lengthOf(radioButtons , 2);
 ```

 Each of your radio buttons should be nested inside its own `div` with the class `col-xs-6`.

 ```js
-assert($('div.col-xs-6:has(input[type="radio"])').length > 1);
+const radioButtons = document.querySelectorAll(`div.col-xs-6 input[type=radio]`); 
+assert.lengthOf(radioButtons , 2);
 ```

 All of your `div` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/div>/g) &&
-    code.match(/<div/g) &&
-    code.match(/<\/div>/g).length === code.match(/<div/g).length
-);
+assert.match(code,/<\/div>/);
+assert.match(code,/<div/g);
+assert.equal(code.match(/<\/div>/g).length,code.match(/<div/g).length);
 ```

 # --seed--
@@ -17,17 +17,15 @@ Create two `div` elements within your row, both with the class `col-xs-6`.
 Two `div class="col-xs-6"` elements should be nested within your `div class="row"` element.

 ```js
-assert($('div.row > div.col-xs-6').length > 1);
+assert.lengthOf(document.querySelectorAll('div.row > div.col-xs-6'),2);
 ```

 All your `div` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/div>/g) &&
-    code.match(/<div/g) &&
-    code.match(/<\/div>/g).length === code.match(/<div/g).length
-);
+assert.match(code,/<\/div>/g);
+assert.match(code,/<div/g);
+assert.equal(code.match(/<\/div>/g).length , code.match(/<div/g).length);
 ```

 # --seed--
@@ -23,25 +23,30 @@ All textual `<input>`, `<textarea>`, and `<select>` elements with the class `.fo
 The submit button in your form should have the classes `btn btn-primary`.

 ```js
-assert($('button[type="submit"]').hasClass('btn btn-primary'));
+assert.isTrue(document.querySelector('button[type="submit"]')?.classList?.contains('btn'));
+assert.isTrue(document.querySelector('button[type="submit"]')?.classList?.contains('btn-primary'));
 ```

 You should add a `<i class="fa fa-paper-plane"></i>` within your submit `button` element.

 ```js
-assert($('button[type="submit"]:has(i.fa.fa-paper-plane)').length > 0);
+const submitButton = document.querySelector('button[type="submit"]');
+const fontIcon = submitButton?.querySelectorAll('i.fa.fa-paper-plane'); 
+
+assert.lengthOf(fontIcon ,1);
 ```

 The text `input` in your form should have the class `form-control`.

 ```js
-assert($('input[type="text"]').hasClass('form-control'));
+assert.isTrue(document.querySelector('input[type="text"]')?.classList?.contains('form-control'));
 ```

 Each of your `i` elements should have a closing tag.

 ```js
-assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
+assert.match(code,/<\/i>/g);
+assert.lengthOf(code.match(/<\/i/g),4);
 ```

 # --seed--
@@ -19,23 +19,22 @@ Note that this button will still need the `btn` and `btn-block` classes.
 Your button should have the class `btn-primary`.

 ```js
-assert($('button').hasClass('btn-primary'));
+assert.isTrue(document.querySelector('button')?.classList?.contains('btn-primary'));
 ```

 Your button should still have the `btn` and `btn-block` classes.

 ```js
-assert($('button').hasClass('btn-block') && $('button').hasClass('btn'));
+assert.isTrue(document.querySelector('button')?.classList?.contains('btn-block'));
+assert.isTrue(document.querySelector('button')?.classList?.contains('btn'));
 ```

 All your `button` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/button>/g) &&
-    code.match(/<button/g) &&
-    code.match(/<\/button>/g).length === code.match(/<button/g).length
-);
+assert.match(code,/<\/button>/g);
+assert.match(code,/<button/g);
+assert.equal(code.match(/<\/button>/g).length , code.match(/<button/g).length);
 ```

 # --seed--
@@ -31,35 +31,28 @@ Here's how you would do this for the `p` element that has the text `Top 3 things
 Your `span` element should be inside your `p` element.

 ```js
-assert($('p span') && $('p span').length > 0);
+assert.lengthOf(document.querySelectorAll('p span'),1);
 ```

 Your `span` element should have just the text `love`.

 ```js
-assert(
-  $('p span') &&
-    $('p span').text().match(/love/i) &&
-    !$('p span')
-      .text()
-      .match(/Things cats/i)
-);
+assert.match(document.querySelector('p span')?.textContent,/love/i);
+assert.notMatch(document.querySelector('p span')?.textContent, /Things cats/i);
 ```

 Your `span` element should have class `text-danger`.

 ```js
-assert($('span').hasClass('text-danger'));
+assert.isTrue(document.querySelector('span')?.classList?.contains('text-danger'));
 ```

 Your `span` element should have a closing tag.

 ```js
-assert(
-  code.match(/<\/span>/g) &&
-    code.match(/<span/g) &&
-    code.match(/<\/span>/g).length === code.match(/<span/g).length
-);
+assert.match(code,/<\/span>/g);
+assert.match(code,/<span/g);
+assert.equal(code.match(/<\/span>/g).length,code.match(/<span/g).length);
 ```

 # --seed--
@@ -21,25 +21,25 @@ Add a comment at the top of your HTML that says `Code below this line should not
 You should start a comment with `<!--` at the top of your HTML.

 ```js
-assert(code.match(/^\s*<!--/));
+assert.match(code,(/^\s*<!--/));
 ```

 Your comment should have the text `Code below this line should not be changed`.

 ```js
-assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
+assert.match(code,(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
 ```

 You should close your comment with `-->`.

 ```js
-assert(code.match(/-->.*\n+.+/g));
+assert.match(code,(/-->.*\n+.+/g));
 ```

 You should have the same number of comment openers and closers.

 ```js
-assert(code.match(/<!--/g).length === code.match(/-->/g).length);
+assert.equal(code.match(/<!--/g).length,code.match(/-->/g).length);
 ```

 # --seed--
@@ -29,23 +29,27 @@ To get started, we should nest all of our HTML (except the `link` tag and the `s
 Your `div` element should have the class `container-fluid`.

 ```js
-assert($('div').hasClass('container-fluid'));
+assert.isTrue(document.querySelector('div')?.classList?.contains('container-fluid'));
 ```

 Your `div` element should have a closing tag.

 ```js
-assert(
-  code.match(/<\/div>/g) &&
-    code.match(/<div/g) &&
-    code.match(/<\/div>/g).length === code.match(/<div/g).length
-);
+assert.match(code,/<\/div>/g);
+assert.match(code,/<div/g);
+assert.equal(code.match(/<\/div>/g).length ,code.match(/<div/g).length);
 ```

 All HTML elements after the closing `style` tag should be nested in `.container-fluid`.

 ```js
-assert($('.container-fluid').children().length >= 8 && !$('.container-fluid').has("style").length && !$('.container-fluid').has("link").length);
+const fluidContainer = document.querySelector('.container-fluid');
+const possibleStyleElements = fluidContainer?.querySelectorAll(`:scope ${'style'}`);
+const possibleLinkElements = fluidContainer?.querySelectorAll(`:scope ${'link'}`);
+
+assert.lengthOf(fluidContainer?.children,8);
+assert.isEmpty(possibleStyleElements);
+assert.isEmpty(possibleLinkElements);
 ```

 # --seed--
@@ -25,33 +25,41 @@ The `row` class is applied to a `div`, and the buttons themselves can be nested
 Your buttons should all be nested within the same `div` element with the class `row`.

 ```js
-assert($('div.row:has(button)').length > 0);
+const row = document.querySelector('div.row');
+const rowChildren = row?.querySelectorAll(`:scope ${'button'}`); 
+assert.lengthOf(rowChildren, 3);
 ```

 Each of your Bootstrap buttons should be nested within its own `div` element with the class `col-xs-4`.

 ```js
-assert($('div.col-xs-4:has(button)').length > 2);
+const columns = document.querySelectorAll('div.col-xs-4');
+
+const firstButton = columns?.[0]?.querySelectorAll(`:scope ${'button'}`)
+assert.lengthOf(firstButton,1);
+
+const secondButton = columns?.[1]?.querySelectorAll(`:scope ${'button'}`)
+assert.lengthOf(secondButton,1);
+
+const thirdButton = columns?.[2]?.querySelectorAll(`:scope ${'button'}`)
+assert.lengthOf(thirdButton,1);
+
 ```

 Each of your `button` elements should have a closing tag.

 ```js
-assert(
-  code.match(/<\/button>/g) &&
-    code.match(/<button/g) &&
-    code.match(/<\/button>/g).length === code.match(/<button/g).length
-);
+assert.match(code,/<\/button>/g);
+assert.match(code,/<button/g);
+assert.equal(code.match(/<\/button>/g).length , code.match(/<button/g).length);
 ```

 Each of your `div` elements should have a closing tag.

 ```js
-assert(
-  code.match(/<\/div>/g) &&
-    code.match(/<div/g) &&
-    code.match(/<\/div>/g).length === code.match(/<div/g).length
-);
+assert.match(code,/<\/div>/g);
+assert.match(code,/<div/g);
+assert.equal(code.match(/<\/div>/g).length , code.match(/<div/g).length);
 ```

 # --seed--
@@ -19,29 +19,29 @@ Note that these buttons still need the `btn` and `btn-block` classes.
 You should create a new `button` element with the text `Delete`.

 ```js
-assert(new RegExp('Delete', 'gi').test($('button').text()));
+const deleteButton = document.querySelectorAll('button')?.[2]; 
+assert.match(deleteButton?.textContent ,/delete/gi);
 ```

 All of your Bootstrap buttons should have the `btn` and `btn-block` classes.

 ```js
-assert($('button.btn-block.btn').length > 2);
+assert.lengthOf(document.querySelectorAll('button.btn-block.btn'),3);
 ```

 Your new button should have the class `btn-danger`.

 ```js
-assert($('button').hasClass('btn-danger'));
+const deleteButton = document.querySelectorAll('button')?.[2]; 
+assert.isTrue(deleteButton?.classList?.contains('btn-danger'));
 ```

 All of your `button` elements should have closing tags.

 ```js
-assert(
-  code.match(/<\/button>/g) &&
-    code.match(/<button/g) &&
-    code.match(/<\/button>/g).length === code.match(/<button/g).length
-);
+assert.match(code,/<\/button>/g);
+assert.match(code,/<button/g);
+assert.equal(code.match(/<\/button>/g).length,code.match(/<button/g).length);
 ```

 # --seed--