JSFiddle - React, Tailwind, and code Playground

by Joerian Gauten

HTML

<div ng-app>
    <div ng-controller="countdown">
        <p class="date" ng-hide="gohome">
            <span ng-bind="time.days"></span>
            <span ng-bind="time.hours"></span>
            <span ng-bind="time.minutes"></span>
            <span ng-bind="time.seconds"></span>
        </p>
        <h1 ng-show="gohome">Let's Gow</h1>
    </div>
</div>

CSS

.date span {
    margin: 0 5px;
    font:normal 24px/1.2em Tahoma, sans-serif;
}

h1 {
    font-family:Tahoma, sans-serif;
    font-weight:normal;
}

JavaScript

var counter,
    dateStr = "March 31, 2014 19:00";

function countdown($scope) {
    
    var nowDate = new Date(),
        targetDate = new Date(dateStr),
        remainingTime = (Date.parse(targetDate) - Date.parse(nowDate)) / 1000;

    $scope.gohome = false;
    if (remainingTime <= 0) {
        $scope.gohome = true;
        return;
    }
    
    $scope.time = {
        days: clockDigit(Math.floor(remainingTime/60/60/24), "day"),
        hours: clockDigit(Math.floor(remainingTime/60/60)%24, "hour"),
        minutes: clockDigit(Math.floor(remainingTime/60)%60, "minute"),
        seconds: clockDigit(remainingTime%60, "second")
    };
    
    counter = setInterval(function() {
        
        if (!remainingTime) {
            $scope.$apply(function() {
                $scope.gohome = true;
            });
            clearInterval(counter);
        }
        
        $scope.$apply(function() {
            remainingTime--;
            $scope.time = {
                days: clockDigit(Math.floor(remainingTime/60/60/24), "day"),
                hours: clockDigit(Math.floor(remainingTime/60/60)%24, "hour"),
                minutes: clockDigit(Math.floor(remainingTime/60)%60, "minute"),
                seconds: clockDigit(remainingTime%60, "second")
            };
        });
    }, 1000);
    
}

function clockDigit(digit, unit) {
    digit = digit.toString();
    if (digit.length <= 1) {
        digit = "0" + digit;
    }
    
    return digit + " " + unit + ((digit > 1)?"s":"");
}