swaraj-das · Anwishta · Oct 4, 2024 · Oct 4, 2024 · Oct 4, 2024 · Oct 6, 2024
diff --git a/Cart/cart.css b/Cart/cart.css
@@ -0,0 +1,204 @@
+
+*{
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  font-family: sans-serif;
+  font-size: 18px;
+  transition: all .2s linear;
+}
+body{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+}
+.header{
+  height: 80px;
+  width: 90%;
+  background: linear-gradient(#ff459f, #ff9532);
+  border-radius: 3px;
+  margin: 30px 0px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 15px;
+}
+.header .logo{
+  font-size: 30px;
+  font-weight: bold;
+  color: white;
+  text-transform: uppercase;
+}
+.cart{
+  display: flex;
+  background-color: white;
+  justify-content: space-between;
+  align-items: center;
+  padding: 7px 10px;
+  border-radius: 3px;
+  width: 80px;
+}
+.fa-solid{
+  color:  #ff6062;
+}
+.cart p{
+  height: 22px;
+  width: 22px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 22px;
+  background: linear-gradient(#ff459f, #ff9532);
+  color: white;
+}
+.container{
+  display: flex;
+  width: 90%;
+  margin-bottom: 30px;
+}
+#root{
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(5, 1fr);
+  grid-gap: 20px;
+}
+.sidebar{
+  width: 25%;
+  border-radius: 5px;
+  background-color: #eee;
+  margin-left: 20px;
+  padding: 15px;
+  text-align: center;
+  display: none;
+}
+.head{
+  background: linear-gradient(#ff459f, #ff9532);
+  border-radius: 3px;
+  height: 40px;
+  padding: 10px;
+  margin-bottom: 20px;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+#closed{
+  position: relative;
+  left: 150%;
+  cursor: pointer;
+}
+.foot{
+  display: flex;
+  justify-content: space-between;
+  margin: 20px 0px;
+  padding: 10px 0px;
+  border-top: 1px solid #333;
+}
+.box{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  border: 1.5px solid  rgb(#ff3527);
+  border-radius: 5px;
+  padding: 15px;
+  box-shadow: 5px 4px 6px rgb(107, 105, 105);
+}
+.box:hover{
+  box-shadow: 5px 4px 15px #dd446f;
+}
+.img-box{
+  width: 100%;
+  height: 180px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.images{
+  max-width: 90%;
+  max-height: 90%;
+  object-fit: cover;
+  object-position: center;
+}
+.images:hover{
+  transform: scale(1.1);
+}
+.bottom{
+  margin-top: 20px;
+  width: 100%;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  height: 110px;
+}
+h2{
+  font-size: 20px;
+  color: red;
+}
+button{
+  width: 100%;
+  position: relative;
+  border: none;
+  border-radius: 20px;
+  background: linear-gradient(#ff459f, #ff9532);
+  padding: 7px 25px;
+  cursor: pointer;
+  color: white;
+  font-family: 'Times New Roman', Times, serif;
+  font-weight: bolder;
+  margin-bottom: 12px;
+}
+button:hover{
+  background-color: #333;
+}
+.cart-item{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: white;
+  border-bottom: 1px solid #aaa;
+  border-radius: 3px;
+  margin: 10px 10px;
+}
+.row-img{
+  width: 50px;
+  height: 50px;
+  border-radius: 50px;
+  border: 1px solid  rgb(#ff3527);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.rowimg{
+  max-width: 43px;
+  max-height: 43px;
+  border-radius: 50%;
+}
+.fa-trash:hover{
+  cursor: pointer;
+  color: #333;}
+
+p{
+  font-weight: bolder;
+  font-size: 20px;
+}
+.add-btn a{
+  color: white;
+
+}
+
+#checkoutButton {
+  width: 100%;
+  padding: 10px 0;
+  margin-top: 10px;
+  font-size: 18px;
+  color: white;
+  border: none;
+  cursor: pointer;
+  text-align: center;
+  border-radius: 20px;
+}
diff --git a/Cart/cart.html b/Cart/cart.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>CartPage</title>
+        <link rel="shortcut icon" href="images/logo.png" type="image/x-icon">
+        <link rel="stylesheet" href="cart.css">
+        <script src="https://kit.fontawesome.com/92d70a2fd8.js" crossorigin="anonymous"></script>
+    </head>
+
+<body>
+
+    <div class="header">
+        <p class="logo">Collect your gaming GamingTools...</p>
+        <div class="cart" id="carts">
+            <i class="fa-solid fa-cart-shopping"></i>
+            <p id="count">0</p>
+        </div>
+    </div>
+
+    <div class="container"> 
+        <div id="root" class="root"></div>
+        <div class="sidebar" id="sidebox">
+            <div class="head" id="mine">
+                <p>My Cart<label id="closed">&times;</label> </p>
+            </div>
+            <div id="cartItem">Your cart is empty</div>
+            <div class="foot">
+                <h3>Total</h3>
+                <h2 id="total">Rs 0.00</h2>
+            </div>
+            <button id="checkoutButton" class="checkout-button">Checkout</button>
+        </div>
+    </div>
+
+    <script src="cart.js"></script>
+</body>
+</html>
diff --git a/Cart/cart.js b/Cart/cart.js
@@ -0,0 +1,140 @@
+// Array of products with their details: id, image, title, and price
+const product = [
+    {
+        id: 0,
+        image: '../images/controller1.png',
+        title: 'PS4 V2 Dualshock 4',
+        price: 3999,
+    },
+    {
+        id: 1,
+        image: '../images/controller2.png',
+        title: 'Xbox Wireless Controller',
+        price: 3499,
+    },
+    {
+        id: 2,
+        image: '../images/controller3.png',
+        title: 'Nintendo Switch Pro Controller',
+        price: 4999,
+    },
+    {
+        id: 3,
+        image: '../images/headset.png',
+        title: 'SteelSeries Arctis 7',
+        price: 8999,
+    },
+    {
+        id: 4,
+        image: '../images/keyboard.png',
+        title: 'Razer BlackWidow',
+        price: 5499,
+    },
+    {
+        id: 5,
+        image: '../images/mouse.png',
+        title: 'Logitech G502 Hero',
+        price: 2999,
+    },
+    {
+      id: 6,
+      image: '../images/chair.png',
+      title: 'Secretlab Omega',
+      price: 24999,
+    },
+  ];
+
+  // Create a unique set of categories based on products (though this is unnecessary here)
+  const categories = [...new Set(product.map((item) => { return item }))];
+
+  // Initialize index variable for product buttons
+  let i = 0;
+
+  // Render product items in the HTML by selecting the root element
+  document.getElementById('root').innerHTML = categories.map((item) => {
+    // Destructure the product details
+    var { image, title, price } = item;
+
+    // Return HTML string for each product
+    return (
+        `<div class='box'>
+            <div class='img-box'>
+                <img class='images' src=${image}></img>
+            </div>
+            <div class='bottom'>
+                <p>${title}</p>
+                <h2>Rs ${price}.00</h2>` +
+                "<button onclick='addtocart(" + (i++) + ")'>Add to cart</button>" +
+            `</div>
+        </div>`
+    )
+  }).join('');
+
+  // Initialize an empty cart array to hold selected products
+  var cart = [];
+
+  // Function to add an item to the cart
+  function addtocart(a) {
+    cart.push({ ...categories[a] }); // Add the selected product to the cart
+    displaycart(); // Update the cart display
+  }
+
+  // Function to handle the buy now action (similar to add to cart but with an alert)
+  function buyNow(a) {
+    cart.push({ ...categories[a] }); // Add product to cart
+    alert(`${categories[a].title} has been added to your cart!`); // Notify user
+    displaycart(); // Update the cart display
+  }
+
+  // Function to delete an item from the cart
+  function delElement(a) {
+    cart.splice(a, 1); // Remove item at index a from the cart
+    displaycart(); // Update the cart display
+  }
+
+  // Function to display the cart items
+  function displaycart() {
+    let j = 0, total = 0; // Initialize index and total price
+    document.getElementById("count").innerHTML = cart.length; // Display cart count
+
+    // Check if cart is empty
+    if (cart.length == 0) {
+        document.getElementById('cartItem').innerHTML = "Your cart is empty"; // Notify empty cart
+        document.getElementById("total").innerHTML = "Rs " + 0 + ".00"; // Total is zero
+    } else {
+        // Map through cart items and generate HTML
+        document.getElementById("cartItem").innerHTML = cart.map((items) => {
+            // Destructure item details
+            var { image, title, price } = items;
+            total = total + price; // Add item price to total
+            document.getElementById("total").innerHTML = "Rs " + total + ".00"; // Update total in cart
+
+            // Return HTML for each cart item
+            return (
+                `<div class='cart-item'>
+                    <div class='row-img'>
+                        <img class='rowimg' src=${image}>
+                    </div>
+                    <p style='font-size:15px;'>${title}</p>
+                    <h2 style='font-size: 15px;'>Rs ${price}.00</h2>` +
+                    "<i class='fa-solid fa-trash' onclick='delElement(" + (j++) + ")'></i></div>"
+            );
+        }).join('');
+    }
+  }
+
+  // Event listeners for cart toggle functionality
+  let carts = document.getElementById('carts'); // Element to open cart
+  let sidebox = document.getElementById('sidebox'); // Sidebar cart
+  let mine = document.getElementById('mine'); // Element to close cart
+
+  // Open cart sidebar when the cart button is clicked
+  carts.addEventListener('click', function() {
+      sidebox.style.display = 'block'; // Show cart sidebar
+  })
+
+  // Close cart sidebar when the close button is clicked
+  mine.addEventListener('click', function() {
+      sidebox.style.display = 'none'; // Hide cart sidebar
+  })
+