JavaScript-30-Day-18
Tags: javascript, github, webdev, programming
Published: 2021-06-18 17:31:04

## <center> Adding up times with Reduce </center>

## [demo](https://cenacrharsh.github.io/JS-30-DAY-18/)

![ss](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlmr8rd9ksfletiagbji.png)

Today we will be using `Array.prototype.map` and `Array.prototype.reduce` to figure out the total runtime of given videos in hours, minutes and seconds.

So we are given a list of items each mimicking a video and each one has a `data-time` attribute telling us the length of the video in the format `minutes:seconds`, and we need to figure out how to pull them out of the DOM, convert them to numbers, make them into minutes and seconds, add it all up, figure out how many hours, minutes and seconds there are totally, then finally `console.log` those actual values.

Here is sample of list items given:

```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>
</ul>
```

First thing we want to do is select all of those nodes

```javascript
const timeNodes = document.querySelectorAll("[data-time]");
```

We are not selecting list items because we don't know if it's always going to be a list item so we will select anything with a `data-time` attribute on it.

Now this `timeNodes` is a NodeList and to use `map` we need an Array, so we need to convert this from a node list into an array of actual time strings.

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

Now `timeNodes` is an array of list items.

We will now extract time out of this array of list items.

```javascript
const seconds = timeNodes.map((node) => node.dataset.time);
```

Now `seconds` is an array of strings (containing all the times)

Now we want to convert the time into just seconds. The format in which we have our time right now is `minutes:seconds` so we need to split this string on the `:`.

```javascript
const seconds = timeNodes.map((node) => node.dataset.time).map((timeCode) => {
          const [mins, secs] = timeCode.split(":");
```

But the problem we run into here is after splitting what we get is also a string and we need numbers to do any kind of mathematical calculation.

![1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vxj0kxbbv97furj8t8kf.png)

So we need to map over the array again and use `parseFloat` to convert the string into numbers.

We can see how `parseFloat` solves our problem:

![2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v92wa8kubecdaanszlnj.png)

```javascript
const seconds = timeNodes
        .map((node) => node.dataset.time)
        .map((timeCode) => {
          const [mins, secs] = timeCode.split(":").map(parseFloat);
return mins * 60 + secs
});
```

This gives us all the time in seconds.

![3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u1u1d1glebrt79jm33zx.png)

Now that we have all the times in seconds, we need to add them all up and we are going to use `reduce` for that.

```javascript
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);
```

This gives us the total number of seconds of every single video added together.

Time to chop down the total seconds into hours, minutes and seconds.

```javascript
      let secondsLeft = seconds;
      const hours = Math.floor(secondsLeft / 3600);
```

>We use `Math.floor` to get rid of the decimal part, for example 2.5 hours needs to be converted to 2 hours and we'll convert the remaining 0.5 hours into minutes and seconds

>1hour=3600seconds

```javascript
      secondsLeft = secondsLeft % 3600;
      const mins = Math.floor(secondsLeft / 60);
      //1min=60seconds
      secondsLeft = secondsLeft % 60;
console.log(`${hours}hours ${mins}minutes ${secondsLeft}seconds`);
```

This is final output:

![4](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y8uwlfrj1nugu6lp42mb.png)

and with this our project for the day was completed.

GitHub repo:
{% github cenacrharsh/JS-30-DAY-18 no-readme %}

###Blog on Day-17 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-17-2kg3 %}

###Blog on Day-16 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-16-a41 %}

###Blog on Day-15 of javascript30
{% link https://dev.to/cenacr007_harsh/javascript-30-day-15-l8j %}

##[Follow me on Twitter](https://twitter.com/cenacr007_harsh)
##[Follow me on Linkedin](https://www.linkedin.com/in/kumarharsh22/)

**DEV Profile**

{% user cenacr007_harsh %}

You can also do the challenge at [javascript30](https://javascript30.com/)

Thanks @wesbos , [WesBos](https://github.com/wesbos) to share this with us! 😊💖

**Please comment and let me know your views**
##Thank You!