Day18 of #100DaysOfCode

#CodeTogether Day 18/100

Hii folks 🙌

Today I have completed the 18th video of JavaScript30!

Project 18: Tally String Times with Reduce

Source: https://javascript30.com

We will be using the reduce() method to tally an array of string times. Before starting the lesson I spent some time reading the MDN docs (link above) about this method. It is important to go to understand the array methods that are available to us.

Our task today is to iterate over a list of videos and sum all of the timestamps that are found.

Each of our videos has a data-time attribute that contains a string value of their mm:ss time. So first up, we need to select all of the videos and collect up their associated data-time attribute value. We also need to spread this into an Array (instead of a nodeList):

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

Next up, we need to take the resulting array of strings and calculate the total number of seconds.

To do this we need to split the strings up into minutes & seconds. Then we need to convert these to numbers (multiplying the minutes by 60 as we go). Then we need to sum all of the resulting numbers:

const seconds = timeNodes  
  .map(node => node.dataset.time)
  .map(timeCode => {
    const [mins, secs] = timeCode.split(':').map(parseFloat)
    return (mins * 60) + secs
  })
  .reduce((total, vidSeconds) => total +  vidSeconds)

Now we need to convert this single number of seconds into a human-readable HH:MM:SS format. We will use the Remainder (%) arithmetic operator in these calculations.

let secondsLeft = seconds  
const hours = Math.floor(secondsLeft / 3600)  
secondsLeft = secondsLeft % 3600  
const minutes = Math.floor(secondsLeft / 60)  
secondsLeft = secondsLeft % 60
console.log('Total Video Time: ' + hours + ':' + minutes + ':' + secondsLeft)

Today I learned (T-I-L):

• Array.prototype.reduce()
• Nodelist vs Array

That is all for Day18 ✅

Thanks for reading, See you tomorrow!