How to calculate remaining time between current time and set time in JavaScript

Question

This is a photo of the fragment I want to create a prayer app that tells you how much time is left between the current time and the prayer time

I tried to find the difference directly by doing this

prayers = [[13,59],
           [13,30]];

let time = new Date();
let currprayer = new Date();
for (let index in prayers) {
    currprayer.setHours(prayers[index][0])
    currprayer.setMinutes(prayers[index][1])
    if (currprayer.getTime() > time.getTime()){
        currprayer.setSeconds(00)
        let left = new Date(currprayer.getTime() - time.getTime() );
        document.getElementById('nextmin').innerHTML = left.getMinutes()
        document.getElementById('nexthrs').innerHTML = left.getHours()
        document.getElementById('nextsec').innerHTML = left.getSeconds()
    }
    else{
        console.log("nope")
    }
}

<div class="details">
    <div class="next-prayer">
        <span id="nexthrs">00</span>
        <span>:</span>
        <span id="nextmin">00</span>
        <span>:</span>
        <span id="nextsec">00</span>
    </div>
</div>

But it keeps getting stuck at 00:00:00

Answer 1

You can get the timestamps of both, subtract them and convert the result to a new date format, can't you? Check the link to do this: https://plainenglish.io/blog/How to convert date string to timestamp in JavaScript

Answer 2

The problem is that today’s era may be a thing of the past. Your screenshot shows 19:24 local time, which is obviously later than the two times in the prayers array. In this case, you should look for the next day's time.

If in this case you want to have time before the next prayer one day later , add another entry in the array with a time 24 hours more than the first one. To do this, you must first ensure that the times are listed in chronological order (which is not the case in the example snippet)

Here's how you can do this (see comments in the code):

// Always define variables with const/let.
// Define the times in chronological order
const prayers = [[1,59], [4,39], [6,49], [13,45], [17,33], [20,41], [22,42]];

// Add one more for the next day, that is 24 hours more than first entry
prayers.push([prayers[0][0] + 24, prayers[0][1]]);

function refresh() {
    const time = new Date();
    const currprayer = new Date();
    currprayer.setSeconds(0, 0);
    for (const prayer of prayers) {
        currprayer.setHours(...prayer); // Pass hours and minutes in one go
        if (currprayer > time) break;
    }
    const left = new Date(currprayer - time);
    // It's easier to format the time here and display it in one HTML element
    // We use UK locale just to make sure the time format is hh:mm:ss
    document.querySelector('.next-prayer').textContent = left.toLocaleTimeString("en-UK");
}

// Start the interval timer
setInterval(refresh, 200);
// Also refresh the page immediately
refresh();

<div class="details">
    <div class="next-prayer">
    </div>
</div>