Home
Demos
Documentation
Features
Home Demos Documentation Features

Countdown Timer

Types of timers

Markup Structure

Every timer has a similar structure expect for flip timer. The Structure looks like the block below. The h1 is the display text. And the group displays the actual timer elements.

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
      <title>Doody Countdown</title>
      <link rel="shortcut icon" href="assets/images/favicon.ico">
      <link rel="stylesheet" href="assets/css/countDownstyles.css">
      <link rel="stylesheet" href="assets/css/index.css">
      <link rel="stylesheet" href="assets/js/flipjs/flip.min.css">
    </head>
      <body>
      <!-- Header - start -->
      <div class="header">
      ...
      </div>
      <!-- Header - end -->
    
      <div class="demos" id="demos">
    
        <!-- sparkling-stars - start -->
        <section id="sparkling-stars" class="cd-container">
                <h1 class="display-1 ft-autour">Fest Starting</h1>
                <div class="group">
                    <ul>
                        <li id="days">
                        </li>
                         <li id="hours">
                        </li>
                         <li id="minutes">
                        </li>
                         <li id="seconds">
                        </li>
                    </ul>
                </div>
        </section>
        <!-- sparkling-stars - end -->
    
      </div>
      <script src="assets/js/flipjs/flip.min.js"></script>
      <script src="assets/js/countDown.js"></script>
      <script src="assets/js/index.js"></script>
      </body>
    </html>

Ring Timer

The Ring Timers are svg based timer with a ring shape stroke, and the stroke length is adjusted based on the time. It has four svg elements for days, hours, minutes and seconds. The svg has two path one for ring track and one is the fill ring which shows the duration of the time. And also two or one text element for displaying the time in digits and the label to show the time mesurement. These elements should have the following class name which is used by the javascript to fill in the values.

<path class="inner-circle" d="M121.688 7.55606C147 ... </path> <-- Fill circle path
<text x="50%" y="45%" digits time"></text> <-- Digits
<text x="50%" y="70%"class="label">DAYS</text> <--- Label

The time is calculated and updated in the UI using the Timer class. The Timer class accepts three arguments countdown data, Id of the section, and type of timer.

new Timer("07/20/2022", "sparkling-stars", "ring")

1.Coutdown Date - It is date string in the format month/day/year
2.Section Id - It is the id of the section in which the timer instance has to use.
3.Timer Type - The time of the timer. In this case it should be ring (Lower case)

This gives a timer instance. And we can start time timer using the init function provided in the class. Now the timer starts running and updates the time and style of the ring according to the time.

new Timer("07/20/2022", "sparkling-stars", "ring").init()

Svg Timer

The svg type timers are also svg based timer. The svg element is rotated in regarding to time. It also has four svg elements for days, hours, minutes and seconds. The svg may have two or more elements, the element which has to be rotated with time should have the inner-circle class. And also two or one text element for displaying the time in digits and the label to show the time mesurement. These elements should have the following class name which is used by the javascript to fill in the values. 

<path class="inner-circle" d="M121.688 7.55606C147 ... </path> <-- Fill circle path
<text x="50%" y="45%" digits time"></text> <-- Digits
<text x="50%" y="70%"class="label">DAYS</text> <--- Label

The time is calculated and updated in the UI using the Timer class. The Timer class accepts three arguments countdown data, Id of the section, and type of timer.

new Timer("07/20/2022", "sparkling-stars", "ring")

1.Coutdown Date - It is date string in the format month/day/year
2.Section Id - It is the id of the section in which the timer instance has to use.
3.Timer Type - The time of the timer. In this case it should be svg (Lower case)

This gives a timer instance. And we can start time timer using the init function provided in the class. Now the timer starts running and updates the time and style of the ring according to the time.

new Timer("07/20/2022", "sparkling-stars", "ring").init()

Normal Timer

The normal timer is just simple text based timers. In this type the structure of the timer is created using html and css and the numbers are updated using the javascript. It also follows the same mark up structure shown at the beginnning. In each list inside the group there is two elements one for displaying the time and one for displaying the label.

<li><span id="days" class="digits time"></span> <span class="label">days</span>

This two element’s reference are taken in javascript and updated using the timer class. The time is calculated and updated in the UI using the Timer class. The Timer class accepts two arguments for normal timer countdown data, Id of the section, and type of timer.

new Timer("07/20/2022", "sparkling-stars")

1.Coutdown Date - It is date string in the format month/day/year
2.Section Id - It is the id of the section in which the timer instance has to use.

Note - For normal timer the third argument for the timer should be omitted.

This gives a timer instance. And we can start time timer using the init function provided in the class. Now the timer starts running and updates the time and style of the ring according to the time.

new Timer("07/20/2022", "sparkling-stars", "ring").init()

Flip Timer

The filp timer is a timer which shows flipping animation to display the clock update. For flipper timer a third-party library has been used. The library is called PQINA Flip.
Example 

