A simple and lightweight library for adding countdowns to the frontend in a declarative way.
- Simple inline setup using HTML attributes.
- Custom display format options.
- Custom update interval.
- Custom callback action.
npm i @medilies/countdown-component
import { autoStartCountown } from "@medilies/countdown-component/lib/countdownComponent";
autoStartCountown();<script src="https://cdn.jsdelivr.net/gh/medilies/[email protected]/dist/countdown-component.js"></script>
<script>
autoStartCountown();
</script>Write a div or many with the following attributes.
| Attribute | Description | |
|---|---|---|
| autoCountdown | Starts the countdown on page load | Required |
| countdown-duration | Sets the countdown 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"
| 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 |
See: pen
<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>- Add countdowns that start rolling on an event beside those that auto start 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 abort the countdown.
Any kind of contribution is very welcomed, so feel free to get in touch so I can add you to the repo :)
...