From f100ebaf1d8cccc2986d55c356ba051328e92051 Mon Sep 17 00:00:00 2001 From: Iqbal Hossain Date: Wed, 27 Sep 2023 23:43:00 +0600 Subject: [PATCH] Add class in countdown Add class in countdown for customized timer Co-Authored-By: Iqbal Hossain <107544434+iqbal-xs@users.noreply.github.com> --- src/countdown.js | 61 ++++++++++++++++++++++++++------------------ src/countdown.min.js | 2 +- test/countdown.css | 37 +++++++++++++++++++++++++++ test/countdown.js | 61 ++++++++++++++++++++++++++------------------ test/index.html | 11 ++++++-- 5 files changed, 119 insertions(+), 53 deletions(-) create mode 100644 test/countdown.css diff --git a/src/countdown.js b/src/countdown.js index a517ba8..5710068 100644 --- a/src/countdown.js +++ b/src/countdown.js @@ -2,38 +2,49 @@ var Countdown = (function() { var targetDate, targetElement; function getTimeRemaining(endTime) { - var totalSeconds = Math.max(Math.floor((endTime - Date.now()) / 1000), 0); - var days = Math.floor(totalSeconds / (60 * 60 * 24)); - var hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60)); - var minutes = Math.floor((totalSeconds % (60 * 60)) / 60); - var seconds = totalSeconds % 60; - return { - days: days, - hours: hours, - minutes: minutes, - seconds: seconds - }; + var totalSeconds = Math.max(Math.floor((endTime - Date.now()) / 1000), 0), + days = Math.floor(totalSeconds / (60 * 60 * 24)), + hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60)), + minutes = Math.floor((totalSeconds % (60 * 60)) / 60), + seconds = totalSeconds % 60; + return { + days: days, + hours: hours, + minutes: minutes, + seconds: seconds + }; } function updateCountdown() { - var time = getTimeRemaining(targetDate); - var countdownText = time.days + 'd ' + time.hours + 'h ' + time.minutes + 'm ' + time.seconds + 's'; - targetElement.innerHTML = countdownText; + var time = getTimeRemaining(targetDate), + countdownWrap = targetElement.querySelector('.countdown-wrap'); + + if (!countdownWrap) { + countdownWrap = document.createElement('div'); + countdownWrap.className = 'countdown-wrap'; + targetElement.appendChild(countdownWrap); + } + + countdownWrap.innerHTML = ` +
${time.days}d
+
${time.hours}h
+
${time.minutes}m
+
${time.seconds}s
+ `; } - + function init(targetDateString, targetElementId) { - targetDate = new Date(targetDateString).getTime(); - targetElement = document.getElementById(targetElementId); - if (!targetElement) { + targetDate = new Date(targetDateString).getTime(); + targetElement = document.getElementById(targetElementId); + if (!targetElement) { console.error("Target element not found."); return; - } - updateCountdown(); - setInterval(updateCountdown, 1000); + } + updateCountdown(); + setInterval(updateCountdown, 1000); } - + return { - init: init + init: init }; - })(); - \ No newline at end of file +})(); \ No newline at end of file diff --git a/src/countdown.min.js b/src/countdown.min.js index 600afdd..1810345 100644 --- a/src/countdown.min.js +++ b/src/countdown.min.js @@ -1 +1 @@ -var Countdown=function(){var e,n;function o(){var o,t,r=(o=e,t=Math.max(Math.floor((o-Date.now())/1e3),0),{days:Math.floor(t/86400),hours:Math.floor(t%86400/3600),minutes:Math.floor(t%3600/60),seconds:t%60}),a=r.days+"d "+r.hours+"h "+r.minutes+"m "+r.seconds+"s";n.innerHTML=a}return{init:function(t,r){e=new Date(t).getTime(),(n=document.getElementById(r))?(o(),setInterval(o,1e3)):console.error("Target element not found.")}}}(); \ No newline at end of file +var Countdown=function(){var t,n;function e(){var e,o,s=(e=t,o=Math.max(Math.floor((e-Date.now())/1e3),0),{days:Math.floor(o/86400),hours:Math.floor(o%86400/3600),minutes:Math.floor(o%3600/60),seconds:o%60}),a=n.querySelector(".countdown-wrap");a||((a=document.createElement("div")).className="countdown-wrap",n.appendChild(a)),a.innerHTML=`\n\t\t\t
${s.days}d
\n\t\t\t
${s.hours}h
\n\t\t\t
${s.minutes}m
\n\t\t\t
${s.seconds}s
\n\t\t`}return{init:function(o,s){t=new Date(o).getTime(),(n=document.getElementById(s))?(e(),setInterval(e,1e3)):console.error("Target element not found.")}}}(); \ No newline at end of file diff --git a/test/countdown.css b/test/countdown.css new file mode 100644 index 0000000..d70df5c --- /dev/null +++ b/test/countdown.css @@ -0,0 +1,37 @@ + /* Style the countdown wrapper */ + .countdown-wrap { + display: flex; + justify-content: center; + align-items: center; + font-family: Arial, sans-serif; + font-size: 24px; + color: #333; + background-color: #f1f1f1; + border-radius: 5px; + padding: 10px; + animation-duration: 10s; /* Duration of the rotation animation */ + animation-timing-function: linear; /* Linear timing */ + animation-iteration-count: infinite; /* Infinite loop */ + } + + + /* Style individual countdown elements (days, hours, minutes, seconds) */ + .countdown-wrap div { + margin: 0 10px; + padding: 5px; + background-color: #333; + color: #fff; + border-radius: 5px; + } + + + /* Add transition for countdown elements */ + .countdown-wrap div { + transition: background-color 0.3s, transform 0.3s; + } + + /* Hover effect for countdown elements */ + .countdown-wrap div:hover { + background-color: #555; + transform: scale(1.1); + } diff --git a/test/countdown.js b/test/countdown.js index a517ba8..5710068 100644 --- a/test/countdown.js +++ b/test/countdown.js @@ -2,38 +2,49 @@ var Countdown = (function() { var targetDate, targetElement; function getTimeRemaining(endTime) { - var totalSeconds = Math.max(Math.floor((endTime - Date.now()) / 1000), 0); - var days = Math.floor(totalSeconds / (60 * 60 * 24)); - var hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60)); - var minutes = Math.floor((totalSeconds % (60 * 60)) / 60); - var seconds = totalSeconds % 60; - return { - days: days, - hours: hours, - minutes: minutes, - seconds: seconds - }; + var totalSeconds = Math.max(Math.floor((endTime - Date.now()) / 1000), 0), + days = Math.floor(totalSeconds / (60 * 60 * 24)), + hours = Math.floor((totalSeconds % (60 * 60 * 24)) / (60 * 60)), + minutes = Math.floor((totalSeconds % (60 * 60)) / 60), + seconds = totalSeconds % 60; + return { + days: days, + hours: hours, + minutes: minutes, + seconds: seconds + }; } function updateCountdown() { - var time = getTimeRemaining(targetDate); - var countdownText = time.days + 'd ' + time.hours + 'h ' + time.minutes + 'm ' + time.seconds + 's'; - targetElement.innerHTML = countdownText; + var time = getTimeRemaining(targetDate), + countdownWrap = targetElement.querySelector('.countdown-wrap'); + + if (!countdownWrap) { + countdownWrap = document.createElement('div'); + countdownWrap.className = 'countdown-wrap'; + targetElement.appendChild(countdownWrap); + } + + countdownWrap.innerHTML = ` +
${time.days}d
+
${time.hours}h
+
${time.minutes}m
+
${time.seconds}s
+ `; } - + function init(targetDateString, targetElementId) { - targetDate = new Date(targetDateString).getTime(); - targetElement = document.getElementById(targetElementId); - if (!targetElement) { + targetDate = new Date(targetDateString).getTime(); + targetElement = document.getElementById(targetElementId); + if (!targetElement) { console.error("Target element not found."); return; - } - updateCountdown(); - setInterval(updateCountdown, 1000); + } + updateCountdown(); + setInterval(updateCountdown, 1000); } - + return { - init: init + init: init }; - })(); - \ No newline at end of file +})(); \ No newline at end of file diff --git a/test/index.html b/test/index.html index 5187e19..5bd4d7a 100644 --- a/test/index.html +++ b/test/index.html @@ -4,13 +4,20 @@ Countdown Library + -
+ +
+
+ + + +