kazeeem/flexible-countdown

This library creates a countdown timer from a date passed to it and it provides very flexible options you can use to format it.

v1.0.0 2021-11-09 22:19 UTC

This package is auto-updated.

Last update: 2024-11-10 05:24:51 UTC


README


Flexible Countdown
Flexible Countdown

Flexible Countdown is a special countdown timer built using DayJs Library.

made-with-javascript

Key FeaturesHow To UseCreditsLicense

Key Features

  • Locale support
    • You can specify the time in your timezone.
  • Action to perform when timer elapses
    • You could either display a message or reload the page when the time reaches zero.
  • Countdown in various formats. (i.e Year, months, weeks, days, hour, minutes and seconds.
  • Easy to modify.

How To Use

To clone and use this plugin, you'll need Jquery 3.6.0 and above

# Clone this repository
$ git clone https://github.com/Kazeeem/flexible-countdown OR 
$ you could install it via composer 
* composer require kazeeem/flexible-countdown

# Locate the flexible-countdown.js file which will be found in src/assets/js
$ Make sure the flexible-countdown.js file is placed below your jquery.

screenshot

You can use the plugin as it is in the sample above

However, there are some optional parameters you may want to use as well:

  • expiry_message
    • This is the message you may want to display when the timer reaches zero. If this value is not passed, the default message is "Time Up"
  • reload_page
    • This takes the value of true or false. It reloads the page when the countdown reaches zero.
  • suffix
    • This also takes the value of true or false. It will display the letters of the time beside the individual numbers
  • show_days
    • By default, the timer shows Hour, minutes and seconds but if you want it to show the value of remaining days, you can set this to true
  • show_weeks
    • If you want to show remaining weeks.
  • show_months
    • If you want to show remaining months.
  • show_years
    • If you want to show remaining year.
  • local
    • You can specify the timezone you want the counter to use. By default, it is set to Africa/Lagos.

Full Sample Code

screenshot

Credits

This plugin uses the following libraries:

  • Dayjs and its plugins (Timezone and Duration).

License

MIT

codingkaz.com.ng  ·  GitHub @Kazeeem  ·  Twitter @Kazeeem_A