2018-10-04 14:37:37 +01:00
---
id: bad87fee1348bd9aedf08828
title: Create an Ordered List
challengeType: 0
videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
2019-07-31 11:32:23 -07:00
forumTopicId: 16824
2018-10-04 14:37:37 +01:00
---
## Description
< section id = 'description' >
2019-10-27 15:45:37 -01:00
HTML has another special element for creating < dfn > ordered lists< / dfn > , or numbered lists.
2019-03-12 22:53:17 +01:00
Ordered lists start with an opening < code > & #60 ; ol& #62 ; </ code > element, followed by any number of < code > & #60 ; li& #62 ; </ code > elements. Finally, ordered lists are closed with the < code > & #60 ; /ol& #62 ; </ code > tag.
2018-10-04 14:37:37 +01:00
For example:
2019-05-14 01:11:58 -07:00
```html
< ol >
< li > Garfield< / li >
< li > Sylvester< / li >
< / ol >
```
2018-10-04 14:37:37 +01:00
would create a numbered list of "Garfield" and "Sylvester".
< / section >
## Instructions
< section id = 'instructions' >
Create an ordered list of the top 3 things cats hate the most.
< / section >
## Tests
< section id = 'tests' >
```yml
tests:
2020-08-31 04:53:09 +01:00
- text: You should have an ordered list for < code > Top 3 things cats hate:</ code >
2019-07-24 02:50:51 -07:00
testString: assert((/Top 3 things cats hate:/i).test($("ol").prev().text()));
2020-08-31 04:53:09 +01:00
- text: You should have an unordered list for < code > Things cats love:</ code >
2019-07-24 02:50:51 -07:00
testString: assert((/Things cats love:/i).test($("ul").prev().text()));
2018-10-04 14:37:37 +01:00
- text: You should have only one < code > ul</ code > element.
2019-07-24 02:50:51 -07:00
testString: assert.equal($("ul").length, 1);
2018-10-04 14:37:37 +01:00
- text: You should have only one < code > ol</ code > element.
2019-07-24 02:50:51 -07:00
testString: assert.equal($("ol").length, 1);
2018-10-04 14:37:37 +01:00
- text: You should have three < code > li</ code > elements within your < code > ul</ code > element.
2019-07-24 02:50:51 -07:00
testString: assert.equal($("ul li").length, 3);
2018-10-04 14:37:37 +01:00
- text: You should have three < code > li</ code > elements within your < code > ol</ code > element.
2019-07-24 02:50:51 -07:00
testString: assert.equal($("ol li").length, 3);
2019-11-20 06:45:19 -08:00
- text: Your < code > ul</ code > element should have a closing tag.
2019-07-24 02:50:51 -07:00
testString: assert(code.match(/< \/ul > /g) && code.match(/< \/ul > /g).length === code.match(/< ul > /g).length);
2019-11-20 06:45:19 -08:00
- text: Your < code > ol</ code > element should have a closing tag.
2019-07-24 02:50:51 -07:00
testString: assert(code.match(/< \/ol > /g) && code.match(/< \/ol > /g).length === code.match(/< ol > /g).length);
2019-11-20 06:45:19 -08:00
- text: Your < code > li</ code > element should have a closing tag.
2019-07-24 02:50:51 -07:00
testString: assert(code.match(/< \/li > /g) && code.match(/< li > /g) && code.match(/< \/li > /g).length === code.match(/< li > /g).length);
2019-03-01 13:20:09 -05:00
- text: The < code > li</ code > elements in your unordered list should not be empty.
2020-09-17 19:08:01 +05:00
testString: $('ul li').each((i, val) => assert(__helpers.removeWhiteSpace(val.textContent)));
2019-03-01 13:20:09 -05:00
- text: The < code > li</ code > elements in your ordered list should not be empty.
2020-09-17 19:08:01 +05:00
testString: $('ol li').each((i, val) => assert(!!__helpers.removeWhiteSpace(val.textContent)));
2018-10-04 14:37:37 +01:00
```
< / section >
## Challenge Seed
< section id = 'challengeSeed' >
< div id = 'html-seed' >
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
2018-10-08 01:01:53 +01:00
2018-10-04 14:37:37 +01:00
< a href = "#" > < img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." > < / a >
2018-10-08 01:01:53 +01:00
2018-10-04 14:37:37 +01:00
< p > Things cats love:< / p >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
< p > Top 3 things cats hate:< / p >
2018-10-08 01:01:53 +01:00
2018-10-04 14:37:37 +01:00
< / main >
```
< / div >
< / section >
## Solution
< section id = 'solution' >
2019-03-01 13:20:09 -05:00
```html
< h2 > CatPhotoApp< / h2 >
< main >
< p > Click here to view more < a href = "#" > cat photos< / a > .< / p >
< a href = "#" > < img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." > < / a >
< p > Things cats love:< / p >
< ul >
< li > cat nip< / 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 >
2018-10-04 14:37:37 +01:00
```
2019-07-18 08:24:12 -07:00
2018-10-04 14:37:37 +01:00
< / section >