You can get the current timestamp and add it the countdown time. Then, you can get the remaining time via substraction with the timestamp.
The current timestamp is returned by the Date.now() method in Javascript.
Note that the timestamp is obtained in milliseconds. Beware on rendering.
For example, if I want a ten minutes countdown:
// Ten minutes to seconds to milliseconds
const countdownTime = 10 * 60 * 1000;
// The countdown end instant is calculed by the addition of the current time when timer is created.
const expireTime = Date.now() + countdownTime;
...
// Now, if you want to calculate the remaining time (in milliseconds):
remainingTime = expireTime - Date.now();
// If you want to know if countdown has reached its end:
isEnded = Date.now() < expireTime;
...
// I don't know how do you want to implement the UI for showing the countdown stuff, but I recommend to convert the time in milliseconds to h, m, s only on browser at render time.
// Here is an implementation that I made for a pomodoro application:
function msToHHMMSS(timeInMs) {
const timeInSeconds = timeInMs / 1000;
const s = timeInSeconds % 60;
const m = Math.floor(timeInSeconds / 60) % 60;
const h = Math.floor(timeInSeconds / 3600);
// You can use the returned values separately where do you want
return [h, m, s];
};
// Use array inferencing for extracting values from the returned array
const [hours, minutes, seconds] = msToHHMMSS(remainingTime);
// For example, if I want to use an element with the "timer" ID for rendering the countdown time on browser:
document.getElementById("timer").innerText(`${hours}:${minutes}:${seconds}`)
// if you want to show the hms always with 2 digits each, you can use padStart after converting to string:
document.getElementById("timer").innerText(`${hours.toString().padStart(2, "0")}: ...and so on`
// The render should be upgraded once on a second. You can use the setInterval for that.
Run code snippetExpand snippet
Code before rendering can be executed both: on the node server or on browser. You can render it using a .js browser file (check your public folder, you can configure it on express, so this folder will be targetted by EJS for getting the path) or on a script tag on your .ejs template (code written on ejs's <% and %> stuff is executed on server before sending the page to the client, but code of js external files and on script tag is executed as client-side javascript).
I hope this helped you. Carry on!
