├── css
└── styles.css
├── index.html
└── js
└── script.js
/css/styles.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: sans-serif;
4 | background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
5 | background-size: cover;
6 | display: flex;
7 | align-items: center;
8 | min-height: 100vh;
9 | }
10 |
11 | #lists {
12 | list-style: inside square;
13 | font-size: 20px;
14 | background: white;
15 | width: 500px;
16 | margin: auto;
17 | padding: 0;
18 | box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
19 | }
20 |
21 | #lists li {
22 | border-bottom: 1px solid #efefef;
23 | padding: 20px;
24 | }
25 |
26 | #lists li:last-child {
27 | border-bottom: 0;
28 | }
29 |
30 | a {
31 | color: #ffc600;
32 | text-decoration: none;
33 | }
34 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | SORTING
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
1 | const lists = ['The Plot in You', 'The Devil Wears Prada', 'Pierce the Veil', 'Norma Jean', 'The Bled', 'Say Anything', 'The Midway State', 'We Came as Romans', 'Counterparts', 'Oh, Sleeper', 'A Skylit Drive', 'Anywhere But Here', 'An Old Dog'];
2 |
3 |
4 | function strip(listName){
5 | return listName.replace(/^(a |the |an )/i, '').trim();
6 | }
7 |
8 | const sorts = lists.sort((a,b) => strip(a) > strip(b) ? 1 : -1);
9 |
10 | document.querySelector("#lists").innerHTML =
11 | sorts
12 | .map(list => ` ${list}`)
13 | .join('');
14 |
15 | console.log(sorts);
16 |
17 |
--------------------------------------------------------------------------------