JS30 day18 - Tally String Times with Reduce

作業內容

今天也是主要在練習 JS 的 map / reduce 這兩種方法，要把影片的總時間加總，練習字串轉時間的過程

學到什麼

• JS

  1. nodeList 不能使用 map，只有 array 可以 把 nodeList 轉換成 array: Array.from(<nodeList>) 或者 [...<nodeList>]

  2. 如果要使用一個方法把一個陣列的項目全部轉換的話，可以直接使用 `arr.map(function)

  time = "1:56"
  splited_time = time.split(":").map(parseFloat)
  console.log(splited_time)
  
  time = "1:56"
  splited_time = time
                    .split(":")
                    .map((timeCode)=>{ 
                      return parseFloat(timeCode) 
                    })
  console.log(splited_time)

參考資料： https://github.com/wesbos/JavaScript30

code 內容： HTML:

<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>
  ...

JS:

const timeNodes = [...document.querySelectorAll('[data-time]')]

const seconds = timeNodes
                      .map((node)=>node.dataset.time)
                      .map((timeCode) => {
                        const [min, seconds] = timeCode.split(":").map(parseFloat);
                        return (min * 60 + seconds)
                      })
                      .reduce((sum, videoTime)=>{ return sum + videoTime } )
let secondsLeft = seconds

let hours = Math.floor(secondsLeft / 3600)
secondsLeft = secondsLeft % 3600

let minutes = Math.floor(secondsLeft / 60)
secondsLeft = secondsLeft % 60

console.log(hours, minutes, secondsLeft)