https://github.com/bladeski/countdown-timer
This is a small app that serves as a customisable countdown timer
https://github.com/bladeski/countdown-timer
accessible countdown javascript lightweight parceljs static-site timer typescript
Last synced: 3 months ago
JSON representation
This is a small app that serves as a customisable countdown timer
- Host: GitHub
- URL: https://github.com/bladeski/countdown-timer
- Owner: bladeski
- License: mit
- Created: 2022-11-11T12:29:30.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-19T12:08:48.000Z (over 1 year ago)
- Last Synced: 2025-01-18T11:16:13.715Z (5 months ago)
- Topics: accessible, countdown, javascript, lightweight, parceljs, static-site, timer, typescript
- Language: TypeScript
- Homepage:
- Size: 938 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# Countdown Timer
## About
This is a lightweight, accessible and customisable countdown timer web component built with TypeScript and packaged with ParcelJS.
A [demo is available here](https://bladeski.github.io/countdown-timer-example/)
## Getting Started
To get started, install this into your project using:
`npm install @bladeski/countdown-timer`
or
`yarn add @bladeski/countdown-timer`.
Once installed, simply import into your project using `import '@bladeski/countdown-timer'`, then add the following tag into your HTML ``.
To access the component methods, events, etc. simply find it in the DOM as below:
```js
const countdownComponent = document.querySelector('countdown-component');
countdownComponent.setCountdownLength([0,0,30]);
countdownComponent.startCountdown();
```
### TypeScript
When using TypeScript, use the `CountdownComponent` cast to the correct type using:
```ts
const countdownComponent = document.querySelector('countdown-component') as CountdownComponent;
```
## API
### Data-Attributes
#### data-base-font-size
Pass this data attribute into the web component with a number value to set the base font size.
### Properties
#### timeLeft
This will return the time left on the timer.
```ts
timeLeft: [hoursLeft: number, minutesLeft: number, secondsLeft: number]
```
### Methods
#### setCountdownLength
Sets the length of the countdown timer.
``` ts
setCountdownLength(countdownLength: number[], hideZeroedUnits = false);
```
#### startCountdown
Starts the countdown.
``` ts
startCountdown();
```
#### stopCountdown
Stops/pauses the countdown.
``` ts
stopCountdown();
```
#### reset
Resets the countdown timer.
``` ts
reset();
```
#### focus
Overrides the default focus method and focusses the start/stop button.
``` ts
focus();
```
### Events
#### Countdown Start
Triggered when the countdown has started.
Example
``` ts
countdownComponent.addEventListener('countdownStart', () => console.log('Countdown Started'));
```
#### Countdown Stop
Triggered when the countdown has stopped.
Example
``` ts
countdownComponent.addEventListener('countdownStop', () => console.log('Countdown Stopped'));
```
#### Countdown End
Triggered when the countdown has reached 00:00:00.
Example
``` ts
countdownComponent.addEventListener('countdownEnd', () => console.log('Countdown Ended'));
```
#### Countdown Reset
Triggered when the countdown has been reset.
Example
``` ts
countdownComponent.addEventListener('countdownReset', () => console.log('Countdown Reset'));
```