-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsort_band_names.html
93 lines (77 loc) · 3.04 KB
/
sort_band_names.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sort Without Articles</title>
</head>
<body>
<style>
body {
margin: 0;
font-family: sans-serif;
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
background-size: cover;
display: flex;
align-items: center;
min-height: 100vh;
}
#bands {
list-style: inside square;
font-size: 20px;
background: white;
width: 500px;
margin: auto;
padding: 0;
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
}
#bands li {
border-bottom: 1px solid #efefef;
padding: 20px;
}
#bands li:last-child {
border-bottom: 0;
}
a {
color: #ffc600;
text-decoration: none;
}
</style>
<ul id="bands"></ul>
<script>
const bands = ['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'];
const list = document.querySelector('#bands');
function removeArticles(string) {
const words = string.split(" ");
if (((words[0] == 'A') || (words[0] == 'The') || (words[0] == 'An')) && (words.length > 1)) {
return words.slice(1).join(' ');
};
return words.join(' ');
}
const sortedBands = bands.sort((a, b) => removeArticles(a) > removeArticles(b) ? 1 : -1);
sortedBands.map(band => {
list.innerHTML += `<li>${band}</li>`
});
// my discarded sort function, also tried bands.sort((a, b) => removeArticles(a) - removeArticles(b))
// but that seems to onlyu work on numbers.
/* const sortedBands = bands.sort((a, b) => {
const filteredA = removeArticles(a);
const filteredB = removeArticles(b);
if (filteredA < filteredB) {
return -1;
}
if (filteredB < filteredA) {
return 1;
}
return 0;
}); */
//Wes' solution
/* const bands = ['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'];
function strip(bandName) {
return bandName.replace(/^(a |the |an )/i, '').trim();
}
const sortedBands = bands.sort((a, b) => strip(a) > strip(b) ? 1 : -1);
document.querySelector('#bands').innerHTML = sortedBands.map(band => `<li>${band}</li>`).join('');
*/
</script>
</body>
</html>