tally.jade

extends base

block vars
  - var title = 'Tally String Times with Reduce'

block styles
  link(rel="stylesheet" type="text/css" href="styles/tally.css")

block body

  - var time = ["5:43", "2:33", "3:45", "0:47", "5:21", "6:56", "3:46", "5:25", "3:14", "3:31", "5:59", "3:07", "11:29", "8:57", "5:49", "5:52", "5:50", "9:13", "11:51", "7:58", "4:40", "4:45", "6:46", "7:24", "7:12", "5:23", "3:34", "8:22", "5:17", "3:10", "4:43", "19:43", "0:47", "0:47", "3:14", "3:59", "2:43", "4:17", "6:56", "3:05", "2:06", "1:59", "1:49", "3:36", "7:10", "3:44", "3:44", "4:36", "3:16", "1:10", "6:10", "2:14", "3:44", "5:05", "6:03", "12:39", "1:56", "4:04"]

  ul.videos
    li.total
    each t, index in time
      li&attributes({ 'data-time': t }) Video #{index + 1}
        span.time
          strong #{t}

  script(type="text/javascript").
    const $time = [...document.querySelectorAll('[data-time]')]
    const $total = document.querySelector('.total')

    const seconds = $time
      .map(node => node.dataset.time)
      .map(time => {
        const [ minutes, seconds ] = time.split(':').map(parseFloat)
        return (minutes * 60) + seconds
      })
      .reduce((total, currSeconds) => total + currSeconds)

    let secondsLeft = seconds

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

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

    $total.innerHTML = `
      <span>${hours} Hours</span>
      <span>${minutes} Minutes</span>
      <span>${secondsLeft} Seconds</span>
    `