Countdown Celebration Event

Submitted by rinvizle on Tuesday, August 16, 2016 - 14:26.

Hello Guys! We will create a Countdown Celebration Event using strong>Javascript time format script. This project creates a celebration event or countdown event in different event that you have, it is a simple form of event using html for the GUI and javascript for the date and time for the given event based on the real-time monitoring using your laptop or desktops default date and time. You can change the date and time if you want a new celebrations or events by changing the Month and the year in the given script provided in this project. Here are the sample image and codes below.

Sample Code

For the syntax of the time and date format using this javascript code.

(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(d) {
                  var days, hours, minutes, seconds;
                  days = Math.floor(d / 86400);
                  d -= days * 86400;
                  hours = Math.floor(d / 3600) % 24;
                  d -= hours * 3600;
                  minutes = Math.floor(d / 60) % 60;
                  d -= minutes * 60;
                  seconds = d % 60;
                  return [days + 'Days', hours + 'Hrs.', minutes + 'Min.', seconds + 'Sec.'].join(' ');
                }
          };
        }
        ]);
        }).call(this);

And this is for the query of the Month and Date that you wanted to change.

<div class='wrap' ng-app='app'>
        <div class='time-to'>
                <h1>Merry Christmas!</h1>
                Lets Us All Welcome And Celebrate The Very Special Night For All Of Us.
                <img src="images/merrychristmas.gif">
                <span countdown='' date='December 25, 2016 24:00:00'></span>
        </div>
</div>

Hope that you learn in my tutorial. Don't forget to LIKE & SHARE this website. Enjoy Coding.

Add new comment

112 views