This is a lightweight, accessible and customisable countdown timer web component built with TypeScript and packaged with ParcelJS.
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 <countdown-component></countdown-component>
.
To access the component methods, events, etc. simply find it in the DOM as below:
const countdownComponent = document.querySelector('countdown-component');
countdownComponent.setCountdownLength([0,0,30]);
countdownComponent.startCountdown();
When using TypeScript, use the CountdownComponent
cast to the correct type using:
const countdownComponent = document.querySelector('countdown-component') as CountdownComponent;
Pass this data attribute into the web component with a number value to set the base font size.
This will return the time left on the timer.
timeLeft: [hoursLeft: number, minutesLeft: number, secondsLeft: number]
Sets the length of the countdown timer.
setCountdownLength(countdownLength: number[], hideZeroedUnits = false);
Starts the countdown.
startCountdown();
Stops/pauses the countdown.
stopCountdown();
Resets the countdown timer.
reset();
Overrides the default focus method and focusses the start/stop button.
focus();
Triggered when the countdown has started.
Example
countdownComponent.addEventListener('countdownStart', () => console.log('Countdown Started'));
Triggered when the countdown has stopped.
Example
countdownComponent.addEventListener('countdownStop', () => console.log('Countdown Stopped'));
Triggered when the countdown has reached 00:00:00.
Example
countdownComponent.addEventListener('countdownEnd', () => console.log('Countdown Ended'));
Triggered when the countdown has been reset.
Example
countdownComponent.addEventListener('countdownReset', () => console.log('Countdown Reset'));