ysCountDown.js

A simple and easy-to-use countdown plugin.

ysCountDown.js is a powerful and versatile JavaScript countdown library that allows you to effortlessly implement countdown timers in your web applications. With its simple and easy-to-use plugin, you can seamlessly display countdowns in seconds, minutes, hours, days, days to a week, days to a month, weeks, weeks to a month, months, months to a year, years, total days, total hours, total minutes, and total seconds.

Download / Demo / yusufsezer.com

Why should I use ysCountDown.js?

• No need any plug-in - does not need any plugin or library.
• Easy to use - Choose a date and start using it.
• Extensile - Extended time support.

How to use

Compiled and production-ready code can be found in the dist directory. The src directory contains development code.

1. Include ysCountDown on your site

<script src="path/to/yscountdown.js"></script>

2. Set end date

Choose a date that supports JavaScript in whatever format you like.

var endDate = "2050/01/01";

3. Initialize ysCountDown

In the footer of your page, after the content, initialize ysCountDown. And that's it, you're done. Nice work!

var myCountDown = new ysCountDown(endDate, function (remaining, finished) {

  if (finished) {
    
    // countdown finished

  } else {

    // do something

  }

});

Example 1

var myCountDown = new ysCountDown("2050/01/01", function (remaining, finished) {

  if (finished) {
    
    document.body.innerHTML = "Expired";

  } else {

    document.body.innerHTML = remaining.hours + "h " + remaining.minutes + "m " + remaining.seconds + "s";

  }

});

Example 2

var myCountDown = new ysCountDown(new Date("2050-01-01T12:05:55Z"), function (remaining, finished) {

  if (finished) {
    
    document.body.innerHTML = "Expired";

  } else {

    document.body.innerHTML = remaining.hours + "h " + remaining.minutes + "m " + remaining.seconds + "s";

  }

});

For more details visit MDN.

ES6 Modules

ysCountDown does not have a default export, but does support CommonJS and can be used with native ES6 module imports.

import('path/to/yscountdown.js')
  .then(function () {
    var myCountDown = new ysCountDown(endDate, function (remaining, finished) { });
  });

It uses a UMD pattern, and should also work in most major module bundlers and package managers.

Working with the Source Files

If you would prefer, you can work with the development code in the src directory using the included Gulp build system. This compiles and minifies code.

Dependencies

Make sure these are installed first.

• Node.js
• Gulp sudo npm install -g gulp

Quick Start

1. In bash/terminal/command line, cd into your project directory.
2. Run npm install to install required files.
3. When it's done installing, run one of the task runners to get going:
   • gulp manually compiles files.
   • gulp watch automatically compiles files.

Parameters & Callback

You can pass final date and callbacks into ysCountDown through the init() function:

var myCountDown = new ysCountDown(endDate, function (remaining, finished) { });

Use ysCountDown events in your own scripts

You can also call ysCountDown events in your own scripts.

init()

Initialize ysCountDown. This is called automatically when you setup your new ysCountDown object, but can be used to reinitialize your instance.

var myCountDown = new ysCountDown(endDate, myCallback);

myCountDown.init(myDate, myFunction);

destroy()

Destroy the current ysCountDown.init(). This is called automatically during the init function to remove any existing initializations.

var myCountDown = new ysCountDown(endDate, function (remaining, finished) { });

myCountDown.destroy();

Callback parameters

The callback function has two parameters.

The first parameter contains the following calculations related to the countdown.

Parameters
seconds
minutes
hours
days
daysToWeek
daysToMonth
weeks
weeksToMonth
months
monthsToYear
years
totalDays
totalHours
totalMinutes
totalSeconds

The second parameter indicates whether the countdown is over.

License

This project is licensed under the MIT License. See the LICENSE file for details

Created by Yusuf Sezer