0.1.0 • Published 2 years ago
@medilies/countdown-component v0.1.0
Countdown JS
A simple and lightweight library for adding coundowns to the frontend in declarative way.
Features
- Simple inline setup using HTML attributes.
- Custom display format options.
- Custom update interval.
- Custom callback action.
Setup
NPM
npm i @medilies/countdown-componentimport { autoStartCountown } from "@medilies/countdown-component/lib/countdownComponent";
autoStartCountown();CDN
<script src="https://cdn.jsdelivr.net/gh/medilies/countdown-component.js/dist/countdown-component.js"></script>Usage
Write a div or many with the following attributes.
| Attribute | Description | |
|---|---|---|
| autoCountdown | Starts the countdown on page load | Requried |
| countdown-duration | Sets the coundown duration (an integer in seconds) | Required |
| countdown-format | Sets the display format (see the formatting table) | Required |
| countdown-tick-size | Sets the update interval size (a timespan) | Default: 1s |
| countdown-handler | Takes as value the name the function you defined to call as an action in the end of the countdown | Optional |
Note a timespan is a string that is in the format "2m", "1h5s" or "2h20m40s"
Format
| key | Output |
|---|---|
| ss | Seconds with leading zeros 00 through 59 |
| s | Seconds without leading zeros 0 through 59 |
| mm | Minutes with leading zeros 00 to 59 |
| m | Minutes without leading zeros 0 to 59 |
| hh | 24-hour format of an hour with leading zeros 00 through 23 |
| h | 24-hour format of an hour without leading zeros 0 through 23 |
Example
<div autoCountdown countdown-duration='10' countdown-format='hh:m:s'></div>
<div autoCountdown countdown-duration='13' countdown-format='mm:ss' countdown-handler="reload"></div>
<div autoCountdown countdown-duration='3660' countdown-format='hh:mm:ss' countdown-tick-size='5s'
countdown-handler="reload"></div>
<script>
function reload() {
location.reload();
}
</script>
<script src='/dist/countdown-component.js'></script>
<script>
autoStartCountown();
</script>See: pen
Todo
- Add countdowns that start rolling on an event beside those that autostart when the page loads because they have the
autoCountdownattribute. - Add other types of countdowns display beside the possibility of displaying as a formatted time. For example a progress bar.
- Share the library through a CDN.
- Add the possibility to aboart the countdown.
Contributing
Any kind of contribution is very welcomed, so feel free to get in touch so I can add you to the repo :)
Help needed to do
...