Order Update

Ryc21001 · Apr 24, 2024 · 009564a · 009564a
1 parent 381876a
commit 009564a
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 0 deletions.
diff --git a/final/checkout.html b/final/checkout.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Slice Haven</title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://use.typekit.net/oxo3yif.css">
+</head>
+<body>
+    <section class="cart-sect">
+        <h1 class="fraunces-reg orange">Order Details</h1>
+        <hr>
+        <section class="cart-list" style="height: 500px;">
+        </section>
+        <h2 class="fraunces-reg black cart-total">Total: </h2>
+        <a href="main.html"><button class="back white fraunces-reg">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="back-icon">
+                <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/>
+            </svg>
+            Back
+        </button></a>
+        <button class="check white fraunces-reg order">Order
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" class="customize-icon">
+                <path d="M278.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L210.7 256 73.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160z"/>
+            </svg>
+        </button>
+    </section>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/final/css/style.css b/final/css/style.css
@@ -585,6 +585,10 @@ a {
     }
 }
 
+.check-off {
+    background-color: rgb(128, 128, 128);
+}
+
 .cart-sect {
     padding-top: 75px;
     width: 100%;
@@ -680,4 +684,9 @@ hr {
             fill: white;
         }
     }
+}
+
+.cart-total {
+    font-size: 2em;
+    margin: 15px;
 }
diff --git a/final/script.js b/final/script.js
@@ -1,4 +1,5 @@
 let cartItems = [];
+let checkoutBtn = document.querySelector('.check-out')
 
 document.addEventListener('DOMContentLoaded', function () {
     if(location.href.includes("sign-in.html")){
@@ -13,6 +14,8 @@ document.addEventListener('DOMContentLoaded', function () {
         mainPage()
     } else if(location.href.includes("cart.html")) {
         cartPage()
+    } else if(location.href.includes("checkout.html")) {
+        checkoutPage()
     }
 });
 
@@ -122,6 +125,7 @@ function mainPage() {
         console.log('Cart Items:', cartItems);
 
         updateCartNumber();
+        checkoutClassUpdate()
     };
 
     const displayItems = (item, index, active) => {
@@ -200,12 +204,39 @@ function mainPage() {
         const cartNum = document.querySelector('.cart-num');
         cartNum.innerHTML = `${totalQuantity}`;
     }
+
+    checkoutClassUpdate()
+
+    checkoutBtn.addEventListener('click', checkoutLink)
+}
+
+function checkoutClassUpdate() {
+    if (location.href.includes("checkout.html")) {
+
+    } else {
+        if (cartItems.length === 0) {
+            checkoutBtn.classList.add('check-off')
+        } else {
+            checkoutBtn.classList.remove('check-off')
+        }
+    }   
+}
+
+function checkoutLink() {
+    if (cartItems.length === 0) {
+
+    } else {
+        window.location.href="checkout.html";
+    }
 }
 
 function cartPage() {
     cartItems = getCartItemsFromStorage();
     console.log(cartItems) 
     renderCartItems();
+    checkoutClassUpdate()
+
+    checkoutBtn.addEventListener('click', checkoutLink)
 }
 
 function addItemToCart(newItem) {
@@ -272,6 +303,8 @@ function increaseQuantity(index) {
     cartItems[index].quantity++;
     document.getElementById(`quantity-${index}`).textContent = cartItems[index].quantity;
     updateCart();
+    checkoutClassUpdate()
+    calculateTotalPrice();
 }
 
 function decreaseQuantity(index) {
@@ -284,4 +317,25 @@ function decreaseQuantity(index) {
         renderCartItems();
         updateCart();
     }
+    checkoutClassUpdate()
+    calculateTotalPrice();
 }
+
+function checkoutPage() {
+    cartItems = getCartItemsFromStorage();
+    console.log(cartItems) 
+    renderCartItems();
+    calculateTotalPrice();
+
+}
+
+function calculateTotalPrice() {
+    let totalPrice = 0;
+    cartItems.forEach(item => {
+        const price = parseFloat(item.price.replace(/[^0-9.-]+/g, ''));
+        totalPrice += price * item.quantity;
+    });
+    let checkoutTotal = document.querySelector('.cart-total');
+    checkoutTotal.textContent = `Total: $${totalPrice.toFixed(2)}`;
+    return totalPrice;
+}