refactor(curriculum): Remove errors from cat photo app (#58743)

2026-05-28 18:26:54 +00:00 · 2025-02-14 10:46:10 +01:00
parent 6d0f95ff11
commit c739c994ed
33 changed files with 81 additions and 72 deletions
@@ -44,7 +44,7 @@ assert.match(code, /<\/h1\>/);
 Your `h1` element's text should be `CatPhotoApp`. You have either omitted the text, have a typo, or it is not between the `h1` element's opening and closing tags.

 ```js
-assert.equal(document.querySelector('h1').innerText.toLowerCase(), 'catphotoapp');
+assert.equal(document.querySelector('h1')?.innerText.toLowerCase(), 'catphotoapp');
 ```

 You appear to be using a browser extension that is modifying the page. Be sure to turn off all browser extensions.
@@ -47,7 +47,7 @@ assert.lengthOf(document.querySelectorAll('h1'), 1);
 Your `h1` element's text should be 'CatPhotoApp'. You have either omitted the text or have a typo.

 ```js
-assert.equal(document.querySelector('h1').innerText.toLowerCase(), 'catphotoapp');
+assert.equal(document.querySelector('h1')?.innerText.toLowerCase(), 'catphotoapp');
 ```

 Your `h2` element should have an opening tag. Opening tags have this syntax: `<elementName>`.
@@ -65,7 +65,7 @@ assert.match(code, /<\/h2\>/);
 Your `h2` element's text should be `Cat Photos`. Only place the text `Cat Photos` between the opening and closing `h2` tags.

 ```js
-assert.equal(document.querySelector('h2').innerText.toLowerCase(), 'cat photos');
+assert.equal(document.querySelector('h2')?.innerText.toLowerCase(), 'cat photos');
 ```

 Your `h2` element should be below the `h1` element. The `h1` element has greater importance and must be above the `h2` element.
@@ -30,7 +30,7 @@ Your `p` element's text should be `Everyone loves cute cats online!` You have ei
 ```js
 const extraSpacesRemoved = document
  .querySelector('p')
-  .innerText.replace(/\s+/g, ' ');
+  ?.innerText.replace(/\s+/g, ' ');
 assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
 ```

@@ -37,8 +37,8 @@ Your code should not have extra opening/closing comment characters. You have an

 ```js
 const noSpaces = code.replace(/\s/g, '');
-assert.isBelow(noSpaces.match(/<!--/g).length, 2)
-assert.isBelow(noSpaces.match(/-->/g).length, 2);
+assert.isBelow(noSpaces.match(/<!--/g)?.length, 2)
+assert.isBelow(noSpaces.match(/-->/g)?.length, 2);
 ```

 Your comment should contain the text `TODO: Add link to cat photos`.
@@ -55,8 +55,8 @@ Your `main` element's closing tag should be below the `p` element. You have them
 ```js
 const mainNode = document.querySelector('main');
 const pNode = document.querySelector('p');
-assert.isTrue(mainNode.contains(pNode));
-assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online/);
+assert.isTrue(mainNode?.contains(pNode));
+assert.match(pNode?.textContent.toLowerCase(), /everyone loves cute cats online/);
 ```

 # --seed--
@@ -27,7 +27,7 @@ Your code should have an `h2` element with text `Cat Photos`. You may have accid
 ```js
 assert.exists(document.querySelector('h2'));
 assert.match(code, /<\/h2\>/);
-assert.equal(document.querySelector('h2').innerText.toLowerCase(),'cat photos')
+assert.equal(document.querySelector('h2')?.innerText.toLowerCase(),'cat photos')
 ```

 You should not add the `ul` or `li` elements from the example.
@@ -77,7 +77,7 @@ The text of the `p` element should be `Everyone loves cute cats online!` Do not
 assert.match(
  document
    .querySelector('p')
-    .innerText.toLowerCase(),
+    ?.innerText.toLowerCase(),
    /everyone\s+loves\s+cute\s+cats\s+online!$/
 );
 ```
@@ -30,13 +30,13 @@ assert.exists(document.querySelector('img'));
 Your `img` element should have a `src` attribute. You have either omitted the attribute or have a typo. Make sure there is a space between the element name and the attribute name.

 ```js
-assert.exists(document.querySelector('img').src);
+assert.exists(document.querySelector('img')?.src);
 ```

 Your `img` element's `src` attribute should be set to '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. You have either omitted the URL or have a typo. The case of the URL is important.

 ```js
-assert.equal(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
 ```

 Although you have set the `img` element's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks.
@@ -30,7 +30,7 @@ assert.exists(document.querySelector('img'));
 Your `img` element 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.isTrue(document.querySelector('img').hasAttribute('alt'));
+assert.isTrue(document.querySelector('img')?.hasAttribute('alt'));
 ```

 Your `img` element's `alt` attribute value is set to something other than 'A cute orange cat lying on its back'. Make sure the `alt` attribute's value is surrounded with quotation marks.
@@ -38,7 +38,7 @@ Your `img` element's `alt` attribute value is set to something other than 'A cut
 ```js
 const altText = document
  .querySelector('img')
-  .alt.toLowerCase()
+  ?.alt.toLowerCase()
  .replace(/\s+/g, ' ');
 assert.match(altText, /A cute orange cat lying on its back\.?$/i);
 ```
@@ -43,14 +43,14 @@ assert.isBelow(collection.indexOf('P'), collection.indexOf('A'));
 Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.

 ```js
-assert.isTrue(document.querySelector('a').hasAttribute('href'));
+assert.isTrue(document.querySelector('a')?.hasAttribute('href'));
 ```

 Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.

 ```js
 assert.equal(
-  document.querySelector('a').getAttribute('href'),
+  document.querySelector('a')?.getAttribute('href'),
    'https://freecatphotoapp.com'
 );
 ```
@@ -35,7 +35,7 @@ Your anchor (`a`) element's text should be `cat photos`. Make sure to put the li

 ```js
 assert.equal(
-  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
+  document.querySelector('a')?.innerText.toLowerCase().replace(/\s+/g, ' '),
    'cat photos'
 );
 ```
@@ -33,13 +33,13 @@ assert.equal(
 Your anchor (`a`) element does not have a `target` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.

 ```js
-assert.isTrue(document.querySelectorAll('a')[1].hasAttribute('target'));
+assert.isTrue(document.querySelectorAll('a')[1]?.hasAttribute('target'));
 ```

 The value of the `target` attribute should be `_blank`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks.

 ```js
-assert.equal(document.querySelectorAll('a')[1].getAttribute('target'), '_blank');
+assert.equal(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
 ```

 # --seed--
@@ -45,7 +45,7 @@ assert.lengthOf(document.querySelectorAll('a'), 3);
 Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.

 ```js
-assert.isAtLeast(code.match(/<\/a>/g).length, 3);
+assert.isAtLeast(code.match(/<\/a>/g)?.length, 3);
 ```

 You should only add one closing anchor (`a`) tag. Please remove any extras.
@@ -57,14 +57,14 @@ assert.lengthOf(code.match(/<\/a>/g), 3);
 Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.

 ```js
-assert.isTrue(document.querySelectorAll('a')[2].hasAttribute('href'));
+assert.isTrue(document.querySelectorAll('a')[2]?.hasAttribute('href'));
 ```

 Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.

 ```js
 assert.equal(
-  document.querySelectorAll('a')[2].getAttribute('href'),
+  document.querySelectorAll('a')[2]?.getAttribute('href'),
    'https://freecatphotoapp.com'
 );
 ```
@@ -72,7 +72,7 @@ assert.equal(
 Your `img` element should be nested within the anchor (`a`) element. The entire `img` element should be inside the opening and closing tags of the anchor (`a`) element.

 ```js
-assert.equal(document.querySelector('img').parentNode.nodeName, 'A');
+assert.equal(document.querySelector('img')?.parentNode.nodeName, 'A');
 ```

 # --seed--
@@ -34,7 +34,7 @@ Your second `h2` element should be right above the second `section` element's cl

 ```js
 const secondSection = document.querySelectorAll('section')[1];
-assert.equal(secondSection.lastElementChild.nodeName, 'H2');
+assert.equal(secondSection?.lastElementChild?.nodeName, 'H2');
 ```

 The second `h2` element should have the text `Cat Lists`. You have either omitted the text or have a typo.
@@ -43,7 +43,7 @@ The second `h2` element should have the text `Cat Lists`. You have either omitte
 assert.equal(
  document
    .querySelectorAll('main > section')[1]
-    .lastElementChild.innerText.toLowerCase(), 'cat lists'
+    ?.lastElementChild?.innerText.toLowerCase(), 'cat lists'
 );
 ```

@@ -26,7 +26,7 @@ There should be an `h3` element right above the second `section` element's closi

 ```js
 assert.equal(
-  document.querySelectorAll('main > section')[1].lastElementChild.nodeName,
+  document.querySelectorAll('main > section')[1]?.lastElementChild.nodeName,
    'H3'
 );
 ```
@@ -37,7 +37,7 @@ The `h3` element right above the second `section` element's closing tag should h
 assert.equal(
  document
    .querySelectorAll('main > section')[1]
-    .lastElementChild.innerText.toLowerCase()
+    ?.lastElementChild.innerText.toLowerCase()
    .replace(/\s+/g, ' '), 'things cats love:'
 );
 ```
@@ -46,10 +46,10 @@ There should be an `h2` element with the text `Cat Lists` above the last `h3` el

 ```js
 const secondSectionLastElemNode = document.querySelectorAll('main > section')[1]
-  .lastElementChild;
+  ?.lastElementChild;
+assert.equal( secondSectionLastElemNode?.nodeName, 'H3');
 assert.equal(
-  secondSectionLastElemNode.nodeName === 'H3' &&
-    secondSectionLastElemNode.previousElementSibling.innerText
+ secondSectionLastElemNode?.previousElementSibling.innerText
      .toLowerCase()
      .replace(/\s+/g, ' '), 'cat lists'
 );
@@ -29,8 +29,8 @@ The `ul` element should be above the second `section` element's closing tag.

 ```js
 const secondSectionLastElemNode =
-  document.querySelectorAll('main > section')[1].lastElementChild;
-assert.equal(secondSectionLastElemNode.nodeName, 'UL');
+  document.querySelectorAll('main > section')[1]?.lastElementChild;
+assert.equal(secondSectionLastElemNode?.nodeName, 'UL');
 ```

 # --seed--
@@ -20,34 +20,34 @@ And its `alt` attribute value to:
 There should be an `img` element right after the closing `</ul>` tag.

 ```js
-assert.equal(document.querySelectorAll('section')[1].querySelector('ul').nextElementSibling.nodeName, 'IMG');
+assert.equal(document.querySelectorAll('section')[1]?.querySelector('ul').nextElementSibling?.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.isTrue(document.querySelectorAll('section')[1].querySelector('ul').nextElementSibling.hasAttribute('alt'));
+assert.isTrue(document.querySelectorAll('section')[1]?.querySelector('ul').nextElementSibling?.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.match(
-  document.querySelectorAll('section')[1].querySelector('ul').nextElementSibling?.getAttribute('alt')?.replace(/\s+/g, ' '), /^A slice of lasagna on a plate\.?$/i 
+  document.querySelectorAll('section')[1]?.querySelector('ul').nextElementSibling?.getAttribute('alt')?.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.isTrue(document.querySelectorAll('section')[1].querySelector('ul').nextElementSibling.hasAttribute('src'));
+assert.isTrue(document.querySelectorAll('section')[1]?.querySelector('ul').nextElementSibling?.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.equal(
-  document.querySelectorAll('section')[1].querySelector('ul').nextElementSibling?.getAttribute('src'),
+  document.querySelectorAll('section')[1]?.querySelector('ul').nextElementSibling?.getAttribute('src'),
    'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
 );
 ```
@@ -28,7 +28,7 @@ assert.match(code, /<\/figure\>/);
 There should be an `figure` element right above the second `section` element's closing tag.

 ```js
-assert.equal(document.querySelectorAll('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.
@@ -56,7 +56,7 @@ The `figcaption` element nested in the `figure` element should be below the `img

 ```js
 assert.equal(
-  document.querySelector('figcaption').previousElementSibling.nodeName, 'IMG'
+  document.querySelector('figcaption')?.previousElementSibling.nodeName, 'IMG'
 );
 ```

@@ -64,7 +64,7 @@ Your `figcaption` element's text should be `Cats love lasagna.` You have either

 ```js
 assert.match(
-  document.querySelector('figcaption').innerText, /Cats love lasagna.?$/i
+  document.querySelector('figcaption')?.innerText, /Cats love lasagna.?$/i
 );
 ```

@@ -46,7 +46,7 @@ The `figcaption`'s text should be `Cats love lasagna`. Check for typos and that
 assert.match(
  document
    .querySelector('figcaption')
-    .innerText.replace(/\s+/gi, ' '),
+    ?.innerText.replace(/\s+/gi, ' '),
    /cats love lasagna\.?/i
 );
 ```
@@ -17,7 +17,7 @@ There should be an `h3` element right above the second `section` element's closi

 ```js
 assert.equal(
-  document.querySelectorAll('main > section')[1].lastElementChild.nodeName,
+  document.querySelectorAll('main > section')[1]?.lastElementChild.nodeName,
    'H3'
 );
 assert.lengthOf(code.match(/<\/h3\>/g),  2);
@@ -29,7 +29,7 @@ The new `h3` element should have the text `Top 3 things cats hate:`. Make sure t
 assert.equal(
  document
    .querySelectorAll('main > section')[1]
-    .lastElementChild.innerText.toLowerCase()
+    ?.lastElementChild.innerText.toLowerCase()
    .replace(/\s+/g, ' '), 'top 3 things cats hate:'
 );
 ```
@@ -38,8 +38,8 @@ There should be a `figure` above the new `h3` element. You may have accidentally

 ```js
 const secondSectionLastElemNode = document.querySelectorAll('main > section')[1]
-  .lastElementChild;
-assert.equal(secondSectionLastElemNode.nodeName, 'H3');
+  ?.lastElementChild;
+assert.equal(secondSectionLastElemNode?.nodeName, 'H3');
 assert.equal(secondSectionLastElemNode.previousElementSibling.nodeName, 'FIGURE');
 ```

@@ -32,7 +32,7 @@ assert.match(code, /<\/ol>/);
 The `ol` element should be above the second `section` element's closing tag. You have them in the wrong order.

 ```js
-assert.equal(document.querySelectorAll('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.
@@ -26,7 +26,7 @@ assert.lengthOf(code.match(/<\/figure>/g), 2);
 There should be a `figure` element right above the second `section` element's closing tag.

 ```js
-assert.equal(document.querySelectorAll('main > section')[1].lastElementChild.nodeName, 'FIGURE');
+assert.equal(document.querySelectorAll('main > section')[1]?.lastElementChild.nodeName, 'FIGURE');
 ```

 # --seed--
@@ -31,8 +31,8 @@ Your `strong` element should surround the word `hate` in the text `Cats hate oth
 assert.equal(
  document
    .querySelectorAll('figcaption')[1]
-    .querySelector('strong')
-    .innerText.toLowerCase(), 'hate'
+    ?.querySelector('strong')
+    ?.innerText.toLowerCase(), 'hate'
 );
 ```

@@ -41,8 +41,7 @@ The `figcaption`'s text should be `Cats hate other cats.` Check for typos and th
 ```js
 const secondFigCaption = document.querySelectorAll('figcaption')[1];
 assert.match(
-  secondFigCaption &&
-    secondFigCaption.innerText
+   secondFigCaption?.innerText
      .replace(/\s+/gi, ' ')
      .trim(),
      /cats hate other cats\.?/i
@@ -35,7 +35,7 @@ assert.match(code, /<\/footer\>/);
 Your `footer` element should be below the closing `main` element tag. You have put it somewhere else.

 ```js
-assert.equal(document.querySelector('main').nextElementSibling.nodeName, 'FOOTER');
+assert.equal(document.querySelector('main')?.nextElementSibling.nodeName, 'FOOTER');
 ```

 # --seed--
@@ -35,7 +35,7 @@ assert.lengthOf(pElemClosingTags, 3);
 Your `p` element's text should be `No Copyright - freeCodeCamp.org`. You have either omitted the text, have a typo, or it is not between the `p` element's opening and closing tags.

 ```js
-const extraSpacesRemoved = document.querySelectorAll('footer > p')[0].innerText.replace(/\s+/g, ' ');
+const extraSpacesRemoved = document.querySelectorAll('footer > p')[0]?.innerText.replace(/\s+/g, ' ');
 assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
 ```

@@ -29,7 +29,7 @@ Your anchor (`a`) element should have an `href` attribute with the value `https:

 ```js
 const nestedAnchor = document.querySelectorAll('footer > p > a')[0];
-assert.equal(nestedAnchor.getAttribute('href').toLowerCase(), 'https://www.freecodecamp.org');
+assert.equal(nestedAnchor?.getAttribute('href').toLowerCase(), 'https://www.freecodecamp.org');
 ```

 The link's text should be `freeCodeCamp.org`. You have either omitted the text or have a typo.
@@ -37,7 +37,7 @@ The link's text should be `freeCodeCamp.org`. You have either omitted the text o
 ```js
 const nestedAnchor = document.querySelectorAll('footer > p > a')[0];
 assert.equal(
-  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' '),
+  nestedAnchor?.innerText.toLowerCase().replace(/\s+/g, ' '),
    'freecodecamp.org'
 );
 ```
@@ -45,7 +45,7 @@ assert.equal(
 After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `No Copyright - freeCodeCamp.org`. Double check the text, spacing, or punctuation of both the `p` and nested anchor element.

 ```js
-const pText = document.querySelectorAll('footer > p')[0].innerText.toLowerCase().replace(/\s+/g, ' ');
+const pText = document.querySelectorAll('footer > p')[0]?.innerText.toLowerCase().replace(/\s+/g, ' ');
 assert.match(pText, /^no copyright - freecodecamp\.org$/);
 ```

@@ -20,13 +20,13 @@ assert.isAtLeast(document.querySelectorAll('figure').length, 2);
 Your second `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character.

 ```js
-assert.isAtLeast(code.match(/<\/figure>/g).length, 2);
+assert.isAtLeast(code.match(/<\/figure>/g)?.length, 2);
 ```

 There should be a second `figure` element right above the second `section` element's closing tag. You have them in the wrong order.

 ```js
-assert.equal(document.querySelectorAll('main > section')[1].lastElementChild.nodeName, 'FIGURE');
+assert.equal(document.querySelectorAll('main > section')[1]?.lastElementChild.nodeName, 'FIGURE');
 ```

 You should have a third `img` element nested in the `figure` element.
@@ -28,7 +28,7 @@ assert.lengthOf(code.match(/<\/figure>/g), 2);
 There should be a `figure` element right above the last `section` element's closing tag.

 ```js
-assert.equal(document.querySelectorAll('main > section')[1].lastElementChild.nodeName, 'FIGURE');
+assert.equal(document.querySelectorAll('main > section')[1]?.lastElementChild.nodeName, 'FIGURE');
 ```

 The Cats `img` element should be nested in the `figure` element.
@@ -46,8 +46,8 @@ The Cats `img` element should have an `alt` attribute with the value `Five cats
 const catsImg = document.querySelectorAll('figure > img')[1];
 assert.match(
  catsImg
-    .getAttribute('alt')
-    .replace(/\s+/g, ' '),
+    ?.getAttribute('alt')
+    ?.replace(/\s+/g, ' '),
    /^Five cats looking around a field\.?$/i
 );
 ```
@@ -26,7 +26,7 @@ assert.lengthOf(code.match(/<\/figcaption\>/g), 2);
 There should be a `figure` element right above the second `section` element's closing tag.

 ```js
-assert.equal(document.querySelectorAll('main > section')[1].lastElementChild.nodeName, 'FIGURE');
+assert.equal(document.querySelectorAll('main > section')[1]?.lastElementChild.nodeName, 'FIGURE');
 ```

 The last `img` element should be nested in the `figure` element.
@@ -60,7 +60,7 @@ The `figcaption` element nested in the `figure` element should be below the `img

 ```js
 assert.equal(
-  document.querySelectorAll('figcaption')[1].previousElementSibling.nodeName,
+  document.querySelectorAll('figcaption')[1]?.previousElementSibling.nodeName,
    'IMG'
 );
 ```
@@ -71,7 +71,7 @@ The `figcaption` element should have the text `Cats hate other cats.` You have o
 assert.match(
  document
    .querySelectorAll('figcaption')[1]
-    .innerText.toLowerCase(),
+    ?.innerText.toLowerCase(),
    /Cats hate other cats\.?$/i
 );
 ```
@@ -37,13 +37,16 @@ assert.match(code, /<\/section\s*>/i);
 The entire `section` element should be between the opening and closing tags of the `main` element.

 ```js
-assert.equal(document.querySelector('section').parentNode.nodeName, 'MAIN');
+assert.equal(document.querySelector('section')?.parentNode.nodeName, 'MAIN');
 ```

 The existing `h2`, `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.

 ```js
-const childrenOfSection = [...document.querySelector('section').childNodes];
+const sectionEl = document.querySelector('section');
+assert.isNotNull(sectionEl);
+const childrenOfSection = [...sectionEl.childNodes];
+
 const foundElements = childrenOfSection.filter((child) => {
  return ['H2', 'A', 'P'].includes(child.nodeName);
 });
@@ -53,7 +56,10 @@ assert.lengthOf(foundElements, 4)
 The `h1` element should not be nested in the `section` element.

 ```js
-const childrenOfSection = [...document.querySelector('section').childNodes];
+const sectionEl = document.querySelector('section');
+assert.isNotNull(sectionEl);
+const childrenOfSection = [...sectionEl.childNodes];
+
 const includesH1 = childrenOfSection.some((child) => child.nodeName === 'H1');
 assert.isFalse(includesH1);
 ```
@@ -26,7 +26,7 @@ assert.lengthOf(document.querySelectorAll('section'), 2);
 Your `section` element should have a closing tag. Closing tags have a `/` just after the `<` character.

 ```js
-assert.isAtLeast(code.match(/<\/section>/g).length, 2);
+assert.isAtLeast(code.match(/<\/section>/g)?.length, 2);
 ```

 You should only add one closing `section` tag. Please remove any extras.
@@ -38,8 +38,10 @@ assert.lengthOf(code.match(/<\/section>/g), 2);
 The second `section` element should not be nested in the first `section` element.

 ```js
+const el = document.querySelector('main > section');
+assert.isNotNull(el);
 const childrenOf1stSection = [
-  ...document.querySelector('main > section').children
+  ...el.children
 ];
 const foundElems = childrenOf1stSection.filter((child) => {
  return child.nodeName === 'SECTION';
@@ -50,7 +52,9 @@ assert.isEmpty(foundElems);
 Both `section` elements should be between the opening and closing tags of the `main` element.

 ```js
-const childrenOfMain = [...document.querySelector('main').children];
+const el = document.querySelector('main');
+assert.isNotNull(el);
+const childrenOfMain = [...el.children];
 const foundElems = childrenOfMain.filter((child) => {
  return child.nodeName === 'SECTION';
 });
@@ -23,7 +23,7 @@ You should still have the anchor element inside the new paragraph.

 ```js
 const P = document.querySelectorAll('p')[1];
-assert.exists(P.querySelector('a'));
+assert.exists(P?.querySelector('a'));
 ```

 # --seed--
@@ -20,7 +20,7 @@ assert.lengthOf(document.querySelectorAll('a'), 1);
 The text inside the anchor element should not change, it must be `cat photos`.

 ```js
-assert.strictEqual(document.querySelector('a').innerText, "cat photos");
+assert.strictEqual(document.querySelector('a')?.innerText, "cat photos");
 ```

 You should have the words `See more ` before the anchor element.