Skip to content

Commit 80584af

Browse files
author
Axel
committed
Add exercise 18
1 parent 92fb69e commit 80584af

File tree

4 files changed

+228
-2
lines changed

4 files changed

+228
-2
lines changed

‎18 - Adding Up Times with Reduce/gulpfile.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
var gulp = require('gulp'),
2+
browserSync = require('browser-sync').create();
3+
4+
gulp.task('server', function() {
5+
6+
browserSync.init({
7+
server: "./",
8+
open: false
9+
});
10+
11+
gulp.watch("./*.html").on('change', browserSync.reload);
12+
});
13+
14+
gulp.task('default', ['server']);

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

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

‎dist/main.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎main.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ function addContent(){
55
const render =
66
`<div class='box'>
77
<a target='_blank' href='${data.url}'>
8-
<img alt='JS30' src='${data.img}'>
8+
<img alt='${data.title}' src='${data.img}'>
99
<div class='title-grad'>
1010
<span class='title'>${data.title}</span>
1111
</div>

0 commit comments

Comments
 (0)