CODEWITHSUNDEEP
javascriptmathtime
user2033139
user2033139

Reputation: 583

Calculating how much time has lapsed in % javascript

Good evening!

I just started messing around with JavaScript, and I am trying to do some calculations, but i am not sure how to do that.

So in my test project, I am grabbing string of EPG (ElectronicProgramGuide) of tv channel.
This string has start and end time of show + minutes how long show will be still on.

For example:

NOW: [21:00 - 22:45] +25 min Star Wars

So this string tells us that at moment Star Wars is on, it started at 21:00 and ends at 22:45, it also shows that there is 25 minutes until it ends.

For outcome I am trying to create a progress bar of show status of show length.

In HTML I only have 1 div, where I output <meter> after calculations are made:

<div id="epgMeter">
</div>

So here's what I have so far, I have extracted all needed values from string. But as for further progress I am not sure how to do the math best.

var epgdata = "NOW: [15:00 - 16:00] +30 min Some Show";

//GET SHOW START AND END TIME
var startEnd = epgdata.split("[");
var startEnd = startEnd[1].split("]");
var stillToGo = startEnd[1].split(" min");
var startEnd = startEnd[0].split(" - ");

var stillToGo = stillToGo[0].replace('+', ''); //30
var showStart = startEnd[0]; //15:00
var showEnd = startEnd[1]; //16:00


//SOME MATH MAGIC SHOULD HAPPEN HERE SO THE OUTCOME WOULD BE 50% IN CURRENT CASE

var precentageOfshowLapsed = "50"; //JUST FOR TESTING

document.getElementById("epgMeter").innerHTML='<meter value="'+precentageOfshowLapsed+'" min="0" max="100"></meter>';

EDIT: We should not use current time, because timezones may differ.

Upvotes: 0

Views: 75

Answers (2)

juvian
juvian

Reputation: 16068

How I would approach this:

function getMinutes(str){
    var arr = str.split(":");
    if(arr.length == 1) return Number(arr[0])
    return Number(arr[0])*60+Number(arr[1])
}

var epgdata = "NOW: [15:00 - 16:00] +30 min Some Show";

var start = getMinutes(epgdata.match(/\[([^ ]*)/)[1]) // regex group
var end = getMinutes(epgdata.match(/([^ ]*)\]/)[1])// regex group

var stillToGo = getMinutes(epgdata.match(/(\d*) min/)[1])// regex group

var percentage = (1-(stillToGo/(end - start)))*100 // formula for remaining percentage

console.log(percentage)

end-start gives us the minutes between the end and the start, which means the duration of the show in minutes. Then we do StillToGo /(end-start), which gives us between 0 and 1, the percentage of the minutes stillToGo. As we want the run percentage instead of the remaining percentage, we do 1 - all that. Finally, multiply by 100 to have the percentage between 0 and 100

Upvotes: 2

Moe
Moe

Reputation: 205

using Date objects:

https://jsfiddle.net/deez2ho1/

this solution basically creates two Date objects, sets the hours and minutes, computes the difference in milliseconds, and then computes the percentage. But using regex from the start is probably a better solution to parse the time information in epgdata;

var epgdata = "NOW: [15:00 - 16:00] +30 min Some Show";

//GET SHOW START AND END TIME
var startEnd = epgdata.split("[");
var startEnd = startEnd[1].split("]");
var stillToGo = startEnd[1].split(" min");
var startEnd = startEnd[0].split(" - ");

var stillToGo = stillToGo[0].replace('+', ''); //30
var showStart = startEnd[0]; //15:00
var showEnd = startEnd[1]; //16:00



// using Date Objects
// create the Dates
var start = new Date();
var end = new Date();

// set hours and minutes
start.setHours(parseInt(startEnd[0].split(":")[0], 10));
start.setMinutes(parseInt(startEnd[0].split(":")[1], 10));
end.setHours(parseInt(startEnd[1].split(":")[0], 10));
end.setMinutes(parseInt(startEnd[1].split(":")[1], 10));

var overallMinutes = (end - start) / (1000 * 60);
var precentageOfshowLapsed = parseInt(stillToGo, 10) / overallMinutes; 

precentageOfshowLapsed *= 100;

document.getElementById("epgMeter").innerHTML = '<meter value="' + precentageOfshowLapsed + '" min="0" max="100"></meter>';

Upvotes: 0

Related Questions