fix(curriculum): cat photo app step 21 to 25 (#56337)

Co-authored-by: Anna <a.rcottrill521@gmail.com>

curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698440c54c8823cc60af8bc.md

@@ -29,7 +29,8 @@ Within the `ul` element nest three list items to display three things cats love:
 You should have three `li` elements. Each `li` element should have its own opening and closing tag.
 
 ```js
-assert($('li').length === 3 && code.match(/<\/li\>/g).length === 3);
+assert.lengthOf(document.querySelectorAll('li'), 3);
+assert.lengthOf(code.match(/<\/li\>/g), 3);
 ```
 
 You should have three `li` elements with the text `cat nip`, `laser pointers` and `lasagna` in any order. You have either omitted some text or have a typo.
@@ -46,10 +47,10 @@ assert.deepStrictEqual(
 The three `li` elements should be located between the `ul` element's opening and closing tags.
 
 ```js
-assert(
+assert.lengthOf(
   [...document.querySelectorAll('li')].filter(
     (item) => item.parentNode.nodeName === 'UL'
-  ).length === 3
+  ), 3
 );
 ```
 

curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698444102ebd53d78cf66f8.md

@@ -20,37 +20,36 @@ And its `alt` attribute value to:
 There should be an `img` element right after the closing `</ul>` tag.
 
 ```js
-assert($('section')[1].lastElementChild.nodeName === 'IMG');
+assert.equal(document.querySelectorAll('section')[1].lastElementChild.nodeName, 'IMG');
 ```
 
 The new image does not have an `alt` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
 
 ```js
-assert($('section')[1].lastElementChild.hasAttribute('alt'));
+assert.isTrue(document.querySelectorAll('section')[1].lastElementChild.hasAttribute('alt'));
 ```
 
 The new image should have an `alt` value of `A slice of lasagna on a plate.` Make sure the `alt` attribute's value is surrounded with quotation marks.
 
 ```js
-assert(
-  $('section')[1]
+assert.match(
+  document.querySelectorAll('section')[1]
     .lastElementChild.getAttribute('alt')
-    .replace(/\s+/g, ' ')
-    .match(/^A slice of lasagna on a plate\.?$/i)
+    .replace(/\s+/g, ' '), /^A slice of lasagna on a plate\.?$/i
 );
 ```
 
 The new image does not have a `src` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
 
 ```js
-assert($('section')[1].lastElementChild.hasAttribute('src'));
+assert.isTrue(document.querySelectorAll('section')[1].lastElementChild.hasAttribute('src'));
 ```
 
 The new image should have a `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`. Make sure the `src` attribute's value is surrounded with quotation marks.
 
 ```js
-assert(
-  $('section')[1].lastElementChild.getAttribute('src') ===
+assert.equal(
+  document.querySelectorAll('section')[1].lastElementChild.getAttribute('src'),
     'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
 );
 ```
@@ -58,7 +57,7 @@ assert(
 Although you have set the new image's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks.
 
 ```js
-assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/lasagna\.jpg/.test(code));
+assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/lasagna\.jpg/);
 ```
 
 # --seed--

curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/66984484deb84b3e21e5b3d7.md

@@ -16,27 +16,27 @@ Nest the image you just added within a `figure` element.
 Your `figure` element should have an opening tag. Opening tags have the following syntax: `<elementName>`.
 
 ```js
-assert(document.querySelector('figure'));
+assert.exists(document.querySelector('figure'));
 ```
 
 Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character.
 
 ```js
-assert(code.match(/<\/figure\>/));
+assert.match(code, /<\/figure\>/);
 ```
 
 There should be an `figure` element right above the second `section` element's closing tag.
 
 ```js
-assert($('section')[1].lastElementChild.nodeName === 'FIGURE');
+assert.equal(document.querySelectorAll('section')[1].lastElementChild.nodeName, 'FIGURE');
 ```
 
 The lasagna `img` element should be nested in the `figure` element.
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
+assert.exists(document.querySelector('figure > img'));
+assert.equal(
+    document.querySelector('figure > img').getAttribute('src').toLowerCase(),
       'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
 );
 ```

curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/66984535d474083eec6bb8da.md

@@ -27,30 +27,27 @@ After the image nested in the `figure` element, add a `figcaption` element with
 Your `figcaption` element should have an opening tag. Opening tags have the following syntax: `<elementName>`.
 
 ```js
-assert(document.querySelector('figcaption'));
+assert.exists(document.querySelector('figcaption'));
 ```
 
 Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character.
 
 ```js
-assert(code.match(/<\/figcaption\>/));
+assert.match(code, /<\/figcaption\>/);
 ```
 
 The `figcaption` element should be nested in the `figure` element.
 
 ```js
-assert(
-  document.querySelector('figure > figcaption') &&
-    document.querySelector('figure > figcaption')
-);
+assert.exists(document.querySelector('figure > figcaption'));
 ```
 
 The lasagna `img` element should be nested in the `figure` element.
 
 ```js
-assert(
-  document.querySelector('figure > img') &&
-    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
+assert.exists(document.querySelector('figure > img'))
+assert.equal(
+    document.querySelector('figure > img')?.getAttribute('src').toLowerCase(),
       'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
 );
 ```
@@ -58,16 +55,16 @@ assert(
 The `figcaption` element nested in the `figure` element should be below the `img` element. You have them in the wrong order.
 
 ```js
-assert(
-  document.querySelector('figcaption').previousElementSibling.nodeName === 'IMG'
+assert.equal(
+  document.querySelector('figcaption').previousElementSibling.nodeName, 'IMG'
 );
 ```
 
 Your `figcaption` element's text should be `Cats love lasagna.` You have either omitted the text or have a typo.
 
 ```js
-assert(
-  document.querySelector('figcaption').innerText.match(/Cats love lasagna.?$/i)
+assert.match(
+  document.querySelector('figcaption').innerText, /Cats love lasagna.?$/i
 );
 ```
 

curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698457295f6403fa49050b8.md

@@ -16,37 +16,38 @@ Emphasize the word `love` in the `figcaption` element by wrapping it in an empha
 Your emphasis `em` element should have an opening tag. Opening tags have this syntax: `<elementName>`.
 
 ```js
-assert(document.querySelector('em'));
+assert.exists(document.querySelector('em'));
 ```
 
 Your emphasis `em` element should have a closing tag. Closing tags have a `/` just after the `<` character.
 
 ```js
-assert(code.match(/<\/em\>/));
+assert.match(code, /<\/em\>/);
 ```
 
 You have either deleted the `figcaption` element or it is missing an opening or closing tag.
 
 ```js
-assert(document.querySelector('figcaption') && code.match(/<\/figcaption\>/));
+assert.exists(document.querySelector('figcaption'));
+assert.match(code, /<\/figcaption\>/);
 ```
 
 Your emphasis `em` element should surround the text `love`. You have either omitted the text or have a typo.
 
 ```js
-assert(
-  document.querySelector('figcaption > em').innerText.toLowerCase() === 'love'
+assert.equal(
+  document.querySelector('figcaption > em')?.innerText?.toLowerCase(), 'love'
 );
 ```
 
 The `figcaption`'s text should be `Cats love lasagna`. Check for typos and that the necessary spaces are present around the `em` element's opening and closing tags.
 
 ```js
-assert(
+assert.match(
   document
     .querySelector('figcaption')
-    .innerText.replace(/\s+/gi, ' ')
-    .match(/cats love lasagna\.?/i)
+    .innerText.replace(/\s+/gi, ' '),
+    /cats love lasagna\.?/i
 );
 ```