From 2966956fe7ac7ae32a92c942fd1c2b2a3a5d47f2 Mon Sep 17 00:00:00 2001
From: aditya07389 <kradi2004@gmail.com>
Date: Sat, 19 Oct 2024 12:58:18 +0530
Subject: [PATCH] addtocart

---
 index.html | 86 ++++++++++++++++++++++++++++++++++++++++++++----------
 style.css  | 34 ++++++++++++++++++---
 2 files changed, 100 insertions(+), 20 deletions(-)

diff --git a/index.html b/index.html
index d6e4689d..a77180d1 100644
--- a/index.html
+++ b/index.html
@@ -55,16 +55,27 @@
                             <span class="slider"></span>
                         </label></li>
                     <!-- Inside the navbar ul -->
-                    <a href="#" class="cart-button">
+                    <a href="#" class="cart-button" id="cart-icon">
                         <img src="images/cart.png" alt="Cart Icon">
                         <span id="cart-count">0</span>
                         </a>
                 </ul>
 
+                
+
                 <!-- Hamburger Menu Icon -->
                 <img src="images/menu.png" class="menu-icon" onclick="toggleMenu()">
             </nav>
         </div>
+        <div id="cart-popover" class="popover">
+            <div class="popover-content" id="popover-content">
+                <p>Your cart is empty</p>
+                
+            </div>
+            <div style="align-items: center;">
+                <button style="border-radius: 4px;">Checkout</button>
+            </div>
+        </div>
         </nav>
 
         <nav>
@@ -152,7 +163,7 @@ <h3>Wireless Controllers for PlayStation 4</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -182,7 +193,7 @@ <h3>Controllers for Xbox One and Series X</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -214,7 +225,7 @@ <h3>Wireless Controllers for Nintendo Switch</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -246,7 +257,7 @@ <h3>VR Headset from Meta</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -278,7 +289,7 @@ <h3>VR Headset from Apple</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -310,7 +321,7 @@ <h3>High Performance Gaming Mouse</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -341,7 +352,7 @@ <h3>Mechanical Gaming Keyboard</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -372,7 +383,7 @@ <h3>Wireless Gaming Headset</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -403,7 +414,7 @@ <h3>Ergonomic Gaming Chair</h3>
                 </div>
                 <div class="btn-section">
                     <button type="button" id="buy-btn">Buy Now<img src="images/arrow.png" alt="Arrow"></button>
-                    <button type="button" id="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
+                    <button type="button" class="cart-btn">Add to Cart<img src="images/add.png" alt="Cart"></button>
                 </div>
             </div>
             <div class="col-2" data-aos="fade-left">
@@ -719,13 +730,56 @@ <h2>Feedback Form</h2>
 
     <script>
         let cartItemCount = 0;
-
-        // Function to handle Add to Cart button click
-        document.getElementById('cart-btn').addEventListener('click', function () {
-            cartItemCount++; // Increment cart count
-            document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
-            alert('Item added to cart'); // Show alert
+let cartItems = [];
+
+// Handle Add to Cart button click for all buttons with the class 'cart-btn'
+const cartButtons = document.querySelectorAll('.cart-btn');
+
+cartButtons.forEach((button) => {
+    button.addEventListener('click', function () {
+        cartItemCount++; // Increment cart count
+        document.getElementById('cart-count').textContent = cartItemCount; // Update cart count display
+
+        // Get the item name from the closest .col-1 element
+        const itemName = this.closest('.col-1').querySelector('.card-heading').textContent;
+
+        const newItem = `${itemName} ${cartItemCount}`; // Example item, you can change this
+        cartItems.push(newItem); // Add item to the cart
+
+        
+    });
+});
+
+// Handle Cart Button click to toggle popover
+document.getElementById('cart-icon').addEventListener('click', function (e) {
+    e.preventDefault();
+    const popover = document.getElementById('cart-popover');
+    const popoverContent = document.getElementById('popover-content');
+
+    if (cartItems.length > 0) {
+        popoverContent.innerHTML = ''; // Clear the popover content
+        cartItems.forEach((item, index) => {
+            const itemElement = document.createElement('p');
+            itemElement.textContent = `${index + 1}. ${item}`;
+            popoverContent.appendChild(itemElement);
         });
+    } else {
+        popoverContent.innerHTML = '<p>Your cart is empty</p>';
+    }
+
+    // Toggle popover visibility
+    popover.style.display = popover.style.display === 'block' ? 'none' : 'block';
+});
+
+// Close the popover if clicked outside
+document.addEventListener('click', function (e) {
+    const cartButton = document.getElementById('cart-icon');
+    const popover = document.getElementById('cart-popover');
+
+    if (!cartButton.contains(e.target) && !popover.contains(e.target)) {
+        popover.style.display = 'none';
+    }
+});
 
     </script>
     <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
diff --git a/style.css b/style.css
index 83f7ea5e..228d17b3 100644
--- a/style.css
+++ b/style.css
@@ -10,6 +10,32 @@ html {
   scroll-behavior: smooth;
 }
 
+/* Style for the popover */
+.popover {
+  display: none;
+  position: fixed;
+  top: 50px; 
+  right: 20px; 
+  background-color: bisque;
+  border: 1px solid black;
+  border-radius: 5px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  width: 200px;
+  height: 200px;
+  max-height: 300px;
+  overflow-y: auto;
+  z-index: 1000;
+}
+
+
+.popover-content {
+  padding: 10px;
+  max-height: 200px;
+  
+}
+.popover-content p{
+  color: black;
+}
 html::-webkit-scrollbar {
   width: 12px; /* Increased the scrollbar width */
   transition: width 0.3s ease;
@@ -537,7 +563,7 @@ button {
   transform: translateX(5px); /* Slightly move the icon to the right on hover */
 }
 
-#cart-btn {
+.cart-btn {
   padding: 12px 14px; /* Padding for the cart button */
   display: flex; /* Use flexbox for alignment */
   align-items: center; /* Center align items vertically */
@@ -550,18 +576,18 @@ button {
   transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out; /* Transition for background color */
 }
 
-#cart-btn:hover {
+.cart-btn:hover {
   width: 160px; /* Increased width on hover */
   background-color: #e53935; /* Darker red on hover */
 }
 
-#cart-btn img {
+.cart-btn img {
   width: 18px; /* Icon size */
   opacity: 0; /* Initially hidden */
   transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; /* Transition for opacity and transform */
 }
 
-#cart-btn:hover img {
+.cart-btn:hover img {
   opacity: 1; /* Fully visible on hover */
   transform: translateX(5px); /* Slightly move the icon to the right on hover */
 }