simplyCountdown.js
Why another countdown ?
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.
Getting Started
install via npm or bower
$ yarn add simplycountdown.js // or $ npm install simplycountdown.js Insert simplyCountdown to your HTML
<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: 'day', hours: 'hour', minutes: 'minute', seconds: 'second', pluralLetter: 's' }, 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: true, //Use UTC as default 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 });You can use it with jQuery too (not required)
// jQuery Example $('[CSS-SELECTOR]').simplyCountdown({ year: 2019, // required month: 6, // required day: 28, // required ... });Easy to customize
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 */ }Contributing
- Give it a star !
- Report a bug
- Tweet about it :)
Pull Requests
- Solve a problem
- For code enhancement, use ESLint as a code quality tool.
- Small is better than Big.
Changelog
1.5.0
- Resolve #10 - Add countup support
- Upgrade yarn dev dependencies
- Some minor code reformatting
1.4.0
- 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
1.3.2
- add zeroPad parameter
zeroPad: false //default- fixed Flash of Unstyled Content
1.3.1
- clean some code
- add refresh parameter
refresh: 1000 //default1.3.0
- Add onEnd callback
onEnd: function () { // some code }1.2.0
- Resolve #4 - Add UTC support adding enableUtc parameter
enableUtc: true //true is default1.1.1
- Resolve #3 - Remove ID Only compatibility
1.1.0
- Add hours, minutes, seconds in available settings to set the target Date
1.0.1
- Fix console error when not using jQuery
1.0.0
- initial release
