Javascript30 - Adding Up Times with Reduce

기록일기📫·2021년 2월 4일

javascript30

목록 보기

15/16

이번 실습은 영상이 쭉 있다고 가정하고, data-time(dataset attribute)에 표현되어 있는 영상 길이 정보를 한번에 가져와서 console.log로 찍는 연습을 해보았다.

map과 reduce를 적절하게 연습해 볼 수 있었던 굉장히 유익한 실습이었다. 😁

Learning Point

Array.from에 대해 학습한다.
Array.prototype.map, Array.prototype.reduce에 대해 학습한다

HTML Part

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Videos</title>
  </head>
  <body>
    <ul class="videos">
      <li data-time="5:43">Video 1</li>
      <li data-time="2:33">Video 2</li>
      <li data-time="3:45">Video 3</li>
      <li data-time="0:47">Video 4</li>
      <li data-time="5:21">Video 5</li>
      <li data-time="6:56">Video 6</li>
      <li data-time="3:46">Video 7</li>
      <li data-time="5:25">Video 8</li>
      <li data-time="3:14">Video 9</li>
      <li data-time="3:31">Video 10</li>
      <li data-time="5:59">Video 11</li>
      <li data-time="3:07">Video 12</li>
      <li data-time="11:29">Video 13</li>
      <li data-time="8:57">Video 14</li>
      <li data-time="5:49">Video 15</li>
      <li data-time="5:52">Video 16</li>
      <li data-time="5:50">Video 17</li>
      <li data-time="9:13">Video 18</li>
      <li data-time="11:51">Video 19</li>
      <li data-time="7:58">Video 20</li>
      <li data-time="4:40">Video 21</li>
      <li data-time="4:45">Video 22</li>
      <li data-time="6:46">Video 23</li>
      <li data-time="7:24">Video 24</li>
      <li data-time="7:12">Video 25</li>
      <li data-time="5:23">Video 26</li>
      <li data-time="3:34">Video 27</li>
      <li data-time="8:22">Video 28</li>
      <li data-time="5:17">Video 29</li>
      <li data-time="3:10">Video 30</li>
      <li data-time="4:43">Video 31</li>
      <li data-time="19:43">Video 32</li>
      <li data-time="0:47">Video 33</li>
      <li data-time="0:47">Video 34</li>
      <li data-time="3:14">Video 35</li>
      <li data-time="3:59">Video 36</li>
      <li data-time="2:43">Video 37</li>
      <li data-time="4:17">Video 38</li>
      <li data-time="6:56">Video 39</li>
      <li data-time="3:05">Video 40</li>
      <li data-time="2:06">Video 41</li>
      <li data-time="1:59">Video 42</li>
      <li data-time="1:49">Video 43</li>
      <li data-time="3:36">Video 44</li>
      <li data-time="7:10">Video 45</li>
      <li data-time="3:44">Video 46</li>
      <li data-time="3:44">Video 47</li>
      <li data-time="4:36">Video 48</li>
      <li data-time="3:16">Video 49</li>
      <li data-time="1:10">Video 50</li>
      <li data-time="6:10">Video 51</li>
      <li data-time="2:14">Video 52</li>
      <li data-time="3:44">Video 53</li>
      <li data-time="5:05">Video 54</li>
      <li data-time="6:03">Video 55</li>
      <li data-time="12:39">Video 56</li>
      <li data-time="1:56">Video 57</li>
      <li data-time="4:04">Video 58</li>
    </ul>

Javascript Part

const timeNodes = Array.from(document.querySelectorAll("li"));

let seconds = timeNodes
  .map((li) => li.dataset.time)
  .map((timeCode) => {
    const [mins, secs] = timeCode.split(":").map(parseFloat);
    return mins * 60 + secs;
  })
  .reduce((total, curSeconds) => total + curSeconds);

const hour = Math.floor(seconds / 3600);
const min = Math.floor(seconds / 60 - hour * 60);
seconds = seconds % 60;

console.log(hour, min, seconds);