ContextQMD
Back to Freecodecamp

Step 29

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

latest2.6 KB
Original Source

--description--

The code for an ordered list (ol) is similar to an unordered list, but list items in an ordered list are numbered when displayed.

Below the h3 element, add an ordered list with these three list items:

flea treatment thunder other cats

--hints--

Your ol element should have an opening tag. Opening tags have this syntax: <elementName>.

js
assert.exists(document.querySelector('ol'));

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

js
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');

The three li elements should be nested inside the ol element.

js
assert.lengthOf(
  [...document.querySelectorAll('li')].filter(
    (item) => item.parentNode.nodeName === 'OL'
  ), 3
);

You should have three li elements with the text flea treatment, thunder and other cats in any order.

js
assert.deepStrictEqual(
  [...document.querySelectorAll('li')]
    .filter((item) => item.parentNode.nodeName === 'OL')
    .map((item) => item.innerText?.trim().replace(/\s+/g, ' ').toLowerCase())
    .sort((a, b) => a.localeCompare(b)),
  ['flea treatment', 'other cats', 'thunder']
);

You should only have one ol element.

js
assert.lengthOf([...document.querySelectorAll('ol')], 1);

--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>
        <h3>Things cats love:</h3>
        <ul>
          <li>catnip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <figure>
          
          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
        </figure>
        <h3>Top 3 things cats hate:</h3>
--fcc-editable-region--
        
--fcc-editable-region--
      </section>
    </main>

  </body>
</html>