Category Archives: Angular.js

Angular Christmas Countdown

A quick play with some JavaScript and Angular.js to create a Christmas Counter for my Daughters

The HTML:

   
   
    
   
   

Imogen and Emily’s Christmas Counter

 

Time Now: {{ time | date:’dd/MM/yyyy HH:mm:ss’ }}

 

How Long to go: {{ myDays }} days, {{ myHours }} hours, {{ myMinutes }} mins, {{ mySeconds }} seconds.

The JavaScript Code:

(function(){
	var app = angular.module('store',['angularMoment']);

	app.controller('StoreController', function($scope,$interval, $filter){
                $scope.time = new Date();
		$scope.myTime = "";
                $scope.mySeconds = "";
                $scope.myMinutes = "";
                $scope.myHours = "";
                $scope.myDays = "";

	$interval(function()
	{
           var current = new Date();
           var cm = new Date(2016,11,25);
           var period = cm.getTime() - current.getTime();
           $scope.time = current;
           
  	   //take out milliseconds
  	   var difference_ms = period/1000;  //seconds
           var secs = Math.floor(difference_ms % 60);
          
           difference_ms = difference_ms/60;  // minutes
           var mins = Math.floor(difference_ms % 60);
  
           difference_ms = difference_ms/60; //hours
           var hours = Math.floor(difference_ms % 24);  
           var days = Math.floor(difference_ms/24);

           $scope.mySeconds = secs;
           $scope.myMinutes = mins;
           $scope.myHours = hours;
           $scope.myDays = days;

  	   $scope.myTime = days  + " days, " + hours + " hours, " + mins + " mins, " + secs + " seconds.";
	},1000);

	});

})();