JavaScript 30- Day 18 Study Notes

https://javascript30.com/

Day 18 of JavaScript 30 by Wes Bos showed how he added up the run times of his YouTube videos when given a series of short videos. Given a timestamp for each video in string form in an HTML element.

<li data-time="2:14">
Video 52
</li>
<li data-time="3:44">
Video 53
</li>

First, he formed an array from the node list given.

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

A function to convert time nodes into seconds using the map and split methods to separate minutes and seconds, and using the reduce method to calculate total seconds.

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

Now, to convert total seconds into hours, minutes, and remaining seconds.

let secondsLeft = seconds;
const hours = Math.floor( secondsLeft / 3600);
secondsLeft = secondsLeft % 3600; //modulo
const minutes = Math.floor( secondsLeft/60);
secondsLeft = secondsLeft % 60;
console.log( hours, minutes,secondsLeft);

I had not heard of a modulo before this. When I looked it up, it was quite simple. A modulo calculates the remainder after one division operation. For example “10 % 3” equals 1 (3 times 3 is 9, 1 is the remainder).

I still get confused about when a value (data type)is a string and when it is not. In this program, from what I can tell, we are given a node list of string values. These values are converted to numbers using map and parseFloat methods. So first we have an array of string values, then we have an array of number values.

Follow my study notes as I progress through JavaScript 30.

JavaScript 30- Day 17

JavaScript 30–01 Drum Kit