2.4 KiB
2.4 KiB
id | title | challengeType | dashedName |
---|---|---|---|
5ef9b03c81a63668521804d2 | Part 26 | 0 | part-26 |
--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.
After the final second section' last h3
element, add an ordered list with these three list items: flea treatment
, thunder
and other cats
.
--hints--
Your ol
element should have an opening tag. Opening tags have this syntax: <elementName>
.
assert(document.querySelector('ol'));
Your ol
element should have a closing tag. Closing tags have a /
just after the <
character.
assert(code.match(/<\/ol>/));
The ol
element should be above the second section
element's closing tag. You have them in the wrong order.
assert($('main > section')[1].lastElementChild.nodeName === 'OL');
The three li
elements should be nested inside the ol
element.
assert(
[...document.querySelectorAll('li')].filter(
(item) => item.parentNode.nodeName === 'OL'
).length === 3
);
You should have three li
elements with the text flea treatment
, thunder
and other cats
in any order.
assert.deepStrictEqual(
[...document.querySelectorAll('li')]
.filter((item) => item.parentNode.nodeName === 'OL')
.map((item) => item.innerText.toLowerCase())
.sort((a, b) => a.localeCompare(b)),
['flea treatment', 'other cats', 'thunder']
);
--seed--
--seed-contents--
<html>
<body>
<h1>CatPhotoApp</h1>
<main>
<section>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
<a href="https://freecatphotoapp.com"><img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
</section>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<figure>
<img src="https://bit.ly/fcc-lasagna" alt="A slice of lasagna on a plate.">
<figcaption>Cats <em>love</em> lasagna.</figcaption>
</figure>
--fcc-editable-region--
<h3>Top 3 things cats hate:</h3>
--fcc-editable-region--
</section>
</main>
</body>
</html>