ContextQMD
Back to Freecodecamp

Create an Ordered List

curriculum/challenges/english/blocks/basic-html-and-html5/bad87fee1348bd9aedf08828.md

latest3.2 KB
Original Source

--description--

HTML has another special element for creating <dfn>ordered lists</dfn>, or numbered lists.

Ordered lists start with an opening <ol> element, followed by any number of <li> elements. Finally, ordered lists are closed with the </ol> tag.

For example:

html
<ol>
  <li>Garfield</li>
  <li>Sylvester</li>
</ol>

would create a numbered list of Garfield and Sylvester.

--instructions--

Create an ordered list of the top 3 things cats hate the most.

--hints--

You should have an ordered list for Top 3 things cats hate:

js
const previousElement = document.querySelector('ol').previousElementSibling; 
assert.match(previousElement.textContent,/Top 3 things cats hate:/i);

You should have an unordered list for Things cats love:

js
const previousElement = document.querySelector('ul').previousElementSibling; 
assert.match(previousElement.textContent,/Things cats love:/i);

You should have only one ul element.

js
assert.lengthOf(document.querySelectorAll('ul'), 1);

You should have only one ol element.

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

You should have three li elements within your ul element.

js
assert.lengthOf(document.querySelectorAll('ul li'), 3);

You should have three li elements within your ol element.

js
assert.lengthOf(document.querySelectorAll('ol li'), 3);

Your ul element should have a closing tag.

js
assert.match(code,/<\/ul>/g);
assert.strictEqual(code.match(/<\/ul>/g).length ,code.match(/<ul>/g).length);

Your ol element should have a closing tag.

js
assert.match(code,/<\/ol>/g);
assert.strictEqual(code.match(/<\/ol>/g).length ,code.match(/<ol>/g).length);

Your li element should have a closing tag.

js
assert.match(code,/<\/li>/g);
assert.match(code,/<li>/g);
assert.strictEqual(code.match(/<\/li>/g).length ,code.match(/<li>/g).length);

The li elements in your unordered list should not be empty.

js
[...document.querySelectorAll('ul li')].forEach((val) =>
  assert.isNotEmpty(__helpers.removeWhiteSpace(val.textContent))
);

The li elements in your ordered list should not be empty.

js
[...document.querySelectorAll('ol li')].forEach((val) =>
  assert.isNotEmpty(__helpers.removeWhiteSpace(val.textContent))
);

--seed--

--seed-contents--

html
<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"></a>

  <p>Things cats love:</p>
  <ul>
    <li>catnip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>

</main>

--solutions--

html
<h2>CatPhotoApp</h2>
<main>
  <p>Click here to view more <a href="#">cat photos</a>.</p>

  <a href="#"></a>

  <p>Things cats love:</p>
  <ul>
    <li>catnip</li>
    <li>laser pointers</li>
    <li>lasagna</li>
  </ul>
  <p>Top 3 things cats hate:</p>
  <ol>
    <li>hate 1</li>
    <li>hate 2</li>
    <li>hate 3</li>
  </ol>
</main>