<input id="date" type="date">
<input id="time" type="time">
<button id="start">Start</button>
<div id="elapsed"></div>
document.getElementById("start").addEventListener("click", started);
var elapsed = document.getElementById("elapsed");
function started() {
if (!document.getElementById("date").value) {elapsed.textContent = "Enter date"; return;}
if (!document.getElementById("time").value) {elapsed.textContent = "Enter time"; return;}
let now = new Date();
let set = new Date(document.getElementById("date").value + "T" + document.getElementById("time").value);
let sec = (set - now) / 1000;
let d = parseInt(sec / 86400);
let h = parseInt(sec % 86400 / 3600);
let m = parseInt(sec % 86400 % 3600 / 60);
let s = parseInt(sec % 86400 % 3600 % 60);
elapsed.textContent = d + " days " + h + " hours " + m + " minutes " + s + " seconds";
setTimeout(started, 1000);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.