JSFiddle - React, Tailwind, and code Playground

by Durtto

HTML

<span id='seconds'></span>

JavaScript

// new Date(year, month, day, hours, minutes, seconds, milliseconds)
var target = new Date(2014, 0, 28, 12, 16, 0, 0)

countdown('seconds', target)
setInterval(function(){countdown('seconds', target)},1000)

function countdown(id, targetDate){
    var today = new Date()
    targetDate.setDate(today.getDate())
    targetDate.setFullYear(today.getFullYear())
    targetDate.setMonth(today.getMonth())
    var diffMillis = targetDate - today
    if (diffMillis >= 0){
        document.getElementById(id).innerHTML = millisToString(diffMillis)
    }
}

// formatting code below

function millisToString(millis){
    var duration = getDuration(millis); // example time in millis
    var str = "";
    str += duration.weeks + " weeks, ";
    str += duration.days + " days, ";
    str += duration.hours + " hours, ";
    str += duration.minutes + " mins, ";
    str += duration.seconds + " secs, ";
    //str += duration.millis + " millis";
    return str;
}

function getDuration(timeMillis){
    var units = [
        {label:"millis",    mod:1000,},
        {label:"seconds",   mod:60,},
        {label:"minutes",   mod:60,},
        {label:"hours",     mod:24,},
        {label:"days",      mod:7,},
        {label:"weeks",     mod:52,},
    ];
    var duration = new Object();
    var x = timeMillis;
    for (i = 0; i < units.length; i++){
        var tmp = x % units[i].mod;
        duration[units[i].label] = tmp;
        x = (x - tmp) / units[i].mod
    }
    return duration;
}