Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 54be58c

Browse files
Day 18 - Adding Up Times with Reduce
1 parent f24f22b commit 54be58c

File tree

5 files changed

+228
-0
lines changed

5 files changed

+228
-0
lines changed

‎18_day/index.html

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>18 Day</title>
7+
<link rel="stylesheet" href="main.css">
8+
</head>
9+
10+
<body>
11+
<p>
12+
<center>
13+
<p><em>Please have a look at the JavaScript Console</em> 💁</p>
14+
</center>
15+
</p>
16+
<br>
17+
<ul class="videos">
18+
<li data-time="5:43">
19+
Video 1
20+
</li>
21+
<li data-time="2:33">
22+
Video 2
23+
</li>
24+
<li data-time="3:45">
25+
Video 3
26+
</li>
27+
<li data-time="0:47">
28+
Video 4
29+
</li>
30+
<li data-time="5:21">
31+
Video 5
32+
</li>
33+
<li data-time="6:56">
34+
Video 6
35+
</li>
36+
<li data-time="3:46">
37+
Video 7
38+
</li>
39+
<li data-time="5:25">
40+
Video 8
41+
</li>
42+
<li data-time="3:14">
43+
Video 9
44+
</li>
45+
<li data-time="3:31">
46+
Video 10
47+
</li>
48+
<li data-time="5:59">
49+
Video 11
50+
</li>
51+
<li data-time="3:07">
52+
Video 12
53+
</li>
54+
<li data-time="11:29">
55+
Video 13
56+
</li>
57+
<li data-time="8:57">
58+
Video 14
59+
</li>
60+
<li data-time="5:49">
61+
Video 15
62+
</li>
63+
<li data-time="5:52">
64+
Video 16
65+
</li>
66+
<li data-time="5:50">
67+
Video 17
68+
</li>
69+
<li data-time="9:13">
70+
Video 18
71+
</li>
72+
<li data-time="11:51">
73+
Video 19
74+
</li>
75+
<li data-time="7:58">
76+
Video 20
77+
</li>
78+
<li data-time="4:40">
79+
Video 21
80+
</li>
81+
<li data-time="4:45">
82+
Video 22
83+
</li>
84+
<li data-time="6:46">
85+
Video 23
86+
</li>
87+
<li data-time="7:24">
88+
Video 24
89+
</li>
90+
<li data-time="7:12">
91+
Video 25
92+
</li>
93+
<li data-time="5:23">
94+
Video 26
95+
</li>
96+
<li data-time="3:34">
97+
Video 27
98+
</li>
99+
<li data-time="8:22">
100+
Video 28
101+
</li>
102+
<li data-time="5:17">
103+
Video 29
104+
</li>
105+
<li data-time="3:10">
106+
Video 30
107+
</li>
108+
<li data-time="4:43">
109+
Video 31
110+
</li>
111+
<li data-time="19:43">
112+
Video 32
113+
</li>
114+
<li data-time="0:47">
115+
Video 33
116+
</li>
117+
<li data-time="0:47">
118+
Video 34
119+
</li>
120+
<li data-time="3:14">
121+
Video 35
122+
</li>
123+
<li data-time="3:59">
124+
Video 36
125+
</li>
126+
<li data-time="2:43">
127+
Video 37
128+
</li>
129+
<li data-time="4:17">
130+
Video 38
131+
</li>
132+
<li data-time="6:56">
133+
Video 39
134+
</li>
135+
<li data-time="3:05">
136+
Video 40
137+
</li>
138+
<li data-time="2:06">
139+
Video 41
140+
</li>
141+
<li data-time="1:59">
142+
Video 42
143+
</li>
144+
<li data-time="1:49">
145+
Video 43
146+
</li>
147+
<li data-time="3:36">
148+
Video 44
149+
</li>
150+
<li data-time="7:10">
151+
Video 45
152+
</li>
153+
<li data-time="3:44">
154+
Video 46
155+
</li>
156+
<li data-time="3:44">
157+
Video 47
158+
</li>
159+
<li data-time="4:36">
160+
Video 48
161+
</li>
162+
<li data-time="3:16">
163+
Video 49
164+
</li>
165+
<li data-time="1:10">
166+
Video 50
167+
</li>
168+
<li data-time="6:10">
169+
Video 51
170+
</li>
171+
<li data-time="2:14">
172+
Video 52
173+
</li>
174+
<li data-time="3:44">
175+
Video 53
176+
</li>
177+
<li data-time="5:05">
178+
Video 54
179+
</li>
180+
<li data-time="6:03">
181+
Video 55
182+
</li>
183+
<li data-time="12:39">
184+
Video 56
185+
</li>
186+
<li data-time="1:56">
187+
Video 57
188+
</li>
189+
<li data-time="4:02">
190+
Video 58
191+
</li>
192+
193+
<script src="main.js"></script>
194+
</body>
195+
196+
</html>

‎18_day/main.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
body {
2+
font-family: Verdana, Helvetica, Sans-Serif;
3+
}
4+
5+
.videos {
6+
list-style: inside square;
7+
font-size: 12px;
8+
}

‎18_day/main.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
2+
3+
const seconds = timeNodes.map(node => node.dataset.time).map(timeCode => {
4+
const [mins, secs] = timeCode.split(':').map(parseFloat);
5+
return (mins * 60) + secs;
6+
}).reduce((total, vidSeconds) => total + vidSeconds);
7+
8+
let secondsLeft = seconds;
9+
const hours = Math.floor(secondsLeft / 3600);
10+
secondsLeft = secondsLeft % 3600;
11+
12+
const mins = Math.floor(secondsLeft / 60);
13+
secondsLeft = secondsLeft % 60;
14+
15+
console.log(hours + 'h', mins + 'm', secondsLeft + 's');

‎README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -106,3 +106,11 @@ Today learned about assigning to new variable names using ES6 Object destructuri
106106
Updated code to show modified band names on which sort actually happens and on right side the actual band names. After code modifications it looks like this:-
107107

108108
![Day 17 new taks](https://pbs.twimg.com/media/C2N0IDsWIAA9hLT.jpg)
109+
110+
### Day 18: 5 Jul 2018
111+
Learned more about `Array.prototype.reduce()` and its usability test case scenario. `reduce()` is quite simple & effective in specific scenarios like in the example below:-
112+
113+
![Day 18 new taks](https://pbs.twimg.com/media/C2eCp-xWgAAbhJz.jpg)
114+
115+
**Tools/Sites Found:**
116+
- New, interactive Chrome Dev Tools tutorial: [How to analyze page load performance ⚡️🚀🔎](https://developers.google.com/web/tools/chrome-devtools/network-performance/)

‎index.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
<a class="active" href="./15_day/index.html">15 Day</a>
2727
<a class="active" href="./16_day/index.html">16 Day</a>
2828
<a class="active" href="./17_day/index.html">17 Day</a>
29+
<a class="active" href="./18_day/index.html">18 Day</a>
2930
</div>
3031
</body>
3132

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /