simplyCountdown.js

A Tiny Javascript Countdown Library

Why another countdown ?

I developed this little library in a boring day. I regularly use this kind of Javascript's libraries to display countdowns on websites and this one exactly meets the needs that I have. It is perfect to make 'under construction' pages, etc.

This is a very (very) basic Javascript CountDown.

Getting Started

install via npm, bower or direct download


    $ bower install simplycountdown.js
    $ npm install simplycountdown.js

        

Insert simplyCountdown to your HTML


    <link rel="stylesheet" href="css/simplyCountdown.theme.default.css"/>
    <script src="dist/simplyCountdown.min.js"></script>

        

    // This is an example with default parameters
    // You'll always have to call simplyCountdown using ID's, no classes.

    simplyCountdown('[CSS-SELECTOR]', {
            year: 2015, // required
            month: 6, // required
            day: 28, // required
            hours: 0, // Default is 0 [0-23] integer
            minutes: 0, // Default is 0 [0-59] integer
            seconds: 0, // Default is 0 [0-59] integer
            words: { //words displayed into the countdown
                days: 'day',
                hours: 'hour',
                minutes: 'minute',
                seconds: 'second',
                pluralLetter: 's'
            },
            plural: true, //use plurals
            inline: false, //set to true to get an inline basic countdown like : 24 days, 4 hours, 2 minutes, 5 seconds
            inlineClass: 'simply-countdown-inline', //inline css span class in case of inline = true
            // in case of inline set to false
            enableUtc: true,
            onEnd: function () {
                // your code
                return;
            },
            refresh: 1000, //default refresh every 1s
            sectionClass: 'simply-section', //section css class
            amountClass: 'simply-amount', // amount css class
            wordClass: 'simply-word' // word css class
    });

You can use it with jQuery too (not required)


    // jQuery Example

    $('[SELECTOR]').simplyCountdown({
        year: 2015, // required
        month: 6, // required
        day: 28, // required
        ...
    });

Easy to customize

You can easly customize the countdown using the css theme starter file or create your own like so :

  The following theme template works with default class in parameters


    /**
    * Project : simply-countdown
    * File : simplyCountdown.theme.custom
    * Author : Your Name <your-mail[at]example.com>
    */

    .simply-countdown {
    /* The countdown */
    }
    .simply-countdown > .simply-section {
    /* coutndown blocks */
    }

    .simply-countdown > .simply-section > div {
    /* countdown block inner div */
    }

    .simply-countdown > .simply-section .simply-amount,
    .simply-countdown > .simply-section .simply-word {
    /* amounts and words */
    }

    .simply-countdown > .simply-section .simply-amount {
    /* amounts */
    }

    .simply-countdown > .simply-section .simply-word {
    /* words */
    }


Examples

Default

Displayed whithout jQuery - UTC enabled

Custom

Displayed with jQuery - UTC disabled

Inline