JSFiddle - React, Tailwind, and code Playground

by alemonteiro

HTML

<div id="divCountDown" class="countDown">
           <span id="days">00</span>     <!-- Remaining Days,id="days"-->
           <span id="hours">00</span>    <!-- Remaining hours ,id="hours"-->
           <span id="minutes">00</span>  <!-- Remaining minutes,id="minutes"-->
           <span id="seconds">00</span>  <!-- Remaining secounds,id="secounds"-->
</div>

CSS

#divCountDown.last-hour span {
  background: #F00;
}
#divCountDown.finished span {
  background: #0F0;
}

JavaScript

//Function For displaying Results in HTML page with specific ID's 
function display(days,hours,minutes,sec) {
		var dl = days.toString().length;
		if (dl == "1") {
			sl = 2;
		}else{
			if (isNaN(dl)) {
				sl = 3;
			}
			sl = dl;
		}
		document.getElementById("days").innerHTML = ("00"+days).slice(-sl);
		document.getElementById("hours").innerHTML = ("0"+hours).slice(-2);
		document.getElementById("minutes").innerHTML = ("0"+minutes).slice(-2);
		document.getElementById("seconds").innerHTML = ("0"+sec).slice(-2);
}
// Start count down
function countdown(endT,callback) {
	var days,hours,minutes,sec,timer,
		endDate = new Date(endT),
		endTime = endDate.getTime(); //Get initial Date in Milliseconds,
	if (isNaN(endTime)) {
	   alert('@ countdown.js @  "Invalid Date", valid format- mm/dd/yyyy hh:mm:ss TT ');
	   return;
	}
	
  // Calculate remaining time
	function calculate(){
	 var current = new Date(),
	 	remaining = parseInt((endTime - current.getTime())/1000);//remaining seconds, 
    
		if (remaining <= 0){
			clearInterval(timer);
			days=0;
			hours=0;
			minutes=0;
			sec=0;
			display(days,hours,minutes,sec);
			if (typeof callback === 'function' ) {
				callback();
			}
		}else{
			days = parseInt(remaining/86400);
			remaining = (remaining%86400);
			hours = parseInt(remaining/3600);
			remaining = (remaining%3600);
			minutes = parseInt(remaining/60);
			remaining = (remaining%60);
			sec = parseInt(remaining);
			display(days,hours,minutes,sec);
      
      // Check if it's last hour
      if ( days === 0 && hours === 0 && minutes > 0 ) {
      	document.getElementById('divCountDown').className += " last-hour";
      }
		}
	}
  
	timer = setInterval(calculate,1000);//Timer to calculate remaining time
}
function countDownEnded() {
	document.getElementById('divCountDown').className += " finished";
}
countdown('08/17/2016 05:27:13 PM', countDownEnded);