JSFiddle - React, Tailwind, and code Playground

by Adhik Bagul

HTML

<h1>Countdown Clock</h1>
		<div id="clockdiv">
		  <div>
			<span id="days"></span>
			<div class="smalltext">Days</div>
		  </div>
		  <div>
			<span id="hours"></span>
			<div class="smalltext">Hours</div>
		  </div>
		  <div>
			<span id="minutes"></span>
			<div class="smalltext">Minutes</div>
		  </div>
		  <div>
			<span id="seconds"></span>
			<div class="smalltext">Seconds</div>
		  </div>
		</div>

CSS

body{
				text-align: center;
				background: #00ECB9;
				  font-family: sans-serif;
				  font-weight: 100;
				}

				h1{
				  color: #396;
				  font-weight: 100;
				  font-size: 40px;
				  margin: 40px 0px 20px;
				}

				#clockdiv{
					font-family: sans-serif;
					color: #fff;
					display: inline-block;
					font-weight: 100;
					text-align: center;
					font-size: 30px;
				}

				#clockdiv > div{
					padding: 10px;
					border-radius: 3px;
					background: #00BF96;
					display: inline-block;
				}

				#clockdiv div > span{
					padding: 15px;
					border-radius: 3px;
					background: #00816A;
					display: inline-block;
				}

				.smalltext{
					padding-top: 5px;
					font-size: 16px;
				}

JavaScript

function countdown(endDate) {
  let days, hours, minutes, seconds;
  
  endDate = new Date(endDate).getTime();
  
  if (isNaN(endDate)) {
	return;
  }
  
  setInterval(calculate, 1000);
  
  function calculate() {
    let startDate = new Date();
    startDate = startDate.getTime();
    
    let timeRemaining = parseInt((endDate - startDate) / 1000);
    
    if (timeRemaining >= 0) {
      days = parseInt(timeRemaining / 86400);
      timeRemaining = (timeRemaining % 86400);
      
      hours = parseInt(timeRemaining / 3600);
      timeRemaining = (timeRemaining % 3600);
      
      minutes = parseInt(timeRemaining / 60);
      timeRemaining = (timeRemaining % 60);
      
      seconds = parseInt(timeRemaining);
      
      document.getElementById("days").innerHTML = parseInt(days, 10);
      document.getElementById("hours").innerHTML = ("0" + hours).slice(-2);
      document.getElementById("minutes").innerHTML = ("0" + minutes).slice(-2);
      document.getElementById("seconds").innerHTML = ("0" + seconds).slice(-2);
    } else {
      return;
    }
  }
}

(function () { 
  countdown('10/01/2018 01:00:00 AM GMT'); 
}());