diff --git a/README.md b/README.md
index f3851e9..dec41a9 100644
--- a/README.md
+++ b/README.md
@@ -28,29 +28,31 @@ $ npm install simplycountdown.js
// 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, lambda for showing correct plurals
- days: { root: 'day', lambda: (root, n) => {return n > 1 ? root + "s" : root }},
- hours: { root: 'hour', lambda: (root, n) => {return n > 1 ? root + "s" : root }},
- minutes: { root: 'minute', lambda: (root, n) => {return n > 1 ? root + "s" : root }},
- seconds: { root: 'second', lambda: (root, n) => {return n > 1 ? root + "s" : root }}
- },
- 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
+ year: 2015, // Target year (required)
+ month: 6, // Target month [1-12] (required)
+ day: 28, // Target day [1-31] (required)
+ hours: 0, // Target hour [0-23], default: 0
+ minutes: 0, // Target minute [0-59], default: 0
+ seconds: 0, // Target second [0-59], default: 0
+ words: { // Custom labels, with lambda for plurals
+ days: { root: 'day', lambda: (root, n) => n > 1 ? root + 's' : root },
+ hours: { root: 'hour', lambda: (root, n) => n > 1 ? root + 's' : root },
+ minutes: { root: 'minute', lambda: (root, n) => n > 1 ? root + 's' : root },
+ seconds: { root: 'second', lambda: (root, n) => n > 1 ? root + 's' : root }
+ },
+ plural: true, // Use plurals for labels
+ inline: false, // Inline format: e.g., "24 days, 4 hours, 2 minutes"
+ inlineSeparator: ', ', // Separator for inline format, default: ", "
+ inlineClass: 'simply-countdown-inline', // CSS class for inline countdown
+ enableUtc: false, // Use UTC time if true
+ onEnd: function () {}, // Callback when countdown ends
+ refresh: 1000, // Refresh interval in ms, default: 1000
+ sectionClass: 'simply-section', // CSS class for each countdown section
+ amountClass: 'simply-amount', // CSS class for numeric values
+ wordClass: 'simply-word', // CSS class for unit labels
+ zeroPad: false, // Pad numbers with leading zero
+ removeZeroUnits: false, // Remove units with zero value
+ countUp: false // Count up after reaching zero
});
// Also, you can init with already existing Javascript Object.
@@ -73,6 +75,30 @@ $('[CSS-SELECTOR]').simplyCountdown({
});
```
+## Parameters
+| Parameter | Type | Description | Default |
+|--------------------|-----------------|---------------------------------------------------------------------------------------------|-----------------------------|
+| `year` | Number (required) | The target year for the countdown. | - |
+| `month` | Number (required) | The target month [1-12] for the countdown. | - |
+| `day` | Number (required) | The target day [1-31] for the countdown. | - |
+| `hours` | Number | The target hour [0-23]. | 0 |
+| `minutes` | Number | The target minute [0-59]. | 0 |
+| `seconds` | Number | The target second [0-59]. | 0 |
+| `words` | Object | Custom labels for the units (days, hours, minutes, seconds) with optional lambda for pluralization. | `{ days: { root: 'day', lambda: (root, n) => n > 1 ? root + 's' : root }, ... }` |
+| `plural` | Boolean | Whether to use plural forms for the unit labels. | `true` |
+| `inline` | Boolean | Set to `true` for a simple inline countdown (e.g., "24 days, 4 hours, 2 minutes"). | `false` |
+| `inlineSeparator` | String | Separator used in the inline countdown format. | `, ` |
+| `inlineClass` | String | CSS class applied to the inline countdown container. | `"simply-countdown-inline"` |
+| `enableUtc` | Boolean | Set to `true` to use UTC time for the countdown calculations. | `false` |
+| `onEnd` | Function | Callback function executed when the countdown ends. | `() => {}` |
+| `refresh` | Number | The countdown refresh interval in milliseconds. | `1000` |
+| `sectionClass` | String | CSS class applied to each countdown section (days, hours, minutes, seconds). | `"simply-section"` |
+| `amountClass` | String | CSS class applied to the numeric value of each countdown section. | `"simply-amount"` |
+| `wordClass` | String | CSS class applied to the unit label of each countdown section. | `"simply-word"` |
+| `zeroPad` | Boolean | Whether to pad the numeric values with leading zeros (e.g., "05"). | `false` |
+| `removeZeroUnits` | Boolean | Remove units with zero value (e.g., remove "0 days" if days are zero). | `false` |
+| `countUp` | Boolean | Count up after reaching zero if set to `true`. | `false` |
+
## Easy to customize
You can easly customize the countdown using the css theme starter file or create your own like so :
@@ -123,6 +149,14 @@ You can easly customize the countdown using the css theme starter file or create
### Changelog
+#### 2.0.0
+This version may have breaking changes, if your website is working well with 1.7.0, you may want to stay on the previous version.
+- fix plurals in a generic way [#52](https://github.com/VincentLoy/simplyCountdown.js/pull/52)
+ - Thumbs up to [mira01](https://github.com/mira01) that fixed [#51](https://github.com/VincentLoy/simplyCountdown.js/issues/51), [#23](https://github.com/VincentLoy/simplyCountdown.js/issues/23) & [#42](https://github.com/VincentLoy/simplyCountdown.js/issues/42) !
+- Added the `inlineSeparator` parameter. Previously, the inline mode only supported a comma-separated countdown. Now, you can customize the separator, using options like |, /, -, or any character that suits your needs.
+- Fix potential UTC-related issues (fingers crossed!).
+
+
#### 1.7.0
- Countdowns can be initialized directly with HTML elements with variables like
- document.getElementById
diff --git a/css/demo.css b/css/demo.css
index 4fced68..145e620 100644
--- a/css/demo.css
+++ b/css/demo.css
@@ -1 +1 @@
-a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}body,html{font-family:'Lato',sans-serif;font-weight:400;overflow-x:hidden;font-size:16px}p{font-size:18px;line-height:22px;margin:20px 0}header{display:flex;align-items:center;justify-content:center;background:#024772;border-bottom:5px solid #02658c;padding:20px}@media screen and (min-width:970px){header{height:450px}}header .header-content{text-align:center}header .header-content h1{font-style:italic;font-size:2rem;font-weight:400;color:#f2e6dc}@media screen and (min-width:970px){header .header-content h1{font-size:4rem}}header .header-content h2{font-size:1.33rem;color:#f2e6dc;margin:20px 0}@media screen and (min-width:970px){header .header-content h2{font-size:1.75rem;margin:40px 0 60px 0}}header .header-content .repo-buttons{display:flex;align-items:center;justify-content:center}.button{color:#f2e6dc;border:2px solid #f2e6dc;border-radius:2px;text-decoration:none;padding:10px;transition:.1s ease-in-out all;display:block;margin:0 20px 20px 20px}.button span{display:none}@media screen and (min-width:970px){.button{margin-bottom:0}.button span{display:inline}}@media screen and (min-width:970px){.button>i{margin-right:10px}}.button:hover{background:#f2e6dc;color:#024772}.container{width:100%;padding:0 20px;margin:auto}@media screen and (min-width:970px){.container{width:960px}}.note{background:#0387a5;color:#fff;font-style:italic;border-radius:2px;padding:6.6666666667px 20px}main>section:not(:last-of-type){border-bottom:1px solid #024772;padding-bottom:20px}main h2{font-size:26px;color:#02658c;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h2{font-size:33px;margin:40px 0}}main h3{font-size:20px;color:#02658c;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h3{font-size:25px;margin:40px 0}}main h3 a{color:#0387a5;text-decoration:none}main h3 a:hover{text-decoration:underline}main a{font-weight:700;text-decoration:none;color:#0387a5;transition:.2s ease all}main a:hover{color:#024772;text-decoration:underline}.examples h3{margin:20px 0 6.6666666667px 0}.examples h3+p{margin-top:0}.examples .simply-countdown-inline{margin-top:20px}.changelog h3{margin-bottom:10px}.changelog h3:before{content:"\1d";display:inline-block;margin-right:10px;transform:translateY(-2px)}.changelog h3:after{content:"\1d";display:inline-block;margin-left:10px;transform:rotate(180deg) translateY(-4px)}.changelog ul{list-style-type:disc;padding-left:20px}.changelog ul li{margin-bottom:10px;font-size:16px}footer{background:#024772;color:#fff;text-align:center;padding:20px;margin-top:40px;font-weight:600}footer a{color:#2cd5fb;text-decoration:none}footer a:hover{text-decoration:underline}
\ No newline at end of file
+a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:'';content:none}table{border-collapse:collapse;border-spacing:0}*{box-sizing:border-box}body,html{font-family:"Wix Madefor Text",serif;font-optical-sizing:auto;font-style:normal;overflow-x:hidden;font-size:16px}p{font-size:1.2rem;line-height:1.6;font-weight:400;margin:20px 0 45px}h1,h2,h3{font-family:"Montserrat",sans-serif}header{display:flex;align-items:center;justify-content:center;background:#112d4e;border-bottom:5px solid #3f72af;padding:20px;height:450px}@media screen and (min-width:970px){header{height:650px}}header .header-content{text-align:center}header .header-content h1{font-style:italic;font-size:2rem;font-weight:600;color:#f9f7f7}@media screen and (min-width:970px){header .header-content h1{font-size:4rem}}header .header-content h2{font-size:1.33rem;color:#f9f7f7;margin:20px 0;font-weight:500}@media screen and (min-width:970px){header .header-content h2{font-size:1.75rem;margin:40px 0 60px 0}}header .header-content .repo-buttons{display:flex;align-items:center;justify-content:center}.button{color:#f9f7f7;border:2px solid #f9f7f7;border-radius:2px;text-decoration:none;padding:10px;transition:.1s ease-in-out all;display:block;margin:0 20px 20px 20px}.button span{display:none}@media screen and (min-width:970px){.button{margin-bottom:0}.button span{display:inline}}@media screen and (min-width:970px){.button>i{margin-right:10px}}.button:hover{background:#f9f7f7;color:#112d4e}.container{width:100%;padding:0 20px;margin:auto}@media screen and (min-width:970px){.container{width:960px}}.note{background:#112d4e;color:#fff;font-style:italic;border-radius:2px;padding:6.6666666667px 20px}main>section:not(:last-of-type){border-bottom:1px solid #112d4e;padding-bottom:20px}main h2{font-size:2rem;color:#3f72af;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h2{font-size:3rem;margin:40px 0}}main h3{font-size:20px;color:#3f72af;font-weight:700;margin:20px 0}@media screen and (min-width:970px){main h3{font-size:25px;margin:40px 0}}main h3 a{color:#6995ca;text-decoration:none}main h3 a:hover{text-decoration:underline}main a{font-weight:700;text-decoration:none;color:#6995ca;transition:.2s ease all}main a:hover{color:#112d4e;text-decoration:underline}.simply-countdown-inline{margin-top:20px;font-weight:700;font-size:1.3rem}.sc-inline-header{color:#f9f7f7;font-weight:100;font-size:1.4rem;font-style:italic}.alert{position:fixed;bottom:-60px;left:0;right:0;margin:auto;padding:20px;display:table;background:#112d4e;color:#fff;border-radius:5px;font-size:1.3rem;opacity:0;transition:.3s ease all}.alert.show-after-header-cd.active{opacity:1;bottom:60px}.alert.show-after-header-cd a{font-weight:700;color:#f9f7f7}footer{background:#112d4e;color:#fff;text-align:center;padding:20px;margin-top:40px;font-weight:600}footer a{color:#c7d8eb;text-decoration:none;font-weight:700}footer a:hover{text-decoration:underline}.table-wrapper{width:100%;overflow-x:auto}.table-wrapper table{width:100%;margin-bottom:1rem;color:#212529;border-collapse:collapse;min-width:600px}.table-wrapper table th,.table-wrapper table td{padding:.75rem;vertical-align:top;border-top:1px solid #dee2e6}.table-wrapper table thead th{vertical-align:bottom;border-bottom:2px solid #dee2e6;background-color:#f8f9fa;font-weight:700}.table-wrapper table tbody tr:nth-child(even){background-color:#f2f2f2}.table-wrapper table.table-striped tbody tr:nth-of-type(odd){background-color:rgba(0,0,0,.05)}.table-wrapper table.table-hover tbody tr:hover{background-color:rgba(0,0,0,.075)}.table-wrapper table.table-bordered{border:1px solid #dee2e6}.table-wrapper table.table-bordered th,.table-wrapper table.table-bordered td{border:1px solid #dee2e6}.table-wrapper table.table-sm th,.table-wrapper table.table-sm td{padding:.3rem}.text-center{text-align:center}.text-right{text-align:right}.bold{font-weight:700}.ff-code{font-family:monospace;font-size:.9rem}.hide{display:none}
\ No newline at end of file
diff --git a/css/scss/demo.scss b/css/scss/demo.scss
index 773234b..3c665be 100644
--- a/css/scss/demo.scss
+++ b/css/scss/demo.scss
@@ -4,13 +4,16 @@
* Date : 27/06/2015
* Author : Vincent Loy <vincent.loy1$gmail.com>
*/
-$color-blue-darken: #024772;
-$color-blue: #02658C;
-$color-blue-lighten: #0387A5;
-$color-gray: #BFB6AE;
-$color-gray-lighten: #F2E6DC;
+$color-main: #3F72AF;
+$color-main-darken: #112D4E;
+$color-main-lighten: #6995ca;
+$color-secondary: #F9F7F7;
+$color-secondary-lighten: #F9F7F7;
$color-white: #fff;
+$ff-base: "Wix Madefor Text", serif;
+$ff-title: "Montserrat", sans-serif;
+
$spacing: 20px;
$tablet: "screen and (min-width: 970px)";
@@ -22,28 +25,36 @@ a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,c
}
body, html {
- font-family: 'Lato', sans-serif;
- font-weight: 400;
+ font-family: $ff-base;
+ font-optical-sizing: auto;
+ font-style: normal;
overflow-x: hidden;
font-size: 16px;
}
p {
- font-size: 18px;
- line-height: 22px;
- margin: $spacing 0;
+ font-size: 1.2rem;
+ line-height: 1.6;
+ font-weight: 400;
+ margin: $spacing 0 45px;
}
+h1, h2, h3 {
+ font-family: $ff-title;
+}
+
+
header {
display: flex;
align-items: center;
justify-content: center;
- background: $color-blue-darken;
- border-bottom: 5px solid $color-blue;
+ background: $color-main-darken;
+ border-bottom: 5px solid $color-main;
padding: $spacing;
+ height: 450px;
@media #{$tablet} {
- height: 450px;
+ height: 650px;
}
.header-content {
@@ -52,8 +63,8 @@ header {
h1 {
font-style: italic;
font-size: 2rem;
- font-weight: 400;
- color: $color-gray-lighten;
+ font-weight: 600;
+ color: $color-secondary-lighten;
@media #{$tablet} {
font-size: 4rem;
@@ -62,8 +73,9 @@ header {
h2 {
font-size: 1.33rem;
- color: $color-gray-lighten;
+ color: $color-secondary-lighten;
margin: $spacing 0;
+ font-weight: 500;
@media #{$tablet} {
font-size: 1.75rem;
@@ -80,8 +92,8 @@ header {
}
.button {
- color: $color-gray-lighten;
- border:2px solid $color-gray-lighten;
+ color: $color-secondary-lighten;
+ border:2px solid $color-secondary-lighten;
border-radius: 2px;
text-decoration: none;
padding: $spacing / 2;
@@ -108,8 +120,8 @@ header {
}
&:hover {
- background: $color-gray-lighten;
- color: $color-blue-darken;
+ background: $color-secondary-lighten;
+ color: $color-main-darken;
}
}
@@ -124,7 +136,7 @@ header {
}
.note {
- background: $color-blue-lighten;
+ background: $color-main-darken;
color: $color-white;
font-style: italic;
border-radius: 2px;
@@ -133,25 +145,25 @@ header {
main {
> section:not(:last-of-type) {
- border-bottom: 1px solid $color-blue-darken;
+ border-bottom: 1px solid $color-main-darken;
padding-bottom: $spacing;
}
h2 {
- font-size: 26px;
- color: $color-blue;
+ font-size: 2rem;
+ color: $color-main;
font-weight: 700;
margin: $spacing 0;
@media #{$tablet} {
- font-size: 33px;
+ font-size: 3rem;
margin: $spacing * 2 0;
}
}
h3 {
font-size: 20px;
- color: $color-blue;
+ color: $color-main;
font-weight: 700;
margin: $spacing 0;
@@ -161,7 +173,7 @@ main {
}
a {
- color: $color-blue-lighten;
+ color: $color-main-lighten;
text-decoration: none;
&:hover {
text-decoration: underline;
@@ -172,62 +184,60 @@ main {
a {
font-weight: bold;
text-decoration: none;
- color: $color-blue-lighten;
+ color: $color-main-lighten;
transition: 0.2s ease all;
&:hover {
- color: $color-blue-darken;
+ color: $color-main-darken;
text-decoration: underline;
}
}
}
-.examples {
- h3 {
- margin: $spacing 0 ($spacing / 3) 0;
-
- & + p {
- margin-top: 0;
- }
- }
-
- .simply-countdown-inline {
- margin-top: $spacing;
- }
+.simply-countdown-inline {
+ margin-top: $spacing;
+ font-weight: bold;
+ font-size: 1.3rem;
}
-.changelog {
- h3 {
- margin-bottom: $spacing / 2;
-
- &:before {
- content: "\1d";
- display: inline-block;
- margin-right: $spacing / 2;
- transform: translateY(-2px);
- }
+.sc-inline-header {
+ color: $color-secondary-lighten;
+ font-weight: 100;
+ font-size: 1.4rem;
+ font-style: italic;
+}
- &:after {
- content: "\1d";
- display: inline-block;
- margin-left: $spacing / 2;
- transform: rotate(180deg) translateY(-4px);
+.alert {
+ position: fixed;
+ bottom: -60px;
+ left: 0;
+ right: 0;
+ margin: auto;
+ padding: 20px;
+ display: table;
+ background: $color-main-darken;
+ color: white;
+ border-radius: 5px;
+ font-size: 1.3rem;
+ opacity: 0;
+ transition: 0.3s ease all;
+
+ &.show-after-header-cd {
+
+ &.active {
+ opacity: 1;
+ bottom: 60px;
}
- }
-
- ul {
- list-style-type: disc;
- padding-left: $spacing;
-
- li {
- margin-bottom: $spacing / 2;
- font-size: 16px;
+
+ a {
+ font-weight: bold;
+ color: $color-secondary-lighten;
}
}
}
footer {
- background: $color-blue-darken;
+ background: $color-main-darken;
color: $color-white;
text-align: center;
padding: $spacing;
@@ -235,11 +245,92 @@ footer {
font-weight: 600;
a {
- color: lighten($color-blue-lighten, 25%);
+ color: lighten($color-main-lighten, 25%);
text-decoration: none;
+ font-weight: bold;
&:hover{
text-decoration: underline;
}
}
}
+
+.table-wrapper {
+ width: 100%;
+ overflow-x: auto;
+
+ table {
+ width: 100%;
+ margin-bottom: 1rem;
+ color: #212529;
+ border-collapse: collapse;
+ min-width: 600px; // Ensures the table maintains its width with a scrollbar on smaller screens
+
+ th,
+ td {
+ padding: 0.75rem;
+ vertical-align: top;
+ border-top: 1px solid #dee2e6;
+ }
+
+ thead {
+ th {
+ vertical-align: bottom;
+ border-bottom: 2px solid #dee2e6;
+ background-color: #f8f9fa;
+ font-weight: bold;
+ }
+ }
+
+ tbody {
+ tr {
+ &:nth-child(even) {
+ background-color: #f2f2f2;
+ }
+ }
+ }
+
+ &.table-striped tbody tr:nth-of-type(odd) {
+ background-color: rgba(0, 0, 0, 0.05);
+ }
+
+ &.table-hover tbody tr:hover {
+ background-color: rgba(0, 0, 0, 0.075);
+ }
+
+ &.table-bordered {
+ border: 1px solid #dee2e6;
+
+ th,
+ td {
+ border: 1px solid #dee2e6;
+ }
+ }
+
+ &.table-sm th,
+ &.table-sm td {
+ padding: 0.3rem;
+ }
+ }
+}
+
+.text-center {
+ text-align: center;
+}
+
+.text-right {
+ text-align: right;
+}
+
+.bold {
+ font-weight: bold;
+}
+
+.ff-code {
+ font-family: monospace;
+ font-size: 0.9rem;
+}
+
+.hide {
+ display: none;
+}
\ No newline at end of file
diff --git a/dev/simplyCountdown.js b/dev/simplyCountdown.js
index e45bbca..029f040 100644
--- a/dev/simplyCountdown.js
+++ b/dev/simplyCountdown.js
@@ -125,6 +125,7 @@
},
plural: true,
inline: false,
+ inlineSeparator: ', ',
enableUtc: false,
onEnd: () => {
},
@@ -134,13 +135,12 @@
amountClass: 'simply-amount',
wordClass: 'simply-word',
zeroPad: false,
+ removeZeroUnits: false,
countUp: false
}, args);
let interval;
let targetDate;
- let targetTmpDate;
let now;
- let nowUtc;
let secondsLeft;
let days;
let hours;
@@ -156,26 +156,26 @@
cd = elt;
}
- targetTmpDate = new Date(
- parameters.year,
- parameters.month - 1,
- parameters.day,
- parameters.hours,
- parameters.minutes,
- parameters.seconds
- );
-
if (parameters.enableUtc) {
+ // Use UTC for target date
+ targetDate = new Date(Date.UTC(
+ parameters.year,
+ parameters.month - 1,
+ parameters.day,
+ parameters.hours,
+ parameters.minutes,
+ parameters.seconds
+ ));
+ } else {
+ // Use local time for target date
targetDate = new Date(
- targetTmpDate.getUTCFullYear(),
- targetTmpDate.getUTCMonth(),
- targetTmpDate.getUTCDate(),
- targetTmpDate.getUTCHours(),
- targetTmpDate.getUTCMinutes(),
- targetTmpDate.getUTCSeconds()
+ parameters.year,
+ parameters.month - 1,
+ parameters.day,
+ parameters.hours,
+ parameters.minutes,
+ parameters.seconds
);
- } else {
- targetDate = targetTmpDate;
}
let runCountdown = (theCountdown) => {
@@ -200,15 +200,24 @@
seconds = parseInt(secondsLeft % 60, 10);
};
- now = new Date();
if (parameters.enableUtc) {
- nowUtc = new Date(now.getFullYear(), now.getMonth(), now.getDate(),
- now.getHours(), now.getMinutes(), now.getSeconds());
- secondsLeft = (targetDate - nowUtc.getTime()) / 1000;
+ // Calculate "now" in UTC
+ now = new Date();
+ now = new Date(Date.UTC(
+ now.getUTCFullYear(),
+ now.getUTCMonth(),
+ now.getUTCDate(),
+ now.getUTCHours(),
+ now.getUTCMinutes(),
+ now.getUTCSeconds()
+ ));
} else {
- secondsLeft = (targetDate - now.getTime()) / 1000;
+ // Calculate "now" in local time
+ now = new Date();
}
+ secondsLeft = Math.floor((targetDate - now.getTime()) / 1000);
+
if (secondsLeft > 0) {
updateDisplayDate();
} else if (parameters.countUp) {
@@ -222,6 +231,7 @@
window.clearInterval(interval);
parameters.onEnd();
}
+
let getWord = (obj, n) => {
return obj.hasOwnProperty('lambda')
? obj.lambda(obj.root, n)
@@ -235,22 +245,53 @@
/* display an inline countdown into a span tag */
if (parameters.inline) {
- countdown.innerHTML = `${days} ${dayWord}, `
- + `${hours} ${hourWord}, `
- + `${minutes} ${minuteWord}, `
- + `${seconds} ${secondWord}.`;
+ let displayStr = '';
+
+ if (!(parameters.removeZeroUnits && days === 0)) {
+ displayStr += `${days} ${dayWord}${parameters.inlineSeparator}`;
+ }
+
+ if (!(parameters.removeZeroUnits && days === 0 && hours === 0)) {
+ displayStr += `${hours} ${hourWord}${parameters.inlineSeparator}`;
+ }
+
+ if (!(parameters.removeZeroUnits && days === 0 && hours === 0 && minutes === 0)) {
+ displayStr += `${minutes} ${minuteWord}${parameters.inlineSeparator}`;
+ }
+
+ // Seconds should always be displayed
+ displayStr += `${seconds} ${secondWord}`;
+
+ countdown.innerHTML = displayStr.replace(/, $/, ''); // Remove trailing comma if any
} else {
- fullCountDown.days.amount.textContent = (parameters.zeroPad && days.toString().length < 2 ? '0' : '') + days;
- fullCountDown.days.word.textContent = dayWord;
+ if (!(parameters.removeZeroUnits && days === 0)) {
+ fullCountDown.days.amount.textContent = (parameters.zeroPad && days.toString().length < 2 ? '0' : '') + days;
+ fullCountDown.days.word.textContent = dayWord;
+ fullCountDown.days.full.style.display = '';
+ } else {
+ fullCountDown.days.full.style.display = 'none';
+ }
- fullCountDown.hours.amount.textContent = (parameters.zeroPad && hours.toString().length < 2 ? '0' : '') + hours;
- fullCountDown.hours.word.textContent = hourWord;
+ if (!(parameters.removeZeroUnits && days === 0 && hours === 0)) {
+ fullCountDown.hours.amount.textContent = (parameters.zeroPad && hours.toString().length < 2 ? '0' : '') + hours;
+ fullCountDown.hours.word.textContent = hourWord;
+ fullCountDown.hours.full.style.display = '';
+ } else {
+ fullCountDown.hours.full.style.display = 'none';
+ }
- fullCountDown.minutes.amount.textContent = (parameters.zeroPad && minutes.toString().length < 2 ? '0' : '') + minutes;
- fullCountDown.minutes.word.textContent = minuteWord;
+ if (!(parameters.removeZeroUnits && days === 0 && hours === 0 && minutes === 0)) {
+ fullCountDown.minutes.amount.textContent = (parameters.zeroPad && minutes.toString().length < 2 ? '0' : '') + minutes;
+ fullCountDown.minutes.word.textContent = minuteWord;
+ fullCountDown.minutes.full.style.display = '';
+ } else {
+ fullCountDown.minutes.full.style.display = 'none';
+ }
+ // Seconds should always be displayed
fullCountDown.seconds.amount.textContent = (parameters.zeroPad && seconds.toString().length < 2 ? '0' : '') + seconds;
fullCountDown.seconds.word.textContent = secondWord;
+ fullCountDown.seconds.full.style.display = '';
}
};
diff --git a/dist/simplyCountdown.min.js b/dist/simplyCountdown.min.js
index e70d8d9..6dad0cb 100644
--- a/dist/simplyCountdown.min.js
+++ b/dist/simplyCountdown.min.js
@@ -9,4 +9,4 @@
* - Justin Beasley <JustinB@harvest.org>
* - Nathan Smith <NathanS@harvest.org>
*/
-var n=function t(n){for(var e,o=n||{},r=1;r<arguments.length;r+=1){e=arguments[r];var s=Object.keys(e);if(s.length)for(var a=0;a<s.length;a+=1){var i=s[a];Object.prototype.hasOwnProperty.call(e,i)&&("object"===_typeof(e[i])?t(o[i],e[i]):o[i]=e[i])}}return o},e=function(t,n,e){var o=document.createElement("div"),r=document.createElement("span"),s=document.createElement("span"),a=document.createElement("div");return a.appendChild(r),a.appendChild(s),o.appendChild(a),o.classList.add(n.sectionClass),o.classList.add(e),r.classList.add(n.amountClass),s.classList.add(n.wordClass),t.appendChild(o),{full:o,amount:r,word:s}};t.simplyCountdown=function(t,o){var r,s,a,i,c,u,l,d,m,y,p,f=Object.getPrototypeOf(t),h=n({year:2015,month:6,day:28,hours:0,minutes:0,seconds:0,words:{days:{lambda:function(t,n){return n>1?t+"s":t},root:"day"},hours:{lambda:function(t,n){return n>1?t+"s":t},root:"hour"},minutes:{lambda:function(t,n){return n>1?t+"s":t},root:"minute"},seconds:{lambda:function(t,n){return n>1?t+"s":t},root:"second"}},plural:!0,inline:!1,enableUtc:!1,onEnd:function(){},refresh:1e3,inlineClass:"simply-countdown-inline",sectionClass:"simply-section",amountClass:"simply-amount",wordClass:"simply-word",zeroPad:!1,countUp:!1},o);p=f===String.prototype?document.querySelectorAll(t):t,a=new Date(h.year,h.month-1,h.day,h.hours,h.minutes,h.seconds),s=h.enableUtc?new Date(a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),a.getUTCHours(),a.getUTCMinutes(),a.getUTCSeconds()):a;var C,g=function(t){var n,o=t,a=function(t,n){var o;return t.inline?((o=document.createElement("span")).classList.add(t.inlineClass),o):{days:e(n,t,"simply-days-section"),hours:e(n,t,"simply-hours-section"),minutes:e(n,t,"simply-minutes-section"),seconds:e(n,t,"simply-seconds-section")}}(h,o);(n=function(){var t,n,e,p,f=function(){l=parseInt(u/86400,10),u%=86400,d=parseInt(u/3600,10),u%=3600,m=parseInt(u/60,10),y=parseInt(u%60,10)};i=new Date,h.enableUtc?(c=new Date(i.getFullYear(),i.getMonth(),i.getDate(),i.getHours(),i.getMinutes(),i.getSeconds()),u=(s-c.getTime())/1e3):u=(s-i.getTime())/1e3,u>0?f():h.countUp?(u=(i.getTime()-s)/1e3,f()):(l=0,d=0,m=0,y=0,window.clearInterval(r),h.onEnd());var C=function(t,n){return t.hasOwnProperty("lambda")?t.lambda(t.root,n):t.root},g=h.words;t=C(g.days,l),n=C(g.hours,d),e=C(g.minutes,m),p=C(g.seconds,y),h.inline?o.innerHTML="".concat(l," ").concat(t,", ")+"".concat(d," ").concat(n,", ")+"".concat(m," ").concat(e,", ")+"".concat(y," ").concat(p,"."):(a.days.amount.textContent=(h.zeroPad&&l.toString().length<2?"0":"")+l,a.days.word.textContent=t,a.hours.amount.textContent=(h.zeroPad&&d.toString().length<2?"0":"")+d,a.hours.word.textContent=n,a.minutes.amount.textContent=(h.zeroPad&&m.toString().length<2?"0":"")+m,a.minutes.word.textContent=e,a.seconds.amount.textContent=(h.zeroPad&&y.toString().length<2?"0":"")+y,a.seconds.word.textContent=p)})(),r=window.setInterval(n,h.refresh)};null!==(C=p)&&Symbol.iterator in Object(C)?Array.prototype.forEach.call(p,(function(t){g(t)})):g(p)}}(window),window.jQuery&&function(t,n){t.fn.simplyCountdown=function(t){return function(t,e){n(t,e)}(this.selector,t)}}(jQuery,simplyCountdown);
\ No newline at end of file
+var e=function t(e){for(var n,o=e||{},s=1;s<arguments.length;s+=1){n=arguments[s];var r=Object.keys(n);if(r.length)for(var a=0;a<r.length;a+=1){var i=r[a];Object.prototype.hasOwnProperty.call(n,i)&&("object"===_typeof(n[i])?t(o[i],n[i]):o[i]=n[i])}}return o},n=function(t,e,n){var o=document.createElement("div"),s=document.createElement("span"),r=document.createElement("span"),a=document.createElement("div");return a.appendChild(s),a.appendChild(r),o.appendChild(a),o.classList.add(e.sectionClass),o.classList.add(n),s.classList.add(e.amountClass),r.classList.add(e.wordClass),t.appendChild(o),{full:o,amount:s,word:r}};t.simplyCountdown=function(t,o){var s,r,a,i,l,c,u,d,m,y=Object.getPrototypeOf(t),p=e({year:2015,month:6,day:28,hours:0,minutes:0,seconds:0,words:{days:{lambda:function(t,e){return e>1?t+"s":t},root:"day"},hours:{lambda:function(t,e){return e>1?t+"s":t},root:"hour"},minutes:{lambda:function(t,e){return e>1?t+"s":t},root:"minute"},seconds:{lambda:function(t,e){return e>1?t+"s":t},root:"second"}},plural:!0,inline:!1,inlineSeparator:", ",enableUtc:!1,onEnd:function(){},refresh:1e3,inlineClass:"simply-countdown-inline",sectionClass:"simply-section",amountClass:"simply-amount",wordClass:"simply-word",zeroPad:!1,removeZeroUnits:!1,countUp:!1},o);m=y===String.prototype?document.querySelectorAll(t):t,r=p.enableUtc?new Date(Date.UTC(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds)):new Date(p.year,p.month-1,p.day,p.hours,p.minutes,p.seconds);var f,h=function(t){var e,o=t,m=function(t,e){var o;return t.inline?((o=document.createElement("span")).classList.add(t.inlineClass),o):{days:n(e,t,"simply-days-section"),hours:n(e,t,"simply-hours-section"),minutes:n(e,t,"simply-minutes-section"),seconds:n(e,t,"simply-seconds-section")}}(p,o);(e=function(){var t,e,n,y,f=function(){l=parseInt(i/86400,10),i%=86400,c=parseInt(i/3600,10),i%=3600,u=parseInt(i/60,10),d=parseInt(i%60,10)};p.enableUtc?(a=new Date,a=new Date(Date.UTC(a.getUTCFullYear(),a.getUTCMonth(),a.getUTCDate(),a.getUTCHours(),a.getUTCMinutes(),a.getUTCSeconds()))):a=new Date,(i=Math.floor((r-a.getTime())/1e3))>0?f():p.countUp?(i=(a.getTime()-r)/1e3,f()):(l=0,c=0,u=0,d=0,window.clearInterval(s),p.onEnd());var h=function(t,e){return t.hasOwnProperty("lambda")?t.lambda(t.root,e):t.root},C=p.words;if(t=h(C.days,l),e=h(C.hours,c),n=h(C.minutes,u),y=h(C.seconds,d),p.inline){var w="";p.removeZeroUnits&&0===l||(w+="".concat(l," ").concat(t).concat(p.inlineSeparator)),p.removeZeroUnits&&0===l&&0===c||(w+="".concat(c," ").concat(e).concat(p.inlineSeparator)),p.removeZeroUnits&&0===l&&0===c&&0===u||(w+="".concat(u," ").concat(n).concat(p.inlineSeparator)),w+="".concat(d," ").concat(y),o.innerHTML=w.replace(/, $/,"")}else p.removeZeroUnits&&0===l?m.days.full.style.display="none":(m.days.amount.textContent=(p.zeroPad&&l.toString().length<2?"0":"")+l,m.days.word.textContent=t,m.days.full.style.display=""),p.removeZeroUnits&&0===l&&0===c?m.hours.full.style.display="none":(m.hours.amount.textContent=(p.zeroPad&&c.toString().length<2?"0":"")+c,m.hours.word.textContent=e,m.hours.full.style.display=""),p.removeZeroUnits&&0===l&&0===c&&0===u?m.minutes.full.style.display="none":(m.minutes.amount.textContent=(p.zeroPad&&u.toString().length<2?"0":"")+u,m.minutes.word.textContent=n,m.minutes.full.style.display=""),m.seconds.amount.textContent=(p.zeroPad&&d.toString().length<2?"0":"")+d,m.seconds.word.textContent=y,m.seconds.full.style.display=""})(),s=window.setInterval(e,p.refresh)};null!==(f=m)&&Symbol.iterator in Object(f)?Array.prototype.forEach.call(m,(function(t){h(t)})):h(m)}}(window),window.jQuery&&function(t,e){t.fn.simplyCountdown=function(t){return function(t,n){e(t,n)}(this.selector,t)}}(jQuery,simplyCountdown);
\ No newline at end of file
diff --git a/index.html b/index.html
index 64dba59..1dffbbe 100644
--- a/index.html
+++ b/index.html
@@ -8,8 +8,9 @@
<meta name="keywords" content="Vincent Loy, Javascript, Javascript Library, Javascript Countdown, jQuery Countdown, JS, JS Countdown, Countdown, Countup"/>
<meta name="description" content="simplyCountdown.js is an easy to use Javascript Countdown Library. You can easly customize it with your own CSS and versatile parameters."/>
- <link href='http://fonts.googleapis.com/css?family=Lato:300,400italic' rel='stylesheet'
- type='text/css'>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap" rel="stylesheet">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css"/>
@@ -24,6 +25,12 @@
<h1>simplyCountdown.js</h1>
<h2>A Tiny Javascript Countdown Library</h2>
+ <p class="sc-inline-header">
+ You're just
+ <span class="sc-inline-header__cd bold"></span>
+ away from discovering the perfect Countdown Library for your next project!
+ </p>
+
<div class="repo-buttons">
<a href="https://github.com/VincentLoy/simplyCountdown.js" class="button">
<i class="fa fa-github"></i> <span>View on GitHub</span>
@@ -41,16 +48,21 @@ <h2>A Tiny Javascript Countdown Library</h2>
<h2>Why another countdown ?</h2>
<p>
- 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.
+ I created this little library on a day when I had some extra time,
+ inspired by my regular need for JavaScript countdown solutions on websites.
+ This library is designed to meet my exact needs for simplicity and flexibility,
+ making it perfect for use cases like 'under construction' pages or upcoming event countdowns.
</p>
<p>
- This is a very (very) basic Javascript CountDown.
+ This JavaScript countdown library is lightweight and easy to use—ideal for developers who want a straightforward,
+ customizable countdown without the unnecessary complexity of many other libraries. Whether it's for landing pages,
+ promotions, or personal projects, this solution can help you add engaging countdown timers effortlessly.
</p>
+
+ <p>
+ simplyCountdown.js has been adopted by a variety of projects where developers needed a simple, reliable countdown solution.
+ Its lightweight nature and ease of customization make it an appealing choice for straightforward use cases like 'under construction' pages or event countdowns
</section>
<section class="getting-started">
@@ -61,7 +73,7 @@ <h3>install via yarn, npm, <a
download</a></h3>
<pre>
-<code class="language-console">
+<code class="ff-code">
$ npm install simplycountdown.js
// or
@@ -83,34 +95,32 @@ <h3>Insert simplyCountdown to your HTML</h3>
// You'll always have to call simplyCountdown using ID's, no classes.
simplyCountdown('[CSS-SELECTOR]', {
- year: 2015, // 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, lambda for showing correct plurals
- days: { root: 'day', lambda: (root, n) => {return n > 1 ? root + "s" : root }},
- hours: { root: 'hour', lambda: (root, n) => {return n > 1 ? root + "s" : root }},
- minutes: { root: 'minute', lambda: (root, n) => {return n > 1 ? root + "s" : root }},
- seconds: { root: 'second', lambda: (root, n) => {return n > 1 ? root + "s" : root }}
- },
- 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,
- onEnd: function () {
- // your code
- return;
- },
- 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, // enable count up if set to true
- });
+ year: 2015, // Target year (required)
+ month: 6, // Target month [1-12] (required)
+ day: 28, // Target day [1-31] (required)
+ hours: 0, // Target hour [0-23], default: 0
+ minutes: 0, // Target minute [0-59], default: 0
+ seconds: 0, // Target second [0-59], default: 0
+ words: { // Custom labels, with lambda for plurals
+ days: { root: 'day', lambda: (root, n) => n > 1 ? root + 's' : root },
+ hours: { root: 'hour', lambda: (root, n) => n > 1 ? root + 's' : root },
+ minutes: { root: 'minute', lambda: (root, n) => n > 1 ? root + 's' : root },
+ seconds: { root: 'second', lambda: (root, n) => n > 1 ? root + 's' : root }
+ },
+ plural: true, // Use plurals for labels
+ inline: false, // Inline format: e.g., "24 days, 4 hours, 2 minutes"
+ inlineSeparator: ', ', // Separator for inline format, default: ", "
+ inlineClass: 'simply-countdown-inline', // CSS class for inline countdown
+ enableUtc: false, // Use UTC time if true
+ onEnd: function () {}, // Callback when countdown ends
+ refresh: 1000, // Refresh interval in ms, default: 1000
+ sectionClass: 'simply-section', // CSS class for each countdown section
+ amountClass: 'simply-amount', // CSS class for numeric values
+ wordClass: 'simply-word', // CSS class for unit labels
+ zeroPad: false, // Pad numbers with leading zero
+ removeZeroUnits: false, // Remove units with zero value
+ countUp: false // Count up after reaching zero
+ });
// Also, you can init with already existing Javascript Object.
let myElement = document.querySelector('.my-countdown');
@@ -119,7 +129,7 @@ <h3>Insert simplyCountdown to your HTML</h3>
let multipleElements = document.querySelectorAll('.my-countdown');
simplyCountdown(multipleElements, { /* options */ });
</code>
-</pre>
+ </pre>
<h3>You can use it with jQuery too (not required)</h3>
<pre>
@@ -133,7 +143,145 @@ <h3>You can use it with jQuery too (not required)</h3>
...
});
</code>
-</pre>
+ </pre>
+
+ <h3>Parameters</h3>
+ <div class="table-wrapper">
+ <table>
+ <thead>
+ <tr>
+ <th>Parameter</th>
+ <th>Type</th>
+ <th>Description</th>
+ <th>Default</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code class="ff-code">year</code></td>
+ <td>Number (required)</td>
+ <td>The target year for the countdown.</td>
+ <td>-</td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">month</code></td>
+ <td>Number (required)</td>
+ <td>The target month [1-12] for the countdown.</td>
+ <td>-</td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">day</code></td>
+ <td>Number (required)</td>
+ <td>The target day [1-31] for the countdown.</td>
+ <td>-</td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">hours</code></td>
+ <td>Number</td>
+ <td>The target hour [0-23].</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">minutes</code></td>
+ <td>Number</td>
+ <td>The target minute [0-59].</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">seconds</code></td>
+ <td>Number</td>
+ <td>The target second [0-59].</td>
+ <td>0</td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">words</code></td>
+ <td>Object</td>
+ <td>Custom labels for the units (days, hours, minutes, seconds) with optional lambda function for correct pluralization.</td>
+ <td>
+ <code class="ff-code">{ days: { root: 'day', lambda: (root, n) => n > 1 ? root + 's' : root }, ... }</code>
+ </td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">plural</code></td>
+ <td>Boolean</td>
+ <td>Whether to use plural forms for the unit labels.</td>
+ <td><code class="ff-code">true</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">inline</code></td>
+ <td>Boolean</td>
+ <td>Set to <code class="ff-code">true</code> for a simple inline countdown (e.g., "24 days, 4 hours, 2 minutes").</td>
+ <td><code class="ff-code">false</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">inlineSeparator</code></td>
+ <td>String</td>
+ <td>Separator used in the inline countdown format.</td>
+ <td><code class="ff-code">", "</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">inlineClass</code></td>
+ <td>String</td>
+ <td>CSS class applied to the inline countdown container.</td>
+ <td><code class="ff-code">"simply-countdown-inline"</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">enableUtc</code></td>
+ <td>Boolean</td>
+ <td>Set to <code class="ff-code">true</code> to use UTC time for the countdown calculations.</td>
+ <td><code class="ff-code">false</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">onEnd</code></td>
+ <td>Function</td>
+ <td>Callback function executed when the countdown ends.</td>
+ <td><code class="ff-code">() => {}</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">refresh</code></td>
+ <td>Number</td>
+ <td>The countdown refresh interval in milliseconds.</td>
+ <td><code class="ff-code">1000</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">sectionClass</code></td>
+ <td>String</td>
+ <td>CSS class applied to each countdown section (days, hours, minutes, seconds).</td>
+ <td><code class="ff-code">"simply-section"</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">amountClass</code></td>
+ <td>String</td>
+ <td>CSS class applied to the numeric value of each countdown section.</td>
+ <td><code class="ff-code">"simply-amount"</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">wordClass</code></td>
+ <td>String</td>
+ <td>CSS class applied to the unit label of each countdown section.</td>
+ <td><code class="ff-code">"simply-word"</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">zeroPad</code></td>
+ <td>Boolean</td>
+ <td>Whether to pad the numeric values with leading zeros (e.g., "05").</td>
+ <td><code class="ff-code">false</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">removeZeroUnits</code></td>
+ <td>Boolean</td>
+ <td>Remove units with zero value (e.g., remove "0 days" if days are zero).</td>
+ <td><code class="ff-code">false</code></td>
+ </tr>
+ <tr>
+ <td><code class="ff-code">countUp</code></td>
+ <td>Boolean</td>
+ <td>Count up after reaching zero if set to <code class="ff-code">true</code>.</td>
+ <td><code class="ff-code">false</code></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</section>
<section class="custom">
@@ -182,10 +330,8 @@ <h2>Easy to customize</h2>
}
</code>
-</pre>
+ </pre>
</section>
-
- <section class="examples">
<h2>Examples</h2>
<h3>Default</h3>
<p>Displayed whithout jQuery - UTC enabled</p>
@@ -195,6 +341,10 @@ <h3>Custom</h3>
<p>Displayed with jQuery - UTC disabled</p>
<div class="simply-countdown-losange" id="simply-countdown-losange"></div>
+ <h3>Remove Zero Units</h3>
+ <p>Displayed with removeZeroUnits enabled</p>
+ <div class="simply-countdown simply-countdown-two"></div>
+
<h3>Inline</h3>
<p>Display a simple inline countdown</p>
<div class="simply-countdown-inline"></div>
@@ -203,120 +353,6 @@ <h3>countup</h3>
<p>countup Enabled option</p>
<div class="simply-countdown simply-countdown-countup" id="simply-countdown-countup"></div>
</section>
-
- <section class="changelog">
- <h2>Changelog</h2>
-
- <h3>1.7.0</h3>
- <ul>
- <li>
- Countdowns can be initialized directly with HTML elements with variables like
- <ul>
- <li>document.getElementById</li>
- <li>document.querySelector</li>
- <li>document.querySelectorAll</li>
- <li>...etc</li>
- </ul>
- </li>
- </ul>
- <h3>1.6.0</h3>
- <ul>
- <li>
- Compatibility with languages like german for plurals
- (<a href="https://github.com/VincentLoy/simplyCountdown.js/pull/15" target="_blank">PR #15</a>),
- Thanks to <a href="https://github.com/q30t" target="_blank">q30t</a>
- </li>
- <li>
- Update readme
- </li>
- </ul>
- <h3>1.5.0</h3>
- <ul>
- <li>Add countUp option (<a href="https://github.com/VincentLoy/simplyCountdown.js/issues/10" target="_blank">Resolve #10</a>)</li>
- <li>Upgrade yarn dev dependencies</li>
- <li>Some minor code reformatting</li>
- </ul>
-
- <h3>1.4.0</h3>
- <ul>
- <li>Remove bower support</li>
- <li>migrate from LESS to SASS (scss) / for demo and themes</li>
- <li>migrate lib from ES5 to a really basic ES6</li>
- <li>Remove JSLint support</li>
- <li>
- Add ESLint support based on customized
- <a href="https://www.npmjs.com/package/eslint-config-airbnb-base", target="_blank">airbnb rules</a>
- </li>
- </ul>
-
- <h3>1.3.2</h3>
- <ul>
- <li>
- add zeroPad parameter
- </li>
- <li>
- fixed Flash of Unstyled Content
- </li>
- </ul>
-
- <h3>1.3.1</h3>
- <ul>
- <li>
- clean some code
- </li>
- <li>
- add refresh parameter
- </li>
- </ul>
-
- <h3>1.3.0</h3>
- <ul>
- <li>
- Add onEnd callback
- </li>
- </ul>
-
- <h3>1.2.0</h3>
- <ul>
- <li>
- <a href="https://github.com/VincentLoy/simplyCountdown.js/issues/4"
- rel="nofollow noopener"
- target="_blank">
- Resolve #4
- </a> - Add UTC support adding enableUtc parameter
- </li>
- </ul>
-
- <h3>1.1.1</h3>
- <ul>
- <li>
- <a href="https://github.com/VincentLoy/simplyCountdown.min.js/issues/3"
- rel="nofollow noopener"
- target="_blank">
- Resolve #3
- </a> - Remove ID Only compatibility
- </li>
- </ul>
-
- <h3>1.1.0</h3>
- <ul>
- <li>
- Add hours, minutes, seconds in available settings to set the target Date
- </li>
- </ul>
-
- <h3>1.0.1</h3>
- <ul>
- <li>
- Fix console error when not using jQuery
- </li>
- </ul>
-
- <h3>1.0.0</h3>
- <ul>
- <li>initial release</li>
- </ul>
- </section>
</main>
<footer>
@@ -329,6 +365,10 @@ <h3>1.0.0</h3>
</p>
</footer>
+<div class="alert show-after-header-cd">
+ You like simplyCountdown ? <a href="https://github.com/VincentLoy/simplyCountdown.js" target="_blank">Give it a star on Github !</a>
+</div>
+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/0.0.1/prism.min.js"></script>
<script src="dev/simplyCountdown.js"></script>
@@ -338,9 +378,9 @@ <h3>1.0.0</h3>
* So when you'll init the plugin, follow how it's done in plugin documentation.
* e.g : instead of "month: d.getMonth() + 1" put "month: 10" for October.
*/
- var d = new Date(),
+ let d = new Date(),
countUpDate = new Date();
- d.setDate(d.getDate() + 365);
+ d.setMonth(d.getMonth() + 1);
// default example
simplyCountdown('.simply-countdown-one', {
@@ -350,20 +390,53 @@ <h3>1.0.0</h3>
enableUtc: true
});
- // inline example
- simplyCountdown('.simply-countdown-inline', {
+ //jQuery example
+ $('#simply-countdown-losange').simplyCountdown({
year: d.getFullYear(),
month: d.getMonth() + 1,
day: d.getDate(),
- inline: true
+ enableUtc: false
});
- //jQuery example
- $('#simply-countdown-losange').simplyCountdown({
+ // example with removeZeroUnits
+ simplyCountdown('.simply-countdown-two', {
+ year: d.getFullYear(),
+ month: d.getMonth() + 1,
+ day: d.getDate() - 30,
+ removeZeroUnits: true
+ });
+
+ // inline example
+ simplyCountdown('.simply-countdown-inline', {
year: d.getFullYear(),
month: d.getMonth() + 1,
day: d.getDate(),
- enableUtc: false
+ inline: true
+ });
+
+ // Header inline Countdown
+ let dateInTwoMinutes = new Date();
+ //dateInTwoMinutes.setMinutes(dateInTwoMinutes.getMinutes() + 1);
+ dateInTwoMinutes.setSeconds(dateInTwoMinutes.getSeconds() + 30);
+ simplyCountdown('.sc-inline-header__cd', {
+ year: dateInTwoMinutes.getFullYear(),
+ month: dateInTwoMinutes.getMonth() + 1,
+ day: dateInTwoMinutes.getDate(),
+ hours: dateInTwoMinutes.getHours(),
+ minutes: dateInTwoMinutes.getMinutes(),
+ seconds: dateInTwoMinutes.getSeconds(),
+ removeZeroUnits: true,
+ inline: true,
+ inlineSeparator: ' - ',
+ onEnd: () => {
+ let afterHeaderCdAlert = document.querySelector('.show-after-header-cd');
+ afterHeaderCdAlert.classList.add('active');
+ document.querySelector('.sc-inline-header').classList.add('hide');
+
+ window.setInterval(() => {
+ afterHeaderCdAlert.classList.remove('active');
+ }, 20000);
+ }
});
// direct element injection & Count Up Example
diff --git a/package.json b/package.json
index c6ed7c7..a7c4693 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
{
"name": "simplycountdown.js",
"description": "Tiny Javascript Countdown",
- "version": "1.7.0",
+ "version": "2.0.0",
"homepage": "http://vincentloy.github.io/simplyCountdown.js",
"author": {
"name": "Vincent Loy",