Real Time Countdown Timers to show remaining days hours minutes seconds for multiple events in angularjs

Views: 451
Comments: 0
Like/Unlike: 0
Posted On: 02-Feb-2019 21:26 

Share:   fb twitter linkedin
Rahul M...
Moderator
30 Points
15 Posts

Introduction
A Countdown Timer is used to show how much time left from an event. Say we have an event which is going to start after two days. A Countdown Timer will display a counter saying days , hours , minutes and seconds left for the event to happen or the campaign to end. We will use $timeout of angularjs. To make Countdown Timer, a Real Time Countdown Timer, we will take remaining seconds (SecondsRemains) from the server side api/script.

Earlier, I had written an article https://www.niceonecode.com/Blog/23/Real-Time-Countdown-Timer-to-show-remaining-days-hours-minutes-seconds-for-an-event-in-angularjs with single event but now I'm exploring it with multiple events in single page.

Description
In controller (Countdown.js):

eventCountDownApp.controller('countdownController', ['$scope', '$timeout', countdownController]);
function countdownController($scope, $timeout) {

    $scope.Timer = [{ RemainingTime: '00:00:00', RemainingTimeStr: "Hour" }];

    //Converts seconds to days hours minutes and seconds
    $scope.SecondsToStr = function (count) {
        var day = Math.floor(count / 86400);
        var hour = Math.floor(count / 3600);
        var min = Math.floor(count % 3600 / 60);
        var sec = Math.floor(count % 3600 % 60);
        var secondsToStr = '' + ('00' + hour).substr(-2) + ':' + ('00' + min).substr(-2) + ':' + ('00' + sec).substr(-2);
        var remainingTimeStr = 'Hour';
        if (hour > 1)
            remainingTimeStr = 'Hours';
        if (day > 0) {
            secondsToStr = '' + day;
            remainingTimeStr = 'Day';
            if (day > 1)
                remainingTimeStr = 'Days';
        }
        return { RemainingTime: secondsToStr, RemainingTimeStr: remainingTimeStr };
    }

    $scope.UpdateTimer = function () {
       if ((!$scope.Timer))
            return true;
       for(var i=0;i<$scope.Timer.length;i++){
        var cDate = new Date();
        var diff = (cDate - $scope.Timer[i].InitTime) / 1000;
        if (diff < $scope.Timer[i].Seconds) {
            var secondToStr = $scope.SecondsToStr($scope.Timer[i].Seconds - diff);
            $scope.Timer[i].RemainingTime = secondToStr.RemainingTime;
            $scope.Timer[i].RemainingTimeStr = secondToStr.RemainingTimeStr;
            //return true;
        }
        else {
            $scope.Timer[i].RemainingTime = '00:00:00';
            //return false;
        }
       }
       return true;
    }

    $scope.ReportTimeoutExpired = function () {
        //do something to show time is expired
        $scope.popTimeoutMessage = true;
    }

    //time out in a second
    $scope.Countdown = function () {
        $timeout(function () {
            if ($scope.UpdateTimer())
                $scope.Countdown();
            else
                $scope.ReportTimeoutExpired();
        }, 1000);
    };

    //Initialize Timer
    $scope.InitTimer = function (counts) {
        
        var timers =[];
        for(var i=0;i<counts.length;i++){
           var timer = {
            RemainingTime: "",
            RemainingTimeStr: "",
            InitTime: new Date(),
            Seconds: counts[i]
        }
         timers.push(timer);
      };
        $scope.Countdown();
        return timers;
    }

   // populate from serverside to get real time
    $scope.SecondsRemains = [6000,5000,40000];
    $scope.Timer = $scope.InitTimer($scope.SecondsRemains);

}

In HTML view page (Countdown.html):


<html lang="en" ng-app>
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
    
  </head>
  <body ng-app="EventCountDownApp">
<section ng-controller="countdownController">
    <div>
      <div class="countdownBox">
          <div class="count">{{Timer[0].RemainingTime}}</div>
          <div>{{Timer[0].RemainingTimeStr}} Remaining Until</div>
      </div>
        <div class="countdownBox">
          <div class="count">{{Timer[1].RemainingTime}}</div>
          <div>{{Timer[1].RemainingTimeStr}} Remaining Until</div>
      </div>
       <div class="countdownBox">
          <div class="count">{{Timer[2].RemainingTime}}</div>
          <div>{{Timer[2].RemainingTimeStr}} Remaining Until</div>
      </div>
    </div>
  </section>
</body>
</html>

Note
In the server side: you can calculate reamining seconds as:
Soppose, your event start date time is store in EventStartDateTime. And Current Date time Object CurrentDateTime. Then,

SecondsRemains = ( EventStartDateTime - CurrentDateTime ).TotalSeconds

And initialize following line of code:

$scope.SecondsRemains = [6000,5000,40000]; 

Conclusion
In the above article, we saw how to create a real time countdown timers for multiple events in a single page. Hope, it will be helpful others.

0 Comments
  
 Log In to Chat