Order and Profile Page

Ryc21001 · Apr 24, 2024 · c6bc509 · c6bc509
1 parent 1df1412
commit c6bc509
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 4 deletions.
diff --git a/final/complete.html b/final/complete.html
@@ -0,0 +1,24 @@
+<!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="complete-sect">
+        <h1 class="fraunces-reg orange">Thank you for your purchase!</h1>
+        <hr>
+        <h2 class="fraunces-reg black" style="font-size: 2em;">Your order is on its way</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>
+    </section>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/final/css/style.css b/final/css/style.css
@@ -689,4 +689,22 @@ hr {
 .cart-total {
     font-size: 2em;
     margin: 15px;
+}
+
+.complete-sect {
+    padding-top: 75px;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    h1 {
+        font-size: 3em;
+        margin: 0;
+        text-align: center;
+    }
+}
+
+.order-off {
+    background-color: rgb(128, 128, 128);
 }
diff --git a/final/main.html b/final/main.html
@@ -10,7 +10,7 @@
 <body>
     <section class="main-sect">
         <div class="main-nav">
-            <a href="" style="grid-column: 1; justify-self: flex-start;">
+            <a href="profile.html" style="grid-column: 1; justify-self: flex-start;">
                 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="main-icons" style="padding: 20px;">
                     <path d="M399 384.2C376.9 345.8 335.4 320 288 320H224c-47.4 0-88.9 25.8-111 64.2c35.2 39.2 86.2 63.8 143 63.8s107.8-24.7 143-63.8zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm256 16a72 72 0 1 0 0-144 72 72 0 1 0 0 144z"/>
                 </svg>

diff --git a/final/profile.html b/final/profile.html
@@ -0,0 +1,30 @@
+<!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="complete-sect">
+        <h1 class="fraunces-reg orange">Your Profile:</h1>
+        <hr>
+        <form action="" class="sign-up-form" style="margin-top: 30px;">
+            <input type="text" placeholder="First Name . . ." class="fraunces-italic" required="required" id="first-name" autocomplete="off">
+            <input type="text" placeholder="Last Name . . ." class="fraunces-italic" required="required" id="last-name" autocomplete="off">
+            <input type="email" placeholder="Email . . ." class="fraunces-italic" required="required" autocomplete="off">
+            <input type="password" placeholder="Password . . ." class="fraunces-italic sign-up-pass" required="required" autocomplete="off">
+            <button type="submit" class="fraunces-reg white sign-up">Save Info</button>
+        </form>
+        <a href="main.html"><button class="back white fraunces-reg" style="margin-top: 20px;">
+            <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>
+    </section>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/final/script.js b/final/script.js
@@ -1,5 +1,6 @@
 let cartItems = [];
 let checkoutBtn = document.querySelector('.check-out')
+let orderBtn = document.querySelector('.order')
 
 document.addEventListener('DOMContentLoaded', function () {
     if(location.href.includes("sign-in.html")){
@@ -16,6 +17,8 @@ document.addEventListener('DOMContentLoaded', function () {
         cartPage()
     } else if(location.href.includes("checkout.html")) {
         checkoutPage()
+    } else if(location.href.includes("complete.html")) {
+        completePage()
     }
 });
 
@@ -327,7 +330,14 @@ function checkoutPage() {
     console.log(cartItems) 
     renderCartItems();
     calculateTotalPrice();
-
+    orderClassUpdate();
+    orderBtn.addEventListener('click', function() {
+        if (cartItems.length === 0) {
+
+        } else {
+            window.location.href="complete.html"
+        }
+    })
 }
 
 function calculateTotalPrice() {
@@ -337,6 +347,21 @@ function calculateTotalPrice() {
         totalPrice += price * item.quantity;
     });
     let checkoutTotal = document.querySelector('.cart-total');
-    checkoutTotal.textContent = `Total: $${totalPrice.toFixed(2)}`;
+    checkoutTotal.innerHTML = `Total: <span class="orange basic-semi">$${totalPrice.toFixed(2)}</span>`;
     return totalPrice;
-}
+}
+
+function completePage() {
+    cartItems = []
+    console.log(cartItems)
+    updateCart()
+    updateCartNumber()
+}
+
+function orderClassUpdate() {
+    if (cartItems.length === 0) {
+        orderBtn.classList.add('order-off')
+    } else {
+        orderBtn.classList.remove('order-off')
+    }
+}