Skip to content

Commit e4f265a

Browse files
fullstackNRJfullstackNRJ
committed
day 19
1 parent 3fed010 commit e4f265a

File tree

3 files changed

+221
-0
lines changed

3 files changed

+221
-0
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,4 @@ Motivate yourself to code daily till 30 days, and see the magic!
3535
| [Day 16](./each%20day%20build%20day!/Day%16/) | [Reference vs copy](./each%20day%20build%20day!/Day%2016/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2016/README.md/) |
3636
| [Day 17](./each%20day%20build%20day!/Day%17/) | [Mouseover Shadow](./each%20day%20build%20day!/Day%2017/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2017/README.md/) |
3737
| [Day 18](./each%20day%20build%20day!/Day%18/) | [Custom sorting names](./each%20day%20build%20day!/Day%2018/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2018/README.md/) |
38+
| [Day 19](./each%20day%20build%20day!/Day%19/) | [Reducing time](./each%20day%20build%20day!/Day%2019/) | [demo]() | [Takeaways](./each%20day%20build%20day!/Day%2019/README.md/) |

‎each day build day!/Day 19/README.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Js fundamental : reduceMap
2+
3+
Given a list of youtube videos, find the total duration of the videos in hh:mm:ss format using vanilla JS
4+
5+
6+
# Challenges
7+
- map
8+
- reduce
9+
- Math

‎each day build day!/Day 19/index.html

Lines changed: 211 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,211 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Videos</title>
6+
</head>
7+
<body>
8+
9+
<h1>Reducing time into 📥 hh:mm:ss</h1>
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:29">
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+
<script>
188+
//get the data-time value in array
189+
const timeNodes = Array.from(document.querySelectorAll('[data-time]'));
190+
//get the value, split into min:sec, parseFloat and reduce to 🇸
191+
const seconds = timeNodes
192+
.map(node => node.dataset.time)
193+
.map(timeCode => {
194+
const [mins, secs] = timeCode.split(':').map(parseFloat);
195+
return (mins * 60) + secs;
196+
})
197+
.reduce((total, vidSeconds) => total + vidSeconds);
198+
199+
let secondsLeft = seconds;
200+
//conversion into hours , mins , seconds
201+
const hours = Math.floor(secondsLeft / 3600);
202+
secondsLeft = secondsLeft % 3600;
203+
204+
const mins = Math.floor(secondsLeft / 60);
205+
secondsLeft = secondsLeft % 60;
206+
207+
console.log(hours, mins, secondsLeft);
208+
209+
</script>
210+
</body>
211+
</html>

0 commit comments

Comments
 (0)