success + tip for promo

Dramex · Oct 14, 2021 · d652ab1 · d652ab1
1 parent 50b5f53
commit d652ab1
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 3 deletions.
diff --git a/checkout.html b/checkout.html
@@ -20,7 +20,7 @@
         <div class="mt-25">
             <h1 class="center">Checkout</h1>
 
-            <div class="container">
+            <div id="container" class="container">
                 <div class="row g-5">
                     <div class="col-md-5 col-lg-4 order-md-last">
                       <h4 class="d-flex justify-content-between align-items-center mb-3">
@@ -36,7 +36,10 @@ <h4 class="d-flex justify-content-between align-items-center mb-3">
                         <div class="input-group">
                           <input id="promo" type="text" class="form-control" placeholder="Promo code">
                           <button class="btn btn-secondary" id="promoButton">Redeem</button>
+
                         </div>
+                        <small class="text-muted d-block mt-2">TIP: <code>EMAD</code> is a secret promo code.</small>
+
                       </form>
                     </div>
                     <div class="col-md-7 col-lg-8">
@@ -188,7 +191,7 @@ <h4 class="mb-3">Payment</h4>
 
                         <hr class="my-4">
 
-                        <button class="w-100 btn btn-primary btn-lg" type="submit">Continue to checkout</button>
+                        <button class="w-100 btn btn-primary btn-lg" onclick="processOrder();">Process my order</button>
                       </form>
                     </div>
                   </div>

diff --git a/script.js b/script.js
@@ -392,7 +392,7 @@ const updateCheckout = () => {
       ? `
   <li class="list-group-item d-flex justify-content-between bg-light">
   <div class="text-success">
-  <h6 class="my-0">Promo code</h6>
+  <h6 class="my-0">Promo code (-20%)</h6>
   <small>EMAD</small>
   </div>
   <span class="text-success">−$${discount}</span>
@@ -408,6 +408,20 @@ const updateCheckout = () => {
   </li>`;
 };
 
+processOrder = () => {
+  let orderNumber = Math.floor(Math.random() * 100000);
+  const container = document.getElementById("container");
+  container.innerHTML = `<h3>Order number: ${orderNumber}</h3>`;
+  scroll(0,0);
+  Swal.fire(
+    'Order has been submited successfuly!',
+    `Your order number is ${orderNumber}`,
+    'success'
+  )
+
+}
+
 window.onload = () => {
   updateCheckout();
 };
+