https://github.com/kumdotdev/countdown-timer
Vanilla JS one-file Web Component
https://github.com/kumdotdev/countdown-timer
javascript vanillajs webcomponent
Last synced: 4 months ago
JSON representation
Vanilla JS one-file Web Component
- Host: GitHub
- URL: https://github.com/kumdotdev/countdown-timer
- Owner: kumdotdev
- Created: 2023-03-26T18:11:25.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-25T06:09:18.000Z (about 1 year ago)
- Last Synced: 2025-11-23T09:08:58.258Z (7 months ago)
- Topics: javascript, vanillajs, webcomponent
- Language: JavaScript
- Homepage: https://kumdotdev.github.io/countdown-timer/
- Size: 17.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
Awesome Lists containing this project
README
# Countdown Timer Web Component
Vanilla JS one-file Web Component dependency free and framework agnostic. No build required. Use it as is.
## Demo
[Visit the demo page for usage examples.](https://kumdotdev.github.io/countdown-timer/)
## Install
```
npm i @kumdotdev/countdown-timer
```
## React/Next.js
```jsx
'use client';
import { useEffect } from 'react';
export const MyComponent = () => {
useEffect(() => {
import('@kumdotdev/countdown-timer/countdown-timer.js');
return () => {};
}, []);
};
return (
<>
>
);
```
## Import
### CDN
```HTML
```
### Local install
```HTML
```
### Import as module
```HTML
import '/node_modules/@kumdotdev/countdown-timer/countdown-timer.js';
// ...
```
## Usage
**Use ISO 8601 date format to provide the desired enddate!**
The shorter version `2024-01-01T23:42` should work also.
```HTML
```
## Language support
English, French and German provided. You can add more languages to `L10N` constant. Defaults to english language.
## Attributes
| Attribute | Description |
| --------- | ----------------------------------------------------------------- |
| alarm | [Optional] Time left in seconds to begin with pulsating the timer |
| date | ISO 8601 date for desired countdown target date |
## Styling
| CSS-Variable | Description or additional info | Default |
| ------------------------- | ---------------------------------------------------------------------------------- | ----------- |
| --cdt-digit-font-size | Size of the timer digits. Use `inherit` to inherit from parent element's font-size | 2rem |
| --cdt-digit-font-family | On the demo page the counter used `monospace` family | inherit |
| --cdt-digit-font-weight | Another useful values could be `400` (normal) | 700 |
| --cdt-digit-text-color | | #fefefe |
| --cdt-digit-box-color | You can set the box color to `transparent` to omit the colored digit box | #111 |
| --cdt-digit-box-min-width | You can set the box min width. Useful when not using monspace font. | fit-content |
| --cdt-label-font-size | The font size of the label beneath the digits | 0.75rem |
### Defaults
```css
:root {
--cdt-digit-font-size: 2rem;
--cdt-digit-font-family: inherit;
--cdt-digit-font-weight: 700;
--cdt-digit-text-color: #fefefe;
--cdt-digit-box-color: #111;
--cdt-digit-box-min-width: fit-content;
--cdt-label-font-size: 0.75rem;
}
```