JSFiddle - React, Tailwind, and code Playground

by hmdadou

HTML

<div id="timer">
  <span id="days"></span>days
  <span id="hours"></span>hours
  <span id="minutes"></span>minutes
  <span id="seconds"></span>seconds
</div>
<div id="result"></div>

CSS

body {
  background: #f5f5f5;
}
#timer {
  font-family: Arial, sans-serif;
  font-size: 20px;
  color: #999;
  letter-spacing: -1px;
}
#timer span {
  font-size: 60px;
  color: #333;
  margin: 0 3px 0 15px;
}
#timer span:first-child {
  margin-left: 0;
}

JavaScript

var timer;

var compareDate = new Date();
compareDate.setHours(compareDate.getHours() + 1);
//just for this demo today + 7 days

timer = setInterval(function() {
  timeBetweenDates(compareDate);
}, 1000);

function timeBetweenDates(toDate) {
  var dateEntered = toDate;
  var now = new Date();
  var difference = dateEntered.getTime() - now.getTime();

  if (difference <= 0) {

    // Timer done
    clearInterval(timer);
    document.getElementById('result').innerHTML ='timer is off';
  
  } else {
    
    var seconds = Math.floor(difference / 1000);
    var minutes = Math.floor(seconds / 60);
    var hours = Math.floor(minutes / 60);
    var days = Math.floor(hours / 24);

    hours %= 24;
    minutes %= 60;
    seconds %= 60;
 document.getElementById('days').innerHTML =addZero(days);
   document.getElementById('hours').innerHTML =addZero(hours);
    document.getElementById('minutes').innerHTML =addZero(minutes);
   document.getElementById('seconds').innerHTML =addZero(seconds);
   function addZero(num){ return ('0'+num).slice(-2); }
   
  }
}