From 973143bba5829a29dbbbb2f46841caf1c11bfc00 Mon Sep 17 00:00:00 2001
From: Anna <a.rcottrill521@gmail.com>
Date: Wed, 4 Sep 2024 04:53:06 -0400
Subject: [PATCH] feat(curriculum) : remove jQuery from bootstrap project
 (#55950)

Co-authored-by: Krzysztof G. <60067306+gikf@users.noreply.github.com>
---
 ...dd-elements-within-your-bootstrap-wells.md | 21 +++++-----
 ...ont-awesome-icons-to-all-of-our-buttons.md | 22 +++++-----
 .../add-font-awesome-icons-to-our-buttons.md  | 25 +++++------
 ...add-id-attributes-to-bootstrap-elements.md | 14 +++----
 ...pply-the-default-bootstrap-button-style.md |  4 +-
 ...call-out-optional-actions-with-btn-info.md | 17 ++++----
 .../bootstrap/center-text-with-bootstrap.md   |  4 +-
 ...create-a-block-element-bootstrap-button.md | 13 +++---
 .../bootstrap/create-a-bootstrap-button.md    | 17 ++++----
 .../bootstrap/create-a-bootstrap-headline.md  | 16 ++++---
 .../bootstrap/create-a-bootstrap-row.md       | 23 +++++-----
 ...a-class-to-target-with-jquery-selectors.md |  2 +-
 .../bootstrap/create-a-custom-heading.md      | 33 ++++++++-------
 .../bootstrap/create-bootstrap-wells.md       | 13 +++---
 .../ditch-custom-css-for-bootstrap.md         | 16 ++++---
 .../give-each-element-a-unique-id.md          | 42 ++++++++-----------
 ...-within-a-bootstrap-container-fluid-div.md | 15 +++----
 .../bootstrap/label-bootstrap-buttons.md      | 12 +++---
 .../bootstrap/label-bootstrap-wells.md        | 23 +++++-----
 ...rm-elements-responsively-with-bootstrap.md | 23 +++++-----
 .../make-images-mobile-responsive.md          | 16 ++++---
 .../responsively-style-checkboxes.md          | 14 +++----
 .../responsively-style-radio-buttons.md       | 14 +++----
 .../bootstrap/split-your-bootstrap-row.md     | 10 ++---
 .../style-text-inputs-as-form-controls.md     | 13 ++++--
 ...aste-the-bootstrap-button-color-rainbow.md | 13 +++---
 .../use-a-span-to-target-inline-elements.md   | 21 ++++------
 .../bootstrap/use-comments-to-clarify-code.md |  8 ++--
 ...-design-with-bootstrap-fluid-containers.md | 18 ++++----
 ...strap-grid-to-put-elements-side-by-side.md | 32 ++++++++------
 ...s-of-a-dangerous-action-with-btn-danger.md | 16 +++----
 31 files changed, 264 insertions(+), 266 deletions(-)

diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md
index 2326bddd3cc..59707e58898 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md
index 211f3090c45..745c5719fb1 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md
@@ -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'
 );
 ```
 
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md
index 12a425b9c2d..4a9ecea8ab7 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md
index 66b46cd6259..190b767e341 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/apply-the-default-bootstrap-button-style.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/apply-the-default-bootstrap-button-style.md
index 4ec8c688fca..169c63e272f 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/apply-the-default-bootstrap-button-style.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/apply-the-default-bootstrap-button-style.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/call-out-optional-actions-with-btn-info.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/call-out-optional-actions-with-btn-info.md
index 5336a77cee4..5c02aaea0d2 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/call-out-optional-actions-with-btn-info.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/call-out-optional-actions-with-btn-info.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/center-text-with-bootstrap.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/center-text-with-bootstrap.md
index 7b004c5b069..f7e40f05648 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/center-text-with-bootstrap.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/center-text-with-bootstrap.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-block-element-bootstrap-button.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-block-element-bootstrap-button.md
index eaae2412623..405474cc773 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-block-element-bootstrap-button.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-block-element-bootstrap-button.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-button.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-button.md
index a3f7b25758a..5b818cb1436 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-button.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-button.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-headline.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-headline.md
index 52926464466..69aa90c8ef2 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-headline.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-headline.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-row.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-row.md
index 3a5ff315bbf..000364f5e17 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-row.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-bootstrap-row.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md
index eaea9337356..a5377a71cfb 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-custom-heading.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-custom-heading.md
index 74fcef38ee3..de299946c3f 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-custom-heading.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-a-custom-heading.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-bootstrap-wells.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-bootstrap-wells.md
index 47de1536d6e..abf3c508919 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-bootstrap-wells.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/create-bootstrap-wells.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/ditch-custom-css-for-bootstrap.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/ditch-custom-css-for-bootstrap.md
index 559fd32d75c..b1c19c7cd97 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/ditch-custom-css-for-bootstrap.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/ditch-custom-css-for-bootstrap.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/give-each-element-a-unique-id.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/give-each-element-a-unique-id.md
index 290766d634e..7361d5d1415 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/give-each-element-a-unique-id.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/give-each-element-a-unique-id.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md
index 452f52ab470..6bd2e050394 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/label-bootstrap-buttons.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/label-bootstrap-buttons.md
index 6d995aa3186..c67282977d0 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/label-bootstrap-buttons.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/label-bootstrap-buttons.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/label-bootstrap-wells.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/label-bootstrap-wells.md
index cae4c4837f2..55538cd3145 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/label-bootstrap-wells.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/label-bootstrap-wells.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md
index f553498c464..b995f4273cb 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/make-images-mobile-responsive.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/make-images-mobile-responsive.md
index eafea380ced..39828371645 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/make-images-mobile-responsive.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/make-images-mobile-responsive.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/responsively-style-checkboxes.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/responsively-style-checkboxes.md
index b51a2425922..d03bcdff402 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/responsively-style-checkboxes.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/responsively-style-checkboxes.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/responsively-style-radio-buttons.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/responsively-style-radio-buttons.md
index 6d6d33e3242..d4f67689a51 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/responsively-style-radio-buttons.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/responsively-style-radio-buttons.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/split-your-bootstrap-row.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/split-your-bootstrap-row.md
index 440c9a7740b..48d6597c070 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/split-your-bootstrap-row.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/split-your-bootstrap-row.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/style-text-inputs-as-form-controls.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/style-text-inputs-as-form-controls.md
index 70d3ea34cf8..c289bafd9e0 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/style-text-inputs-as-form-controls.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/style-text-inputs-as-form-controls.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.md
index f34a3d7b98d..46720638ccb 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-a-span-to-target-inline-elements.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-a-span-to-target-inline-elements.md
index 007e9dc410f..efeedaa87ce 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-a-span-to-target-inline-elements.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-a-span-to-target-inline-elements.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-comments-to-clarify-code.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-comments-to-clarify-code.md
index d53b7685098..17c7a59c187 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-comments-to-clarify-code.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-comments-to-clarify-code.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md
index 82028b04039..10369d75c2c 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md
index 323e0f25990..c0ef3b66c0e 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md
@@ -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--
diff --git a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md
index d64ff4afb74..67849c42a12 100644
--- a/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md
+++ b/curriculum/challenges/english/03-front-end-development-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md
@@ -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--