From 76399713aa7b21173287b12de54472db1c6b24b2 Mon Sep 17 00:00:00 2001
From: SuperSimpleDev <simon@supersimple.dev>
Date: Wed, 1 May 2024 01:11:56 -0400
Subject: [PATCH] 18o Solution

---
 2-copy-of-code/lesson-18/scripts/tracking.js | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/2-copy-of-code/lesson-18/scripts/tracking.js b/2-copy-of-code/lesson-18/scripts/tracking.js
index 01bb36a..62f130c 100644
--- a/2-copy-of-code/lesson-18/scripts/tracking.js
+++ b/2-copy-of-code/lesson-18/scripts/tracking.js
@@ -21,6 +21,11 @@ async function loadPage() {
     }
   });
 
+  const today = dayjs();
+  const orderTime = dayjs(order.orderTime);
+  const deliveryTime = dayjs(productDetails.estimatedDeliveryTime);
+  const percentProgress = ((today - orderTime) / (deliveryTime - orderTime)) * 100;
+
   const trackingHTML = `
     <a class="back-to-orders-link link-primary" href="orders.html">
       View all orders
@@ -43,19 +48,25 @@ async function loadPage() {
     <img class="product-image" src="${product.image}">
 
     <div class="progress-labels-container">
-      <div class="progress-label">
+      <div class="progress-label ${
+        percentProgress < 50 ? 'current-status' : ''
+      }">
         Preparing
       </div>
-      <div class="progress-label current-status">
+      <div class="progress-label ${
+        (percentProgress >= 50 && percentProgress < 100) ? 'current-status' : ''
+      }">
         Shipped
       </div>
-      <div class="progress-label">
+      <div class="progress-label ${
+        percentProgress >= 100 ? "current-status" : ''
+      }">
         Delivered
       </div>
     </div>
 
     <div class="progress-bar-container">
-      <div class="progress-bar"></div>
+      <div class="progress-bar" style="width: ${percentProgress}%;"></div>
     </div>
   `;