<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="../angular/angular.min.js"></script>
<style type="text/css">
* { text-align: center; }
h1 { font-family: Impact, Charcoal, sans-serif; }
i.big { font-size: 60px; display: block; }
i.big span { font-size: 24px; }
</style>
<script>
angular.module("appModule", [])
.controller("clockCtrl", function ($scope) {
$scope.eventDay = {
date: new Date("September 18, 2014 20:00:00"),
eventDetails: "Mr. Olympia 2014 - Las Vegas, Nevada"
}
$scope.timeTillEvent = {};
var updateClock = function () {
$scope.seconds = ($scope.eventDay.date - new Date()) / 1000;
$scope.timeTillEvent = {
daysLeft: parseInt($scope.seconds / 86400),
hoursLeft: parseInt($scope.seconds % 86400 / 3600),
minutesLeft: parseInt($scope.seconds % 86400 % 3600 / 60),
secondsLeft: parseInt($scope.seconds % 86400 % 3600 % 60)
}
};
setInterval(function () {
$scope.$apply(updateClock);
}, 1000);
updateClock();
});
</script>
</head>
<body>
<div ng-app="appModule" ng-controller="clockCtrl">
<h1>{{ eventDay.eventDetails }}</h1>
<i class="big">{{ timeTillEvent.daysLeft }} <span>days,</span></i>
<i>
{{ timeTillEvent.hoursLeft }} hours,
{{ timeTillEvent.minutesLeft }} minutes and
{{ timeTillEvent.secondsLeft }} seconds remaining !
</i>
</div>
</body>
</html>
