SuperSimpleDev · SuperSimpleDev · May 1, 2024
diff --git a/2-copy-of-code/lesson-18/data/orders.js b/2-copy-of-code/lesson-18/data/orders.js
@@ -7,4 +7,16 @@ export function addOrder(order) {

 function saveToStorage() {
  localStorage.setItem('orders', JSON.stringify(orders));
-}
+}
+
+export function getOrder(orderId) {
+  let matchingOrder;
+
+  orders.forEach((order) => {
+    if (order.id === orderId) {
+      matchingOrder = order;
+    }
+  });
+
+  return matchingOrder;
+}
diff --git a/2-copy-of-code/lesson-18/scripts/tracking.js b/2-copy-of-code/lesson-18/scripts/tracking.js
@@ -0,0 +1,65 @@
+import {getOrder} from '../data/orders.js';
+import {getProduct, loadProductsFetch} from '../data/products.js';
+import dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js';
+
+async function loadPage() {
+  await loadProductsFetch();
+
+  const url = new URL(window.location.href);
+  const orderId = url.searchParams.get('orderId');
+  const productId = url.searchParams.get('productId');
+
+  const order = getOrder(orderId);
+  const product = getProduct(productId);
+
+  // Get additional details about the product like
+  // the estimated delivery time.
+  let productDetails;
+  order.products.forEach((details) => {
+    if (details.productId === product.id) {
+      productDetails = details;
+    }
+  });
+
+  const trackingHTML = `
+    <a class="back-to-orders-link link-primary" href="orders.html">
+      View all orders
+    </a>
+
+    <div class="delivery-date">
+      Arriving on ${
+        dayjs(productDetails.estimatedDeliveryTime).format('dddd, MMMM D')
+      }
+    </div>
+
+    <div class="product-info">
+      ${product.name}
+    </div>
+
+    <div class="product-info">
+      Quantity: ${productDetails.quantity}
+    </div>
+
+    <img class="product-image" src="${product.image}">
+
+    <div class="progress-labels-container">
+      <div class="progress-label">
+        Preparing
+      </div>
+      <div class="progress-label current-status">
+        Shipped
+      </div>
+      <div class="progress-label">
+        Delivered
+      </div>
+    </div>
+
+    <div class="progress-bar-container">
+      <div class="progress-bar"></div>
+    </div>
+  `;
+
+  document.querySelector('.js-order-tracking').innerHTML = trackingHTML;
+}
+
+loadPage();
diff --git a/2-copy-of-code/lesson-18/tracking.html b/2-copy-of-code/lesson-18/tracking.html
@@ -52,47 +52,10 @@
    </div>

    <div class="main">
-      <div class="order-tracking">
-        <a class="back-to-orders-link link-primary" href="orders.html">
-          View all orders
-        </a>
-
-        <div class="delivery-date">
-          Arriving on Monday, June 13
-        </div>
-
-        <div class="product-info">
-          Black and Gray Athletic Cotton Socks - 6 Pairs
-        </div>
-
-        <div class="product-info">
-          Quantity: 1
-        </div>
-
-        <img class="product-image" src="images/products/athletic-cotton-socks-6-pairs.jpg">
-
-        <div class="progress-labels-container">
-          <div class="progress-label">
-            Preparing
-          </div>
-          <div class="progress-label current-status">
-            Shipped
-          </div>
-          <div class="progress-label">
-            Delivered
-          </div>
-        </div>
-
-        <div class="progress-bar-container">
-          <div class="progress-bar"></div>
-        </div>
+      <div class="order-tracking js-order-tracking">
      </div>
    </div>

-    <script>
-      const url = new URL(window.location.href);
-      console.log(url.searchParams.get('orderId'));
-      console.log(url.searchParams.get('productId'));
-    </script>
+    <script type="module" src="scripts/tracking.js"></script>
  </body>
 </html>