Countdown Celebration Event

[jsutusers]

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.

⚙ Live Demo

Sample Code


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

1. (
   
   function
   
   (
   
   )
   
   {
   
2. var
   
   app;
   
3. app =
   
   angular.module
   
   (
   
   'app'
   
   ,
   
   [
   
   ]
   
   )
   
   ;
   
4. app.directive
   
   (
   
   'countdown'
   
   ,
   
   [
   
5. 'Util'
   
   ,
   
   '$interval'
   
   ,
   
   function
   
   (
   
   Util,
   
   $interval)
   
   {
   
6. return
   
   {
   
7. restrict:
   
   'A'
   
   ,
   
8. scope:
   
   {
   
9. date:
   
   '@'
   
10. }
    
    ,
    
11. link:
    
    function
    
    (
    
    scope,
    
    element)
    
    {
    
12. var
    
    future;
    
13. future =
    
    new
    
    Date
    
    (
    
    scope.date
    
    )
    
    ;
    
14. $interval(
    
    function
    
    (
    
    )
    
    {
    
15. var
    
    diff;
    
16. diff =
    
    Math
    
    .floor
    
    (
    
    (
    
    future.getTime
    
    (
    
    )
    
    -
    
    new
    
    Date
    
    (
    
    )
    
    .getTime
    
    (
    
    )
    
    )
    
    /
    
    1000
    
    )
    
    ;
    
17. return
    
    element.text
    
    (
    
    Util.dhms
    
    (
    
    diff)
    
    )
    
    ;
    
18. }
    
    ,
    
    1000
    
    )
    
    ;
    
19. }
    
20. }
    
    ;
    
21. }
    
22. ]
    
    )
    
    ;
    
23. app.factory
    
    (
    
    'Util'
    
    ,
    
    [
    
24. function
    
    (
    
    )
    
    {
    
25. return
    
    {
    
26. dhms:
    
    function
    
    (
    
    d)
    
    {
    
27. var
    
    days,
    
    hours,
    
    minutes,
    
    seconds;
    
28. days =
    
    Math
    
    .floor
    
    (
    
    d /
    
    86400
    
    )
    
    ;
    
29. d -=
    
    days *
    
    86400
    
    ;
    
30. hours =
    
    Math
    
    .floor
    
    (
    
    d /
    
    3600
    
    )
    
    %
    
    24
    
    ;
    
31. d -=
    
    hours *
    
    3600
    
    ;
    
32. minutes =
    
    Math
    
    .floor
    
    (
    
    d /
    
    60
    
    )
    
    %
    
    60
    
    ;
    
33. d -=
    
    minutes *
    
    60
    
    ;
    
34. seconds =
    
    d %
    
    60
    
    ;
    
35. return
    
    [
    
    days +
    
    'Days'
    
    ,
    
    hours +
    
    'Hrs.'
    
    ,
    
    minutes +
    
    'Min.'
    
    ,
    
    seconds +
    
    'Sec.'
    
    ]
    
    .join
    
    (
    
    ' '
    
    )
    
    ;
    
36. }
    
37. }
    
    ;
    
38. }
    
39. ]
    
    )
    
    ;
    
40. }
    
    )
    
    .call
    
    (
    
    this
    
    )
    
    ;
    

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

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

⚙ Live Demo

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

Download