How to Create Countdown Event

Submitted by alpha_luna on Monday, June 13, 2016 - 12:30.

In this tutorial, we are going to create Countdown Event using AngularJS. This simple program, we are going to learn a simple countdown in any event. You can be used this in any advertising any kind of event and you can put this in your websites to give information to the user in one kind of event. In the image below, that's the short information and the countdown for the upcoming event. Result

This is the source code of the image above and you can edit the date in this source code.

<div class='wrap' ng-app='app'>
  <div class='time-to'>
        <h3>DEBUT BIRTHDAY PARTY</h3>
        John is turning
        <br />
        21
        <br />
        <br />
        Please join us for a
        <br />
        surprise party to celebrate!!!
        <br />
        <br />
        November 13, 2016 - Tuesday
        <br />
        AT THE RESORT WORLD MANILA
        <span countdown='' date='November 13, 2016 24:00:00'></span>
  </div>
</div>

This short source code where you can edit the date for the event that you want to countdown. <span countdown='' date='November 13, 2016 24:00:00'></span> This is the short script and the AngularJS link. Kindly copy and paste to the BODY tag of your page.

<script src='js/angularjs.js'></script>  
<script>
      (function() {
  var app;
  app = angular.module('app', []);
  app.directive('countdown', [
    'Util', '$interval', function(Util, $interval) {
      return {
        restrict: 'A',
        scope: {
          date: '@'
        },
        link: function(scope, element) {
          var future;
          future = new Date(scope.date);
          $interval(function() {
            var diff;
            diff = Math.floor((future.getTime() - new Date().getTime()) / 1000);
            return element.text(Util.dhms(diff));
          }, 1000);
        }
      };
    }
  ]);
  app.factory('Util', [
    function() {
      return {
        dhms: function(t) {
          var days, hours, minutes, seconds;
          days = Math.floor(t / 86400);
          t -= days * 86400;
          hours = Math.floor(t / 3600) % 24;
          t -= hours * 3600;
          minutes = Math.floor(t / 60) % 60;
          t -= minutes * 60;
          seconds = t % 60;
          return [days + 'd', hours + 'h', minutes + 'm', seconds + 's'].join(' ');
        }
      };
    }
  ]);
}).call(this);
</script>

And, that's it. You have already a simple countdown for the specific event. Hope that this tutorial will help you a lot. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

77 views