https://github.com/onweru/javascript-timer
A countdown timer that converts javascript timestamp to days, hours, minutes and seconds
https://github.com/onweru/javascript-timer
countdown-javascript countdown-timer countdowntimer javascript javascript-library timer
Last synced: 9 months ago
JSON representation
A countdown timer that converts javascript timestamp to days, hours, minutes and seconds
- Host: GitHub
- URL: https://github.com/onweru/javascript-timer
- Owner: onweru
- Created: 2019-10-24T18:08:48.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-10-26T16:39:02.000Z (about 6 years ago)
- Last Synced: 2025-01-16T11:26:35.540Z (11 months ago)
- Topics: countdown-javascript, countdown-timer, countdowntimer, javascript, javascript-library, timer
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Javascript countdown timer
It converts a javascript timestamp into days, hours, minutes and seconds
## Install
### Using NPM OR YARN
`npm install javascript-timer`
OR
`yarn add javascript-timer`
## Usage
You can either include *index.js* on your html file, or you can simply copy its contents to you main js file
```javascript
// use a future date (keep it reasonable)
const timestamp = Date.parse("2022-04-11T10:20:30Z"); // return a timestamp in ms
const timeObject = calculateTimeUntil(timestamp)
/*
returns an object with 4 key-value pairs i.e
{
days: Number,
hrs: Number,
mins: Number,
seconds: Number
}
*/
```
You can then use `setInterval` to populate a countdown elements(s) on your DOM
### Example
```html
Days
:
Hours
:
Minutes
:
Seconds
function fillUnits(labels, obj) {
labels.forEach(label => {
let id, num;
id = label.id;
num = obj[id];
num = num < 10 ? `0${num}` : num;
label.children[0].textContent = num;
});
}
function populateCountDown(timer, num) {
let labels, timeTo;
timeTo = calculateTimeUntil(num);
labels = Array.from(timer.children).filter(function(label){
return label.classList.contains('timer_value')
});
fillUnits(labels, timeTo)
}
(function() {
const timer = document.currentScript.previousElementSibling;
const timestamp = Date.parse("2022-04-11T10:20:30Z"); // return a timestamp in ms
populateCountDown(timer, timestamp);
setInterval(function(){
populateCountDown(timer,timestamp)
}, 1000);
})();
```