JSFiddle - React, Tailwind, and code Playground

by suit

HTML

<h1>Countdown Clock</h1>
<div id="clock">
    <span class="dd"></span>
    <span class="hh"></span>
    <span class="mm"></span>
    <span class="ss"></span>
</div>

CSS

#clock {
	color: red;
}

#clock.act {
	color: black;
}

JavaScript

function getClockDiff(endtime) {
		var diff =  Date.parse(endtime) - Date.parse(new Date());
		if(diff < 0) {
			diff = 0;
		}
		return {
			'total' : diff,
			'dd'    : Math.floor(diff / (1000 * 60 * 60 * 24)),
			'hh'    : Math.floor((diff / (1000 * 60 * 60)) % 24),
			'mm'    : Math.floor((diff / 1000 / 60) % 60),
			'ss'    : Math.floor((diff / 1000) % 60)
		};
	}
	
	function initClock(id, endtime) {
		var clock = $(id);
		$(clock).addClass('act');

		function updateClock() {
			$('body').append('-');
			var diff = getClockDiff(endtime);

			$('.dd', clock).html(diff.dd);
			$('.hh', clock).html(diff.hh);
			$('.mm', clock).html(diff.mm);
			$('.ss', clock).html(diff.ss);

   	 if (diff.total <= 0) {
		 		$(clock).removeClass('act');
  	    clearInterval(clockinterval);
   	 }
		}
		updateClock();
		var clockinterval = setInterval(updateClock, 1000);
	}


	initClock('#clock', '2017-05-02 13:25:50');