From 14ca74a3f41bbb73d20a805edf740b52fbe35e20 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Sun, 6 Apr 2025 20:38:43 +0800
Subject: [PATCH 01/19] update amazon.html

---
 amazon.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/amazon.html b/amazon.html
index d9f431b6..9da2d400 100644
--- a/amazon.html
+++ b/amazon.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>Amazon Project</title>
+    <title>Amazon Project-yuxin</title>
 
     <!-- This code is needed for responsive design to work.
       (Responsive design = make the website look good on

From 49883c2a2145681643c4dd7f081ed32ed688ccc4 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Sun, 6 Apr 2025 22:20:00 +0800
Subject: [PATCH 02/19] Generate html with js

---
 amazon.html | 149 +---------------------------------------------------
 1 file changed, 2 insertions(+), 147 deletions(-)

diff --git a/amazon.html b/amazon.html
index 9da2d400..6eae8e9e 100644
--- a/amazon.html
+++ b/amazon.html
@@ -52,154 +52,9 @@
     </div>
     
     <div class="main">
-      <div class="products-grid">
-        <div class="product-container">
-          <div class="product-image-container">
-            <img class="product-image"
-              src="images/products/athletic-cotton-socks-6-pairs.jpg">
-          </div>
-
-          <div class="product-name limit-text-to-2-lines">
-            Black and Gray Athletic Cotton Socks - 6 Pairs
-          </div>
-
-          <div class="product-rating-container">
-            <img class="product-rating-stars"
-              src="images/ratings/rating-45.png">
-            <div class="product-rating-count link-primary">
-              87
-            </div>
-          </div>
-
-          <div class="product-price">
-            $10.90
-          </div>
-
-          <div class="product-quantity-container">
-            <select>
-              <option selected value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-              <option value="7">7</option>
-              <option value="8">8</option>
-              <option value="9">9</option>
-              <option value="10">10</option>
-            </select>
-          </div>
-
-          <div class="product-spacer"></div>
-
-          <div class="added-to-cart">
-            <img src="images/icons/checkmark.png">
-            Added
-          </div>
-
-          <button class="add-to-cart-button button-primary">
-            Add to Cart
-          </button>
-        </div>
-
-        <div class="product-container">
-          <div class="product-image-container">
-            <img class="product-image"
-              src="images/products/intermediate-composite-basketball.jpg">
-          </div>
-
-          <div class="product-name limit-text-to-2-lines">
-            Intermediate Size Basketball
-          </div>
-
-          <div class="product-rating-container">
-            <img class="product-rating-stars"
-              src="images/ratings/rating-40.png">
-            <div class="product-rating-count link-primary">
-              127
-            </div>
-          </div>
-
-          <div class="product-price">
-            $20.95
-          </div>
-
-          <div class="product-quantity-container">
-            <select>
-              <option selected value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-              <option value="7">7</option>
-              <option value="8">8</option>
-              <option value="9">9</option>
-              <option value="10">10</option>
-            </select>
-          </div>
-
-          <div class="product-spacer"></div>
-
-          <div class="added-to-cart">
-            <img src="images/icons/checkmark.png">
-            Added
-          </div>
-
-          <button class="add-to-cart-button button-primary">
-            Add to Cart
-          </button>
-        </div>
-
-        <div class="product-container">
-          <div class="product-image-container">
-            <img class="product-image"
-              src="images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg">
-          </div>
-
-          <div class="product-name limit-text-to-2-lines">
-            Adults Plain Cotton T-Shirt - 2 Pack
-          </div>
-
-          <div class="product-rating-container">
-            <img class="product-rating-stars"
-              src="images/ratings/rating-45.png">
-            <div class="product-rating-count link-primary">
-              56
-            </div>
-          </div>
-
-          <div class="product-price">
-            $7.99
-          </div>
-
-          <div class="product-quantity-container">
-            <select>
-              <option selected value="1">1</option>
-              <option value="2">2</option>
-              <option value="3">3</option>
-              <option value="4">4</option>
-              <option value="5">5</option>
-              <option value="6">6</option>
-              <option value="7">7</option>
-              <option value="8">8</option>
-              <option value="9">9</option>
-              <option value="10">10</option>
-            </select>
-          </div>
-
-          <div class="product-spacer"></div>
-
-          <div class="added-to-cart">
-            <img src="images/icons/checkmark.png">
-            Added
-          </div>
-
-          <button class="add-to-cart-button button-primary">
-            Add to Cart
-          </button>
-        </div>
+      <div class="products-grid js-products-grid">
       </div>
     </div>
+    <script src="scripts/amazon.js"></script>
   </body>
 </html>

From ab6c6e552ec346c1908aeb06f45675ba5ac2595a Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Sun, 6 Apr 2025 22:20:16 +0800
Subject: [PATCH 03/19] add amazon.js

---
 scripts/amazon.js | 86 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 86 insertions(+)
 create mode 100644 scripts/amazon.js

diff --git a/scripts/amazon.js b/scripts/amazon.js
new file mode 100644
index 00000000..f25dba3e
--- /dev/null
+++ b/scripts/amazon.js
@@ -0,0 +1,86 @@
+const products = [
+  {
+    image:'images/products/athletic-cotton-socks-6-pairs.jpg',
+    name: 'Black and Gray Athletic Cotton Socks - 6 Pairs',
+    rating:{
+      stars:4.5,
+      count:87
+    },
+    priceCents:1090
+  },
+  {
+    image:'images/products/intermediate-composite-basketball.jpg',
+    name: 'Intermediate Size Basketball',
+    rating:{
+      stars:4.0,
+      count:127
+    },
+    priceCents:2095
+  },
+  {
+    image:'images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg',
+    name: 'Adults Plain Cotton T-Shirt - 2 Pack',
+    rating:{
+      stars:4.5,
+      count:56
+    },
+    priceCents:799
+  },
+];
+
+let productsHTML = '';
+products.forEach( (product) => {
+  productsHTML += `
+    <div class="product-container">
+    <div class="product-image-container">
+      <img class="product-image"
+        src="${product.image}">
+    </div>
+
+    <div class="product-name limit-text-to-2-lines">
+      ${product.name}
+    </div>
+
+    <div class="product-rating-container">
+      <img class="product-rating-stars"
+        src="images/ratings/rating-${product.rating.stars * 10}.png">
+      <div class="product-rating-count link-primary">
+        ${product.rating.count} 
+      </div>
+    </div>
+
+    <div class="product-price">
+      $${(product.priceCents / 100).toFixed(2)}
+    </div>
+
+    <div class="product-quantity-container">
+      <select>
+        <option selected value="1">1</option>
+        <option value="2">2</option>
+        <option value="3">3</option>
+        <option value="4">4</option>
+        <option value="5">5</option>
+        <option value="6">6</option>
+        <option value="7">7</option>
+        <option value="8">8</option>
+        <option value="9">9</option>
+        <option value="10">10</option>
+      </select>
+    </div>
+
+    <div class="product-spacer"></div>
+
+    <div class="added-to-cart">
+      <img src="images/icons/checkmark.png">
+      Added
+    </div>
+
+    <button class="add-to-cart-button button-primary">
+      Add to Cart
+    </button>
+  </div>
+  `;
+});
+
+
+document.querySelector('.js-products-grid').innerHTML = productsHTML;
\ No newline at end of file

From 241a4ff3adeefbe634f7da5cdcf10722df2fcc00 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Mon, 7 Apr 2025 10:02:12 +0800
Subject: [PATCH 04/19] use products.js for input data

---
 amazon.html       |  2 ++
 scripts/amazon.js | 30 +-----------------------------
 2 files changed, 3 insertions(+), 29 deletions(-)

diff --git a/amazon.html b/amazon.html
index 6eae8e9e..937fedbe 100644
--- a/amazon.html
+++ b/amazon.html
@@ -55,6 +55,8 @@
       <div class="products-grid js-products-grid">
       </div>
     </div>
+    <script src="data/products.js"></script>
     <script src="scripts/amazon.js"></script>
+
   </body>
 </html>
diff --git a/scripts/amazon.js b/scripts/amazon.js
index f25dba3e..781c8d2c 100644
--- a/scripts/amazon.js
+++ b/scripts/amazon.js
@@ -1,32 +1,4 @@
-const products = [
-  {
-    image:'images/products/athletic-cotton-socks-6-pairs.jpg',
-    name: 'Black and Gray Athletic Cotton Socks - 6 Pairs',
-    rating:{
-      stars:4.5,
-      count:87
-    },
-    priceCents:1090
-  },
-  {
-    image:'images/products/intermediate-composite-basketball.jpg',
-    name: 'Intermediate Size Basketball',
-    rating:{
-      stars:4.0,
-      count:127
-    },
-    priceCents:2095
-  },
-  {
-    image:'images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg',
-    name: 'Adults Plain Cotton T-Shirt - 2 Pack',
-    rating:{
-      stars:4.5,
-      count:56
-    },
-    priceCents:799
-  },
-];
+
 
 let productsHTML = '';
 products.forEach( (product) => {

From 8657c60d5d1bcda7a27f24b8b643797c64ca4b44 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Mon, 7 Apr 2025 10:23:53 +0800
Subject: [PATCH 05/19] "Add to cart" function enabled

---
 amazon.html       |  1 +
 data/cart.js      |  1 +
 scripts/amazon.js | 30 ++++++++++++++++++++++++++++--
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 data/cart.js

diff --git a/amazon.html b/amazon.html
index 937fedbe..175286ef 100644
--- a/amazon.html
+++ b/amazon.html
@@ -55,6 +55,7 @@
       <div class="products-grid js-products-grid">
       </div>
     </div>
+    <script src="data//cart.js"></script>
     <script src="data/products.js"></script>
     <script src="scripts/amazon.js"></script>
 
diff --git a/data/cart.js b/data/cart.js
new file mode 100644
index 00000000..a27af154
--- /dev/null
+++ b/data/cart.js
@@ -0,0 +1 @@
+const cart = [];
\ No newline at end of file
diff --git a/scripts/amazon.js b/scripts/amazon.js
index 781c8d2c..12340231 100644
--- a/scripts/amazon.js
+++ b/scripts/amazon.js
@@ -47,7 +47,8 @@ products.forEach( (product) => {
       Added
     </div>
 
-    <button class="add-to-cart-button button-primary">
+    <button class="add-to-cart-button button-primary js-add-to-cart"
+    data-product-id="${product.id}">
       Add to Cart
     </button>
   </div>
@@ -55,4 +56,29 @@ products.forEach( (product) => {
 });
 
 
-document.querySelector('.js-products-grid').innerHTML = productsHTML;
\ No newline at end of file
+document.querySelector('.js-products-grid').innerHTML = productsHTML;
+
+document.querySelectorAll('.js-add-to-cart').forEach( (button) => {
+  button.addEventListener('click', (event) => {
+    //const productName = event.target.dataset.productName;
+    const productId =button.dataset.productId;
+    // check if product alreayady exists in the cart
+    let matchingItem;
+    cart.forEach((item) => {
+      if(productId===item.productId){
+        matchingItem = item;
+      }
+    });
+    if(matchingItem){
+      matchingItem.quantity++;
+    }else{
+      cart.push({
+      productId: productId,
+      quantity: 1,
+    });
+    }
+
+
+    console.log(cart);
+  });
+})
\ No newline at end of file

From f7995a2dce9e5b473bfbed6ead8ad7586159927f Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Mon, 7 Apr 2025 10:34:50 +0800
Subject: [PATCH 06/19] "Cart quantity" feature enabled

---
 amazon.html       | 2 +-
 scripts/amazon.js | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/amazon.html b/amazon.html
index 175286ef..110087b7 100644
--- a/amazon.html
+++ b/amazon.html
@@ -45,7 +45,7 @@
 
         <a class="cart-link header-link" href="checkout.html">
           <img class="cart-icon" src="images/icons/cart-icon.png">
-          <div class="cart-quantity">3</div>
+          <div class="cart-quantity js-cart-quantity">0</div>
           <div class="cart-text">Cart</div>
         </a>
       </div>
diff --git a/scripts/amazon.js b/scripts/amazon.js
index 12340231..be13b4a3 100644
--- a/scripts/amazon.js
+++ b/scripts/amazon.js
@@ -78,7 +78,12 @@ document.querySelectorAll('.js-add-to-cart').forEach( (button) => {
     });
     }
 
-
+    let cartQuantity = 0;
+    cart.forEach((item) => {
+      cartQuantity += item.quantity;
+    });
+    document.querySelector('.js-cart-quantity').innerHTML = cartQuantity;
+    console.log(cartQuantity);
     console.log(cart);
   });
 })
