Merge pull request #1388 from coderiksenthil/main

Added Search Button and Countdown Timer for Offers.html page
arghadipmanna101 · Jul 30, 2024 · 5c18bb2 · 5c18bb2
2 parents 0edc67c + de3fcd9
commit 5c18bb2
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 3 deletions.
diff --git a/offerpage/offerpage.css b/offerpage/offerpage.css
@@ -86,4 +86,64 @@
     .deal {
         width: 100%; 
     }
-  }
+  }
+  /* Search Container */
+  .search-container {
+    margin: 20px;
+    text-align: center;
+  }
+
+  #searchInput {
+    width: 80%;
+    padding: 15px;
+    font-size: 18px;
+    border: 2px solid #ddd;
+    border-radius: 30px;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+    outline: none;
+    transition: all 0.3s ease;
+  }
+
+  #searchInput:focus {
+    border-color: #007bff;
+    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.2);
+  }
+
+  /* Promo Wrapper */
+  .promo-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    margin-top: 20px;
+  }
+
+  /* Info */
+  .info {
+    margin-top: 10px;
+  }
+
+  .info h3 {
+    font-size: 16px;
+    margin: 10px 0;
+    color: #333;
+  }
+
+  .info .price {
+    font-size: 14px;
+    color: #007bff;
+  }
+
+  .info .discount {
+    font-size: 12px;
+    color: #ff6f61;
+  }
+
+  .item:not(.visible) {
+    display: none;
+  }
+  .deal-timer {
+    font-size: 14px;
+    color: #ff6f61;
+    margin-top: 10px;
+}
+
diff --git a/offerpage/offerpage.js b/offerpage/offerpage.js
@@ -5,4 +5,55 @@ document.addEventListener("DOMContentLoaded", function() {
             document.getElementById('footer').innerHTML = data;
         })
         .catch(error => console.error('Error loading footer:', error));
-});
+});
+
+document.addEventListener("DOMContentLoaded", function() {
+    const searchInput = document.getElementById('searchInput');
+    const promoWrapper = document.getElementById('promoWrapper');
+    const deals = promoWrapper.getElementsByClassName('deal');
+
+    searchInput.addEventListener('input', function() {
+        const filter = searchInput.value.toLowerCase();
+        for (let i = 0; i < deals.length; i++) {
+            const deal = deals[i];
+            const title = deal.querySelector('h3').textContent.toLowerCase();
+            if (title.includes(filter)) {
+                deal.classList.add('visible');
+                deal.style.display = "";
+            } else {
+                deal.classList.remove('visible');
+                deal.style.display = "none";
+            }
+        }
+    });
+});
+
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Set the end time for the countdown timer (in milliseconds)
+    const endTime = new Date().getTime() + (24 * 60 * 60 * 1000); // Example: 24 hours from now
+
+    function updateCountdown() {
+        const now = new Date().getTime();
+        const distance = endTime - now;
+
+        if (distance <= 0) {
+            document.getElementById('countdown').innerHTML = "EXPIRED";
+            return;
+        }
+
+        const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+        const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+        const seconds = Math.floor((distance % (1000 * 60)) / 1000);
+
+        document.getElementById('countdown').innerHTML =
+            `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+    }
+
+    function pad(number) {
+        return number < 10 ? '0' + number : number;
+    }
+
+    // Update the countdown every second
+    const interval = setInterval(updateCountdown, 1000);
+});
diff --git a/offerpage/offerportal.html b/offerpage/offerportal.html
@@ -172,14 +172,23 @@
     <br>
 
     <h1><center>Today's Top Deals</center></h1>
+
 	<!--Header end -->
-    <div class="promo-wrapper">
+    <div class="search-container">
+        <input type="text" id="searchInput" placeholder="Search...">
+    </div>
+
+    <div class="promo-wrapper" id="promoWrapper">
         <a href="#" class="deal">
             <img src="../img/earphon1.webp" alt="Deal 1">
             <div class="info">
                 <h3>Product Title 1</h3>
                 <p class="price">$29.99</p>
                 <p class="discount">40% off</p>
+				<div class="deal-timer">
+					<p>Ends in: <span id="countdown">00:00:00</span></p>
+				</div>
+
             </div>
         </a>
         <a href="#" class="deal">
@@ -196,6 +205,7 @@ <h3>Product Title 2</h3>
                 <h3>Product Title 3</h3>
                 <p class="price">$49.99</p>
                 <p class="discount">60% off</p>
+
             </div>
         </a>
         <a href="#" class="deal">