JSFiddle - React, Tailwind, and code Playground

by hmdadou

HTML

<div id="countdown"></div>

JavaScript

var timeinterval = '60:00:10'
  //convert it to seconds
time = timeinterval;
tt = time.split(":");
secs = tt[0] * 3600 + tt[1] * 60 + tt[2] * 1;
console.log('time interval in seconds' + secs);
//time now in seconds
var today = new Date();
var today_abs = new Date();
today_abs.setHours(0);
today_abs.setMinutes(0);
today_abs.setSeconds(0);
today_secs = (today.getTime() - today_abs.getTime()) / 1000;

//the countdown script starts here

var d = new Date();
var theDate = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
var newTime = new Date(Date.parse(d) + secs * 1000);
//var end = new Date('02/08/2016 10:00:00');
var end = newTime;
var _second = 1000;
var _minute = _second * 60;
var _hour = _minute * 60;
var _day = _hour * 24;
var timer;
if (timer) clearInterval(timer);

function showRemaining() {
  var now = new Date();
  var distance = end - now;
  if (distance < 0) {
    clearInterval(timer);
    document.getElementById('countdown').innerHTML = 'time is up';
    return;
  }
  var days = Math.floor(distance / _day);
  var hours = Math.floor((distance % _day) / _hour);
  var minutes = Math.floor((distance % _hour) / _minute);
  var seconds = Math.floor((distance % _minute) / _second);

  document.getElementById('countdown').innerHTML = days + 'days ';
  document.getElementById('countdown').innerHTML += hours + 'hrs ';
  document.getElementById('countdown').innerHTML += minutes + 'mins ';
  document.getElementById('countdown').innerHTML += seconds + 'secs';

}

timer = setInterval(showRemaining, 1000);