<div class="tick" data-did-init="handleTickInit" style="width: 100%;">
                    <div data-repeat="true" data-layout="horizontal center fit"
                        data-transform="preset(d, h, m, s) -> delay">
                        <div class="tick-group">
                            <div data-key="value" data-repeat="true" data-transform="pad(00) -> split -> delay">
                                <span data-view="flip"></span>
                            </div>
                            <span data-key="label" data-view="text" class="tick-label"></span>
                        </div>
                    </div>
                </div>

handleTickInit Function looks like this

function handleTickInit(tick) {
    var counter = Tick.count.up(countdown_to);
    counter.onupdate = function(value) {
    tick.value = value;
  }
}

The Tick is the class provided by the library which expects a date instance.

Flip timer markup should be like this. The handleTickInit function is uses the flip library to generate a default timer. Then the timer is styles using css to our needs.

Timer Class

The Timer Class is a generic class for generating timer clocks for all the listed timers. The Timer class accepts three arguments countdown data, Id of the section, and type of timer.

Example

new Timer("07/20/2022", "sparkling-stars", "ring")

1.Coutdown Date - It is date string in the format month/day/year
2.Section Id - It is the id of the section in which the timer instance has to use.
3.Timer Type - The time of the timer. The type may be one of the following (ring or svg). This argument is optional for normal timer type this argument should be omitted.

    this.config = {
      days: {
        s: 86400000, // mseconds in a day,
        max: 365,
      },
      hours: {
        s: 3600000, // mseconds per hour,
        max: 24,
      },
      minutes: {
        s: 60000, // mseconds per minute
        max: 60,
      },
      seconds: {
        s: 1000, // miliseconds for second
        max: 60,
      },
    };

The config is the milliseconds representation for days, hours, minutes and seconds and the maximum of each measurement.

Render Function

The Render function in the timer class is responsible for updating the values on to the clocks. The render functions differently for each type of timers. For Ring timers, it gets the inner circle and update the stroke-dasharray property and time text based on time. For svg timers, it also gets the inner circle but updates the rotation and text based on the time. For normal timers it only update the digit text inside the clock.

Init Function

The Timer class has an init function. This function starts the timer.

Integration

  1. Choose a countdown from the template code and Copy the countdown html markup from the template using the unique countdown id in "index.html" file and paste it in your html file where ever you want inside a "div" tag.

    Example code:

    <section id="sparkling-stars" class="cd-container">
    <h1 class="display-1 ft-autour">Fest Starting</h1>
    <div class="group">
        <ul>
            <li id="days">
            </li>
             <li id="hours">
            </li>
             <li id="minutes">
            </li>
             <li id="seconds">
            </li>
        </ul>
     </div>
  </section>
  2. Copy the fonts from "countDownstyles.css" (path: assets/css/countDownstyles.css) file and paste it in your CSS file at the top.

    Example code:


             
          /* font-import - start */
              ...
          /* font-import - end */

    Then copy the font folder from our assets folder and past it in your project and configure the url path according to your project folder structure.

    Example code:


              
          @font-face {
            font-family: digital;
            src: url(assets/fonts/digital-7.ttf);
          }
  3. Copy the necessary CSS from "countDownstyles.css" (path: assets/css/countDownstyles.css) file and paste it in your CSS file.

    Note : You have to copy the common CSS for all the timers and corresponding CSS of your timer (Sparkling Stars)

    Example code:


            
          /* common css -start */
              ...
          /* common css - end */
        
              
            /* Sparkling Stars- start */
                ...
            /* Sparkling Stars-end */

  4. Copy the necessary JS from "countDown.js" (path: assets/js/countDown.js) file and paste it in your JS file.

    Note : You have to copy the common JS for all the timers and corresponding JS of your timer (Sparkling Stars)

    Example code:


               
            //  common js - start //
                ...
            //  common js - end //
           
                 
              // sparkling-stars - start //
                  ...
              // sparkling-stars - end //

    Note : For flippers alone you have to copy and paste the below JS 

              
            // flipper - start //
                ...
            // flipper - end //
  5. If you are using flip timer kindly copy flipjs (path: assets/js/) folder and paste it in your project folder and link "flip.min.css" and "flip.min.js" files in your html file that contains in flipjs folder.

    Example code :

                
            //link this in your head tag //
                <link src="flipjs/flip.min.css"> </link >
            //link this before body close tag //
                <script src="flipjs/flip.min.js"> </script >
            //change src path if you using other directorys
  6. Copy images folder from public use it in your project and change image src path where ever image tag is used.

    Example code :

              // update the src path mentioned like below //
              <img class="card-icon" src="assets/images/icons/Group-4.svg" alt="" />

    Note: If background-images or other images loaded from CSS file - change the url path there also.

    Example code :

              // update the url path mentioned like below //
            background-image: url("assets/images/cartoon/bg.svg");
  7. Update the Date and Time under // update timer here // in your JS.

    Example code :

              // update timer here //
            const countdown_to = "08/27/2023 20:30:00"; // Month/Day/Year Hour:Minutes:Seconds (MM/DD/YYYY HH:MM:SS)
  8. Now you are good to go!