diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698440c54c8823cc60af8bc.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698440c54c8823cc60af8bc.md
index 21093caabb7..d129abd4b65 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698440c54c8823cc60af8bc.md
+++ b/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
);
```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698444102ebd53d78cf66f8.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698444102ebd53d78cf66f8.md
index 1d1f7aebec7..1afd6f1eac4 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698444102ebd53d78cf66f8.md
+++ b/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 `` 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(!/\
`.
```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'
);
```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/66984535d474083eec6bb8da.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/66984535d474083eec6bb8da.md
index ed5845e2bda..0e0dac3b70c 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/66984535d474083eec6bb8da.md
+++ b/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: ``.
```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
);
```
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698457295f6403fa49050b8.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698457295f6403fa49050b8.md
index 825020349dd..a4de42f9c8b 100644
--- a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698457295f6403fa49050b8.md
+++ b/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: ``.
```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
);
```