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 e4f265a

Browse files
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)

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