JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<div class="output"></div>
JavaScript
const access_ttl = 3600;
const login_timestamp = moment('2017-02-19 17:31:58+00:00');
const expire_timestamp = login_timestamp.add(access_ttl, 's');
var now, timeToExpire;
function updateTime() {
now = moment();
timeToExpire = expire_timestamp.diff(now, 'seconds');
}
function displayClock(inputSeconds) {
const sec_num = parseInt(inputSeconds.toString(), 10);
const hours = Math.floor(sec_num / 3600);
const minutes = Math.floor((sec_num - (hours * 3600)) / 60);
const seconds = sec_num - (hours * 3600) - (minutes * 60);
let hoursString = '';
let minutesString = '';
let secondsString = '';
hoursString = (hours < 10) ? "0" + hours : hours.toString();
minutesString = (minutes < 10) ? "0" + minutes : minutes.toString();
secondsString = (seconds < 10) ? "0" + seconds : seconds.toString();
return hoursString + ':' + minutesString + ':' + secondsString;
}
function timer() {
updateTime();
$('.output').html(`Expires in: ${displayClock(timeToExpire)}`)
}
setInterval(timer, 1000)