\ No newline at end of file

From ceb7aeffc5ab8a3e1e4d423949b0ca33b85f9c48 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Mon, 7 Apr 2025 10:47:14 +0800
Subject: [PATCH 07/19] Using Module instead of <script> to load .js file

---
 amazon.html       | 5 ++---
 data/cart.js      | 2 +-
 data/products.js  | 2 +-
 scripts/amazon.js | 4 ++--
 4 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/amazon.html b/amazon.html
index 110087b7..9fc1aa6f 100644
--- a/amazon.html
+++ b/amazon.html
@@ -55,9 +55,8 @@
       <div class="products-grid js-products-grid">
       </div>
     </div>
-    <script src="data//cart.js"></script>
-    <script src="data/products.js"></script>
-    <script src="scripts/amazon.js"></script>
+    
+    <script type="module" src="scripts/amazon.js"></script>
 
   </body>
 </html>
diff --git a/data/cart.js b/data/cart.js
index a27af154..058d4e4a 100644
--- a/data/cart.js
+++ b/data/cart.js
@@ -1 +1 @@
-const cart = [];
\ No newline at end of file
+export const cart = [];
\ No newline at end of file
diff --git a/data/products.js b/data/products.js
index 61a7fdf7..7f577e0a 100644
--- a/data/products.js
+++ b/data/products.js
@@ -1,4 +1,4 @@
-const products = [
+export const products = [
   {
     id: "e43638ce-6aa0-4b85-b27f-e1d07eb678c6",
     image: "images/products/athletic-cotton-socks-6-pairs.jpg",
diff --git a/scripts/amazon.js b/scripts/amazon.js
index be13b4a3..064b7109 100644
--- a/scripts/amazon.js
+++ b/scripts/amazon.js
@@ -1,5 +1,5 @@
-
-
+import {cart} from '../data/cart.js';
+import {products} from '../data/products.js';
 let productsHTML = '';
 products.forEach( (product) => {
   productsHTML += `

From cbddaad72e2b6f66ce31c97a9d511247784a6c47 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Mon, 7 Apr 2025 12:33:37 +0800
Subject: [PATCH 08/19] refactor code

---
 data/cart.js      | 21 ++++++++++++++++++++-
 scripts/amazon.js | 35 ++++++++++++-----------------------
 2 files changed, 32 insertions(+), 24 deletions(-)

diff --git a/data/cart.js b/data/cart.js
index 058d4e4a..a6dcb229 100644
--- a/data/cart.js
+++ b/data/cart.js
@@ -1 +1,20 @@
-export const cart = [];
\ No newline at end of file
+export const cart = [];
+
+export function addToCart(productId) {
+  let matchingItem;
+  cart.forEach((cartItem) => {
+    if(productId===cartItem.productId){
+      matchingItem = cartItem;
+    }
+  });
+  if(matchingItem){
+    matchingItem.quantity++;
+  }else{
+    cart.push({
+    productId: productId,
+    quantity: 1,
+  });
+  }
+}
+
+
diff --git a/scripts/amazon.js b/scripts/amazon.js
index 064b7109..8b7241e8 100644
--- a/scripts/amazon.js
+++ b/scripts/amazon.js
@@ -1,5 +1,6 @@
-import {cart} from '../data/cart.js';
+import {cart, addToCart} from '../data/cart.js';
 import {products} from '../data/products.js';
+
 let productsHTML = '';
 products.forEach( (product) => {
   productsHTML += `
@@ -58,32 +59,20 @@ products.forEach( (product) => {
 
 document.querySelector('.js-products-grid').innerHTML = productsHTML;
 
+export function updateCartQuantity() {
+  let cartQuantity = 0;
+  cart.forEach((cartItem) => {
+    cartQuantity += cartItem.quantity;
+  });
+  document.querySelector('.js-cart-quantity').innerHTML = cartQuantity;
+}
+
 document.querySelectorAll('.js-add-to-cart').forEach( (button) => {
   button.addEventListener('click', (event) => {
     //const productName = event.target.dataset.productName;
     const productId =button.dataset.productId;
     // check if product alreayady exists in the cart
-    let matchingItem;
-    cart.forEach((item) => {
-      if(productId===item.productId){
-        matchingItem = item;
-      }
-    });
-    if(matchingItem){
-      matchingItem.quantity++;
-    }else{
-      cart.push({
-      productId: productId,
-      quantity: 1,
-    });
-    }
-
-    let cartQuantity = 0;
-    cart.forEach((item) => {
-      cartQuantity += item.quantity;
-    });
-    document.querySelector('.js-cart-quantity').innerHTML = cartQuantity;
-    console.log(cartQuantity);
-    console.log(cart);
+    addToCart(productId);
+    updateCartQuantity();
   });
 })
\ No newline at end of file

From 609cd770d9bd26651d55db0fa68f436a9f9cc3f9 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Mon, 7 Apr 2025 14:30:26 +0800
Subject: [PATCH 09/19] Generate html via js for cart summary

---
 checkout.html       | 151 +-------------------------------------------
 data/cart.js        |  12 +++-
 scripts/checkout.js |  96 ++++++++++++++++++++++++++++
 3 files changed, 109 insertions(+), 150 deletions(-)
 create mode 100644 scripts/checkout.js

diff --git a/checkout.html b/checkout.html
index da3f2497..e3aa80fe 100644
--- a/checkout.html
+++ b/checkout.html
@@ -43,156 +43,8 @@
       <div class="page-title">Review your order</div>
 
       <div class="checkout-grid">
-        <div class="order-summary">
-          <div class="cart-item-container">
-            <div class="delivery-date">
-              Delivery date: Tuesday, June 21
-            </div>
+        <div class="order-summary js-order-summary">
 
-            <div class="cart-item-details-grid">
-              <img class="product-image"
-                src="images/products/athletic-cotton-socks-6-pairs.jpg">
-
-              <div class="cart-item-details">
-                <div class="product-name">
-                  Black and Gray Athletic Cotton Socks - 6 Pairs
-                </div>
-                <div class="product-price">
-                  $10.90
-                </div>
-                <div class="product-quantity">
-                  <span>
-                    Quantity: <span class="quantity-label">2</span>
-                  </span>
-                  <span class="update-quantity-link link-primary">
-                    Update
-                  </span>
-                  <span class="delete-quantity-link link-primary">
-                    Delete
-                  </span>
-                </div>
-              </div>
-
-              <div class="delivery-options">
-                <div class="delivery-options-title">
-                  Choose a delivery option:
-                </div>
-                <div class="delivery-option">
-                  <input type="radio" checked
-                    class="delivery-option-input"
-                    name="delivery-option-1">
-                  <div>
-                    <div class="delivery-option-date">
-                      Tuesday, June 21
-                    </div>
-                    <div class="delivery-option-price">
-                      FREE Shipping
-                    </div>
-                  </div>
-                </div>
-                <div class="delivery-option">
-                  <input type="radio"
-                    class="delivery-option-input"
-                    name="delivery-option-1">
-                  <div>
-                    <div class="delivery-option-date">
-                      Wednesday, June 15
-                    </div>
-                    <div class="delivery-option-price">
-                      $4.99 - Shipping
-                    </div>
-                  </div>
-                </div>
-                <div class="delivery-option">
-                  <input type="radio"
-                    class="delivery-option-input"
-                    name="delivery-option-1">
-                  <div>
-                    <div class="delivery-option-date">
-                      Monday, June 13
-                    </div>
-                    <div class="delivery-option-price">
-                      $9.99 - Shipping
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-
-          <div class="cart-item-container">
-            <div class="delivery-date">
-              Delivery date: Wednesday, June 15
-            </div>
-
-            <div class="cart-item-details-grid">
-              <img class="product-image"
-                src="images/products/intermediate-composite-basketball.jpg">
-
-              <div class="cart-item-details">
-                <div class="product-name">
-                  Intermediate Size Basketball
-                </div>
-                <div class="product-price">
-                  $20.95
-                </div>
-                <div class="product-quantity">
-                  <span>
-                    Quantity: <span class="quantity-label">1</span>
-                  </span>
-                  <span class="update-quantity-link link-primary">
-                    Update
-                  </span>
-                  <span class="delete-quantity-link link-primary">
-                    Delete
-                  </span>
-                </div>
-              </div>
-
-              <div class="delivery-options">
-                <div class="delivery-options-title">
-                  Choose a delivery option:
-                </div>
-
-                <div class="delivery-option">
-                  <input type="radio" class="delivery-option-input"
-                    name="delivery-option-2">
-                  <div>
-                    <div class="delivery-option-date">
-                      Tuesday, June 21
-                    </div>
-                    <div class="delivery-option-price">
-                      FREE Shipping
-                    </div>
-                  </div>
-                </div>
-                <div class="delivery-option">
-                  <input type="radio" checked class="delivery-option-input"
-                    name="delivery-option-2">
-                  <div>
-                    <div class="delivery-option-date">
-                      Wednesday, June 15
-                    </div>
-                    <div class="delivery-option-price">
-                      $4.99 - Shipping
-                    </div>
-                  </div>
-                </div>
-                <div class="delivery-option">
-                  <input type="radio" class="delivery-option-input"
-                    name="delivery-option-2">
-                  <div>
-                    <div class="delivery-option-date">
-                      Monday, June 13
-                    </div>
-                    <div class="delivery-option-price">
-                      $9.99 - Shipping
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
         </div>
 
         <div class="payment-summary">
@@ -231,5 +83,6 @@
         </div>
       </div>
     </div>
+    <script type="module" src="scripts/checkout.js"></script>
   </body>
 </html>
diff --git a/data/cart.js b/data/cart.js
index a6dcb229..e547ed95 100644
--- a/data/cart.js
+++ b/data/cart.js
@@ -1,4 +1,14 @@
-export const cart = [];
+export const cart = [
+  {
+    productId:"e43638ce-6aa0-4b85-b27f-e1d07eb678c6",
+    quantity:2,
+  },
+  {
+    productId:"15b6fc6f-327a-4ec4-896f-486349e85a3d",
+    quantity:1,
+  }
+
+];
 
 export function addToCart(productId) {
   let matchingItem;
diff --git a/scripts/checkout.js b/scripts/checkout.js
new file mode 100644
index 00000000..ab9de7d2
--- /dev/null
+++ b/scripts/checkout.js
@@ -0,0 +1,96 @@
+import {cart} from '../data/cart.js';
+import {products} from '../data/products.js';
+
+let cartSummaryHTML = '';
+
+cart.forEach((cartItem) => {
+  const productId = cartItem.productId;
+  let matchingProduct;
+  products.forEach((product) => {
+    if(product.id === productId){
+      matchingProduct = product;
+    }
+  });
+  
+  cartSummaryHTML += 
+  `
+    <div class="cart-item-container">
+      <div class="delivery-date">
+        Delivery date: Tuesday, June 21
+      </div>
+
+      <div class="cart-item-details-grid">
+        <img class="product-image"
+          src="${matchingProduct.image}">
+
+        <div class="cart-item-details">
+          <div class="product-name">
+           ${matchingProduct.name}
+          </div>
+          <div class="product-price">
+            ${(matchingProduct.priceCents/100).toFixed(2)}
+          </div>
+          <div class="product-quantity">
+            <span>
+              Quantity: <span class="quantity-label">${cartItem.quantity}</span>
+            </span>
+            <span class="update-quantity-link link-primary">
+              Update
+            </span>
+            <span class="delete-quantity-link link-primary">
+              Delete
+            </span>
+          </div>
+        </div>
+
+        <div class="delivery-options">
+          <div class="delivery-options-title">
+            Choose a delivery option:
+          </div>
+          <div class="delivery-option">
+            <input type="radio" checked
+              class="delivery-option-input"
+              name="delivery-option-1">
+            <div>
+              <div class="delivery-option-date">
+                Tuesday, June 21
+              </div>
+              <div class="delivery-option-price">
+                FREE Shipping
+              </div>
+            </div>
+          </div>
+          <div class="delivery-option">
+            <input type="radio"
+              class="delivery-option-input"
+              name="delivery-option-1">
+            <div>
+              <div class="delivery-option-date">
+                Wednesday, June 15
+              </div>
+              <div class="delivery-option-price">
+                $4.99 - Shipping
+              </div>
+            </div>
+          </div>
+          <div class="delivery-option">
+            <input type="radio"
+              class="delivery-option-input"
+              name="delivery-option-1">
+            <div>
+              <div class="delivery-option-date">
+                Monday, June 13
+              </div>
+              <div class="delivery-option-price">
+                $9.99 - Shipping
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `
+
+});
+
+document.querySelector('.js-order-summary').innerHTML = cartSummaryHTML;
\ No newline at end of file

From c81c44cdb76aa7412856b47d83fdded6de940987 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Mon, 7 Apr 2025 22:33:43 +0800
Subject: [PATCH 10/19] Fix price formating and radio selectors

---
 scripts/amazon.js      |  4 ++--
 scripts/checkout.js    | 10 +++++-----
 scripts/utils/money.js |  3 +++
 3 files changed, 10 insertions(+), 7 deletions(-)
 create mode 100644 scripts/utils/money.js

diff --git a/scripts/amazon.js b/scripts/amazon.js
index 8b7241e8..239af24c 100644
--- a/scripts/amazon.js
+++ b/scripts/amazon.js
@@ -1,6 +1,6 @@
 import {cart, addToCart} from '../data/cart.js';
 import {products} from '../data/products.js';
-
+import { formatCurrency } from './utils/money.js';   
 let productsHTML = '';
 products.forEach( (product) => {
   productsHTML += `
@@ -23,7 +23,7 @@ products.forEach( (product) => {
     </div>
 
     <div class="product-price">
-      $${(product.priceCents / 100).toFixed(2)}
+      $${formatCurrency(product.priceCents)}
     </div>
 
     <div class="product-quantity-container">
diff --git a/scripts/checkout.js b/scripts/checkout.js
index ab9de7d2..a13487eb 100644
--- a/scripts/checkout.js
+++ b/scripts/checkout.js
@@ -1,6 +1,6 @@
 import {cart} from '../data/cart.js';
 import {products} from '../data/products.js';
-
+import { formatCurrency } from './utils/money.js';     
 let cartSummaryHTML = '';
 
 cart.forEach((cartItem) => {
@@ -28,7 +28,7 @@ cart.forEach((cartItem) => {
            ${matchingProduct.name}
           </div>
           <div class="product-price">
-            ${(matchingProduct.priceCents/100).toFixed(2)}
+            ${formatCurrency(matchingProduct.priceCents)}
           </div>
           <div class="product-quantity">
             <span>
@@ -50,7 +50,7 @@ cart.forEach((cartItem) => {
           <div class="delivery-option">
             <input type="radio" checked
               class="delivery-option-input"
-              name="delivery-option-1">
+              name="delivery-option-${matchingProduct.id}">
             <div>
               <div class="delivery-option-date">
                 Tuesday, June 21
@@ -63,7 +63,7 @@ cart.forEach((cartItem) => {
           <div class="delivery-option">
             <input type="radio"
               class="delivery-option-input"
-              name="delivery-option-1">
+              name="delivery-option-${matchingProduct.id}">
             <div>
               <div class="delivery-option-date">
                 Wednesday, June 15
@@ -76,7 +76,7 @@ cart.forEach((cartItem) => {
           <div class="delivery-option">
             <input type="radio"
               class="delivery-option-input"
-              name="delivery-option-1">
+              name="delivery-option-${matchingProduct.id}">
             <div>
               <div class="delivery-option-date">
                 Monday, June 13
diff --git a/scripts/utils/money.js b/scripts/utils/money.js
new file mode 100644
index 00000000..dbc49961
--- /dev/null
+++ b/scripts/utils/money.js
@@ -0,0 +1,3 @@
+export function formatCurrency(priceCents){
+  return (priceCents/100).toFixed(2);
+}
\ No newline at end of file

From 70ea68010ad23565f92bf666ebb7db26ba7fe700 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Thu, 10 Apr 2025 21:33:26 +0800
Subject: [PATCH 11/19] enable delivery options

---
 scripts/checkout.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/scripts/checkout.js b/scripts/checkout.js
index a13487eb..799c2035 100644
--- a/scripts/checkout.js
+++ b/scripts/checkout.js
@@ -37,7 +37,7 @@ cart.forEach((cartItem) => {
             <span class="update-quantity-link link-primary">
               Update
             </span>
-            <span class="delete-quantity-link link-primary">
+            <span class="delete-quantity-link link-primary js-delete-link" data-product-id="${matchingProduct.id}">
               Delete
             </span>
           </div>
@@ -93,4 +93,15 @@ cart.forEach((cartItem) => {
 
 });
 
-document.querySelector('.js-order-summary').innerHTML = cartSummaryHTML;
\ No newline at end of file
+document.querySelector('.js-order-summary').innerHTML = cartSummaryHTML;
+ 
+document.querySelectorAll('.js-delete-link').forEach((link) => {
+  link.addEventListener('click', (event) => {
+    // remove products from cart
+    const productId = link.dataset.productId;
+    console.log(productId);
+
+    // remove from html
+  });
+
+})
\ No newline at end of file

From 53cb938b8a3c96d13549a37279db3225cc3497e5 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Thu, 10 Apr 2025 21:52:00 +0800
Subject: [PATCH 12/19] add function to delete item from cart

---
 data/cart.js        | 12 +++++++++++-
 scripts/checkout.js | 19 +++++++++++++------
 2 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/data/cart.js b/data/cart.js
index e547ed95..9c6b7fa8 100644
--- a/data/cart.js
+++ b/data/cart.js
@@ -27,4 +27,14 @@ export function addToCart(productId) {
   }
 }
 
-
+export function removeFromCart(productId) {
+  let matchingItemIndex;
+  cart.forEach((cartItem, index) => {
+    if(productId===cartItem.productId){
+      matchingItemIndex = index;
+    }
+  });
+  if(matchingItemIndex!==undefined){
+    cart.splice(matchingItemIndex, 1);
+  }
+}
diff --git a/scripts/checkout.js b/scripts/checkout.js
index 799c2035..03cb0085 100644
--- a/scripts/checkout.js
+++ b/scripts/checkout.js
@@ -1,4 +1,4 @@
-import {cart} from '../data/cart.js';
+import {cart,removeFromCart} from '../data/cart.js';
 import {products} from '../data/products.js';
 import { formatCurrency } from './utils/money.js';     
 let cartSummaryHTML = '';
@@ -14,7 +14,8 @@ cart.forEach((cartItem) => {
   
   cartSummaryHTML += 
   `
-    <div class="cart-item-container">
+    <div class="cart-item-container
+    js-cart-item-container-${matchingProduct.id}">
       <div class="delivery-date">
         Delivery date: Tuesday, June 21
       </div>
@@ -92,16 +93,22 @@ cart.forEach((cartItem) => {
   `
 
 });
-
+console.log(cart);
 document.querySelector('.js-order-summary').innerHTML = cartSummaryHTML;
  
 document.querySelectorAll('.js-delete-link').forEach((link) => {
   link.addEventListener('click', (event) => {
     // remove products from cart
     const productId = link.dataset.productId;
-    console.log(productId);
+    removeFromCart(productId);
+    // remove from html solution 1
+    // const cartItemContainer = link.closest('.cart-item-container');
+    // cartItemContainer.remove();
+    // remove from html solution 2
+    document.querySelector(`.js-cart-item-container-${productId}`).remove();
 
-    // remove from html
   });
 
-})
\ No newline at end of file
+})
+
+

From e632db574ec6405194233a39d86dece0bb2c7024 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Thu, 10 Apr 2025 22:00:28 +0800
Subject: [PATCH 13/19] save cart in localStorage

---
 data/cart.js | 37 ++++++++++++++++++++-----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/data/cart.js b/data/cart.js
index 9c6b7fa8..2437f726 100644
--- a/data/cart.js
+++ b/data/cart.js
@@ -1,14 +1,8 @@
-export const cart = [
-  {
-    productId:"e43638ce-6aa0-4b85-b27f-e1d07eb678c6",
-    quantity:2,
-  },
-  {
-    productId:"15b6fc6f-327a-4ec4-896f-486349e85a3d",
-    quantity:1,
-  }
+export let cart = localStorage.getItem('cart') ? JSON.parse(localStorage.getItem('cart')) : [];
 
-];
+function saveToLocalStorage() {
+  localStorage.setItem('cart', JSON.stringify(cart));
+}
 
 export function addToCart(productId) {
   let matchingItem;
@@ -25,16 +19,25 @@ export function addToCart(productId) {
     quantity: 1,
   });
   }
+  saveToLocalStorage();
 }
 
 export function removeFromCart(productId) {
-  let matchingItemIndex;
-  cart.forEach((cartItem, index) => {
-    if(productId===cartItem.productId){
-      matchingItemIndex = index;
+  const newCart = [];
+  cart.forEach((cartItem) => {
+    if(productId!==cartItem.productId){
+      newCart.push(cartItem);
     }
   });
-  if(matchingItemIndex!==undefined){
-    cart.splice(matchingItemIndex, 1);
-  }
+  cart = newCart;
+  saveToLocalStorage();
+  // let matchingItemIndex;
+  // cart.forEach((cartItem, index) => {
+  //   if(productId===cartItem.productId){
+  //     matchingItemIndex = index;
+  //   }
+  // });
+  // if(matchingItemIndex!==undefined){
+  //   cart.splice(matchingItemIndex, 1);
+  // }
 }

From b8fd007057767f440ab68bd93da7613c7702989e Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Fri, 11 Apr 2025 00:24:41 +0800
Subject: [PATCH 14/19] Enable realtime deliveryOptions

---
 data/cart.js            |  1 +
 data/deliveryOptions.js | 18 ++++++++
 scripts/checkout.js     | 93 ++++++++++++++++++++++-------------------
 3 files changed, 70 insertions(+), 42 deletions(-)
 create mode 100644 data/deliveryOptions.js

diff --git a/data/cart.js b/data/cart.js
index 2437f726..0d48f3e2 100644
--- a/data/cart.js
+++ b/data/cart.js
@@ -17,6 +17,7 @@ export function addToCart(productId) {
     cart.push({
     productId: productId,
     quantity: 1,
+    deliveryOptionId: '1',
   });
   }
   saveToLocalStorage();
diff --git a/data/deliveryOptions.js b/data/deliveryOptions.js
new file mode 100644
index 00000000..33eda6f9
--- /dev/null
+++ b/data/deliveryOptions.js
@@ -0,0 +1,18 @@
+export const deliveryOptions = [
+  {
+    id:'1',
+    deliveryDays:7,
+    priceCents:0,
+  },
+  {
+    id:'2',
+    deliveryDays:3,
+    priceCents:499,
+  },
+  {
+    id:'3',
+    deliveryDays:1,
+    priceCents:999,
+  },
+
+];
\ No newline at end of file
diff --git a/scripts/checkout.js b/scripts/checkout.js
index 03cb0085..e613b67c 100644
--- a/scripts/checkout.js
+++ b/scripts/checkout.js
@@ -1,7 +1,17 @@
 import {cart,removeFromCart} from '../data/cart.js';
 import {products} from '../data/products.js';
-import { formatCurrency } from './utils/money.js';     
+import { formatCurrency } from './utils/money.js';   
+import dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js';  
+import {deliveryOptions} from '../data/deliveryOptions.js';
+
+
 let cartSummaryHTML = '';
+// Extend dayjs with plugins
+
+const today = dayjs();
+// const deliveryDate = today.add(3, 'day').format('dddd, MMMM D');
+// const deliveryDate2 = today.add(7, 'day').format('dddd, MMMM D');
+// const deliveryDate3 = today.add(10, 'day').format('dddd, MMMM D');
 
 cart.forEach((cartItem) => {
   const productId = cartItem.productId;
@@ -17,7 +27,7 @@ cart.forEach((cartItem) => {
     <div class="cart-item-container
     js-cart-item-container-${matchingProduct.id}">
       <div class="delivery-date">
-        Delivery date: Tuesday, June 21
+        <span class="delivery-date-value">${today.format('dddd, MMMM D, HH:mm:ss')}</span>
       </div>
 
       <div class="cart-item-details-grid">
@@ -48,52 +58,43 @@ cart.forEach((cartItem) => {
           <div class="delivery-options-title">
             Choose a delivery option:
           </div>
-          <div class="delivery-option">
-            <input type="radio" checked
-              class="delivery-option-input"
-              name="delivery-option-${matchingProduct.id}">
-            <div>
-              <div class="delivery-option-date">
-                Tuesday, June 21
-              </div>
-              <div class="delivery-option-price">
-                FREE Shipping
-              </div>
-            </div>
-          </div>
-          <div class="delivery-option">
-            <input type="radio"
-              class="delivery-option-input"
-              name="delivery-option-${matchingProduct.id}">
-            <div>
-              <div class="delivery-option-date">
-                Wednesday, June 15
-              </div>
-              <div class="delivery-option-price">
-                $4.99 - Shipping
-              </div>
-            </div>
-          </div>
-          <div class="delivery-option">
-            <input type="radio"
-              class="delivery-option-input"
-              name="delivery-option-${matchingProduct.id}">
-            <div>
-              <div class="delivery-option-date">
-                Monday, June 13
-              </div>
-              <div class="delivery-option-price">
-                $9.99 - Shipping
-              </div>
-            </div>
-          </div>
+          ${deliveryOptionsHTML(matchingProduct)}
+
         </div>
       </div>
     </div>
   `
 
 });
-console.log(cart);
+
+function deliveryOptionsHTML(matchingProduct){ 
+  let deliveryOptionsHTML = '';
+
+  deliveryOptions.forEach((deliveryOption) => {
+
+    const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
+    const priceString = deliveryOption.priceCents === 0 ? 'FREE' : `$${formatCurrency(deliveryOption.priceCents)}`;
+    deliveryOptionsHTML += 
+    `
+      <div class="delivery-option">
+        <input type="radio" 
+          class="delivery-option-input"
+          name="delivery-option-${matchingProduct.id}">
+        <div>
+          <div class="delivery-option-date">
+            ${deliveryDateString}
+          </div>
+          <div class="delivery-option-price">
+            ${priceString} - Shipping
+          </div>
+        </div>
+      </div>
+    `
+  });
+  return deliveryOptionsHTML;
+}
+
+
 document.querySelector('.js-order-summary').innerHTML = cartSummaryHTML;
  
 document.querySelectorAll('.js-delete-link').forEach((link) => {
@@ -112,3 +113,11 @@ document.querySelectorAll('.js-delete-link').forEach((link) => {
 })
 
 
+function updateDeliveryTime() {
+  const deliveryDateElements = document.querySelectorAll('.delivery-date-value');
+  deliveryDateElements.forEach((element) => {
+    element.textContent = dayjs().format('dddd, MMMM D, HH:mm:ss');
+  });
+}
+// Call updateDeliveryTime every second
+setInterval(updateDeliveryTime, 1000);
\ No newline at end of file

From 744b7bde4af80828d6c8485e222c126b9b41988c Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Fri, 11 Apr 2025 22:53:46 +0800
Subject: [PATCH 15/19] Enable choose delivery option

---
 data/cart.js                       | 14 +++++++++++
 scripts/checkout.js                | 38 ++++++++++++++++++++++++------
 styles/pages/checkout/checkout.css |  8 +++++++
 3 files changed, 53 insertions(+), 7 deletions(-)

diff --git a/data/cart.js b/data/cart.js
index 0d48f3e2..d694d48e 100644
--- a/data/cart.js
+++ b/data/cart.js
@@ -42,3 +42,17 @@ export function removeFromCart(productId) {
   //   cart.splice(matchingItemIndex, 1);
   // }
 }
+
+
+export function updateDeliveryOption(productId,deliveryOptionId) {
+  let matchingItem;
+  cart.forEach((cartItem) => {
+    if(productId===cartItem.productId){
+      cartItem.deliveryOptionId = deliveryOptionId;
+      matchingItem = cartItem;
+      matchingItem.deliveryOptionId = deliveryOptionId;
+    }
+  });
+
+  saveToLocalStorage();
+}
diff --git a/scripts/checkout.js b/scripts/checkout.js
index e613b67c..d716a19e 100644
--- a/scripts/checkout.js
+++ b/scripts/checkout.js
@@ -1,4 +1,4 @@
-import {cart,removeFromCart} from '../data/cart.js';
+import {cart,removeFromCart, updateDeliveryOption} from '../data/cart.js';
 import {products} from '../data/products.js';
 import { formatCurrency } from './utils/money.js';   
 import dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js';  
@@ -22,12 +22,24 @@ cart.forEach((cartItem) => {
     }
   });
   
+  const deliveryOptionId = cartItem.deliveryOptionId;
+  let deliveryOption;
+  deliveryOptions.forEach((option) => {
+    if(option.id === deliveryOptionId){
+      deliveryOption = option;
+    }
+  }); 
+  const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
+
   cartSummaryHTML += 
   `
     <div class="cart-item-container
     js-cart-item-container-${matchingProduct.id}">
+      <div class="time-now js-time-now">
+        <span class="time-now-value">Time now:${today.format('dddd, MMMM D, HH:mm:ss')}</span>
+      </div>
       <div class="delivery-date">
-        <span class="delivery-date-value">${today.format('dddd, MMMM D, HH:mm:ss')}</span>
+        <span class="delivery-date-value">Delivery Date: ${deliveryDateString}</span>
       </div>
 
       <div class="cart-item-details-grid">
@@ -58,7 +70,7 @@ cart.forEach((cartItem) => {
           <div class="delivery-options-title">
             Choose a delivery option:
           </div>
-          ${deliveryOptionsHTML(matchingProduct)}
+          ${deliveryOptionsHTML(matchingProduct, cartItem)}
 
         </div>
       </div>
@@ -67,17 +79,21 @@ cart.forEach((cartItem) => {
 
 });
 
-function deliveryOptionsHTML(matchingProduct){ 
+function deliveryOptionsHTML(matchingProduct, cartItem){ 
   let deliveryOptionsHTML = '';
 
   deliveryOptions.forEach((deliveryOption) => {
 
     const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
     const priceString = deliveryOption.priceCents === 0 ? 'FREE' : `$${formatCurrency(deliveryOption.priceCents)}`;
+    const isChecked = deliveryOption.id === cartItem.deliveryOptionId;
     deliveryOptionsHTML += 
     `
-      <div class="delivery-option">
+      <div class="delivery-option js-delivery-option"
+        data-product-id="${matchingProduct.id}"
+        data-delivery-option-id="${deliveryOption.id}">
         <input type="radio" 
+          ${isChecked ? 'checked' : ''}
           class="delivery-option-input"
           name="delivery-option-${matchingProduct.id}">
         <div>
@@ -112,11 +128,19 @@ document.querySelectorAll('.js-delete-link').forEach((link) => {
 
 })
 
+document.querySelectorAll('.js-delivery-option').forEach((element) => {
+  element.addEventListener('click', () => {
+    const {productId, deliveryOptionId} = element.dataset;
+    updateDeliveryOption(productId, deliveryOptionId)
+    location.reload();
+  });
+});
+
 
 function updateDeliveryTime() {
-  const deliveryDateElements = document.querySelectorAll('.delivery-date-value');
+  const deliveryDateElements = document.querySelectorAll('.js-time-now');
   deliveryDateElements.forEach((element) => {
-    element.textContent = dayjs().format('dddd, MMMM D, HH:mm:ss');
+    element.textContent = "Time now: "+dayjs().format('dddd, MMMM D, HH:mm:ss');
   });
 }
 // Call updateDeliveryTime every second
diff --git a/styles/pages/checkout/checkout.css b/styles/pages/checkout/checkout.css
index 764bfa58..36a75b1e 100644
--- a/styles/pages/checkout/checkout.css
+++ b/styles/pages/checkout/checkout.css
@@ -209,3 +209,11 @@
   margin-top: 11px;
   margin-bottom: 15px;
 }
+
+.time-now {
+  color: rgb(0, 91, 118);
+  font-weight: 700;
+  font-size: 19px;
+  margin-top: 5px;
+  margin-bottom: 22px;
+}
\ No newline at end of file

From 206f9a1c05f0f3644537e055db6d83b6eb54cd13 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Fri, 11 Apr 2025 23:00:59 +0800
Subject: [PATCH 16/19] add renderOrderSummary()

---
 scripts/checkout.js | 248 +++++++++++++++++++++++---------------------
 1 file changed, 127 insertions(+), 121 deletions(-)

diff --git a/scripts/checkout.js b/scripts/checkout.js
index d716a19e..bfade82d 100644
--- a/scripts/checkout.js
+++ b/scripts/checkout.js
@@ -5,143 +5,149 @@ import dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js';
 import {deliveryOptions} from '../data/deliveryOptions.js';
 
 
-let cartSummaryHTML = '';
-// Extend dayjs with plugins
-
-const today = dayjs();
-// const deliveryDate = today.add(3, 'day').format('dddd, MMMM D');
-// const deliveryDate2 = today.add(7, 'day').format('dddd, MMMM D');
-// const deliveryDate3 = today.add(10, 'day').format('dddd, MMMM D');
-
-cart.forEach((cartItem) => {
-  const productId = cartItem.productId;
-  let matchingProduct;
-  products.forEach((product) => {
-    if(product.id === productId){
-      matchingProduct = product;
-    }
-  });
-  
-  const deliveryOptionId = cartItem.deliveryOptionId;
-  let deliveryOption;
-  deliveryOptions.forEach((option) => {
-    if(option.id === deliveryOptionId){
-      deliveryOption = option;
-    }
-  }); 
-  const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
-
-  cartSummaryHTML += 
-  `
-    <div class="cart-item-container
-    js-cart-item-container-${matchingProduct.id}">
-      <div class="time-now js-time-now">
-        <span class="time-now-value">Time now:${today.format('dddd, MMMM D, HH:mm:ss')}</span>
-      </div>
-      <div class="delivery-date">
-        <span class="delivery-date-value">Delivery Date: ${deliveryDateString}</span>
-      </div>
-
-      <div class="cart-item-details-grid">
-        <img class="product-image"
-          src="${matchingProduct.image}">
+function renderOrderSummary(){
+
+  let cartSummaryHTML = '';
+  // Extend dayjs with plugins
+
+  const today = dayjs();
+  // const deliveryDate = today.add(3, 'day').format('dddd, MMMM D');
+  // const deliveryDate2 = today.add(7, 'day').format('dddd, MMMM D');
+  // const deliveryDate3 = today.add(10, 'day').format('dddd, MMMM D');
+
+  cart.forEach((cartItem) => {
+    const productId = cartItem.productId;
+    let matchingProduct;
+    products.forEach((product) => {
+      if(product.id === productId){
+        matchingProduct = product;
+      }
+    });
+    
+    const deliveryOptionId = cartItem.deliveryOptionId;
+    let deliveryOption;
+    deliveryOptions.forEach((option) => {
+      if(option.id === deliveryOptionId){
+        deliveryOption = option;
+      }
+    }); 
+    const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
 
-        <div class="cart-item-details">
-          <div class="product-name">
-           ${matchingProduct.name}
-          </div>
-          <div class="product-price">
-            ${formatCurrency(matchingProduct.priceCents)}
-          </div>
-          <div class="product-quantity">
-            <span>
-              Quantity: <span class="quantity-label">${cartItem.quantity}</span>
-            </span>
-            <span class="update-quantity-link link-primary">
-              Update
-            </span>
-            <span class="delete-quantity-link link-primary js-delete-link" data-product-id="${matchingProduct.id}">
-              Delete
-            </span>
-          </div>
+    cartSummaryHTML += 
+    `
+      <div class="cart-item-container
+      js-cart-item-container-${matchingProduct.id}">
+        <div class="time-now js-time-now">
+          <span class="time-now-value">Time now:${today.format('dddd, MMMM D, HH:mm:ss')}</span>
         </div>
-
-        <div class="delivery-options">
-          <div class="delivery-options-title">
-            Choose a delivery option:
-          </div>
-          ${deliveryOptionsHTML(matchingProduct, cartItem)}
-
+        <div class="delivery-date">
+          <span class="delivery-date-value">Delivery Date: ${deliveryDateString}</span>
         </div>
-      </div>
-    </div>
-  `
 
-});
-
-function deliveryOptionsHTML(matchingProduct, cartItem){ 
-  let deliveryOptionsHTML = '';
+        <div class="cart-item-details-grid">
+          <img class="product-image"
+            src="${matchingProduct.image}">
+
+          <div class="cart-item-details">
+            <div class="product-name">
+            ${matchingProduct.name}
+            </div>
+            <div class="product-price">
+              ${formatCurrency(matchingProduct.priceCents)}
+            </div>
+            <div class="product-quantity">
+              <span>
+                Quantity: <span class="quantity-label">${cartItem.quantity}</span>
+              </span>
+              <span class="update-quantity-link link-primary">
+                Update
+              </span>
+              <span class="delete-quantity-link link-primary js-delete-link" data-product-id="${matchingProduct.id}">
+                Delete
+              </span>
+            </div>
+          </div>
 
-  deliveryOptions.forEach((deliveryOption) => {
+          <div class="delivery-options">
+            <div class="delivery-options-title">
+              Choose a delivery option:
+            </div>
+            ${deliveryOptionsHTML(matchingProduct, cartItem)}
 
-    const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
-    const priceString = deliveryOption.priceCents === 0 ? 'FREE' : `$${formatCurrency(deliveryOption.priceCents)}`;
-    const isChecked = deliveryOption.id === cartItem.deliveryOptionId;
-    deliveryOptionsHTML += 
-    `
-      <div class="delivery-option js-delivery-option"
-        data-product-id="${matchingProduct.id}"
-        data-delivery-option-id="${deliveryOption.id}">
-        <input type="radio" 
-          ${isChecked ? 'checked' : ''}
-          class="delivery-option-input"
-          name="delivery-option-${matchingProduct.id}">
-        <div>
-          <div class="delivery-option-date">
-            ${deliveryDateString}
-          </div>
-          <div class="delivery-option-price">
-            ${priceString} - Shipping
           </div>
         </div>
       </div>
     `
+
   });
-  return deliveryOptionsHTML;
-}
 
+  function deliveryOptionsHTML(matchingProduct, cartItem){ 
+    let deliveryOptionsHTML = '';
+
+    deliveryOptions.forEach((deliveryOption) => {
+
+      const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
+      const priceString = deliveryOption.priceCents === 0 ? 'FREE' : `$${formatCurrency(deliveryOption.priceCents)}`;
+      const isChecked = deliveryOption.id === cartItem.deliveryOptionId;
+      deliveryOptionsHTML += 
+      `
+        <div class="delivery-option js-delivery-option"
+          data-product-id="${matchingProduct.id}"
+          data-delivery-option-id="${deliveryOption.id}">
+          <input type="radio" 
+            ${isChecked ? 'checked' : ''}
+            class="delivery-option-input"
+            name="delivery-option-${matchingProduct.id}">
+          <div>
+            <div class="delivery-option-date">
+              ${deliveryDateString}
+            </div>
+            <div class="delivery-option-price">
+              ${priceString} - Shipping
+            </div>
+          </div>
+        </div>
+      `
+    });
+    return deliveryOptionsHTML;
+  }
 
-document.querySelector('.js-order-summary').innerHTML = cartSummaryHTML;
- 
-document.querySelectorAll('.js-delete-link').forEach((link) => {
-  link.addEventListener('click', (event) => {
-    // remove products from cart
-    const productId = link.dataset.productId;
-    removeFromCart(productId);
-    // remove from html solution 1
-    // const cartItemContainer = link.closest('.cart-item-container');
-    // cartItemContainer.remove();
-    // remove from html solution 2
-    document.querySelector(`.js-cart-item-container-${productId}`).remove();
 
+  document.querySelector('.js-order-summary').innerHTML = cartSummaryHTML;
+  
+  document.querySelectorAll('.js-delete-link').forEach((link) => {
+    link.addEventListener('click', (event) => {
+      // remove products from cart
+      const productId = link.dataset.productId;
+      removeFromCart(productId);
+      // remove from html solution 1
+      // const cartItemContainer = link.closest('.cart-item-container');
+      // cartItemContainer.remove();
+      // remove from html solution 2
+      document.querySelector(`.js-cart-item-container-${productId}`).remove();
+
+    });
+
+  })
+
+  document.querySelectorAll('.js-delivery-option').forEach((element) => {
+    element.addEventListener('click', () => {
+      const {productId, deliveryOptionId} = element.dataset;
+      updateDeliveryOption(productId, deliveryOptionId)
+      renderOrderSummary();
+    });
   });
 
-})
 
-document.querySelectorAll('.js-delivery-option').forEach((element) => {
-  element.addEventListener('click', () => {
-    const {productId, deliveryOptionId} = element.dataset;
-    updateDeliveryOption(productId, deliveryOptionId)
-    location.reload();
-  });
-});
+  function updateDeliveryTime() {
+    const deliveryDateElements = document.querySelectorAll('.js-time-now');
+    deliveryDateElements.forEach((element) => {
+      element.textContent = "Time now: "+dayjs().format('dddd, MMMM D, HH:mm:ss');
+    });
+  }
+  // Call updateDeliveryTime every second
+  setInterval(updateDeliveryTime, 1000);
 
-
-function updateDeliveryTime() {
-  const deliveryDateElements = document.querySelectorAll('.js-time-now');
-  deliveryDateElements.forEach((element) => {
-    element.textContent = "Time now: "+dayjs().format('dddd, MMMM D, HH:mm:ss');
-  });
 }
-// Call updateDeliveryTime every second
-setInterval(updateDeliveryTime, 1000);
\ No newline at end of file
+
+renderOrderSummary();
\ No newline at end of file

From 7dbb6036c74e2649680d3ea2be47f40098567a30 Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Fri, 11 Apr 2025 23:10:58 +0800
Subject: [PATCH 17/19] refactor

---
 scripts/checkout.js                | 152 +----------------------------
 scripts/checkout/orderSummary.js   | 151 ++++++++++++++++++++++++++++
 scripts/checkout/paymentSummary.js |   0
 3 files changed, 152 insertions(+), 151 deletions(-)
 create mode 100644 scripts/checkout/orderSummary.js
 create mode 100644 scripts/checkout/paymentSummary.js

diff --git a/scripts/checkout.js b/scripts/checkout.js
index bfade82d..9b46545f 100644
--- a/scripts/checkout.js
+++ b/scripts/checkout.js
@@ -1,153 +1,3 @@
-import {cart,removeFromCart, updateDeliveryOption} from '../data/cart.js';
-import {products} from '../data/products.js';
-import { formatCurrency } from './utils/money.js';   
-import dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js';  
-import {deliveryOptions} from '../data/deliveryOptions.js';
-
-
-function renderOrderSummary(){
-
-  let cartSummaryHTML = '';
-  // Extend dayjs with plugins
-
-  const today = dayjs();
-  // const deliveryDate = today.add(3, 'day').format('dddd, MMMM D');
-  // const deliveryDate2 = today.add(7, 'day').format('dddd, MMMM D');
-  // const deliveryDate3 = today.add(10, 'day').format('dddd, MMMM D');
-
-  cart.forEach((cartItem) => {
-    const productId = cartItem.productId;
-    let matchingProduct;
-    products.forEach((product) => {
-      if(product.id === productId){
-        matchingProduct = product;
-      }
-    });
-    
-    const deliveryOptionId = cartItem.deliveryOptionId;
-    let deliveryOption;
-    deliveryOptions.forEach((option) => {
-      if(option.id === deliveryOptionId){
-        deliveryOption = option;
-      }
-    }); 
-    const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
-
-    cartSummaryHTML += 
-    `
-      <div class="cart-item-container
-      js-cart-item-container-${matchingProduct.id}">
-        <div class="time-now js-time-now">
-          <span class="time-now-value">Time now:${today.format('dddd, MMMM D, HH:mm:ss')}</span>
-        </div>
-        <div class="delivery-date">
-          <span class="delivery-date-value">Delivery Date: ${deliveryDateString}</span>
-        </div>
-
-        <div class="cart-item-details-grid">
-          <img class="product-image"
-            src="${matchingProduct.image}">
-
-          <div class="cart-item-details">
-            <div class="product-name">
-            ${matchingProduct.name}
-            </div>
-            <div class="product-price">
-              ${formatCurrency(matchingProduct.priceCents)}
-            </div>
-            <div class="product-quantity">
-              <span>
-                Quantity: <span class="quantity-label">${cartItem.quantity}</span>
-              </span>
-              <span class="update-quantity-link link-primary">
-                Update
-              </span>
-              <span class="delete-quantity-link link-primary js-delete-link" data-product-id="${matchingProduct.id}">
-                Delete
-              </span>
-            </div>
-          </div>
-
-          <div class="delivery-options">
-            <div class="delivery-options-title">
-              Choose a delivery option:
-            </div>
-            ${deliveryOptionsHTML(matchingProduct, cartItem)}
-
-          </div>
-        </div>
-      </div>
-    `
-
-  });
-
-  function deliveryOptionsHTML(matchingProduct, cartItem){ 
-    let deliveryOptionsHTML = '';
-
-    deliveryOptions.forEach((deliveryOption) => {
-
-      const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
-      const priceString = deliveryOption.priceCents === 0 ? 'FREE' : `$${formatCurrency(deliveryOption.priceCents)}`;
-      const isChecked = deliveryOption.id === cartItem.deliveryOptionId;
-      deliveryOptionsHTML += 
-      `
-        <div class="delivery-option js-delivery-option"
-          data-product-id="${matchingProduct.id}"
-          data-delivery-option-id="${deliveryOption.id}">
-          <input type="radio" 
-            ${isChecked ? 'checked' : ''}
-            class="delivery-option-input"
-            name="delivery-option-${matchingProduct.id}">
-          <div>
-            <div class="delivery-option-date">
-              ${deliveryDateString}
-            </div>
-            <div class="delivery-option-price">
-              ${priceString} - Shipping
-            </div>
-          </div>
-        </div>
-      `
-    });
-    return deliveryOptionsHTML;
-  }
-
-
-  document.querySelector('.js-order-summary').innerHTML = cartSummaryHTML;
-  
-  document.querySelectorAll('.js-delete-link').forEach((link) => {
-    link.addEventListener('click', (event) => {
-      // remove products from cart
-      const productId = link.dataset.productId;
-      removeFromCart(productId);
-      // remove from html solution 1
-      // const cartItemContainer = link.closest('.cart-item-container');
-      // cartItemContainer.remove();
-      // remove from html solution 2
-      document.querySelector(`.js-cart-item-container-${productId}`).remove();
-
-    });
-
-  })
-
-  document.querySelectorAll('.js-delivery-option').forEach((element) => {
-    element.addEventListener('click', () => {
-      const {productId, deliveryOptionId} = element.dataset;
-      updateDeliveryOption(productId, deliveryOptionId)
-      renderOrderSummary();
-    });
-  });
-
-
-  function updateDeliveryTime() {
-    const deliveryDateElements = document.querySelectorAll('.js-time-now');
-    deliveryDateElements.forEach((element) => {
-      element.textContent = "Time now: "+dayjs().format('dddd, MMMM D, HH:mm:ss');
-    });
-  }
-  // Call updateDeliveryTime every second
-  setInterval(updateDeliveryTime, 1000);
-
-}
+import { renderOrderSummary } from "./checkout/orderSummary.js"; 
 
 renderOrderSummary();
\ No newline at end of file
diff --git a/scripts/checkout/orderSummary.js b/scripts/checkout/orderSummary.js
new file mode 100644
index 00000000..7cfeaae2
--- /dev/null
+++ b/scripts/checkout/orderSummary.js
@@ -0,0 +1,151 @@
+import {cart,removeFromCart, updateDeliveryOption} from '../../data/cart.js';
+import {products} from '../../data/products.js';
+import { formatCurrency } from '../utils/money.js';   
+import dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js';  
+import {deliveryOptions} from '../../data/deliveryOptions.js';
+
+
+export function renderOrderSummary(){
+
+  let cartSummaryHTML = '';
+  // Extend dayjs with plugins
+
+  const today = dayjs();
+  // const deliveryDate = today.add(3, 'day').format('dddd, MMMM D');
+  // const deliveryDate2 = today.add(7, 'day').format('dddd, MMMM D');
+  // const deliveryDate3 = today.add(10, 'day').format('dddd, MMMM D');
+
+  cart.forEach((cartItem) => {
+    const productId = cartItem.productId;
+    let matchingProduct;
+    products.forEach((product) => {
+      if(product.id === productId){
+        matchingProduct = product;
+      }
+    });
+    
+    const deliveryOptionId = cartItem.deliveryOptionId;
+    let deliveryOption;
+    deliveryOptions.forEach((option) => {
+      if(option.id === deliveryOptionId){
+        deliveryOption = option;
+      }
+    }); 
+    const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
+
+    cartSummaryHTML += 
+    `
+      <div class="cart-item-container
+      js-cart-item-container-${matchingProduct.id}">
+        <div class="time-now js-time-now">
+          <span class="time-now-value">Time now:${today.format('dddd, MMMM D, HH:mm:ss')}</span>
+        </div>
+        <div class="delivery-date">
+          <span class="delivery-date-value">Delivery Date: ${deliveryDateString}</span>
+        </div>
+
+        <div class="cart-item-details-grid">
+          <img class="product-image"
+            src="${matchingProduct.image}">
+
+          <div class="cart-item-details">
+            <div class="product-name">
+            ${matchingProduct.name}
+            </div>
+            <div class="product-price">
+              ${formatCurrency(matchingProduct.priceCents)}
+            </div>
+            <div class="product-quantity">
+              <span>
+                Quantity: <span class="quantity-label">${cartItem.quantity}</span>
+              </span>
+              <span class="update-quantity-link link-primary">
+                Update
+              </span>
+              <span class="delete-quantity-link link-primary js-delete-link" data-product-id="${matchingProduct.id}">
+                Delete
+              </span>
+            </div>
+          </div>
+
+          <div class="delivery-options">
+            <div class="delivery-options-title">
+              Choose a delivery option:
+            </div>
+            ${deliveryOptionsHTML(matchingProduct, cartItem)}
+
+          </div>
+        </div>
+      </div>
+    `
+
+  });
+
+  function deliveryOptionsHTML(matchingProduct, cartItem){ 
+    let deliveryOptionsHTML = '';
+
+    deliveryOptions.forEach((deliveryOption) => {
+
+      const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
+      const priceString = deliveryOption.priceCents === 0 ? 'FREE' : `$${formatCurrency(deliveryOption.priceCents)}`;
+      const isChecked = deliveryOption.id === cartItem.deliveryOptionId;
+      deliveryOptionsHTML += 
+      `
+        <div class="delivery-option js-delivery-option"
+          data-product-id="${matchingProduct.id}"
+          data-delivery-option-id="${deliveryOption.id}">
+          <input type="radio" 
+            ${isChecked ? 'checked' : ''}
+            class="delivery-option-input"
+            name="delivery-option-${matchingProduct.id}">
+          <div>
+            <div class="delivery-option-date">
+              ${deliveryDateString}
+            </div>
+            <div class="delivery-option-price">
+              ${priceString} - Shipping
+            </div>
+          </div>
+        </div>
+      `
+    });
+    return deliveryOptionsHTML;
+  }
+
+
+  document.querySelector('.js-order-summary').innerHTML = cartSummaryHTML;
+  
+  document.querySelectorAll('.js-delete-link').forEach((link) => {
+    link.addEventListener('click', (event) => {
+      // remove products from cart
+      const productId = link.dataset.productId;
+      removeFromCart(productId);
+      // remove from html solution 1
+      // const cartItemContainer = link.closest('.cart-item-container');
+      // cartItemContainer.remove();
+      // remove from html solution 2
+      document.querySelector(`.js-cart-item-container-${productId}`).remove();
+
+    });
+
+  })
+
+  document.querySelectorAll('.js-delivery-option').forEach((element) => {
+    element.addEventListener('click', () => {
+      const {productId, deliveryOptionId} = element.dataset;
+      updateDeliveryOption(productId, deliveryOptionId)
+      renderOrderSummary();
+    });
+  });
+
+
+  function updateDeliveryTime() {
+    const deliveryDateElements = document.querySelectorAll('.js-time-now');
+    deliveryDateElements.forEach((element) => {
+      element.textContent = "Time now: "+dayjs().format('dddd, MMMM D, HH:mm:ss');
+    });
+  }
+  // Call updateDeliveryTime every second
+  setInterval(updateDeliveryTime, 1000);
+
+}
\ No newline at end of file
diff --git a/scripts/checkout/paymentSummary.js b/scripts/checkout/paymentSummary.js
new file mode 100644
index 00000000..e69de29b

From 0e9cdf63f9d179f1f8676297353483380caafe7c Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Fri, 11 Apr 2025 23:44:30 +0800
Subject: [PATCH 18/19] Save data and generate HTML for payment summary

---
 checkout.html                      | 34 +--------------
 data/cart.js                       |  4 --
 data/deliveryOptions.js            | 12 +++++-
 data/products.js                   | 11 +++++
 scripts/checkout.js                |  5 ++-
 scripts/checkout/orderSummary.js   | 23 ++++------
 scripts/checkout/paymentSummary.js | 69 ++++++++++++++++++++++++++++++
 scripts/utils/money.js             |  2 +-
 8 files changed, 105 insertions(+), 55 deletions(-)

diff --git a/checkout.html b/checkout.html
index e3aa80fe..b17bb697 100644
--- a/checkout.html
+++ b/checkout.html
@@ -47,39 +47,7 @@
 
         </div>
 
-        <div class="payment-summary">
-          <div class="payment-summary-title">
-            Order Summary
-          </div>
-
-          <div class="payment-summary-row">
-            <div>Items (3):</div>
-            <div class="payment-summary-money">$42.75</div>
-          </div>
-
-          <div class="payment-summary-row">
-            <div>Shipping &amp; handling:</div>
-            <div class="payment-summary-money">$4.99</div>
-          </div>
-
-          <div class="payment-summary-row subtotal-row">
-            <div>Total before tax:</div>
-            <div class="payment-summary-money">$47.74</div>
-          </div>
-
-          <div class="payment-summary-row">
-            <div>Estimated tax (10%):</div>
-            <div class="payment-summary-money">$4.77</div>
-          </div>
-
-          <div class="payment-summary-row total-row">
-            <div>Order total:</div>
-            <div class="payment-summary-money">$52.51</div>
-          </div>
-
-          <button class="place-order-button button-primary">
-            Place your order
-          </button>
+        <div class="payment-summary js-payment-summary">
         </div>
       </div>
     </div>
diff --git a/data/cart.js b/data/cart.js
index d694d48e..ebc6ea39 100644
--- a/data/cart.js
+++ b/data/cart.js
@@ -45,14 +45,10 @@ export function removeFromCart(productId) {
 
 
 export function updateDeliveryOption(productId,deliveryOptionId) {
-  let matchingItem;
   cart.forEach((cartItem) => {
     if(productId===cartItem.productId){
       cartItem.deliveryOptionId = deliveryOptionId;
-      matchingItem = cartItem;
-      matchingItem.deliveryOptionId = deliveryOptionId;
     }
   });
-
   saveToLocalStorage();
 }
diff --git a/data/deliveryOptions.js b/data/deliveryOptions.js
index 33eda6f9..95e6e5c8 100644
--- a/data/deliveryOptions.js
+++ b/data/deliveryOptions.js
@@ -15,4 +15,14 @@ export const deliveryOptions = [
     priceCents:999,
   },
 
-];
\ No newline at end of file
+];
+
+export function getDeliveryOption(deliveryOptionId) {
+  let deliveryOption;
+  deliveryOptions.forEach((option) => {
+    if(option.id === deliveryOptionId){
+      deliveryOption = option;
+    }
+  }); 
+  return deliveryOption || deliveryOption[0];
+}
\ No newline at end of file
diff --git a/data/products.js b/data/products.js
index 7f577e0a..a74c6daa 100644
--- a/data/products.js
+++ b/data/products.js
@@ -1,3 +1,14 @@
+export function getProduct(productId){
+  let matchingProduct;
+  products.forEach((product) => {
+    if(product.id === productId){
+      matchingProduct = product;
+    }
+  });
+  return matchingProduct;
+}
+
+
 export const products = [
   {
     id: "e43638ce-6aa0-4b85-b27f-e1d07eb678c6",
diff --git a/scripts/checkout.js b/scripts/checkout.js
index 9b46545f..7006f66f 100644
--- a/scripts/checkout.js
+++ b/scripts/checkout.js
@@ -1,3 +1,4 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js"; 
-
-renderOrderSummary();
\ No newline at end of file
+import { renderPaymentSummary } from "./checkout/paymentSummary.js";
+renderOrderSummary();
+renderPaymentSummary();
\ No newline at end of file
diff --git a/scripts/checkout/orderSummary.js b/scripts/checkout/orderSummary.js
index 7cfeaae2..9a603a34 100644
--- a/scripts/checkout/orderSummary.js
+++ b/scripts/checkout/orderSummary.js
@@ -1,8 +1,9 @@
 import {cart,removeFromCart, updateDeliveryOption} from '../../data/cart.js';
-import {products} from '../../data/products.js';
+import {getProduct} from '../../data/products.js';
 import { formatCurrency } from '../utils/money.js';   
 import dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js';  
-import {deliveryOptions} from '../../data/deliveryOptions.js';
+import {deliveryOptions, getDeliveryOption} from '../../data/deliveryOptions.js';
+import { renderPaymentSummary } from './paymentSummary.js';
 
 
 export function renderOrderSummary(){
@@ -17,20 +18,13 @@ export function renderOrderSummary(){
 
   cart.forEach((cartItem) => {
     const productId = cartItem.productId;
-    let matchingProduct;
-    products.forEach((product) => {
-      if(product.id === productId){
-        matchingProduct = product;
-      }
-    });
+    const matchingProduct = getProduct(productId);
+
     
     const deliveryOptionId = cartItem.deliveryOptionId;
-    let deliveryOption;
-    deliveryOptions.forEach((option) => {
-      if(option.id === deliveryOptionId){
-        deliveryOption = option;
-      }
-    }); 
+
+    const deliveryOption = getDeliveryOption(deliveryOptionId);
+
     const deliveryDateString = today.add(deliveryOption.deliveryDays, 'days').format('dddd, MMMM D');
 
     cartSummaryHTML += 
@@ -135,6 +129,7 @@ export function renderOrderSummary(){
       const {productId, deliveryOptionId} = element.dataset;
       updateDeliveryOption(productId, deliveryOptionId)
       renderOrderSummary();
+      renderPaymentSummary();
     });
   });
 
diff --git a/scripts/checkout/paymentSummary.js b/scripts/checkout/paymentSummary.js
index e69de29b..ec448e73 100644
--- a/scripts/checkout/paymentSummary.js
+++ b/scripts/checkout/paymentSummary.js
@@ -0,0 +1,69 @@
+import {cart} from '../../data/cart.js';
+import { getProduct} from '../../data/products.js';
+import { getDeliveryOption} from '../../data/deliveryOptions.js';
+import { formatCurrency } from '../utils/money.js';   
+export function renderPaymentSummary() {
+
+  let productPriceCents = 0;
+  let shippingPriceCents = 0;
+  let ItemsQuantity = 0;
+  cart.forEach((cartItem) => {
+    ItemsQuantity += cartItem.quantity;
+    const product = getProduct(cartItem.productId);
+    productPriceCents += product.priceCents * cartItem.quantity;
+
+    const deliveryOption = getDeliveryOption(cartItem.deliveryOptionId);
+    shippingPriceCents += deliveryOption.priceCents;
+  });
+  const totalBeforeTaxPriceCents = productPriceCents + shippingPriceCents;
+  const estimatedTaxPriceCents = totalBeforeTaxPriceCents*0.1;
+  const totalCents = totalBeforeTaxPriceCents + estimatedTaxPriceCents;
+
+  const paymentSummaryHTML = `
+         <div class="payment-summary-title">
+            Order Summary
+          </div>
+
+          <div class="payment-summary-row">
+            <div>Items (${ItemsQuantity}):</div>
+            <div class="payment-summary-money">
+              $${formatCurrency(productPriceCents)}
+            </div>
+          </div>
+
+          <div class="payment-summary-row">
+            <div>Shipping &amp; handling:</div>
+            <div class="payment-summary-money">
+              $${formatCurrency(shippingPriceCents)}
+            </div>
+          </div>
+
+          <div class="payment-summary-row subtotal-row">
+            <div>Total before tax:</div>
+            <div class="payment-summary-money">
+              $${formatCurrency(totalBeforeTaxPriceCents)}
+            </div>
+          </div>
+
+          <div class="payment-summary-row">
+            <div>Estimated tax (10%):</div>
+            <div class="payment-summary-money">
+              $${formatCurrency(estimatedTaxPriceCents)}
+            </div>
+          </div>
+
+          <div class="payment-summary-row total-row">
+            <div>Order total:</div>
+            <div class="payment-summary-money">
+              $${formatCurrency(totalCents)}
+            </div>
+          </div>
+
+          <button class="place-order-button button-primary">
+            Place your order
+          </button>
+  `;
+
+  document.querySelector('.js-payment-summary').innerHTML = paymentSummaryHTML;
+
+}
\ No newline at end of file
diff --git a/scripts/utils/money.js b/scripts/utils/money.js
index dbc49961..e4ae9991 100644
--- a/scripts/utils/money.js
+++ b/scripts/utils/money.js
@@ -1,3 +1,3 @@
 export function formatCurrency(priceCents){
-  return (priceCents/100).toFixed(2);
+  return (Math.round(priceCents)/100).toFixed(2);
 }
\ No newline at end of file

From 3aeae27eec00c7df9a188fedc52a31928e4048fb Mon Sep 17 00:00:00 2001
From: Yuxin Liu <yuxin.liu@xceptor.com>
Date: Fri, 11 Apr 2025 23:48:42 +0800
Subject: [PATCH 19/19] Mode-view-ontrol for payment summary

---
 scripts/checkout/orderSummary.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/checkout/orderSummary.js b/scripts/checkout/orderSummary.js
index 9a603a34..87139b87 100644
--- a/scripts/checkout/orderSummary.js
+++ b/scripts/checkout/orderSummary.js
@@ -119,7 +119,7 @@ export function renderOrderSummary(){
       // cartItemContainer.remove();
       // remove from html solution 2
       document.querySelector(`.js-cart-item-container-${productId}`).remove();
-
+      renderPaymentSummary();
     });
 
   })
