This is the official solution for Hands-on Project: Countdown timer.
Overview
The script is divided into three functions startTimer(), calculate() and updateHTML(). The startTimer() method is called when the button is clicked and it does the set-up for the timer to start. If everything is fine, it calls the calculate() method every 100 milliseconds. The calculate() method calculates the remaining numbers of days, hours, minutes and seconds from current time to target. Finally, it calls the updateHTML() method to reflect this time in the HTML as well.
We've also written some custom CSS to make the countdown timer look beautiful.
Code
<html><head><title>Countdown Clock</title><style>body {background-image: linear-gradient(to right bottom, #f3b9a5, #e8a3c0);font-family: Arial, Helvetica, sans-serif;}#timer {position: absolute;left: 50%;top: 40%;transform: translate(-50%, -40%);}input, button {padding: 10px;margin: 5px;border-radius: 10px;border: none;}button {background: #272838;color: #F9F8F8;cursor: pointer;}.flip {display: inline-block;padding: 10px;}.title {color: #272838;text-transform: uppercase;text-align: center;font-size: 15px;}.number {background: #272838;color: #F9F8F8;text-align: center;width: 90px;height: 70px;padding-top: 10px;font-size: 50px;border-radius: 5px;}#expiremessage {font-family: Arial, Helvetica, sans-serif;font-size: 40px;font-weight: bolder;}</style></head><body><div id="timer"><h1>Countdown Timer</h1><h2>Enter end date and time </h2><div style="font-family: monospace;">Date: <input type="date" id="dateinput"><br>Time: <input type="time" id="timeinput"><br></div><button onclick="startTimer()">Start timer</button><br><br><div id="expiremessage"></div><div class="flip"><div class="title">Days</div><div class="number" id="days"></div></div><div class="flip"><div class="title">Hours</div><div class="number" id="hours"></div></div><div class="flip"><div class="title">Minutes</div><div class="number" id="minutes"></div></div><div class="flip"><div class="title">Seconds</div><div class="number" id="seconds"></div></div><br></div><script>// declare variablesvar endtime, days, hours, minutes, seconds;function startTimer() {// get input field valuesvar datevalue = document.getElementById("dateinput").value;var timevalue = document.getElementById("timeinput").value;// make sure the values are not emptyif (datevalue === "" || timevalue === "") {console.log(datevalue + " " + timevalue);alert("Please fill both the fields");return;}// construct the date stringvar datestring = datevalue + " " + timevalue;// create new Date object and get its time in millisecondsendtime = new Date(datestring).getTime();// call calculate after every 100 millisecondssetInterval(calculate, 100);}function calculate() {// calculate time difference in millisecondsvar difference = endtime - Date.now();// if difference is less than 0, then the timer has expiredif (difference < 0) {document.getElementById("expiremessage").innerHTML = "EXPIRED<br>";document.getElementById("days").innerHTML = "";document.getElementById("hours").innerHTML = "";document.getElementById("minutes").innerHTML = "";document.getElementById("seconds").innerHTML = "";return;}// Calculate number of days, hours, minutes and seconds// one day = 24 * 60 * 60 * 1000 millisecondsvar millis = 24 * 60 * 60 * 1000;days = Math.floor(difference / millis);difference %= millis;// one hour = 60 * 60 * 1000 millisecondsmillis = 60 * 60 * 1000;hours = Math.floor(difference / millis);difference %= millis;// one minute = 60 * 1000 millisecondsmillis = 60 * 1000;minutes = Math.floor(difference / millis);difference %= millis;// one second = 1000 millisecondsseconds = Math.floor(difference / 1000);// update the innerHTMLupdateHTML();}function updateHTML() {document.getElementById("days").innerHTML = days;document.getElementById("hours").innerHTML = hours;document.getElementById("minutes").innerHTML = minutes;document.getElementById("seconds").innerHTML = seconds;}</script></body></html>