Skip to content

Commit 52fdd5b

Browse files
goodmanshipgoodmanship
committed
17, 18 done
1 parent 83520de commit 52fdd5b

2 files changed

Lines changed: 281 additions & 0 deletions

File tree

‎17 - Sort Without Articles/index-RIO.html‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Sort Without Articles</title>
6+
</head>
7+
<body>
8+
9+
<style>
10+
body {
11+
font-family: sans-serif;
12+
background: url("https://source.unsplash.com/nDqA4d5NL0k/2000x2000");
13+
background-size: cover;
14+
display: flex;
15+
align-items: center;
16+
min-height: 100vh;
17+
}
18+
19+
#bands {
20+
list-style: inside square;
21+
font-size: 20px;
22+
background: white;
23+
width: 500px;
24+
margin: auto;
25+
padding: 0;
26+
box-shadow: 0 0 0 20px rgba(0, 0, 0, 0.05);
27+
}
28+
#bands li {
29+
border-bottom: 1px solid #efefef;
30+
padding: 20px;
31+
}
32+
#bands li:last-child {
33+
border-bottom: 0;
34+
}
35+
36+
a {
37+
color: #ffc600;
38+
text-decoration: none;
39+
}
40+
41+
</style>
42+
43+
<ul id="bands"></ul>
44+
45+
<script>
46+
const bandList = document.querySelector('#bands');
47+
48+
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'];
49+
50+
const articles = ['The', 'A', 'An'];
51+
52+
function noArticle(name) {
53+
if (articles.includes(name.split(' ')[0])) return name.split(' ').slice(1).join(' ');
54+
else return name;
55+
}
56+
57+
function bandSort(a, b) {
58+
aPrime = noArticle(a);
59+
bPrime = noArticle(b);
60+
if (aPrime < bPrime) return -1;
61+
else if (aPrime == bPrime) return 0;
62+
else return 1;
63+
}
64+
65+
bands.sort(bandSort).forEach(band => {
66+
bandList.insertAdjacentHTML('beforeend', `<li>${band}</li>`);
67+
})
68+
69+
</script>
70+
71+
</body>
72+
</html>

‎18 - Adding Up Times with Reduce/index-RIO.html‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Videos</title>
6+
</head>
7+
<body>
8+
<ul class="videos">
9+
<li data-time="5:43">
10+
Video 1
11+
</li>
12+
<li data-time="2:33">
13+
Video 2
14+
</li>
15+
<li data-time="3:45">
16+
Video 3
17+
</li>
18+
<li data-time="0:47">
19+
Video 4
20+
</li>
21+
<li data-time="5:21">
22+
Video 5
23+
</li>
24+
<li data-time="6:56">
25+
Video 6
26+
</li>
27+
<li data-time="3:46">
28+
Video 7
29+
</li>
30+
<li data-time="5:25">
31+
Video 8
32+
</li>
33+
<li data-time="3:14">
34+
Video 9
35+
</li>
36+
<li data-time="3:31">
37+
Video 10
38+
</li>
39+
<li data-time="5:59">
40+
Video 11
41+
</li>
42+
<li data-time="3:07">
43+
Video 12
44+
</li>
45+
<li data-time="11:29">
46+
Video 13
47+
</li>
48+
<li data-time="8:57">
49+
Video 14
50+
</li>
51+
<li data-time="5:49">
52+
Video 15
53+
</li>
54+
<li data-time="5:52">
55+
Video 16
56+
</li>
57+
<li data-time="5:50">
58+
Video 17
59+
</li>
60+
<li data-time="9:13">
61+
Video 18
62+
</li>
63+
<li data-time="11:51">
64+
Video 19
65+
</li>
66+
<li data-time="7:58">
67+
Video 20
68+
</li>
69+
<li data-time="4:40">
70+
Video 21
71+
</li>
72+
<li data-time="4:45">
73+
Video 22
74+
</li>
75+
<li data-time="6:46">
76+
Video 23
77+
</li>
78+
<li data-time="7:24">
79+
Video 24
80+
</li>
81+
<li data-time="7:12">
82+
Video 25
83+
</li>
84+
<li data-time="5:23">
85+
Video 26
86+
</li>
87+
<li data-time="3:34">
88+
Video 27
89+
</li>
90+
<li data-time="8:22">
91+
Video 28
92+
</li>
93+
<li data-time="5:17">
94+
Video 29
95+
</li>
96+
<li data-time="3:10">
97+
Video 30
98+
</li>
99+
<li data-time="4:43">
100+
Video 31
101+
</li>
102+
<li data-time="19:43">
103+
Video 32
104+
</li>
105+
<li data-time="0:47">
106+
Video 33
107+
</li>
108+
<li data-time="0:47">
109+
Video 34
110+
</li>
111+
<li data-time="3:14">
112+
Video 35
113+
</li>
114+
<li data-time="3:59">
115+
Video 36
116+
</li>
117+
<li data-time="2:43">
118+
Video 37
119+
</li>
120+
<li data-time="4:17">
121+
Video 38
122+
</li>
123+
<li data-time="6:56">
124+
Video 39
125+
</li>
126+
<li data-time="3:05">
127+
Video 40
128+
</li>
129+
<li data-time="2:06">
130+
Video 41
131+
</li>
132+
<li data-time="1:59">
133+
Video 42
134+
</li>
135+
<li data-time="1:49">
136+
Video 43
137+
</li>
138+
<li data-time="3:36">
139+
Video 44
140+
</li>
141+
<li data-time="7:10">
142+
Video 45
143+
</li>
144+
<li data-time="3:44">
145+
Video 46
146+
</li>
147+
<li data-time="3:44">
148+
Video 47
149+
</li>
150+
<li data-time="4:36">
151+
Video 48
152+
</li>
153+
<li data-time="3:16">
154+
Video 49
155+
</li>
156+
<li data-time="1:10">
157+
Video 50
158+
</li>
159+
<li data-time="6:10">
160+
Video 51
161+
</li>
162+
<li data-time="2:14">
163+
Video 52
164+
</li>
165+
<li data-time="3:44">
166+
Video 53
167+
</li>
168+
<li data-time="5:05">
169+
Video 54
170+
</li>
171+
<li data-time="6:03">
172+
Video 55
173+
</li>
174+
<li data-time="12:39">
175+
Video 56
176+
</li>
177+
<li data-time="1:56">
178+
Video 57
179+
</li>
180+
<li data-time="4:04">
181+
Video 58
182+
</li>
183+
184+
<script>
185+
const timeNodes = Array.from(document.querySelectorAll('[data-time]'))
186+
// let seconds = timeNodes
187+
// .map(node => node.dataset.time)
188+
// .map(timeCode => {
189+
// const [mins, secs] = timeCode.split(':').map(parseFloat)
190+
// return mins*60 + secs
191+
// }).reduce((total, secs) => total + secs)
192+
// console.log(seconds)
193+
194+
// reduce only
195+
let seconds = timeNodes.reduce((sum, node) => {
196+
const [mins, secs] = node.dataset.time.split(':').map(parseFloat)
197+
return sum + mins*60 + secs
198+
}, 0)
199+
200+
let secondsLeft = seconds
201+
const hours = Math.floor(secondsLeft / 3600)
202+
secondsLeft = seconds % 3600
203+
const mins = Math.floor(secondsLeft / 60)
204+
const secs = secondsLeft % 60
205+
console.log(hours, mins, secs)
206+
207+
</script>
208+
</body>
209+
</html>

0 commit comments

Comments
 (0)