18r Solution

Author: SuperSimpleDev

2-copy-of-code/lesson-18/data/cart.js

@@ -89,4 +89,10 @@ export async function loadCartFetch() {
   const text = await response.text();
   console.log(text);
   return text;
-}
+}
+
+// Extra feature: make the cart empty after creating an order.
+export function resetCart() {
+  cart = [];
+  saveToStorage();
+}

2-copy-of-code/lesson-18/scripts/amazon.js

@@ -112,4 +112,13 @@ function renderProductsGrid() {
       const search = document.querySelector('.js-search-bar').value;
       window.location.href = `amazon.html?search=${search}`;
     });
+
+  // Extra feature: searching by pressing "Enter" on the keyboard.
+  document.querySelector('.js-search-bar')
+    .addEventListener('keydown', (event) => {
+      if (event.key === 'Enter') {
+        const searchTerm = document.querySelector('.js-search-bar').value;
+        window.location.href = `amazon.html?search=${searchTerm}`;
+      }
+    });
 }

2-copy-of-code/lesson-18/scripts/checkout/paymentSummary.js

@@ -1,4 +1,4 @@
-import {cart} from '../../data/cart.js';
+import {cart, resetCart} from '../../data/cart.js';
 import {getProduct} from '../../data/products.js';
 import {getDeliveryOption} from '../../data/deliveryOptions.js';
 import {formatCurrency} from '../utils/money.js';
@@ -89,6 +89,8 @@ export function renderPaymentSummary() {
         console.log('Unexpected error. Try again later.');
       }
 
+      // Extra feature: make the cart empty after creating an order.
+      resetCart();
       window.location.href = 'orders.html';
     });
 }

2-copy-of-code/lesson-18/scripts/tracking.js

@@ -26,13 +26,17 @@ async function loadPage() {
   const deliveryTime = dayjs(productDetails.estimatedDeliveryTime);
   const percentProgress = ((today - orderTime) / (deliveryTime - orderTime)) * 100;
 
+  // Extra feature: display "delivered" on the tracking page
+  // if today's date is past the delivery date.
+  const deliveredMessage = today < deliveryTime ? 'Arriving on' : 'Delivered on';
+
   const trackingHTML = `
     <a class="back-to-orders-link link-primary" href="orders.html">
       View all orders
     </a>
 
     <div class="delivery-date">
-      Arriving on ${
+      ${deliveredMessage} ${
         dayjs(productDetails.estimatedDeliveryTime).format('dddd, MMMM D')
       }
     </div>