feat(curriculum) : no jQuery cat photo app (freeCodeCamp#55908)

Co-authored-by: Krzysztof G. <[email protected]>

Author: a2937

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md

@@ -24,7 +24,7 @@ Add a `target` attribute with the value `_blank` to the anchor (`a`) element's o
 Your `p` element should have a nested anchor (`a`) element with the text `cat photos`. You may have deleted it or have a typo.
 
 ```js
-const anchor = $('p > a');
+const anchor = document.querySelectorAll('p > a');
 assert(
   anchor.length &&
     anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md

@@ -28,8 +28,8 @@ assert(code.match(/<\/ul>/));
 The `ul` element should be above the second `section` element's closing tag.
 
 ```js
-const secondSectionLastElemNode = $('main > section')[1].lastElementChild;
-assert(secondSectionLastElemNode.nodeName === 'UL');
+const secondSectionLastElemNode = document.querySelectorAll('main > section')?.[1]?.lastElementChild;
+assert.equal(secondSectionLastElemNode?.nodeName , 'UL');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.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.

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md

@@ -20,21 +20,21 @@ 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]
-    .lastElementChild.getAttribute('alt')
+  document.querySelectorAll('section')?.[1]
+    ?.lastElementChild?.getAttribute('alt')
     .replace(/\s+/g, ' ')
     .match(/^A slice of lasagna on a plate\.?$/i)
 );
@@ -43,22 +43,22 @@ assert(
 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.strictEqual(
+  document.querySelectorAll('section')?.[1]?.lastElementChild?.getAttribute('src'),
     'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
 );
 ```
 
 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.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/lasagna\.jpg/.test(code));
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md

@@ -28,7 +28,7 @@ assert(code.match(/<\/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.

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md

@@ -32,7 +32,7 @@ assert(code.match(/<\/ol>/));
 The `ol` element should be above the second `section` element's closing tag. You have them in the wrong order.
 
 ```js
-assert($('main > section')[1].lastElementChild.nodeName === 'OL');
+assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?.nodeName, 'OL');
 ```
 
 The three `li` elements should be nested inside the `ol` element.

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md

@@ -26,7 +26,7 @@ assert(code.match(/<\/figure>/g).length === 2);
 There should be a `figure` element right above the second `section` element's closing tag.
 
 ```js
-assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
+assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?.nodeName, 'FIGURE');
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md

@@ -37,7 +37,7 @@ assert(document.querySelector('form').previousElementSibling.nodeName === 'H2');
 The `form` element should have no content. Remove any HTML elements or text between the `form` element's tags.
 
 ```js
-assert($('form')[0].innerHTML.trim().length === 0);
+assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
 ```
 
 # --seed--

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md

@@ -35,13 +35,13 @@ assert(
 Your `form` element nested in the last `section` element should be below the `h2` element. You have the `h2` element and the `form` element in the wrong order.
 
 ```js
-assert(document.querySelector('form').previousElementSibling.nodeName === 'H2');
+assert.equal(document.querySelector('form')?.previousElementSibling?.nodeName, 'H2');
 ```
 
 Your `form` element should have no content. Remove any HTML elements or text between the `form` element's tags.
 
 ```js
-assert($('form')[0].innerHTML.trim().length === 0);
+assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
 ```
 
 Your `form` element does not have an `action` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.

curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md

@@ -51,9 +51,9 @@ assert(document.querySelector('form > input'));
 Your `form` should only contain the `input` element. Remove any HTML elements or text between the `form` element's tags.
 
 ```js
-assert(
-  $('form')[0].children.length === 1 &&
-    $('form')[0].innerText.trim().length === 0
+assert.isTrue(
+  document.querySelector('form')?.children?.length === 1 &&
+    document.querySelector('form')?.innerText?.trim()?.length === 0
 );
 ```