Add class in countdown

Add class in countdown for customized timer

Co-Authored-By: Iqbal Hossain <[email protected]>

Author: iqbal-web

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 = `
+			<div class="days">${time.days}d</div>
+			<div class="hours">${time.hours}h</div>
+			<div class="minutes">${time.minutes}m</div>
+			<div class="seconds">${time.seconds}s</div>
+		`;
 	}
-  
+
 	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
 	};
-  })();
-  
+})();

src/countdown.min.js

@@ -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);
+  }

test/countdown.css

@@ -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 = `
+			<div class="days">${time.days}d</div>
+			<div class="hours">${time.hours}h</div>
+			<div class="minutes">${time.minutes}m</div>
+			<div class="seconds">${time.seconds}s</div>
+		`;
 	}
-  
+
 	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
 	};
-  })();
-  
+})();

test/countdown.js

@@ -4,13 +4,20 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Countdown Library</title>
+  <link rel="stylesheet" href="countdown.css">
 </head>
 <body>
-  <div id="countdown"></div>
+
+  <div id="countdown">
+  </div>
+
+
   <script src="countdown.js"></script>
+
   <script>
     // Initialize the countdown with a target date and target element ID
-    Countdown.init('2023-10-10', 'countdown');
+    Countdown.init('2028-10-10', 'countdown');
   </script>
+
 </body>
 </html>