ContextQMD
Back to Freecodecamp

Step 21

curriculum/challenges/english/blocks/workshop-cat-photo-app/5dfa371beacea3f48c6300af.md

latest2.4 KB
Original Source

--description--

When you add a lower-rank heading element to the page, it's implied that you're starting a new subsection.

After the last h2 element of the second section element, add an h3 element with this text:

Things cats love:

--hints--

The second section element appears to be missing or does not have both an opening and closing tag.

js
assert.exists(document.querySelectorAll('main > section')[1]);
assert.lengthOf(code.match(/\<\/section>/g), 2);

There should be an h3 element right above the second section element's closing tag.

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

Your h3 element should have a closing tag. Closing tags have a / just after the < character.

js
assert.lengthOf(code.match(/<\/h3>/g), 1);

The h3 element right above the second section element's closing tag should have the text Things cats love:. Make sure to include the colon at the end of the text.

js
assert.equal(
  document
    .querySelectorAll('main > section')[1]
    ?.lastElementChild.innerText?.trim().toLowerCase()
    .replace(/\s+/g, ' '), 'things cats love:'
);

There should be an h2 element with the text Cat Lists above the last h3 element that is nested in the last section element'. You may have accidentally deleted the h2 element.

js
const secondSectionLastElemNode = document.querySelectorAll('main > section')[1]
  ?.lastElementChild;
assert.equal( secondSectionLastElemNode?.nodeName, 'H3');
assert.equal(
 secondSectionLastElemNode?.previousElementSibling.innerText?.trim()
      .toLowerCase()
      .replace(/\s+/g, ' '), 'cat lists'
);

--seed--

--seed-contents--

html
<html>
  <body>
    <main>
      <h1>CatPhotoApp</h1>
      <section>
        <h2>Cat Photos</h2>
        <p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
        <p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
        <a href="https://freecatphotoapp.com"></a>
      </section>
      <section>
        <h2>Cat Lists</h2>
--fcc-editable-region--
        
--fcc-editable-region--
      </section>
    </main>
  </body>
</html>