I developed this little library in a boring day. I regularly use this kind of Javascript's libraries to display countdowns on websites and this one exactly meets the needs that I have. It is perfect to make 'under construction' pages, etc.
This is a very (very) basic Javascript CountDown.
install via npm or bower
$ yarn add simplycountdown.js
// or
$ npm install simplycountdown.js
<link rel="stylesheet" href="css/simplyCountdown.theme.default.css"/>
<script src="dist/simplyCountdown.min.js"></script> // This is an example with default parameters
simplyCountdown('[CSS-SELECTOR]', {
year: 2019, // required
month: 6, // required
day: 28, // required
hours: 0, // Default is 0 [0-23] integer
minutes: 0, // Default is 0 [0-59] integer
seconds: 0, // Default is 0 [0-59] integer
words: { //words displayed into the countdown
days: { singular: 'day', plural: 'days' },
hours: { singular: 'hour', plural: 'hours' },
minutes: { singular: 'minute', plural: 'minutes' },
seconds: { singular: 'second', plural: 'seconds' }
},
plural: true, //use plurals
inline: false, //set to true to get an inline basic countdown like : 24 days, 4 hours, 2 minutes, 5 seconds
inlineClass: 'simply-countdown-inline', //inline css span class in case of inline = true
// in case of inline set to false
enableUtc: false, //Use UTC or not - default : false
onEnd: function() { return; }, //Callback on countdown end, put your own function here
refresh: 1000, // default refresh every 1s
sectionClass: 'simply-section', //section css class
amountClass: 'simply-amount', // amount css class
wordClass: 'simply-word', // word css class
zeroPad: false,
countUp: false
});
// Also, you can init with already existing Javascript Object.
let myElement = document.querySelector('.my-countdown');
simplyCountdown(myElement, { /* options */ });
let multipleElements = document.querySelectorAll('.my-countdown');
simplyCountdown(multipleElements, { /* options */ });// jQuery Example
$('[CSS-SELECTOR]').simplyCountdown({
year: 2019, // required
month: 6, // required
day: 28, // required
...
});You can easly customize the countdown using the css theme starter file or create your own like so :
/!\ The following theme template works with default class in parameters.
/*
* Project : simply-countdown
* File : simplyCountdown.theme.custom
* Author : Your Name <your-mail[at]example.com>
*/
.simply-countdown {
/* The countdown */
}
.simply-countdown > .simply-section {
/* coutndown blocks */
}
.simply-countdown > .simply-section > div {
/* countdown block inner div */
}
.simply-countdown > .simply-section .simply-amount,
.simply-countdown > .simply-section .simply-word {
/* amounts and words */
}
.simply-countdown > .simply-section .simply-amount {
/* amounts */
}
.simply-countdown > .simply-section .simply-word {
/* words */
}- Give it a star !
- Report a bug
- Tweet about it :)
- Solve a problem
- For code enhancement, use ESLint as a code quality tool.
- Small is better than Big.
- Countdowns can be initialized directly with HTML elements with variables like
- document.getElementById
- document.querySelector
- document.querySelectorAll
- etc...
- Resolve #10 - Add countup support
- Upgrade yarn dev dependencies
- Some minor code reformatting
- Remove bower support
- migrate from LESS to SASS (scss) / for demo and themes
- migrate lib from ES5 to a really basic ES6
- Remove JSLint support
- Add ESLint support based on customized airbnb rules
- add zeroPad parameter
zeroPad: false //default- fixed Flash of Unstyled Content
- clean some code
- add refresh parameter
refresh: 1000 //default- Add onEnd callback
onEnd: function () {
// some code
}- Resolve #4 - Add UTC support adding enableUtc parameter
enableUtc: true //true is default- Resolve #3 - Remove ID Only compatibility
- Add hours, minutes, seconds in available settings to set the target Date
- Fix console error when not using jQuery
- initial release