From 6078136d1510683337fde91dbe08a8c07ae55e7d Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Thu, 9 Jan 2025 11:20:04 +0530
Subject: [PATCH 01/31] add backend practice file

---
 public/js/backend-practice.js | 7 +++++++
 public/js/checkout.js         | 1 +
 2 files changed, 8 insertions(+)
 create mode 100644 public/js/backend-practice.js

diff --git a/public/js/backend-practice.js b/public/js/backend-practice.js
new file mode 100644
index 0000000..680293b
--- /dev/null
+++ b/public/js/backend-practice.js
@@ -0,0 +1,7 @@
+const xhr = new XMLHttpRequest();
+
+xhr.addEventListener('load',()=>{
+  console.log(xhr.response);
+})
+xhr.open('GET','https://supersimplebackend.dev/documentation');
+xhr.send();
\ No newline at end of file
diff --git a/public/js/checkout.js b/public/js/checkout.js
index aa48400..6c4a92e 100644
--- a/public/js/checkout.js
+++ b/public/js/checkout.js
@@ -1,3 +1,4 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js";
 renderOrderSummary();
 
+import '../js/backend-practice.js';
\ No newline at end of file

From ff00e2b283c50a741bb51c25ae5847e3337ed17f Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Thu, 9 Jan 2025 13:09:19 +0530
Subject: [PATCH 02/31] Load products from the backend

---
 public/js/amazon.js           |  38 +-
 public/js/backend-practice.js |   7 -
 public/js/checkout.js         |   7 +-
 public/js/products.js         | 641 ++--------------------------------
 4 files changed, 45 insertions(+), 648 deletions(-)
 delete mode 100644 public/js/backend-practice.js

diff --git a/public/js/amazon.js b/public/js/amazon.js
index 3ce08e4..a1711c1 100644
--- a/public/js/amazon.js
+++ b/public/js/amazon.js
@@ -1,8 +1,11 @@
 import { cart } from "/js/cart-class.js";
-import { products } from "/js/products.js";
-let productsHTML = "";
-products.forEach((product) => {
-  productsHTML += `
+import { products, loadProducts } from "/js/products.js";
+loadProducts(renderProductsGrid);
+
+export function renderProductsGrid() {
+  let productsHTML = "";
+  products.forEach((product) => {
+    productsHTML += `
     <div class="product-container ">
           <div class="product-image-container">
             <img class="product-image"
@@ -48,18 +51,19 @@ products.forEach((product) => {
           </button>
         </div>
   `;
-});
-document.querySelector(".js-products-grid").innerHTML = productsHTML;
-document.querySelectorAll(".js-add-to-cart").forEach((button) => {
-  button.addEventListener("click", () => {
-    const { productId } = button.dataset;
-    cart.addToCart(productId);
-    cart.updateCartQuantity(productId);
   });
-});
-if (cart.calculateCartQuantity() === 0) {
-  document.querySelector(".js-cart-quantity").innerHTML = "";
-} else {
-  document.querySelector(".js-cart-quantity").innerHTML =
-    cart.calculateCartQuantity();
+  document.querySelector(".js-products-grid").innerHTML = productsHTML;
+  document.querySelectorAll(".js-add-to-cart").forEach((button) => {
+    button.addEventListener("click", () => {
+      const { productId } = button.dataset;
+      cart.addToCart(productId);
+      cart.updateCartQuantity(productId);
+    });
+  });
+  if (cart.calculateCartQuantity() === 0) {
+    document.querySelector(".js-cart-quantity").innerHTML = "";
+  } else {
+    document.querySelector(".js-cart-quantity").innerHTML =
+      cart.calculateCartQuantity();
+  }
 }
diff --git a/public/js/backend-practice.js b/public/js/backend-practice.js
deleted file mode 100644
index 680293b..0000000
--- a/public/js/backend-practice.js
+++ /dev/null
@@ -1,7 +0,0 @@
-const xhr = new XMLHttpRequest();
-
-xhr.addEventListener('load',()=>{
-  console.log(xhr.response);
-})
-xhr.open('GET','https://supersimplebackend.dev/documentation');
-xhr.send();
\ No newline at end of file
diff --git a/public/js/checkout.js b/public/js/checkout.js
index 6c4a92e..9b011aa 100644
--- a/public/js/checkout.js
+++ b/public/js/checkout.js
@@ -1,4 +1,5 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js";
-renderOrderSummary();
-
-import '../js/backend-practice.js';
\ No newline at end of file
+import { loadProducts } from "./products.js";
+loadProducts(() => {
+  renderOrderSummary();
+});
diff --git a/public/js/products.js b/public/js/products.js
index afee1a6..bbcc94b 100644
--- a/public/js/products.js
+++ b/public/js/products.js
@@ -68,624 +68,23 @@ class Appliances extends Product {
     `;
   }
 }
-export const products = [
-  {
-    id: "e43608ze-6aa0-4b85-b27f-e1d07eb67z16",
-    image: "images/products/Chanakya Neeti.jpg",
-    name: "Chanakya Neeti with Chanakya Sutra Sahit",
-    rating: {
-      stars: 4.5,
-      count: 197,
-    },
-    priceCents: 1190,
-    keywords: ["book", "Chanakya Neeti", "sutra"],
-  },
-  {
-    id: "e43638ye-6aa0-4b85-b27f-e1d07eb67z16",
-    image: "images/products/sh.jpg",
-    name: "Shoonya Se Aakhir Tak ",
-    rating: {
-      stars: 4.5,
-      count: 197,
-    },
-    priceCents: 690,
-    keywords: ["book", "Shoonya Se Aakhir Tak ", "noval"],
-  },
-  {
-    id: "e43638ze-6aa0-4b85-b27f-e1d07eb67z16",
-    image: "images/products/pitaji.jpg",
-    name: "Pitaji Aur Tarikh",
-    rating: {
-      stars: 4.5,
-      count: 147,
-    },
-    priceCents: 790,
-    keywords: ["book", "father", "noval"],
-  },
-  {
-    id: "e43638ce-6aa0-4b85-b27f-e1d07eb67z16",
-    image: "images/products/gandhi.jpg",
-    name: "The Story of My Experiments With Truth: Mahatma Gandhi, An Autobiography (Hindi)",
-    rating: {
-      stars: 4.5,
-      count: 217,
-    },
-    priceCents: 990,
-    keywords: ["book", "gandhi", "autobiography"],
-  },
-  {
-    id: "e43638ce-6aa0-4b85-b27f-e1d07eb67zz6",
-    image: "images/products/yogi.jpg",
-    name: "Autobiography of A Yogi (Hindi)",
-    rating: {
-      stars: 4.5,
-      count: 117,
-    },
-    priceCents: 1090,
-    keywords: ["book", "yogi", "autobiography"],
-  },
-  {
-    id: "e43638ce-6aa0-4b85-b27f-e1d07eb678c6",
-    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,
-    keywords: ["socks", "sports", "apparel"],
-  },
-  {
-    id: "15b6fc6f-327a-4ec4-896f-486349e85a3d",
-    image: "images/products/intermediate-composite-basketball.jpg",
-    name: "Intermediate Size Basketball",
-    rating: {
-      stars: 4,
-      count: 127,
-    },
-    priceCents: 2095,
-    keywords: ["sports", "basketballs"],
-  },
-  {
-    id: "14rvbae-wef23",
-    image: "images/products/box1_image.jpg",
-    name: "Home & care",
-    rating: {
-      stars: 3,
-      count: 232,
-    },
-    priceCents: 3999,
-    keywords: [
-      "home",
-      // "decoration"
-    ],
-  },
-  {
-    id: "83d4ca15-0f35-48f5-b7a3-1ea210004f2e",
-    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,
-    keywords: ["tshirts", "apparel", "mens"],
-    type: "clothing",
-    sizeChartLink: "images/clothing-size-chart.png",
-  },
-  {
-    id: "54e0eccd-8f36-462b-b68a-8182611d9add",
-    image: "images/products/black-2-slot-toaster.jpg",
-    name: "2 Slot Toaster - Black",
-    rating: {
-      stars: 5,
-      count: 2197,
-    },
-    priceCents: 1899,
-    keywords: ["toaster", "kitchen", "appliances"],
-    type: "appliances",
-    instructionsLink: "images/appliance-instructions.png",
-    warrantyLink: "images/appliance-warranty.png",
-  },
-  {
-    id: "3ebe75dc-64d2-4137-8860-1f5a963e534b",
-    image: "images/products/6-piece-white-dinner-plate-set.jpg",
-    name: "6 Piece White Dinner Plate Set",
-    rating: {
-      stars: 4,
-      count: 37,
-    },
-    priceCents: 2067,
-    keywords: ["plates", "kitchen", "dining"],
-  },
-  {
-    id: "8c9c52b5-5a19-4bcb-a5d1-158a74287c53",
-    image: "images/products/6-piece-non-stick-baking-set.webp",
-    name: "6-Piece Nonstick, Carbon Steel Oven Bakeware Baking Set",
-    rating: {
-      stars: 4.5,
-      count: 175,
-    },
-    priceCents: 3499,
-    keywords: ["kitchen", "cookware"],
-  },
-  {
-    id: "dd82ca78-a18b-4e2a-9250-31e67412f98d",
-    image: "images/products/plain-hooded-fleece-sweatshirt-yellow.jpg",
-    name: "Plain Hooded Fleece Sweatshirt",
-    rating: {
-      stars: 4.5,
-      count: 317,
-    },
-    priceCents: 2400,
-    keywords: ["hoodies", "sweaters", "apparel"],
-  },
-  {
-    id: "77919bbe-0e56-475b-adde-4f24dfed3a04",
-    image: "images/products/luxury-tower-set-6-piece.jpg",
-    name: "Luxury Towel Set - Graphite Gray",
-    rating: {
-      stars: 4.5,
-      count: 144,
-    },
-    priceCents: 3599,
-    keywords: ["bathroom", "washroom", "restroom", "towels", "bath towels"],
-  },
-  {
-    id: "3fdfe8d6-9a15-4979-b459-585b0d0545b9",
-    image: "images/products/liquid-laundry-detergent-plain.jpg",
-    name: "Liquid Laundry Detergent, 110 Loads, 82.5 Fl Oz",
-    rating: {
-      stars: 4.5,
-      count: 305,
-    },
-    priceCents: 2899,
-    keywords: ["bathroom", "cleaning"],
-  },
-  {
-    id: "58b4fc92-e98c-42aa-8c55-b6b79996769a",
-    image: "images/products/knit-athletic-sneakers-gray.jpg",
-    name: "Waterproof Knit Athletic Sneakers - Gray",
-    rating: {
-      stars: 4,
-      count: 89,
-    },
-    priceCents: 3390,
-    keywords: ["shoes", "running shoes", "footwear"],
-  },
-  {
-    id: "5968897c-4d27-4872-89f6-5bcb052746d7",
-    image: "images/products/women-chiffon-beachwear-coverup-black.jpg",
-    name: "Women's Chiffon Beachwear Cover Up - Black",
-    rating: {
-      stars: 4.5,
-      count: 235,
-    },
-    priceCents: 2070,
-    keywords: ["robe", "swimsuit", "swimming", "bathing", "apparel"],
-    type: "clothing",
-    sizeChartLink: "images/clothing-size-chart.png",
-  },
-  {
-    id: "aad29d11-ea98-41ee-9285-b916638cac4a",
-    image: "images/products/round-sunglasses-black.jpg",
-    name: "Round Sunglasses",
-    rating: {
-      stars: 4.5,
-      count: 30,
-    },
-    priceCents: 1560,
-    keywords: ["accessories", "shades"],
-  },
-  {
-    id: "04701903-bc79-49c6-bc11-1af7e3651358",
-    image: "images/products/women-beach-sandals.jpg",
-    name: "Women's Two Strap Buckle Sandals - Tan",
-    rating: {
-      stars: 4.5,
-      count: 562,
-    },
-    priceCents: 2499,
-    keywords: ["footwear", "sandals", "womens", "beach", "summer"],
-  },
-  {
-    id: "901eb2ca-386d-432e-82f0-6fb1ee7bf969",
-    image: "images/products/blackout-curtain-set-beige.webp",
-    name: "Blackout Curtains Set 4-Pack - Beige",
-    rating: {
-      stars: 4.5,
-      count: 232,
-    },
-    priceCents: 4599,
-    keywords: ["bedroom", "curtains", "home"],
-  },
-  {
-    id: "82bb68d7-ebc9-476a-989c-c78a40ee5cd9",
-    image: "images/products/men-slim-fit-summer-shorts-gray.jpg",
-    name: "Men's Slim-Fit Summer Shorts",
-    rating: {
-      stars: 4,
-      count: 160,
-    },
-    priceCents: 1699,
-    keywords: ["shorts", "apparel", "mens"],
-  },
-  {
-    id: "c2a82c5e-aff4-435f-9975-517cfaba2ece",
-    image: "images/products/electric-glass-and-steel-hot-water-kettle.webp",
-    name: "Electric Glass and Steel Hot Tea Water Kettle - 1.7-Liter",
-    rating: {
-      stars: 5,
-      count: 846,
-    },
-    priceCents: 3074,
-    keywords: ["water boiler", "appliances", "kitchen"],
-    type: "appliances",
-    instructionsLink: "images/appliance-instructions.png",
-    warrantyLink: "images/appliance-warranty.png",
-  },
-  {
-    id: "6b07d4e7-f540-454e-8a1e-363f25dbae7d",
-    image: "images/products/facial-tissue-2-ply-18-boxes.jpg",
-    name: "Ultra Soft Tissue 2-Ply - 18 Box",
-    rating: {
-      stars: 4,
-      count: 99,
-    },
-    priceCents: 2374,
-    keywords: ["kleenex", "tissues", "kitchen", "tissues box", "napkins"],
-  },
-  {
-    id: "a82c6bac-3067-4e68-a5ba-d827ac0be010",
-    image: "images/products/straw-sunhat.webp",
-    name: "Straw Lifeguard Sun Hat",
-    rating: {
-      stars: 4,
-      count: 215,
-    },
-    priceCents: 2200,
-    keywords: ["hats", "straw hats", "summer", "apparel"],
-  },
-  {
-    id: "e4f64a65-1377-42bc-89a5-e572d19252e2",
-    image: "images/products/sky-flower-stud-earrings.webp",
-    name: "Sterling Silver Sky Flower Stud Earrings",
-    rating: {
-      stars: 4.5,
-      count: 52,
-    },
-    priceCents: 1799,
-    keywords: ["jewelry", "accessories", "womens"],
-  },
-  {
-    id: "b0f17cc5-8b40-4ca5-9142-b61fe3d98c85",
-    image: "images/products/women-stretch-popover-hoodie-black.jpg",
-    name: "Women's Stretch Popover Hoodie",
-    rating: {
-      stars: 4.5,
-      count: 2465,
-    },
-    priceCents: 1374,
-    keywords: ["hooded", "hoodies", "sweaters", "womens", "apparel"],
-    type: "clothing",
-    sizeChartLink: "images/clothing-size-chart.png",
-  },
-  {
-    id: "a93a101d-79ef-4cf3-a6cf-6dbe532a1b4a",
-    image: "images/products/bathroom-rug.jpg",
-    name: "Bathroom Bath Rug Mat 20 x 31 Inch - Grey",
-    rating: {
-      stars: 4.5,
-      count: 119,
-    },
-    priceCents: 1250,
-    keywords: ["bathmat", "bathroom", "home"],
-  },
-  {
-    id: "4f4fbcc2-4e72-45cc-935c-9e13d79cc57f",
-    image: "images/products/women-knit-ballet-flat-black.jpg",
-    name: "Women's Knit Ballet Flat",
-    rating: {
-      stars: 4,
-      count: 326,
-    },
-    priceCents: 2640,
-    keywords: ["shoes", "flats", "womens", "footwear"],
-  },
-  {
-    id: "8b5a2ee1-6055-422a-a666-b34ba28b76d4",
-    image: "images/products/men-golf-polo-t-shirt-blue.jpg",
-    name: "Men's Regular-Fit Quick-Dry Golf Polo Shirt",
-    rating: {
-      stars: 4.5,
-      count: 2556,
-    },
-    priceCents: 1599,
-    keywords: ["tshirts", "shirts", "apparel", "mens"],
-    type: "clothing",
-    sizeChartLink: "images/clothing-size-chart.png",
-  },
-  {
-    id: "b86ddc8b-3501-4b17-9889-a3bad6fb585f",
-    image: "images/products/trash-can-with-foot-pedal-50-liter.jpg",
-    name: "Trash Can with Foot Pedal - Brushed Stainless Steel",
-    rating: {
-      stars: 4.5,
-      count: 2286,
-    },
-    priceCents: 8300,
-    keywords: ["garbage", "bins", "cans", "kitchen"],
-  },
-  {
-    id: "19c6a64a-5463-4d45-9af8-e41140a4100c",
-    image: "images/products/duvet-cover-set-blue-twin.jpg",
-    name: "Duvet Cover Set with Zipper Closure",
-    rating: {
-      stars: 4,
-      count: 456,
-    },
-    priceCents: 2399,
-    keywords: ["bedroom", "bed sheets", "sheets", "covers", "home"],
-  },
-  {
-    id: "d2785924-743d-49b3-8f03-ec258e640503",
-    image: "images/products/women-chunky-beanie-gray.webp",
-    name: "Women's Chunky Cable Beanie - Gray",
-    rating: {
-      stars: 5,
-      count: 83,
-    },
-    priceCents: 1250,
-    keywords: ["hats", "winter hats", "beanies", "tuques", "apparel", "womens"],
-  },
-  {
-    id: "ee1f7c56-f977-40a4-9642-12ba5072e2b0",
-    image: "images/products/men-chino-pants-beige.jpg",
-    name: "Men's Classic-fit Pleated Chino Pants",
-    rating: {
-      stars: 4.5,
-      count: 9017,
-    },
-    priceCents: 2290,
-    keywords: ["pants", "apparel", "mens"],
-  },
-  {
-    id: "1c079479-8586-494f-ab53-219325432536",
-    image: "images/products/men-athletic-shoes-green.jpg",
-    name: "Men's Athletic Sneaker",
-    rating: {
-      stars: 4,
-      count: 229,
-    },
-    priceCents: 3890,
-    keywords: ["shoes", "running shoes", "footwear", "mens"],
-  },
-  {
-    id: "4df68c27-fd59-4a6a-bbd1-e754ddb6d53c",
-    image: "images/products/men-navigator-sunglasses-brown.jpg",
-    name: "Men's Navigator Sunglasses Pilot",
-    rating: {
-      stars: 3.5,
-      count: 42,
-    },
-    priceCents: 1690,
-    keywords: ["sunglasses", "glasses", "accessories", "shades"],
-  },
-  {
-    id: "4e37dd03-3b23-4bc6-9ff8-44e112a92c64",
-    image: "images/products/non-stick-cooking-set-15-pieces.webp",
-    name: "Non-Stick Cookware Set, Pots, Pans and Utensils - 15 Pieces",
-    rating: {
-      stars: 4.5,
-      count: 511,
-    },
-    priceCents: 6797,
-    keywords: ["cooking set", "kitchen"],
-  },
-  {
-    id: "a434b69f-1bc1-482d-9ce7-cd7f4a66ce8d",
-    image: "images/products/vanity-mirror-silver.jpg",
-    name: "Vanity Mirror with Heavy Base - Chrome",
-    rating: {
-      stars: 4.5,
-      count: 130,
-    },
-    priceCents: 1649,
-    keywords: ["bathroom", "washroom", "mirrors", "home"],
-  },
-  {
-    id: "a45cfa0a-66d6-4dc7-9475-e2b01595f7d7",
-    image: "images/products/women-french-terry-fleece-jogger-camo.jpg",
-    name: "Women's Fleece Jogger Sweatpant",
-    rating: {
-      stars: 4.5,
-      count: 248,
-    },
-    priceCents: 2400,
-    keywords: ["pants", "sweatpants", "jogging", "apparel", "womens"],
-  },
-  {
-    id: "d339adf3-e004-4c20-a120-40e8874c66cb",
-    image: "images/products/double-elongated-twist-french-wire-earrings.webp",
-    name: "Double Oval Twist French Wire Earrings - Gold",
-    rating: {
-      stars: 4.5,
-      count: 117,
-    },
-    priceCents: 2400,
-    keywords: ["accessories", "womens"],
-  },
-  {
-    id: "d37a651a-d501-483b-aae6-a9659b0757a0",
-    image: "images/products/round-airtight-food-storage-containers.jpg",
-    name: "Round Airtight Food Storage Containers - 5 Piece",
-    rating: {
-      stars: 4,
-      count: 126,
-    },
-    priceCents: 2899,
-    keywords: ["boxes", "food containers", "kitchen"],
-  },
-  {
-    id: "0d7f9afa-2efe-4fd9-b0fd-ba5663e0a524",
-    image: "images/products/coffeemaker-with-glass-carafe-black.jpg",
-    name: "Coffeemaker with Glass Carafe and Reusable Filter - 25 Oz, Black",
-    rating: {
-      stars: 4.5,
-      count: 1211,
-    },
-    priceCents: 2250,
-    keywords: ["coffeemakers", "kitchen", "appliances"],
-    type: "appliances",
-    instructionsLink: "images/appliance-instructions.png",
-    warrantyLink: "images/appliance-warranty.png",
-  },
-  {
-    id: "02e3a47e-dd68-467e-9f71-8bf6f723fdae",
-    image: "images/products/blackout-curtains-black.jpg",
-    name: "Blackout Curtains Set 42 x 84-Inch - Black, 2 Panels",
-    rating: {
-      stars: 4.5,
-      count: 363,
-    },
-    priceCents: 3099,
-    keywords: ["bedroom", "home"],
-  },
-  {
-    id: "8a53b080-6d40-4a65-ab26-b24ecf700bce",
-    image: "images/products/cotton-bath-towels-teal.webp",
-    name: "100% Cotton Bath Towels - 2 Pack, Light Teal",
-    rating: {
-      stars: 4.5,
-      count: 93,
-    },
-    priceCents: 2110,
-    keywords: ["bathroom", "home", "towels"],
-  },
-  {
-    id: "10ed8504-57db-433c-b0a3-fc71a35c88a1",
-    image: "images/products/knit-athletic-sneakers-pink.webp",
-    name: "Waterproof Knit Athletic Sneakers - Pink",
-    rating: {
-      stars: 4,
-      count: 89,
-    },
-    priceCents: 3390,
-    keywords: ["shoes", "running shoes", "footwear", "womens"],
-  },
-  {
-    id: "77a845b1-16ed-4eac-bdf9-5b591882113d",
-    image: "images/products/countertop-blender-64-oz.jpg",
-    name: "Countertop Blender - 64oz, 1400 Watts",
-    rating: {
-      stars: 4,
-      count: 3,
-    },
-    priceCents: 10747,
-    keywords: ["food blenders", "kitchen", "appliances"],
-    type: "appliances",
-    instructionsLink: "images/appliance-instructions.png",
-    warrantyLink: "images/appliance-warranty.png",
-  },
-  {
-    id: "36c64692-677f-4f58-b5ec-0dc2cf109e27",
-    image: "images/products/floral-mixing-bowl-set.jpg",
-    name: "10-Piece Mixing Bowl Set with Lids - Floral",
-    rating: {
-      stars: 5,
-      count: 679,
-    },
-    priceCents: 3899,
-    keywords: ["mixing bowls", "baking", "cookware", "kitchen"],
-  },
-  {
-    id: "aaa65ef3-8d6f-4eb3-bc9b-a6ea49047d8f",
-    image: "images/products/kitchen-paper-towels-30-pack.jpg",
-    name: "2-Ply Kitchen Paper Towels - 30 Pack",
-    rating: {
-      stars: 4.5,
-      count: 1045,
-    },
-    priceCents: 5799,
-    keywords: ["kitchen", "kitchen towels", "tissues"],
-  },
-  {
-    id: "bc2847e9-5323-403f-b7cf-57fde044a955",
-    image: "images/products/men-cozy-fleece-zip-up-hoodie-red.jpg",
-    name: "Men's Full-Zip Hooded Fleece Sweatshirt",
-    rating: {
-      stars: 4.5,
-      count: 3157,
-    },
-    priceCents: 2400,
-    keywords: ["sweaters", "hoodies", "apparel", "mens"],
-  },
-  {
-    id: "bc2847easd23",
-    image: "images/products/box2_image.jpg",
-    name: "Health & Presonal care",
-    rating: {
-      stars: 4.5,
-      count: 357,
-    },
-    priceCents: 2100,
-    keywords: ["clean", "presonal care", "mens"],
-  },
-  {
-    id: "bc2847e9-5323-103f-b7cf-57fde044a955",
-    image: "images/products/fit.jpg",
-    name: "For your Fitness needs",
-    rating: {
-      stars: 4.5,
-      count: 3157,
-    },
-    priceCents: 22400,
-    keywords: ["sweaters", "hoodies", "apparel", "mens"],
-  },
-  {
-    id: "adf343f-b7cf-57fde044a955",
-    image: "images/products/gitter.jpg",
-    name: "Creat with strip lights",
-    rating: {
-      stars: 4,
-      count: 3157,
-    },
-    priceCents: 1500,
-    keywords: ["light", "rgb", "gitter"],
-    type: "appliances",
-    instructionsLink: "images/appliance-instructions.png",
-    warrantyLink: "images/appliance-warranty.png",
-  },
-  {
-    id: "bc2847e9-5023-403f-b7cf-57fde044a955",
-    image: "images/products/phone.jpg",
-    name: "S22-Ultra SUMSANG",
-    rating: {
-      stars: 5,
-      count: 3157,
-    },
-    priceCents: 52400,
-    keywords: ["sumsang", "phone", "ultra"],
-    type: "appliances",
-    instructionsLink: "images/appliance-instructions.png",
-    warrantyLink: "images/appliance-warranty.png",
-  },
-  {
-    id: "bc2847e9-5323-403f-b7cf-57fde044a955",
-    image: "images/products/box3_image.jpg",
-    name: "Table & Chair",
-    rating: {
-      stars: 3,
-      count: 37,
-    },
-    priceCents: 22400,
-    keywords: ["table", "chair"],
-  },
-].map((productDetails) => {
-  if (productDetails.type === "clothing") {
-    return new Clothing(productDetails);
-  } else if (productDetails.type === "appliances") {
-    return new Appliances(productDetails);
-  }
-  return new Product(productDetails);
-});
+
+export let products = [];
+export function loadProducts(fun) {
+  const xhr = new XMLHttpRequest();
+  xhr.addEventListener("load", () => {
+    products = JSON.parse(xhr.response).map((productDetails) => {
+      if (productDetails.type === "clothing") {
+        return new Clothing(productDetails);
+      } else if (productDetails.type === "appliances") {
+        return new Appliances(productDetails);
+      }
+      return new Product(productDetails);
+    });
+    console.log("load Products");
+    fun();
+  });
+  xhr.open("GET", "https://supersimplebackend.dev/products");
+  xhr.send();
+}
+

From 696203b8317ff29c68ee8eb2f37227c7a5c0c6a4 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Sat, 11 Jan 2025 12:29:33 +0530
Subject: [PATCH 03/31] Refactor product loading to use Promises for better
 error handling and asynchronous flow

---
 public/js/amazon.js   | 29 ++++++++++++++++++++++++++++-
 public/js/checkout.js | 41 ++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 68 insertions(+), 2 deletions(-)

diff --git a/public/js/amazon.js b/public/js/amazon.js
index a1711c1..cc6a30a 100644
--- a/public/js/amazon.js
+++ b/public/js/amazon.js
@@ -1,7 +1,34 @@
 import { cart } from "/js/cart-class.js";
 import { products, loadProducts } from "/js/products.js";
-loadProducts(renderProductsGrid);
 
+
+// loadProducts(renderProductsGrid);
+
+
+// new Promise((resolve, reject) => {
+//   loadProducts(() => {
+//     resolve();
+//   });
+// }).then(() => {
+//   renderProductsGrid();
+// }).catch((error) => {
+//   alert(error);
+// });
+
+
+initializeProducts();
+async function initializeProducts() {
+  try {
+    await new Promise((resolve, reject) => {
+      loadProducts(() => {
+        resolve();
+      });
+    });
+    renderProductsGrid();
+  } catch (error) {
+    alert(error);
+  }
+}
 export function renderProductsGrid() {
   let productsHTML = "";
   products.forEach((product) => {
diff --git a/public/js/checkout.js b/public/js/checkout.js
index 9b011aa..4d0963e 100644
--- a/public/js/checkout.js
+++ b/public/js/checkout.js
@@ -1,5 +1,44 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js";
 import { loadProducts } from "./products.js";
-loadProducts(() => {
+//callbacks
+// loadProducts(() => {
+//   renderOrderSummary();
+// });
+
+//promise
+// new Promise((resolve, reject) => {
+//   loadProducts(() => {
+//     resolve();
+//   });
+// }).then(() => {
+//   renderOrderSummary();
+// }).catch((error) => {
+//   alert(error);
+// });  
+
+Promise.all([
+  new Promise((resolve) => {
+  loadProducts(() => {
+    resolve('value1');
+  });
+}),
+new Promise((resolve) => {
   renderOrderSummary();
+})
+]).then((values) => {
+  console.log(values);
 });
+
+// initializeCart();
+// async function initializeCart() {
+//   try {
+//     await new Promise((resolve, reject) => {
+//       loadProducts(() => {
+//         resolve();
+//       });
+//     });
+//     renderOrderSummary();
+//   } catch (error) {
+//     alert(error);
+//   }
+// }

From 349e77e763a265d8dbe7ce83f506e50a0ef179c5 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Sun, 19 Jan 2025 19:22:47 +0530
Subject: [PATCH 04/31] Remove commented-out code for loading products and
 initialize product loading

---
 public/js/amazon.js | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/public/js/amazon.js b/public/js/amazon.js
index cc6a30a..40548ec 100644
--- a/public/js/amazon.js
+++ b/public/js/amazon.js
@@ -1,21 +1,5 @@
 import { cart } from "/js/cart-class.js";
 import { products, loadProducts } from "/js/products.js";
-
-
-// loadProducts(renderProductsGrid);
-
-
-// new Promise((resolve, reject) => {
-//   loadProducts(() => {
-//     resolve();
-//   });
-// }).then(() => {
-//   renderProductsGrid();
-// }).catch((error) => {
-//   alert(error);
-// });
-
-
 initializeProducts();
 async function initializeProducts() {
   try {

From d7d0c5fe78bfffefc3b74ad390d6f63fa32bcd36 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Sun, 19 Jan 2025 21:27:06 +0530
Subject: [PATCH 05/31] adjust the code to run

---
 public/js/checkout.js |  36 +--
 public/js/products.js | 681 ++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 672 insertions(+), 45 deletions(-)

diff --git a/public/js/checkout.js b/public/js/checkout.js
index 4d0963e..86f5424 100644
--- a/public/js/checkout.js
+++ b/public/js/checkout.js
@@ -5,29 +5,21 @@ import { loadProducts } from "./products.js";
 //   renderOrderSummary();
 // });
 
-//promise
-// new Promise((resolve, reject) => {
-//   loadProducts(() => {
-//     resolve();
-//   });
-// }).then(() => {
-//   renderOrderSummary();
-// }).catch((error) => {
-//   alert(error);
-// });  
-
-Promise.all([
-  new Promise((resolve) => {
-  loadProducts(() => {
-    resolve('value1');
-  });
-}),
-new Promise((resolve) => {
-  renderOrderSummary();
+new Promise((resolve, reject) => {
+  try {
+    loadProducts(() => {
+      resolve();
+    });
+  } catch (error) {
+    reject("Failed to load products.");
+  }
 })
-]).then((values) => {
-  console.log(values);
-});
+  .then(() => {
+    renderOrderSummary();
+  })
+  .catch((error) => {
+    console.log(error);
+  });
 
 // initializeCart();
 // async function initializeCart() {
diff --git a/public/js/products.js b/public/js/products.js
index bbcc94b..c73979d 100644
--- a/public/js/products.js
+++ b/public/js/products.js
@@ -1,13 +1,16 @@
 import { formatCurrency } from "/js/money.js";
-export function getProduct(productId) {
-  let matchingProduct;
-  products.forEach((product) => {
-    if (product.id === productId) {
-      matchingProduct = product;
-    }
-  });
-  return matchingProduct;
-}
+// export function getProduct(productId) {
+//   loadProducts(()=>{
+//     let matchingProduct;
+//     products.forEach((product) => {
+//       if (product.id === productId) {
+//         matchingProduct = product;
+//       }
+//     });
+//     console.log(matchingProduct);
+//     return matchingProduct;
+//   });
+// }
 class Product {
   id;
   image;
@@ -68,23 +71,655 @@ class Appliances extends Product {
     `;
   }
 }
-
+const kaka = [
+  {
+    id: "e43608ze-6aa0-4b85-b27f-e1d07eb67z16",
+    image: "images/products/Chanakya Neeti.jpg",
+    name: "Chanakya Neeti with Chanakya Sutra Sahit",
+    rating: {
+      stars: 4.5,
+      count: 197,
+    },
+    priceCents: 1190,
+    keywords: ["book", "Chanakya Neeti", "sutra"],
+  },
+  {
+    id: "e43638ye-6aa0-4b85-b27f-e1d07eb67z16",
+    image: "images/products/sh.jpg",
+    name: "Shoonya Se Aakhir Tak ",
+    rating: {
+      stars: 4.5,
+      count: 197,
+    },
+    priceCents: 690,
+    keywords: ["book", "Shoonya Se Aakhir Tak ", "noval"],
+  },
+  {
+    id: "e43638ze-6aa0-4b85-b27f-e1d07eb67z16",
+    image: "images/products/pitaji.jpg",
+    name: "Pitaji Aur Tarikh",
+    rating: {
+      stars: 4.5,
+      count: 147,
+    },
+    priceCents: 790,
+    keywords: ["book", "father", "noval"],
+  },
+  {
+    id: "e43638ce-6aa0-4b85-b27f-e1d07eb67z16",
+    image: "images/products/gandhi.jpg",
+    name: "The Story of My Experiments With Truth: Mahatma Gandhi, An Autobiography (Hindi)",
+    rating: {
+      stars: 4.5,
+      count: 217,
+    },
+    priceCents: 990,
+    keywords: ["book", "gandhi", "autobiography"],
+  },
+  {
+    id: "e43638ce-6aa0-4b85-b27f-e1d07eb67zz6",
+    image: "images/products/yogi.jpg",
+    name: "Autobiography of A Yogi (Hindi)",
+    rating: {
+      stars: 4.5,
+      count: 117,
+    },
+    priceCents: 1090,
+    keywords: ["book", "yogi", "autobiography"],
+  },
+  {
+    id: "e43638ce-6aa0-4b85-b27f-e1d07eb678c6",
+    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,
+    keywords: ["socks", "sports", "apparel"],
+  },
+  {
+    id: "15b6fc6f-327a-4ec4-896f-486349e85a3d",
+    image: "images/products/intermediate-composite-basketball.jpg",
+    name: "Intermediate Size Basketball",
+    rating: {
+      stars: 4,
+      count: 127,
+    },
+    priceCents: 2095,
+    keywords: ["sports", "basketballs"],
+  },
+  {
+    id: "14rvbae-wef23",
+    image: "images/products/box1_image.jpg",
+    name: "Home & care",
+    rating: {
+      stars: 3,
+      count: 232,
+    },
+    priceCents: 3999,
+    keywords: [
+      "home",
+      // "decoration"
+    ],
+  },
+  {
+    id: "83d4ca15-0f35-48f5-b7a3-1ea210004f2e",
+    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,
+    keywords: ["tshirts", "apparel", "mens"],
+    type: "clothing",
+    sizeChartLink: "images/clothing-size-chart.png",
+  },
+  {
+    id: "54e0eccd-8f36-462b-b68a-8182611d9add",
+    image: "images/products/black-2-slot-toaster.jpg",
+    name: "2 Slot Toaster - Black",
+    rating: {
+      stars: 5,
+      count: 2197,
+    },
+    priceCents: 1899,
+    keywords: ["toaster", "kitchen", "appliances"],
+    type: "appliances",
+    instructionsLink: "images/appliance-instructions.png",
+    warrantyLink: "images/appliance-warranty.png",
+  },
+  {
+    id: "3ebe75dc-64d2-4137-8860-1f5a963e534b",
+    image: "images/products/6-piece-white-dinner-plate-set.jpg",
+    name: "6 Piece White Dinner Plate Set",
+    rating: {
+      stars: 4,
+      count: 37,
+    },
+    priceCents: 2067,
+    keywords: ["plates", "kitchen", "dining"],
+  },
+  {
+    id: "8c9c52b5-5a19-4bcb-a5d1-158a74287c53",
+    image: "images/products/6-piece-non-stick-baking-set.webp",
+    name: "6-Piece Nonstick, Carbon Steel Oven Bakeware Baking Set",
+    rating: {
+      stars: 4.5,
+      count: 175,
+    },
+    priceCents: 3499,
+    keywords: ["kitchen", "cookware"],
+  },
+  {
+    id: "dd82ca78-a18b-4e2a-9250-31e67412f98d",
+    image: "images/products/plain-hooded-fleece-sweatshirt-yellow.jpg",
+    name: "Plain Hooded Fleece Sweatshirt",
+    rating: {
+      stars: 4.5,
+      count: 317,
+    },
+    priceCents: 2400,
+    keywords: ["hoodies", "sweaters", "apparel"],
+  },
+  {
+    id: "77919bbe-0e56-475b-adde-4f24dfed3a04",
+    image: "images/products/luxury-tower-set-6-piece.jpg",
+    name: "Luxury Towel Set - Graphite Gray",
+    rating: {
+      stars: 4.5,
+      count: 144,
+    },
+    priceCents: 3599,
+    keywords: ["bathroom", "washroom", "restroom", "towels", "bath towels"],
+  },
+  {
+    id: "3fdfe8d6-9a15-4979-b459-585b0d0545b9",
+    image: "images/products/liquid-laundry-detergent-plain.jpg",
+    name: "Liquid Laundry Detergent, 110 Loads, 82.5 Fl Oz",
+    rating: {
+      stars: 4.5,
+      count: 305,
+    },
+    priceCents: 2899,
+    keywords: ["bathroom", "cleaning"],
+  },
+  {
+    id: "58b4fc92-e98c-42aa-8c55-b6b79996769a",
+    image: "images/products/knit-athletic-sneakers-gray.jpg",
+    name: "Waterproof Knit Athletic Sneakers - Gray",
+    rating: {
+      stars: 4,
+      count: 89,
+    },
+    priceCents: 3390,
+    keywords: ["shoes", "running shoes", "footwear"],
+  },
+  {
+    id: "5968897c-4d27-4872-89f6-5bcb052746d7",
+    image: "images/products/women-chiffon-beachwear-coverup-black.jpg",
+    name: "Women's Chiffon Beachwear Cover Up - Black",
+    rating: {
+      stars: 4.5,
+      count: 235,
+    },
+    priceCents: 2070,
+    keywords: ["robe", "swimsuit", "swimming", "bathing", "apparel"],
+    type: "clothing",
+    sizeChartLink: "images/clothing-size-chart.png",
+  },
+  {
+    id: "aad29d11-ea98-41ee-9285-b916638cac4a",
+    image: "images/products/round-sunglasses-black.jpg",
+    name: "Round Sunglasses",
+    rating: {
+      stars: 4.5,
+      count: 30,
+    },
+    priceCents: 1560,
+    keywords: ["accessories", "shades"],
+  },
+  {
+    id: "04701903-bc79-49c6-bc11-1af7e3651358",
+    image: "images/products/women-beach-sandals.jpg",
+    name: "Women's Two Strap Buckle Sandals - Tan",
+    rating: {
+      stars: 4.5,
+      count: 562,
+    },
+    priceCents: 2499,
+    keywords: ["footwear", "sandals", "womens", "beach", "summer"],
+  },
+  {
+    id: "901eb2ca-386d-432e-82f0-6fb1ee7bf969",
+    image: "images/products/blackout-curtain-set-beige.webp",
+    name: "Blackout Curtains Set 4-Pack - Beige",
+    rating: {
+      stars: 4.5,
+      count: 232,
+    },
+    priceCents: 4599,
+    keywords: ["bedroom", "curtains", "home"],
+  },
+  {
+    id: "82bb68d7-ebc9-476a-989c-c78a40ee5cd9",
+    image: "images/products/men-slim-fit-summer-shorts-gray.jpg",
+    name: "Men's Slim-Fit Summer Shorts",
+    rating: {
+      stars: 4,
+      count: 160,
+    },
+    priceCents: 1699,
+    keywords: ["shorts", "apparel", "mens"],
+  },
+  {
+    id: "c2a82c5e-aff4-435f-9975-517cfaba2ece",
+    image: "images/products/electric-glass-and-steel-hot-water-kettle.webp",
+    name: "Electric Glass and Steel Hot Tea Water Kettle - 1.7-Liter",
+    rating: {
+      stars: 5,
+      count: 846,
+    },
+    priceCents: 3074,
+    keywords: ["water boiler", "appliances", "kitchen"],
+    type: "appliances",
+    instructionsLink: "images/appliance-instructions.png",
+    warrantyLink: "images/appliance-warranty.png",
+  },
+  {
+    id: "6b07d4e7-f540-454e-8a1e-363f25dbae7d",
+    image: "images/products/facial-tissue-2-ply-18-boxes.jpg",
+    name: "Ultra Soft Tissue 2-Ply - 18 Box",
+    rating: {
+      stars: 4,
+      count: 99,
+    },
+    priceCents: 2374,
+    keywords: ["kleenex", "tissues", "kitchen", "tissues box", "napkins"],
+  },
+  {
+    id: "a82c6bac-3067-4e68-a5ba-d827ac0be010",
+    image: "images/products/straw-sunhat.webp",
+    name: "Straw Lifeguard Sun Hat",
+    rating: {
+      stars: 4,
+      count: 215,
+    },
+    priceCents: 2200,
+    keywords: ["hats", "straw hats", "summer", "apparel"],
+  },
+  {
+    id: "e4f64a65-1377-42bc-89a5-e572d19252e2",
+    image: "images/products/sky-flower-stud-earrings.webp",
+    name: "Sterling Silver Sky Flower Stud Earrings",
+    rating: {
+      stars: 4.5,
+      count: 52,
+    },
+    priceCents: 1799,
+    keywords: ["jewelry", "accessories", "womens"],
+  },
+  {
+    id: "b0f17cc5-8b40-4ca5-9142-b61fe3d98c85",
+    image: "images/products/women-stretch-popover-hoodie-black.jpg",
+    name: "Women's Stretch Popover Hoodie",
+    rating: {
+      stars: 4.5,
+      count: 2465,
+    },
+    priceCents: 1374,
+    keywords: ["hooded", "hoodies", "sweaters", "womens", "apparel"],
+    type: "clothing",
+    sizeChartLink: "images/clothing-size-chart.png",
+  },
+  {
+    id: "a93a101d-79ef-4cf3-a6cf-6dbe532a1b4a",
+    image: "images/products/bathroom-rug.jpg",
+    name: "Bathroom Bath Rug Mat 20 x 31 Inch - Grey",
+    rating: {
+      stars: 4.5,
+      count: 119,
+    },
+    priceCents: 1250,
+    keywords: ["bathmat", "bathroom", "home"],
+  },
+  {
+    id: "4f4fbcc2-4e72-45cc-935c-9e13d79cc57f",
+    image: "images/products/women-knit-ballet-flat-black.jpg",
+    name: "Women's Knit Ballet Flat",
+    rating: {
+      stars: 4,
+      count: 326,
+    },
+    priceCents: 2640,
+    keywords: ["shoes", "flats", "womens", "footwear"],
+  },
+  {
+    id: "8b5a2ee1-6055-422a-a666-b34ba28b76d4",
+    image: "images/products/men-golf-polo-t-shirt-blue.jpg",
+    name: "Men's Regular-Fit Quick-Dry Golf Polo Shirt",
+    rating: {
+      stars: 4.5,
+      count: 2556,
+    },
+    priceCents: 1599,
+    keywords: ["tshirts", "shirts", "apparel", "mens"],
+    type: "clothing",
+    sizeChartLink: "images/clothing-size-chart.png",
+  },
+  {
+    id: "b86ddc8b-3501-4b17-9889-a3bad6fb585f",
+    image: "images/products/trash-can-with-foot-pedal-50-liter.jpg",
+    name: "Trash Can with Foot Pedal - Brushed Stainless Steel",
+    rating: {
+      stars: 4.5,
+      count: 2286,
+    },
+    priceCents: 8300,
+    keywords: ["garbage", "bins", "cans", "kitchen"],
+  },
+  {
+    id: "19c6a64a-5463-4d45-9af8-e41140a4100c",
+    image: "images/products/duvet-cover-set-blue-twin.jpg",
+    name: "Duvet Cover Set with Zipper Closure",
+    rating: {
+      stars: 4,
+      count: 456,
+    },
+    priceCents: 2399,
+    keywords: ["bedroom", "bed sheets", "sheets", "covers", "home"],
+  },
+  {
+    id: "d2785924-743d-49b3-8f03-ec258e640503",
+    image: "images/products/women-chunky-beanie-gray.webp",
+    name: "Women's Chunky Cable Beanie - Gray",
+    rating: {
+      stars: 5,
+      count: 83,
+    },
+    priceCents: 1250,
+    keywords: ["hats", "winter hats", "beanies", "tuques", "apparel", "womens"],
+  },
+  {
+    id: "ee1f7c56-f977-40a4-9642-12ba5072e2b0",
+    image: "images/products/men-chino-pants-beige.jpg",
+    name: "Men's Classic-fit Pleated Chino Pants",
+    rating: {
+      stars: 4.5,
+      count: 9017,
+    },
+    priceCents: 2290,
+    keywords: ["pants", "apparel", "mens"],
+  },
+  {
+    id: "1c079479-8586-494f-ab53-219325432536",
+    image: "images/products/men-athletic-shoes-green.jpg",
+    name: "Men's Athletic Sneaker",
+    rating: {
+      stars: 4,
+      count: 229,
+    },
+    priceCents: 3890,
+    keywords: ["shoes", "running shoes", "footwear", "mens"],
+  },
+  {
+    id: "4df68c27-fd59-4a6a-bbd1-e754ddb6d53c",
+    image: "images/products/men-navigator-sunglasses-brown.jpg",
+    name: "Men's Navigator Sunglasses Pilot",
+    rating: {
+      stars: 3.5,
+      count: 42,
+    },
+    priceCents: 1690,
+    keywords: ["sunglasses", "glasses", "accessories", "shades"],
+  },
+  {
+    id: "4e37dd03-3b23-4bc6-9ff8-44e112a92c64",
+    image: "images/products/non-stick-cooking-set-15-pieces.webp",
+    name: "Non-Stick Cookware Set, Pots, Pans and Utensils - 15 Pieces",
+    rating: {
+      stars: 4.5,
+      count: 511,
+    },
+    priceCents: 6797,
+    keywords: ["cooking set", "kitchen"],
+  },
+  {
+    id: "a434b69f-1bc1-482d-9ce7-cd7f4a66ce8d",
+    image: "images/products/vanity-mirror-silver.jpg",
+    name: "Vanity Mirror with Heavy Base - Chrome",
+    rating: {
+      stars: 4.5,
+      count: 130,
+    },
+    priceCents: 1649,
+    keywords: ["bathroom", "washroom", "mirrors", "home"],
+  },
+  {
+    id: "a45cfa0a-66d6-4dc7-9475-e2b01595f7d7",
+    image: "images/products/women-french-terry-fleece-jogger-camo.jpg",
+    name: "Women's Fleece Jogger Sweatpant",
+    rating: {
+      stars: 4.5,
+      count: 248,
+    },
+    priceCents: 2400,
+    keywords: ["pants", "sweatpants", "jogging", "apparel", "womens"],
+  },
+  {
+    id: "d339adf3-e004-4c20-a120-40e8874c66cb",
+    image: "images/products/double-elongated-twist-french-wire-earrings.webp",
+    name: "Double Oval Twist French Wire Earrings - Gold",
+    rating: {
+      stars: 4.5,
+      count: 117,
+    },
+    priceCents: 2400,
+    keywords: ["accessories", "womens"],
+  },
+  {
+    id: "d37a651a-d501-483b-aae6-a9659b0757a0",
+    image: "images/products/round-airtight-food-storage-containers.jpg",
+    name: "Round Airtight Food Storage Containers - 5 Piece",
+    rating: {
+      stars: 4,
+      count: 126,
+    },
+    priceCents: 2899,
+    keywords: ["boxes", "food containers", "kitchen"],
+  },
+  {
+    id: "0d7f9afa-2efe-4fd9-b0fd-ba5663e0a524",
+    image: "images/products/coffeemaker-with-glass-carafe-black.jpg",
+    name: "Coffeemaker with Glass Carafe and Reusable Filter - 25 Oz, Black",
+    rating: {
+      stars: 4.5,
+      count: 1211,
+    },
+    priceCents: 2250,
+    keywords: ["coffeemakers", "kitchen", "appliances"],
+    type: "appliances",
+    instructionsLink: "images/appliance-instructions.png",
+    warrantyLink: "images/appliance-warranty.png",
+  },
+  {
+    id: "02e3a47e-dd68-467e-9f71-8bf6f723fdae",
+    image: "images/products/blackout-curtains-black.jpg",
+    name: "Blackout Curtains Set 42 x 84-Inch - Black, 2 Panels",
+    rating: {
+      stars: 4.5,
+      count: 363,
+    },
+    priceCents: 3099,
+    keywords: ["bedroom", "home"],
+  },
+  {
+    id: "8a53b080-6d40-4a65-ab26-b24ecf700bce",
+    image: "images/products/cotton-bath-towels-teal.webp",
+    name: "100% Cotton Bath Towels - 2 Pack, Light Teal",
+    rating: {
+      stars: 4.5,
+      count: 93,
+    },
+    priceCents: 2110,
+    keywords: ["bathroom", "home", "towels"],
+  },
+  {
+    id: "10ed8504-57db-433c-b0a3-fc71a35c88a1",
+    image: "images/products/knit-athletic-sneakers-pink.webp",
+    name: "Waterproof Knit Athletic Sneakers - Pink",
+    rating: {
+      stars: 4,
+      count: 89,
+    },
+    priceCents: 3390,
+    keywords: ["shoes", "running shoes", "footwear", "womens"],
+  },
+  {
+    id: "77a845b1-16ed-4eac-bdf9-5b591882113d",
+    image: "images/products/countertop-blender-64-oz.jpg",
+    name: "Countertop Blender - 64oz, 1400 Watts",
+    rating: {
+      stars: 4,
+      count: 3,
+    },
+    priceCents: 10747,
+    keywords: ["food blenders", "kitchen", "appliances"],
+    type: "appliances",
+    instructionsLink: "images/appliance-instructions.png",
+    warrantyLink: "images/appliance-warranty.png",
+  },
+  {
+    id: "36c64692-677f-4f58-b5ec-0dc2cf109e27",
+    image: "images/products/floral-mixing-bowl-set.jpg",
+    name: "10-Piece Mixing Bowl Set with Lids - Floral",
+    rating: {
+      stars: 5,
+      count: 679,
+    },
+    priceCents: 3899,
+    keywords: ["mixing bowls", "baking", "cookware", "kitchen"],
+  },
+  {
+    id: "aaa65ef3-8d6f-4eb3-bc9b-a6ea49047d8f",
+    image: "images/products/kitchen-paper-towels-30-pack.jpg",
+    name: "2-Ply Kitchen Paper Towels - 30 Pack",
+    rating: {
+      stars: 4.5,
+      count: 1045,
+    },
+    priceCents: 5799,
+    keywords: ["kitchen", "kitchen towels", "tissues"],
+  },
+  {
+    id: "bc2847e9-5323-403f-b7cf-57fde044a955",
+    image: "images/products/men-cozy-fleece-zip-up-hoodie-red.jpg",
+    name: "Men's Full-Zip Hooded Fleece Sweatshirt",
+    rating: {
+      stars: 4.5,
+      count: 3157,
+    },
+    priceCents: 2400,
+    keywords: ["sweaters", "hoodies", "apparel", "mens"],
+  },
+  {
+    id: "bc2847easd23",
+    image: "images/products/box2_image.jpg",
+    name: "Health & Presonal care",
+    rating: {
+      stars: 4.5,
+      count: 357,
+    },
+    priceCents: 2100,
+    keywords: ["clean", "presonal care", "mens"],
+  },
+  {
+    id: "bc2847e9-5323-103f-b7cf-57fde044a955",
+    image: "images/products/fit.jpg",
+    name: "For your Fitness needs",
+    rating: {
+      stars: 4.5,
+      count: 3157,
+    },
+    priceCents: 22400,
+    keywords: ["sweaters", "hoodies", "apparel", "mens"],
+  },
+  {
+    id: "adf343f-b7cf-57fde044a955",
+    image: "images/products/gitter.jpg",
+    name: "Creat with strip lights",
+    rating: {
+      stars: 4,
+      count: 3157,
+    },
+    priceCents: 1500,
+    keywords: ["light", "rgb", "gitter"],
+    type: "appliances",
+    instructionsLink: "images/appliance-instructions.png",
+    warrantyLink: "images/appliance-warranty.png",
+  },
+  {
+    id: "bc2847e9-5023-403f-b7cf-57fde044a955",
+    image: "images/products/phone.jpg",
+    name: "S22-Ultra SUMSANG",
+    rating: {
+      stars: 5,
+      count: 3157,
+    },
+    priceCents: 52400,
+    keywords: ["sumsang", "phone", "ultra"],
+    type: "appliances",
+    instructionsLink: "images/appliance-instructions.png",
+    warrantyLink: "images/appliance-warranty.png",
+  },
+  {
+    id: "bc2847e9-5323-403f-b7cf-57fde044a955",
+    image: "images/products/box3_image.jpg",
+    name: "Table & Chair",
+    rating: {
+      stars: 3,
+      count: 37,
+    },
+    priceCents: 22400,
+    keywords: ["table", "chair"],
+  },
+].map((productDetails) => {
+  if (productDetails.type === "clothing") {
+    return new Clothing(productDetails);
+  } else if (productDetails.type === "appliances") {
+    return new Appliances(productDetails);
+  }
+  return new Product(productDetails);
+});
+export function getProduct(productId) {
+  let matchingProduct;
+  kaka.forEach((product) => {
+    if (product.id === productId) {
+      matchingProduct = product;
+    }
+  });
+  return matchingProduct;
+}
 export let products = [];
 export function loadProducts(fun) {
-  const xhr = new XMLHttpRequest();
-  xhr.addEventListener("load", () => {
-    products = JSON.parse(xhr.response).map((productDetails) => {
-      if (productDetails.type === "clothing") {
-        return new Clothing(productDetails);
-      } else if (productDetails.type === "appliances") {
-        return new Appliances(productDetails);
-      }
-      return new Product(productDetails);
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.addEventListener("load", () => {
+      products = JSON.parse(xhr.response).map((productDetails) => {
+        if (productDetails.type === "clothing") {
+          return new Clothing(productDetails);
+        } else if (productDetails.type === "appliances") {
+          return new Appliances(productDetails);
+        }
+        return new Product(productDetails);
+      });
+      console.log("load Products"); 
+      fun();
+      resolve();
     });
-    console.log("load Products");
-    fun();
+    xhr.open("GET", "https://supersimplebackend.dev/products");
+    xhr.send();
   });
-  xhr.open("GET", "https://supersimplebackend.dev/products");
-  xhr.send();
 }
 

From 18213a0611b8c949fa88ba0f374633341ceef784 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 20 Jan 2025 12:28:25 +0530
Subject: [PATCH 06/31] Refactor checkout.js to use async/await for product
 loading and order summary rendering

---
 public/js/checkout.js | 55 ++++++++++++++++++++-----------------------
 1 file changed, 25 insertions(+), 30 deletions(-)

diff --git a/public/js/checkout.js b/public/js/checkout.js
index 86f5424..2f22012 100644
--- a/public/js/checkout.js
+++ b/public/js/checkout.js
@@ -1,36 +1,31 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js";
 import { loadProducts } from "./products.js";
-//callbacks
-// loadProducts(() => {
-//   renderOrderSummary();
-// });
-
-new Promise((resolve, reject) => {
-  try {
-    loadProducts(() => {
-      resolve();
-    });
-  } catch (error) {
-    reject("Failed to load products.");
-  }
-})
-  .then(() => {
-    renderOrderSummary();
-  })
-  .catch((error) => {
-    console.log(error);
-  });
-
-// initializeCart();
-// async function initializeCart() {
+// new Promise((resolve, reject) => {
 //   try {
-//     await new Promise((resolve, reject) => {
-//       loadProducts(() => {
-//         resolve();
-//       });
+//     loadProducts(() => {
+//       resolve();
 //     });
-//     renderOrderSummary();
 //   } catch (error) {
-//     alert(error);
+//     reject("Failed to load products.");
 //   }
-// }
+// })
+//   .then(() => {
+//     renderOrderSummary();
+//   })
+//   .catch((error) => {
+//     console.log(error);
+//   });
+
+  async function initializeCart() {
+      try {
+    await new Promise((resolve, reject) => {
+      loadProducts(() => {
+        resolve();
+      });
+    });
+    renderOrderSummary();
+  } catch (error) {
+    alert(error);
+  }
+}
+initializeCart();
\ No newline at end of file

From b35fdaab5219b90db15bbaff4234e11aef4f9495 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 20 Jan 2025 12:54:01 +0530
Subject: [PATCH 07/31] Convert loadProducts from XHR to fetch

---
 public/js/amazon.js   | 18 ++++--------------
 public/js/checkout.js | 27 +++++----------------------
 public/js/products.js | 23 +++++++++++------------
 3 files changed, 20 insertions(+), 48 deletions(-)

diff --git a/public/js/amazon.js b/public/js/amazon.js
index 40548ec..83d0c5a 100644
--- a/public/js/amazon.js
+++ b/public/js/amazon.js
@@ -1,18 +1,8 @@
 import { cart } from "/js/cart-class.js";
-import { products, loadProducts } from "/js/products.js";
-initializeProducts();
-async function initializeProducts() {
-  try {
-    await new Promise((resolve, reject) => {
-      loadProducts(() => {
-        resolve();
-      });
-    });
-    renderProductsGrid();
-  } catch (error) {
-    alert(error);
-  }
-}
+import { products, loadProductsFetch } from "/js/products.js";
+loadProductsFetch().then(() => {
+  renderProductsGrid();
+});
 export function renderProductsGrid() {
   let productsHTML = "";
   products.forEach((product) => {
diff --git a/public/js/checkout.js b/public/js/checkout.js
index 2f22012..12d31c7 100644
--- a/public/js/checkout.js
+++ b/public/js/checkout.js
@@ -1,27 +1,10 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js";
-import { loadProducts } from "./products.js";
-// new Promise((resolve, reject) => {
-//   try {
-//     loadProducts(() => {
-//       resolve();
-//     });
-//   } catch (error) {
-//     reject("Failed to load products.");
-//   }
-// })
-//   .then(() => {
-//     renderOrderSummary();
-//   })
-//   .catch((error) => {
-//     console.log(error);
-//   });
-
-  async function initializeCart() {
-      try {
+import { loadProductsFetch } from "./products.js";
+async function initializeCart() {
+  try {
     await new Promise((resolve, reject) => {
-      loadProducts(() => {
-        resolve();
-      });
+      loadProductsFetch();
+      resolve();
     });
     renderOrderSummary();
   } catch (error) {
diff --git a/public/js/products.js b/public/js/products.js
index c73979d..9f93060 100644
--- a/public/js/products.js
+++ b/public/js/products.js
@@ -702,11 +702,12 @@ export function getProduct(productId) {
   return matchingProduct;
 }
 export let products = [];
-export function loadProducts(fun) {
-  return new Promise((resolve, reject) => {
-    const xhr = new XMLHttpRequest();
-    xhr.addEventListener("load", () => {
-      products = JSON.parse(xhr.response).map((productDetails) => {
+
+export function loadProductsFetch() {
+  const Promise = fetch("https://supersimplebackend.dev/products")
+    .then((response) => response.json())
+    .then((data) => {
+      products = data.map((productDetails) => {
         if (productDetails.type === "clothing") {
           return new Clothing(productDetails);
         } else if (productDetails.type === "appliances") {
@@ -714,12 +715,10 @@ export function loadProducts(fun) {
         }
         return new Product(productDetails);
       });
-      console.log("load Products"); 
-      fun();
-      resolve();
+      console.log("load Products");
+    })
+    .catch((error) => {
+      console.error("Error fetching data:", error);
     });
-    xhr.open("GET", "https://supersimplebackend.dev/products");
-    xhr.send();
-  });
+  return Promise;
 }
-

From d50ed18fde1920ee7106e6088f10b50d97511e54 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 20 Jan 2025 13:06:13 +0530
Subject: [PATCH 08/31] Convert from promises to async await

---
 public/js/checkout.js | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/public/js/checkout.js b/public/js/checkout.js
index 12d31c7..2ffc6bb 100644
--- a/public/js/checkout.js
+++ b/public/js/checkout.js
@@ -1,14 +1,11 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js";
 import { loadProductsFetch } from "./products.js";
-async function initializeCart() {
+initializeCheckout();
+async function initializeCheckout() {
   try {
-    await new Promise((resolve, reject) => {
-      loadProductsFetch();
-      resolve();
-    });
+    await loadProductsFetch();
     renderOrderSummary();
   } catch (error) {
     alert(error);
   }
-}
-initializeCart();
\ No newline at end of file
+}
\ No newline at end of file

From db8c3ce572b6854c26cab403a17f7de3f0160d92 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 20 Jan 2025 13:14:38 +0530
Subject: [PATCH 09/31] Learn error handling

---
 public/js/products.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/public/js/products.js b/public/js/products.js
index 9f93060..d2653b9 100644
--- a/public/js/products.js
+++ b/public/js/products.js
@@ -718,7 +718,7 @@ export function loadProductsFetch() {
       console.log("load Products");
     })
     .catch((error) => {
-      console.error("Error fetching data:", error);
+      alert("Error fetching data:", error);
     });
   return Promise;
 }

From 41c3d1856cc8dd12c01e5493751996ceb9947f8c Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 20 Jan 2025 21:01:43 +0530
Subject: [PATCH 10/31] Create order using the backend

---
 public/js/checkout/paymentSummery.js | 24 +++++++++++++++++++++++-
 public/js/order.js                   | 10 ++++++++++
 views/listings/checkout.ejs          |  2 +-
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 public/js/order.js

diff --git a/public/js/checkout/paymentSummery.js b/public/js/checkout/paymentSummery.js
index 12064fa..a188f89 100644
--- a/public/js/checkout/paymentSummery.js
+++ b/public/js/checkout/paymentSummery.js
@@ -2,7 +2,7 @@ import { cart } from "/js/cart-class.js";
 import { getProduct } from "/js/products.js";
 import { getDeliveryOption } from "/js/deliveryOptions.js";
 import { formatCurrency } from "/js/money.js";
-
+import { addOrder } from "../order.js";
 export function renderPaymentSummary() {
   let productPriceCents = 0;
   let shippingPriceCents = 0;
@@ -16,3 +16,25 @@ export function renderPaymentSummary() {
   const totalPayment = formatCurrency(productPriceCents + shippingPriceCents);
   return { productPriceCents, shippingPrice, totalPayment };
 }
+document
+  .querySelector(".js-place-order")
+  .addEventListener("click", async () => {
+    try {
+      const response = await fetch("https://supersimplebackend.dev/orders", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          cart: cart,
+        }),
+      });
+
+      const order = await response.json();
+      addOrder(order);
+    } catch (error) {
+      console.log(`Unexpected error, Try again later`,error);
+      alert(error);
+    }
+    // window.location.href = 'orders.html';
+  });
diff --git a/public/js/order.js b/public/js/order.js
new file mode 100644
index 0000000..dacf3e5
--- /dev/null
+++ b/public/js/order.js
@@ -0,0 +1,10 @@
+
+export const order = JSON.parse(localStorage.getItem('orders')) || [];
+export function addOrder(order){
+  // order.unshift(order);
+  saveToStroage();
+}
+
+function saveToStroage(){
+  localStorage.setItem('orders', JSON.stringify(order));
+}
\ No newline at end of file
diff --git a/views/listings/checkout.ejs b/views/listings/checkout.ejs
index f9c46cd..cd1322b 100644
--- a/views/listings/checkout.ejs
+++ b/views/listings/checkout.ejs
@@ -48,7 +48,7 @@
           <div class="payment-summary-money js-order-total"></div>
         </div>
 
-        <button class="place-order-button button-primary">
+        <button class="place-order-button button-primary js-place-order">
           Place your order
         </button>
       </div>

From 6287d57854299e1ef3218bfc238d9228238a9edd Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Tue, 21 Jan 2025 12:45:28 +0530
Subject: [PATCH 11/31] Create order page

---
 index.js                             | 4 ++++
 public/css/checkout/checkout.css     | 4 ++++
 public/js/checkout/paymentSummery.js | 1 +
 views/includes/navbar.ejs            | 2 +-
 views/listings/checkout.ejs          | 2 +-
 views/listings/order.ejs             | 5 +++++
 6 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 views/listings/order.ejs

diff --git a/index.js b/index.js
index af86cb2..71714dd 100644
--- a/index.js
+++ b/index.js
@@ -17,6 +17,10 @@ app.get("/checkout", (req, res) => {
   res.render("listings/checkout.ejs");
 });
 
+app.get("/order", (req, res) => {
+  res.render("listings/order.ejs");
+});
+
 app.listen(8000, () => {
   console.log("App is listening on port 8000");
 });
diff --git a/public/css/checkout/checkout.css b/public/css/checkout/checkout.css
index 4fc9135..f7c3831 100644
--- a/public/css/checkout/checkout.css
+++ b/public/css/checkout/checkout.css
@@ -243,6 +243,10 @@
   margin-top: 11px;
   margin-bottom: 15px;
 }
+.place-order-button a{
+  text-decoration: none;
+  color: black;
+}
 .quantity-input {
   width: 30px;
   height: 20px;
diff --git a/public/js/checkout/paymentSummery.js b/public/js/checkout/paymentSummery.js
index a188f89..56b326a 100644
--- a/public/js/checkout/paymentSummery.js
+++ b/public/js/checkout/paymentSummery.js
@@ -32,6 +32,7 @@ document
 
       const order = await response.json();
       addOrder(order);
+      console.log("order placed");
     } catch (error) {
       console.log(`Unexpected error, Try again later`,error);
       alert(error);
diff --git a/views/includes/navbar.ejs b/views/includes/navbar.ejs
index e1c4d89..4399c96 100644
--- a/views/includes/navbar.ejs
+++ b/views/includes/navbar.ejs
@@ -51,7 +51,7 @@
       <span class="orders-text">Account & Lists</span>
     </a>
 
-    <a class="orders-link header-link" href="orders.html">
+    <a class="orders-link header-link" href="/order">
       <span class="returns-text">Returns</span>
       <span class="orders-text">& Orders</span>
     </a>
diff --git a/views/listings/checkout.ejs b/views/listings/checkout.ejs
index cd1322b..271c7d7 100644
--- a/views/listings/checkout.ejs
+++ b/views/listings/checkout.ejs
@@ -49,7 +49,7 @@
         </div>
 
         <button class="place-order-button button-primary js-place-order">
-          Place your order
+          <a href="/order">Place your order</a>
         </button>
       </div>
   </div>
diff --git a/views/listings/order.ejs b/views/listings/order.ejs
new file mode 100644
index 0000000..4ad7969
--- /dev/null
+++ b/views/listings/order.ejs
@@ -0,0 +1,5 @@
+<% layout('layouts/boilerPlate') -%>
+<title>Order</title>
+<body>
+  <h1>here is your order</h1>
+</body>
\ No newline at end of file

From 857d43a3ba304157c8ae1edf73d1bca54373433f Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Tue, 21 Jan 2025 23:22:20 +0530
Subject: [PATCH 12/31] Add order details layout and styling

---
 public/css/order/order.css | 12 ++++++++++++
 views/listings/order.ejs   | 23 +++++++++++++++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)
 create mode 100644 public/css/order/order.css

diff --git a/public/css/order/order.css b/public/css/order/order.css
new file mode 100644
index 0000000..6375de7
--- /dev/null
+++ b/public/css/order/order.css
@@ -0,0 +1,12 @@
+body{
+  margin-top: 9rem;
+}
+.main{
+  width: 80%;
+  margin-left: auto;
+  margin-right: auto;
+  background-color: grey;
+}
+.orderDetails{
+  display: flex;
+}
\ No newline at end of file
diff --git a/views/listings/order.ejs b/views/listings/order.ejs
index 4ad7969..9d6060a 100644
--- a/views/listings/order.ejs
+++ b/views/listings/order.ejs
@@ -1,5 +1,24 @@
 <% layout('layouts/boilerPlate') -%>
 <title>Order</title>
+<link rel="stylesheet" href="css/order/order.css" />
 <body>
-  <h1>here is your order</h1>
-</body>
\ No newline at end of file
+  <div class="main">
+    <h1>Your Orders</h1>
+    <div class="orderDetails">
+      <orderPlacedTotal
+        ><div class="placed">
+          <b>Order Placed:</b>
+          <p>January 21</p>
+        </div>
+        <div class="total">
+          <b>Total</b>
+          <p>$34.23</p>
+        </div>
+      </orderPlacedTotal>
+      <orderId>
+        <b>Order ID:</b>
+        <p>77d8dba6-bab2-bd79-bdf0-55d309b3e639</p>
+      </orderId>
+    </div>
+  </div>
+</body>

From 0171312f2fe9467b48b8f8a710a2c256cc82e8fd Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Thu, 23 Jan 2025 12:53:49 +0530
Subject: [PATCH 13/31] Enhance order page layout and styling; add order header
 and total display

---
 public/css/order/order.css | 38 ++++++++++++++++++++++++++++++++------
 public/js/returnOrder.js   |  7 +++++++
 views/listings/order.ejs   | 30 +++++++++++++++++-------------
 3 files changed, 56 insertions(+), 19 deletions(-)
 create mode 100644 public/js/returnOrder.js

diff --git a/public/css/order/order.css b/public/css/order/order.css
index 6375de7..c89d113 100644
--- a/public/css/order/order.css
+++ b/public/css/order/order.css
@@ -1,12 +1,38 @@
-body{
-  margin-top: 9rem;
+body {
+  margin-top: 8.4rem;
 }
-.main{
+.main {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
-  background-color: grey;
 }
-.orderDetails{
+h1 {
+  padding: 2rem 0;
+  margin: 0;
+}
+.order-header {
+  display: flex;
+  justify-content: space-between;
+  border: 2px solid grey;
+  padding: 1.5rem 2rem;
+  background-color: #f0f2f2;
+  border-radius: 1rem;
+}
+.order-header div p {
+  margin: 0.3rem;
+}
+.order-total {
   display: flex;
-}
\ No newline at end of file
+}
+.order-total .total {
+  padding-left: 3.5rem;
+}
+.order-details-grid {
+  display: grid;
+  margin: 4rem 2.5rem;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: 80px 200px;
+  gap: 10px;
+  background-color: #2196f3;
+  padding: 10px;
+}
diff --git a/public/js/returnOrder.js b/public/js/returnOrder.js
new file mode 100644
index 0000000..c9e0ce6
--- /dev/null
+++ b/public/js/returnOrder.js
@@ -0,0 +1,7 @@
+import { cart } from "/js/cart-class.js";
+if (cart.calculateCartQuantity() === 0) {
+    document.querySelector(".js-cart-quantity").innerHTML = "";
+  } else {
+    document.querySelector(".js-cart-quantity").innerHTML =
+      cart.calculateCartQuantity();
+  }
\ No newline at end of file
diff --git a/views/listings/order.ejs b/views/listings/order.ejs
index 9d6060a..9ef84a8 100644
--- a/views/listings/order.ejs
+++ b/views/listings/order.ejs
@@ -4,21 +4,25 @@
 <body>
   <div class="main">
     <h1>Your Orders</h1>
-    <div class="orderDetails">
-      <orderPlacedTotal
-        ><div class="placed">
-          <b>Order Placed:</b>
-          <p>January 21</p>
+    <div class="order">
+      <div class="order-header">
+        <div class="order-total">
+          <div class="order">
+            <b>Order Placed:</b>
+            <p>January 22</p>
+          </div>
+          <div class="total">
+            <b>Total</b>
+            <p>$543</p>
+          </div>
         </div>
-        <div class="total">
-          <b>Total</b>
-          <p>$34.23</p>
+        <div class="order-id">
+          <b>Order Id</b>
+          <p>73bce3e6-ffb4-8261-9561-f3a2d8d3b609</p>
         </div>
-      </orderPlacedTotal>
-      <orderId>
-        <b>Order ID:</b>
-        <p>77d8dba6-bab2-bd79-bdf0-55d309b3e639</p>
-      </orderId>
+      </div>
+      <div class="order-etails-grid"></div>
     </div>
   </div>
+  <script type="module" src="/js/returnOrder.js"></script>
 </body>

From 9940dadf24d640bcf888075052c8feb31f6e6ed2 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Thu, 23 Jan 2025 23:47:33 +0530
Subject: [PATCH 14/31] Add order details section with product information and
 styling

---
 public/css/order/order.css |  9 +++++++--
 views/listings/order.ejs   | 13 ++++++++++++-
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/public/css/order/order.css b/public/css/order/order.css
index c89d113..7c55fbc 100644
--- a/public/css/order/order.css
+++ b/public/css/order/order.css
@@ -2,7 +2,7 @@ body {
   margin-top: 8.4rem;
 }
 .main {
-  width: 80%;
+  /* width: 80%; */
   margin-left: auto;
   margin-right: auto;
 }
@@ -10,13 +10,18 @@ h1 {
   padding: 2rem 0;
   margin: 0;
 }
+.order{
+  
+  border: 0.2rem solid grey;
+  border-radius: 1rem;
+}
 .order-header {
   display: flex;
   justify-content: space-between;
-  border: 2px solid grey;
   padding: 1.5rem 2rem;
   background-color: #f0f2f2;
   border-radius: 1rem;
+  border-bottom: grey;
 }
 .order-header div p {
   margin: 0.3rem;
diff --git a/views/listings/order.ejs b/views/listings/order.ejs
index 9ef84a8..d3dbeab 100644
--- a/views/listings/order.ejs
+++ b/views/listings/order.ejs
@@ -21,7 +21,18 @@
           <p>73bce3e6-ffb4-8261-9561-f3a2d8d3b609</p>
         </div>
       </div>
-      <div class="order-etails-grid"></div>
+      <div class="order-details-grid">
+        <div class="product-img">
+          <img src="../../public/images/products/bathroom-rug.jpg" alt="img">
+        </div>
+        <div class="product-info">
+          <b>Product name</b>
+          <p>arriving on : 25 January</p>
+          <p>quantity : 3</p>
+          <button>Buy again</button>
+        </div>
+        <div class="track">
+          <button>Track package
     </div>
   </div>
   <script type="module" src="/js/returnOrder.js"></script>

From a6ed174a05fe726a5028b6780acf152dbf64b171 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Fri, 24 Jan 2025 02:12:06 +0530
Subject: [PATCH 15/31] Refactor order details layout and styling; enhance
 product display and interaction elements

---
 public/css/order/order.css | 70 ++++++++++++++++++++++++++++++--------
 views/listings/order.ejs   | 53 +++++++++++++++++++++++++----
 2 files changed, 102 insertions(+), 21 deletions(-)

diff --git a/public/css/order/order.css b/public/css/order/order.css
index 7c55fbc..c05b348 100644
--- a/public/css/order/order.css
+++ b/public/css/order/order.css
@@ -1,18 +1,18 @@
 body {
   margin-top: 8.4rem;
 }
-.main {
-  /* width: 80%; */
+.main{
+  width: 80%;
   margin-left: auto;
   margin-right: auto;
+  margin-bottom: 5rem;
 }
 h1 {
   padding: 2rem 0;
   margin: 0;
 }
-.order{
-  
-  border: 0.2rem solid grey;
+.order-details{
+  border: 2px solid #d5d9d9;
   border-radius: 1rem;
 }
 .order-header {
@@ -20,8 +20,9 @@ h1 {
   justify-content: space-between;
   padding: 1.5rem 2rem;
   background-color: #f0f2f2;
-  border-radius: 1rem;
-  border-bottom: grey;
+  border-top-left-radius: 1rem;
+  border-top-right-radius: 1rem;
+  border-bottom: 2px solid #d5d9d9;
 }
 .order-header div p {
   margin: 0.3rem;
@@ -30,14 +31,55 @@ h1 {
   display: flex;
 }
 .order-total .total {
-  padding-left: 3.5rem;
+  padding-left: 4rem;
 }
 .order-details-grid {
   display: grid;
-  margin: 4rem 2.5rem;
-  grid-template-columns: auto auto auto;
-  grid-template-rows: 80px 200px;
-  gap: 10px;
-  background-color: #2196f3;
-  padding: 10px;
+  grid-template-columns: 9rem 1fr 18rem;
+  row-gap: 20px;
+  column-gap: 30px;
+  margin: 1.5rem 2rem;
+  align-items: center;
+  grid-template-rows: auto auto auto;
+}
+.product-img img{
+  max-width: 9rem;
+  max-height: 9rem;
+}
+.product-info p{
+  margin: 5px 0;
+}
+.product-info button{
+  background-color: rgba(247, 202, 20, .8);
+  border: none;
+  height: 3rem;
+  width: 12rem;
+  font-size: larger;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5)
+}
+.product-info button:hover{
+  background-color: rgb(247, 202, 20);
+
+}
+.product-info button img{
+  height: 2rem;
+}
+.product-info button span{
+  padding-left: 1rem;
+}
+.track button{
+  background-color: white;
+  border: 2px solid #d5d9d9;
+  height: 3rem;
+  width: 15rem;
+  font-size: larger;
+  border-radius: 8px;
+  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5)
+}
+.track button:hover{
+  background-color: #f7fafa;
 }
diff --git a/views/listings/order.ejs b/views/listings/order.ejs
index d3dbeab..42cd8da 100644
--- a/views/listings/order.ejs
+++ b/views/listings/order.ejs
@@ -3,8 +3,8 @@
 <link rel="stylesheet" href="css/order/order.css" />
 <body>
   <div class="main">
-    <h1>Your Orders</h1>
-    <div class="order">
+    <h1>Your Orders..</h1>
+    <div class="order-details">
       <div class="order-header">
         <div class="order-total">
           <div class="order">
@@ -23,16 +23,55 @@
       </div>
       <div class="order-details-grid">
         <div class="product-img">
-          <img src="../../public/images/products/bathroom-rug.jpg" alt="img">
+          <img src="/images/products/backpack.jpg" alt="img" />
         </div>
         <div class="product-info">
           <b>Product name</b>
-          <p>arriving on : 25 January</p>
-          <p>quantity : 3</p>
-          <button>Buy again</button>
+          <p>Arriving on : 25 January</p>
+          <p>Quantity : 3</p>
+          <button>
+            <img src="/images/icons/buy-again.png" alt="" />
+            <span>Buy it again</span>
+          </button>
         </div>
         <div class="track">
-          <button>Track package
+          <button>Track package</button>
+        </div>
+      </div>
+      <div class="order-details-grid">
+        <div class="product-img">
+          <img src="/images/products/black-2-slot-toaster.jpg" alt="img" />
+        </div>
+        <div class="product-info">
+          <b>Product name</b>
+          <p>Arriving on : 25 January</p>
+          <p>Quantity : 3</p>
+          <button>
+            <img src="/images/icons/buy-again.png" alt="" />
+            <span>Buy it again</span>
+          </button>
+        </div>
+        <div class="track">
+          <button>Track package</button>
+        </div>
+      </div>
+      <div class="order-details-grid">
+        <div class="product-img">
+          <img src="/images/products/bathroom-rug.jpg" alt="img" />
+        </div>
+        <div class="product-info">
+          <b>Product name</b>
+          <p>Arriving on : 25 January</p>
+          <p>Quantity : 3</p>
+          <button>
+            <img src="/images/icons/buy-again.png" alt="" />
+            <span>Buy it again</span>
+          </button>
+        </div>
+        <div class="track">
+          <button>Track package</button>
+        </div>
+      </div>
     </div>
   </div>
   <script type="module" src="/js/returnOrder.js"></script>

From e19996dbd63da91c9f0fbf2cb5013a7b1b8d17d2 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Fri, 24 Jan 2025 10:53:37 +0530
Subject: [PATCH 16/31] Refactor order details rendering;

---
 public/js/checkout/paymentSummery.js | 44 ++++++++++++-------------
 public/js/order.js                   |  9 +++--
 public/js/returnOrder.js             | 48 ++++++++++++++++++++++++---
 views/listings/order.ejs             | 49 ----------------------------
 4 files changed, 69 insertions(+), 81 deletions(-)

diff --git a/public/js/checkout/paymentSummery.js b/public/js/checkout/paymentSummery.js
index 56b326a..f9a3540 100644
--- a/public/js/checkout/paymentSummery.js
+++ b/public/js/checkout/paymentSummery.js
@@ -16,26 +16,26 @@ export function renderPaymentSummary() {
   const totalPayment = formatCurrency(productPriceCents + shippingPriceCents);
   return { productPriceCents, shippingPrice, totalPayment };
 }
-document
-  .querySelector(".js-place-order")
-  .addEventListener("click", async () => {
-    try {
-      const response = await fetch("https://supersimplebackend.dev/orders", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({
-          cart: cart,
-        }),
-      });
+// document
+//   .querySelector(".js-place-order")
+//   .addEventListener("click", async () => {
+//     try {
+//       const response = await fetch("https://supersimplebackend.dev/orders", {
+//         method: "POST",
+//         headers: {
+//           "Content-Type": "application/json",
+//         },
+//         body: JSON.stringify({
+//           cart: cart,
+//         }),
+//       });
 
-      const order = await response.json();
-      addOrder(order);
-      console.log("order placed");
-    } catch (error) {
-      console.log(`Unexpected error, Try again later`,error);
-      alert(error);
-    }
-    // window.location.href = 'orders.html';
-  });
+//       const order = await response.json();
+//       addOrder(order);
+//       console.log("order placed");
+//     } catch (error) {
+//       console.log(`Unexpected error, Try again later`,error);
+//       alert(error);
+//     }
+//     // window.location.href = 'orders.html';
+//   });
diff --git a/public/js/order.js b/public/js/order.js
index dacf3e5..9d0e91b 100644
--- a/public/js/order.js
+++ b/public/js/order.js
@@ -1,10 +1,9 @@
-
-export const order = JSON.parse(localStorage.getItem('orders')) || [];
-export function addOrder(order){
+export const order = JSON.parse(localStorage.getItem("orders")) || [];
+export function addOrder(order) {
   // order.unshift(order);
   saveToStroage();
 }
 
-function saveToStroage(){
-  localStorage.setItem('orders', JSON.stringify(order));
+function saveToStroage() {
+  localStorage.setItem("orders", JSON.stringify(order));
 }
\ No newline at end of file
diff --git a/public/js/returnOrder.js b/public/js/returnOrder.js
index c9e0ce6..b1adc7b 100644
--- a/public/js/returnOrder.js
+++ b/public/js/returnOrder.js
@@ -1,7 +1,45 @@
 import { cart } from "/js/cart-class.js";
+import { getProduct } from "./products.js";
+import { calculateDeliveryDate } from "./deliveryOptions.js";
+renderCartSummary();
+function renderCartSummary() {
+  let cartSummaryHtml = "";
+  cart.cartItems.forEach((cartItem) => {
+    const productId = cartItem.productId;
+    const matchingProduct = getProduct(productId);
+    const dateString = calculateDeliveryDate(7);
+    cartSummaryHtml += `
+    <div class="product-img">
+          <img src=/${matchingProduct.image} alt="img" />
+        </div>
+        <div class="product-info">
+          <b>${matchingProduct.name}</b>
+          <p>Arriving on : ${dateString}</p>
+          <p>Quantity : ${matchingProduct.quantity}</p>
+          <button>
+            <img src="/images/icons/buy-again.png" alt="" />
+            <span>Buy it again</span>
+          </button>
+        </div>
+        <div class="track">
+          <button>Track package</button>
+        </div>`;
+  });
+  document.querySelector(".order-details-grid").innerHTML = cartSummaryHtml;
+}
+document.querySelectorAll(".product-info button").forEach((button) => {
+  button.addEventListener("click", () => {
+    console.log("add ot cart");
+  });
+});
+document.querySelectorAll(".track").forEach((button) => {
+  button.addEventListener("click", () => {
+    console.log("track order");
+  });
+});
 if (cart.calculateCartQuantity() === 0) {
-    document.querySelector(".js-cart-quantity").innerHTML = "";
-  } else {
-    document.querySelector(".js-cart-quantity").innerHTML =
-      cart.calculateCartQuantity();
-  }
\ No newline at end of file
+  document.querySelector(".js-cart-quantity").innerHTML = "";
+} else {
+  document.querySelector(".js-cart-quantity").innerHTML =
+    cart.calculateCartQuantity();
+}
diff --git a/views/listings/order.ejs b/views/listings/order.ejs
index 42cd8da..34ae134 100644
--- a/views/listings/order.ejs
+++ b/views/listings/order.ejs
@@ -22,55 +22,6 @@
         </div>
       </div>
       <div class="order-details-grid">
-        <div class="product-img">
-          <img src="/images/products/backpack.jpg" alt="img" />
-        </div>
-        <div class="product-info">
-          <b>Product name</b>
-          <p>Arriving on : 25 January</p>
-          <p>Quantity : 3</p>
-          <button>
-            <img src="/images/icons/buy-again.png" alt="" />
-            <span>Buy it again</span>
-          </button>
-        </div>
-        <div class="track">
-          <button>Track package</button>
-        </div>
-      </div>
-      <div class="order-details-grid">
-        <div class="product-img">
-          <img src="/images/products/black-2-slot-toaster.jpg" alt="img" />
-        </div>
-        <div class="product-info">
-          <b>Product name</b>
-          <p>Arriving on : 25 January</p>
-          <p>Quantity : 3</p>
-          <button>
-            <img src="/images/icons/buy-again.png" alt="" />
-            <span>Buy it again</span>
-          </button>
-        </div>
-        <div class="track">
-          <button>Track package</button>
-        </div>
-      </div>
-      <div class="order-details-grid">
-        <div class="product-img">
-          <img src="/images/products/bathroom-rug.jpg" alt="img" />
-        </div>
-        <div class="product-info">
-          <b>Product name</b>
-          <p>Arriving on : 25 January</p>
-          <p>Quantity : 3</p>
-          <button>
-            <img src="/images/icons/buy-again.png" alt="" />
-            <span>Buy it again</span>
-          </button>
-        </div>
-        <div class="track">
-          <button>Track package</button>
-        </div>
       </div>
     </div>
   </div>

From d5f616100fa87737915153561abf7c9466f6b17c Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Sat, 25 Jan 2025 09:36:15 +0530
Subject: [PATCH 17/31] Add view products button

---
 public/css/checkout/checkout.css   | 26 +++++++++++++++++++++++---
 public/js/checkout.js              |  6 +++++-
 public/js/checkout/orderSummary.js |  5 +++++
 public/js/returnOrder.js           | 17 ++++++++++-------
 views/listings/checkout.ejs        |  1 +
 5 files changed, 44 insertions(+), 11 deletions(-)

diff --git a/public/css/checkout/checkout.css b/public/css/checkout/checkout.css
index f7c3831..8b94533 100644
--- a/public/css/checkout/checkout.css
+++ b/public/css/checkout/checkout.css
@@ -65,7 +65,23 @@
   padding-left: 8rem;
   padding-right: 8rem;
 }
-
+.view-products {
+  padding: 12px 18px;
+  border-radius: 8px;
+  border: none;
+  font-size: 1.3rem;
+  font-weight: 500;
+  background-color: rgba(247, 202, 0, 0.8);
+  margin: 0rem 8rem;
+  cursor: pointer;
+  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5);
+}
+.view-products:hover {
+  background-color: #f7ca00;
+}
+.display-none{
+  display: none;
+}
 .checkout-grid {
   display: grid;
   grid-template-columns: 1fr 450px;
@@ -239,11 +255,15 @@
   border: none;
   font-size: 1.3rem;
   font-weight: 500;
-  background-color: #f7ca00;
+  background-color: rgba(247, 202, 0, 0.8);
   margin-top: 11px;
   margin-bottom: 15px;
+  cursor: pointer;
+}
+.place-order-button:hover {
+  background-color: #f7ca00;
 }
-.place-order-button a{
+.place-order-button a,.view-products a {
   text-decoration: none;
   color: black;
 }
diff --git a/public/js/checkout.js b/public/js/checkout.js
index 2ffc6bb..24173e5 100644
--- a/public/js/checkout.js
+++ b/public/js/checkout.js
@@ -1,5 +1,6 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js";
 import { loadProductsFetch } from "./products.js";
+import { renderCartSummary } from "./returnOrder.js";
 initializeCheckout();
 async function initializeCheckout() {
   try {
@@ -8,4 +9,7 @@ async function initializeCheckout() {
   } catch (error) {
     alert(error);
   }
-}
\ No newline at end of file
+}
+document.querySelector(".js-place-order").addEventListener("click", () => {
+  renderCartSummary();
+});
\ No newline at end of file
diff --git a/public/js/checkout/orderSummary.js b/public/js/checkout/orderSummary.js
index 53130f4..5340a87 100644
--- a/public/js/checkout/orderSummary.js
+++ b/public/js/checkout/orderSummary.js
@@ -115,7 +115,12 @@ export function renderOrderSummary() {
       document.querySelector(".js-total-before-tax").innerHTML = "$0.00";
       document.querySelector(".js-extimated-tax").innerHTML = "$0.00";
       document.querySelector(".js-order-total").innerHTML = "$0.00";
+      document.querySelector(".payment-summary button").disabled = true;
+      document.querySelector(".payment-summary button").style.background =
+        "#ffeb89";
+      document.querySelector(".view-products").classList.remove("display-none");
     } else {
+      document.querySelector(".view-products").classList.add("display-none");
       document.querySelector(
         ".js-return-to-home-link"
       ).innerHTML = `${cartQuantity} Items`;
diff --git a/public/js/returnOrder.js b/public/js/returnOrder.js
index b1adc7b..618006d 100644
--- a/public/js/returnOrder.js
+++ b/public/js/returnOrder.js
@@ -1,14 +1,14 @@
 import { cart } from "/js/cart-class.js";
 import { getProduct } from "./products.js";
 import { calculateDeliveryDate } from "./deliveryOptions.js";
-renderCartSummary();
-function renderCartSummary() {
-  let cartSummaryHtml = "";
+// renderCartSummary();
+export function renderCartSummary() {
+  let orderSummaryHtml = "";
   cart.cartItems.forEach((cartItem) => {
     const productId = cartItem.productId;
     const matchingProduct = getProduct(productId);
     const dateString = calculateDeliveryDate(7);
-    cartSummaryHtml += `
+    orderSummaryHtml += `
     <div class="product-img">
           <img src=/${matchingProduct.image} alt="img" />
         </div>
@@ -22,11 +22,14 @@ function renderCartSummary() {
           </button>
         </div>
         <div class="track">
-          <button>Track package</button>
+          <button><i class="fa-solid fa-map-location-dot"></i>&nbsp;&nbsp;&nbsp;Track package</button>
         </div>`;
   });
-  document.querySelector(".order-details-grid").innerHTML = cartSummaryHtml;
-}
+  const orderDetailsGrid = document.querySelector(".order-details-grid");
+  if (orderDetailsGrid) {
+    orderDetailsGrid.innerHTML = orderSummaryHtml;
+  };
+};
 document.querySelectorAll(".product-info button").forEach((button) => {
   button.addEventListener("click", () => {
     console.log("add ot cart");
diff --git a/views/listings/checkout.ejs b/views/listings/checkout.ejs
index 271c7d7..1b70a60 100644
--- a/views/listings/checkout.ejs
+++ b/views/listings/checkout.ejs
@@ -14,6 +14,7 @@
 
   <div class="main">
     <div class="page-title"></div>
+    <button class="view-products" ><a href="/amazon">View Products</a></button>
     <div class="checkout-grid">
       <div class="order-summary js-order-summary">
       </div>

From b7acc08b95d69cf4da26016e6251c921d229af6b Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Sun, 26 Jan 2025 16:56:41 +0530
Subject: [PATCH 18/31] Refactor order summary layout and styling; enhance
 product display in return order

---
 public/css/order/order.css | 77 ++++++++++++++++++++++++--------------
 public/js/checkout.js      |  9 +++--
 public/js/returnOrder.js   | 45 +++++++++++++---------
 views/listings/order.ejs   |  7 ++--
 4 files changed, 85 insertions(+), 53 deletions(-)

diff --git a/public/css/order/order.css b/public/css/order/order.css
index c05b348..6dc3502 100644
--- a/public/css/order/order.css
+++ b/public/css/order/order.css
@@ -1,17 +1,19 @@
 body {
   margin-top: 8.4rem;
 }
-.main{
-  width: 80%;
+.main {
+  width: 70%;
+  max-width: 850px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 5rem;
 }
-h1 {
+.page-title {
+  font-weight: 700;
+  font-size: 22px;
   padding: 2rem 0;
-  margin: 0;
 }
-.order-details{
+.order-grid {
   border: 2px solid #d5d9d9;
   border-radius: 1rem;
 }
@@ -33,24 +35,42 @@ h1 {
 .order-total .total {
   padding-left: 4rem;
 }
-.order-details-grid {
+.cart-item-container {
+  border: 1px solid rgb(222, 222, 222);
+  border-radius: 4px;
+  padding: 18px;
+  background-color: #fff;
+  margin-bottom: 12px;
+}
+.cart-item-details-grid {
   display: grid;
   grid-template-columns: 9rem 1fr 18rem;
-  row-gap: 20px;
+  grid-template-rows: auto auto;
+  row-gap: 4rem;
   column-gap: 30px;
-  margin: 1.5rem 2rem;
   align-items: center;
-  grid-template-rows: auto auto auto;
-}
-.product-img img{
-  max-width: 9rem;
-  max-height: 9rem;
-}
-.product-info p{
-  margin: 5px 0;
+  margin: 1.5rem 2rem;
 }
-.product-info button{
-  background-color: rgba(247, 202, 20, .8);
+
+/* @media (max-width: 1000px) {
+  .cart-item-details-grid {
+    grid-template-columns: 100px 1fr;
+    row-gap: 30px;
+    }
+} */
+.product-image {
+  width: 100%;
+}
+.product-name {
+  font-weight: 700;
+  margin-bottom: 8px;
+}
+.cart-item-details .product-quantity {
+  margin-top: 0.5rem;
+}
+.cart-item-details button,
+.track {
+  background-color: rgba(247, 202, 20, 0.8);
   border: none;
   height: 3rem;
   width: 12rem;
@@ -59,27 +79,26 @@ h1 {
   justify-content: center;
   align-items: center;
   border-radius: 8px;
-  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5)
+  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5);
+  margin-top: 8px;
 }
-.product-info button:hover{
+.cart-item-details button:hover {
   background-color: rgb(247, 202, 20);
-
 }
-.product-info button img{
+.cart-item-details button img {
   height: 2rem;
 }
-.product-info button span{
+.cart-item-details button span {
   padding-left: 1rem;
 }
-.track button{
+.track {
   background-color: white;
   border: 2px solid #d5d9d9;
-  height: 3rem;
   width: 15rem;
-  font-size: larger;
-  border-radius: 8px;
-  box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5)
 }
-.track button:hover{
+.track span {
+  margin-left: 1rem;
+}
+.track:hover {
   background-color: #f7fafa;
 }
diff --git a/public/js/checkout.js b/public/js/checkout.js
index 24173e5..29aabac 100644
--- a/public/js/checkout.js
+++ b/public/js/checkout.js
@@ -10,6 +10,9 @@ async function initializeCheckout() {
     alert(error);
   }
 }
-document.querySelector(".js-place-order").addEventListener("click", () => {
-  renderCartSummary();
-});
\ No newline at end of file
+// document.querySelector(".js-place-order").addEventListener("click", () => {
+//   //why renderCartSummary not working in returnOrder.js
+//   renderCartSummary();
+//   console.log("renderCartSummary")
+// });
+// renderCartSummary();
\ No newline at end of file
diff --git a/public/js/returnOrder.js b/public/js/returnOrder.js
index 618006d..0de6393 100644
--- a/public/js/returnOrder.js
+++ b/public/js/returnOrder.js
@@ -1,7 +1,7 @@
 import { cart } from "/js/cart-class.js";
 import { getProduct } from "./products.js";
 import { calculateDeliveryDate } from "./deliveryOptions.js";
-// renderCartSummary();
+renderCartSummary();
 export function renderCartSummary() {
   let orderSummaryHtml = "";
   cart.cartItems.forEach((cartItem) => {
@@ -9,28 +9,39 @@ export function renderCartSummary() {
     const matchingProduct = getProduct(productId);
     const dateString = calculateDeliveryDate(7);
     orderSummaryHtml += `
-    <div class="product-img">
-          <img src=/${matchingProduct.image} alt="img" />
-        </div>
-        <div class="product-info">
-          <b>${matchingProduct.name}</b>
-          <p>Arriving on : ${dateString}</p>
-          <p>Quantity : ${matchingProduct.quantity}</p>
-          <button>
+      <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="delivery-date">
+            Arriving on : ${dateString}
+          </div>
+          <div class="product-quantity">
+            <span>
+              Quantity : <span class="quantity-label js-quantity-label-${matchingProduct.id}">${cartItem.quantity}</span>
+            </span>
+          </div>
+          <button class="buy-again">
             <img src="/images/icons/buy-again.png" alt="" />
             <span>Buy it again</span>
+          </button> 
+        </div>
+        <div>
+          <button class="track">
+            <i class="fa-solid fa-map-location-dot"></i><span>Track package</span>
           </button>
         </div>
-        <div class="track">
-          <button><i class="fa-solid fa-map-location-dot"></i>&nbsp;&nbsp;&nbsp;Track package</button>
-        </div>`;
+      </div>`;
   });
-  const orderDetailsGrid = document.querySelector(".order-details-grid");
+  const orderDetailsGrid = document.querySelector(".js-order-summary");
   if (orderDetailsGrid) {
-    orderDetailsGrid.innerHTML = orderSummaryHtml;
-  };
-};
-document.querySelectorAll(".product-info button").forEach((button) => {
+    document.querySelector(".js-order-summary").innerHTML = orderSummaryHtml;
+  }
+}
+document.querySelectorAll(".buy-again").forEach((button) => {
   button.addEventListener("click", () => {
     console.log("add ot cart");
   });
diff --git a/views/listings/order.ejs b/views/listings/order.ejs
index 34ae134..f838338 100644
--- a/views/listings/order.ejs
+++ b/views/listings/order.ejs
@@ -3,8 +3,8 @@
 <link rel="stylesheet" href="css/order/order.css" />
 <body>
   <div class="main">
-    <h1>Your Orders..</h1>
-    <div class="order-details">
+    <div class="page-title">Your Orders..</div>
+    <div class="order-grid">
       <div class="order-header">
         <div class="order-total">
           <div class="order">
@@ -21,8 +21,7 @@
           <p>73bce3e6-ffb4-8261-9561-f3a2d8d3b609</p>
         </div>
       </div>
-      <div class="order-details-grid">
-      </div>
+      <div class="order-summary js-order-summary"></div>
     </div>
   </div>
   <script type="module" src="/js/returnOrder.js"></script>

From 108889c8c9f7076553b8e9dfbcb1c9d56fd52c71 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Sun, 26 Jan 2025 17:51:09 +0530
Subject: [PATCH 19/31] Refactor order cart styling and class names for
 consistency

---
 public/css/order/order.css | 29 +++++++++++------------------
 public/js/returnOrder.js   | 10 +++++-----
 2 files changed, 16 insertions(+), 23 deletions(-)

diff --git a/public/css/order/order.css b/public/css/order/order.css
index 6dc3502..4c31509 100644
--- a/public/css/order/order.css
+++ b/public/css/order/order.css
@@ -35,13 +35,6 @@ body {
 .order-total .total {
   padding-left: 4rem;
 }
-.cart-item-container {
-  border: 1px solid rgb(222, 222, 222);
-  border-radius: 4px;
-  padding: 18px;
-  background-color: #fff;
-  margin-bottom: 12px;
-}
 .cart-item-details-grid {
   display: grid;
   grid-template-columns: 9rem 1fr 18rem;
@@ -58,18 +51,18 @@ body {
     row-gap: 30px;
     }
 } */
-.product-image {
+.orderProduct-image {
   width: 100%;
 }
-.product-name {
+.orderProduct-name {
   font-weight: 700;
   margin-bottom: 8px;
 }
-.cart-item-details .product-quantity {
+.orderCart-item-details .orderProduct-quantity {
   margin-top: 0.5rem;
 }
-.cart-item-details button,
-.track {
+.orderCart-item-details button,
+.orderTrack {
   background-color: rgba(247, 202, 20, 0.8);
   border: none;
   height: 3rem;
@@ -82,23 +75,23 @@ body {
   box-shadow: 0 2px 5px rgba(213, 217, 217, 0.5);
   margin-top: 8px;
 }
-.cart-item-details button:hover {
+.orderCart-item-details button:hover {
   background-color: rgb(247, 202, 20);
 }
-.cart-item-details button img {
+.orderCart-item-details button img {
   height: 2rem;
 }
-.cart-item-details button span {
+.orderCart-item-details button span {
   padding-left: 1rem;
 }
-.track {
+.orderTrack {
   background-color: white;
   border: 2px solid #d5d9d9;
   width: 15rem;
 }
-.track span {
+.orderTrack span {
   margin-left: 1rem;
 }
-.track:hover {
+.orderTrack:hover {
   background-color: #f7fafa;
 }
diff --git a/public/js/returnOrder.js b/public/js/returnOrder.js
index 0de6393..d2baa2a 100644
--- a/public/js/returnOrder.js
+++ b/public/js/returnOrder.js
@@ -10,16 +10,16 @@ export function renderCartSummary() {
     const dateString = calculateDeliveryDate(7);
     orderSummaryHtml += `
       <div class="cart-item-details-grid">
-        <img class="product-image"
+        <img class="orderProduct-image"
           src="${matchingProduct.image}">
-        <div class="cart-item-details">
-          <div class="product-name">
+        <div class="orderCart-item-details">
+          <div class="orderProduct-name">
             ${matchingProduct.name}
           </div>
           <div class="delivery-date">
             Arriving on : ${dateString}
           </div>
-          <div class="product-quantity">
+          <div class="orderProduct-quantity">
             <span>
               Quantity : <span class="quantity-label js-quantity-label-${matchingProduct.id}">${cartItem.quantity}</span>
             </span>
@@ -30,7 +30,7 @@ export function renderCartSummary() {
           </button> 
         </div>
         <div>
-          <button class="track">
+          <button class="orderTrack">
             <i class="fa-solid fa-map-location-dot"></i><span>Track package</span>
           </button>
         </div>

From da4cf0579325ce901896237b67219321956c7384 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 27 Jan 2025 12:38:31 +0530
Subject: [PATCH 20/31] Add tracking page

---
 index.js                   | 4 ++++
 public/css/order/order.css | 3 +++
 public/js/returnOrder.js   | 4 ++--
 3 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/index.js b/index.js
index 71714dd..b2d0a5a 100644
--- a/index.js
+++ b/index.js
@@ -21,6 +21,10 @@ app.get("/order", (req, res) => {
   res.render("listings/order.ejs");
 });
 
+app.get("/tracking", (req, res) => {
+  res.render("listings/tracking.ejs");
+});
+
 app.listen(8000, () => {
   console.log("App is listening on port 8000");
 });
diff --git a/public/css/order/order.css b/public/css/order/order.css
index 4c31509..5e6c89a 100644
--- a/public/css/order/order.css
+++ b/public/css/order/order.css
@@ -92,6 +92,9 @@ body {
 .orderTrack span {
   margin-left: 1rem;
 }
+.orderTrack span a{
+  text-decoration: none;
+}
 .orderTrack:hover {
   background-color: #f7fafa;
 }
diff --git a/public/js/returnOrder.js b/public/js/returnOrder.js
index d2baa2a..04e2a36 100644
--- a/public/js/returnOrder.js
+++ b/public/js/returnOrder.js
@@ -31,7 +31,7 @@ export function renderCartSummary() {
         </div>
         <div>
           <button class="orderTrack">
-            <i class="fa-solid fa-map-location-dot"></i><span>Track package</span>
+            <i class="fa-solid fa-map-location-dot"></i><span><a href="/tracking">Track package</a></span>
           </button>
         </div>
       </div>`;
@@ -46,7 +46,7 @@ document.querySelectorAll(".buy-again").forEach((button) => {
     console.log("add ot cart");
   });
 });
-document.querySelectorAll(".track").forEach((button) => {
+document.querySelectorAll(".orderTrack").forEach((button) => {
   button.addEventListener("click", () => {
     console.log("track order");
   });

From 1313ddd2497dc6a90497cbdaef93b3e6e593ebff Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 27 Jan 2025 21:19:52 +0530
Subject: [PATCH 21/31] Add tracking page styles for improved layout and
 presentation

---
 public/css/order/tracking.css | 55 +++++++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 public/css/order/tracking.css

diff --git a/public/css/order/tracking.css b/public/css/order/tracking.css
new file mode 100644
index 0000000..f72508f
--- /dev/null
+++ b/public/css/order/tracking.css
@@ -0,0 +1,55 @@
+body {
+  margin-top: 10rem;
+}
+.main {
+  width: 70%;
+  max-width: 850px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 3rem;
+}
+.page-title {
+  font-weight: 700;
+  font-size: 22px;
+  padding: 1.5rem 0;
+}
+.cart-item-details-grid {
+  display: grid;
+  row-gap: 1rem;
+  column-gap: 30px;
+  align-items: center;
+  margin: 0rem 0;
+}
+.orderProduct-image {
+  width: 20%;
+  margin: 1rem 0;
+}
+.orderProduct-name {
+  font-weight: 700;
+}
+.orderCart-item-details .orderProduct-quantity {
+  margin-top: 0.5rem;
+}
+.tracking-delivery .process {
+  display: flex;
+  justify-content: space-between;
+  font-size: 1.5rem;
+  font-weight: 600;
+}
+.process div {
+  margin: 1rem;
+}
+.percentage-bar,
+.percentage-bar div {
+  border-radius: 1.5rem;
+  width: 100%;
+  height: 2.5rem;
+}
+.percentage-bar {
+  border: 2px solid rgb(222, 222, 222);
+}
+.percentage-bar div {
+  width: 60%;
+  background-color: #008000;
+  background: linear-gradient(90deg, #115d33, #228b22, #4cbb17);
+}

From a468633113aaa779275078cba26a570bd97c810d Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 27 Jan 2025 21:20:52 +0530
Subject: [PATCH 22/31] Add tracking page styles for improved layout and
 presentation

---
 public/js/tracking.js       | 41 +++++++++++++++++++++++++++++++++++++
 views/listings/tracking.ejs | 23 +++++++++++++++++++++
 2 files changed, 64 insertions(+)
 create mode 100644 public/js/tracking.js
 create mode 100644 views/listings/tracking.ejs

diff --git a/public/js/tracking.js b/public/js/tracking.js
new file mode 100644
index 0000000..a1a9974
--- /dev/null
+++ b/public/js/tracking.js
@@ -0,0 +1,41 @@
+import { cart } from "/js/cart-class.js";
+import { getProduct } from "./products.js";
+import { calculateDeliveryDate } from "./deliveryOptions.js";
+renderCartSummary();
+export function renderCartSummary() {
+  let orderSummaryHtml = "";
+  cart.cartItems.forEach((cartItem) => {
+    const productId = cartItem.productId;
+    const matchingProduct = getProduct(productId);
+    const dateString = calculateDeliveryDate(7);
+    orderSummaryHtml += `
+      <div class="cart-item-details-grid">
+        <div class="orderCart-item-details">
+          <div class="orderProduct-name">
+            ${matchingProduct.name}
+          </div>
+          <div class="orderProduct-quantity">
+            <span>
+              Quantity : <span class="quantity-label js-quantity-label-${matchingProduct.id}">${cartItem.quantity}</span>
+            </span>
+          </div>
+        </div>
+        <img class="orderProduct-image"
+          src="${matchingProduct.image}">
+      </div>`;
+  });
+  const orderDetailsGrid = document.querySelector(".js-order-summary");
+  if (orderDetailsGrid) {
+    document.querySelector(".js-order-summary").innerHTML = orderSummaryHtml;
+  }
+}
+
+document.querySelector(
+  ".page-title"
+).innerHTML = `Arriving on ${calculateDeliveryDate(3)}`;
+if (cart.calculateCartQuantity() === 0) {
+  document.querySelector(".js-cart-quantity").innerHTML = "";
+} else {
+  document.querySelector(".js-cart-quantity").innerHTML =
+    cart.calculateCartQuantity();
+}
diff --git a/views/listings/tracking.ejs b/views/listings/tracking.ejs
new file mode 100644
index 0000000..03ba5e6
--- /dev/null
+++ b/views/listings/tracking.ejs
@@ -0,0 +1,23 @@
+<% layout('layouts/boilerPlate') -%>
+<title>Track order</title>
+<link rel="stylesheet" href="css/order/tracking.css" />
+<body>
+  <div class="main">
+    <a href="/order">View all order</a>
+    <div class="page-title"></div>
+    <div class="order-grid">
+      <div class="order-summary js-order-summary"></div>
+    </div>
+    <div class="tracking-delivery">
+      <div class="process">
+        <div>Preparing</div>
+        <div>Shipped</div>
+        <div>Delivered</div>
+      </div>
+      <div class="percentage-bar">
+        <div></div>
+      </div>
+    </div>
+  </div>
+  <script type="module" src="/js/tracking.js"></script>
+</body>

From 9c9b79b464a0538a6c7568398d05b64135d22287 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 27 Jan 2025 21:30:30 +0530
Subject: [PATCH 23/31] Comment out unused renderCartSummary function in
 checkout.js for debugging purposes

---
 public/js/checkout.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/public/js/checkout.js b/public/js/checkout.js
index 29aabac..900ec69 100644
--- a/public/js/checkout.js
+++ b/public/js/checkout.js
@@ -1,6 +1,6 @@
 import { renderOrderSummary } from "./checkout/orderSummary.js";
 import { loadProductsFetch } from "./products.js";
-import { renderCartSummary } from "./returnOrder.js";
+// import { renderCartSummary } from "./returnOrder.js";
 initializeCheckout();
 async function initializeCheckout() {
   try {
@@ -11,8 +11,8 @@ async function initializeCheckout() {
   }
 }
 // document.querySelector(".js-place-order").addEventListener("click", () => {
-//   //why renderCartSummary not working in returnOrder.js
-//   renderCartSummary();
-//   console.log("renderCartSummary")
+  //why renderCartSummary not working in returnOrder.js
+  // console.log("renderCartSummary")
+  // renderCartSummary();
 // });
 // renderCartSummary();
\ No newline at end of file

From 561a7ddb48278886f41e8d1f9b244970f2e6335f Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Tue, 28 Jan 2025 13:22:22 +0530
Subject: [PATCH 24/31] Refactor footer and product loading functionality;
 enhance user experience with smooth scrolling and error handling

---
 public/css/footer.css         | 12 +-----------
 public/js/amazon.js           | 12 +++++++++---
 views/includes/footer.ejs     | 10 +++++++---
 views/layouts/boilerPlate.ejs |  5 +++++
 4 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/public/css/footer.css b/public/css/footer.css
index 65181e6..dac88ce 100644
--- a/public/css/footer.css
+++ b/public/css/footer.css
@@ -6,28 +6,17 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  text-decoration: underline #37475a;
 }
 .foot-panell:hover {
   background-color: #485769;
   text-decoration: underline #485769;
 }
-.foot-panell2 {
-  background-color: #222f3d;
-  height: 300px;
-  color: white;
-  display: flex;
-  justify-content: space-evenly;
-}
 .panel2 {
   background-color: #222f3d;
   color: white;
   display: flex;
   justify-content: space-evenly;
 }
-.panel2 ul a {
-  cursor: pointer;
-}
 ul {
   margin-top: 4rem;
 }
@@ -39,6 +28,7 @@ ul a {
   font-size: 1rem;
   margin-top: 0.8rem;
   color: #dddddd;
+  cursor: pointer;
 }
 ul a:hover {
   text-decoration: underline;
diff --git a/public/js/amazon.js b/public/js/amazon.js
index 83d0c5a..79d2ef0 100644
--- a/public/js/amazon.js
+++ b/public/js/amazon.js
@@ -1,8 +1,14 @@
 import { cart } from "/js/cart-class.js";
 import { products, loadProductsFetch } from "/js/products.js";
-loadProductsFetch().then(() => {
-  renderProductsGrid();
-});
+initializeHomePage();
+async function initializeHomePage() {
+  try {
+    await loadProductsFetch();
+    renderProductsGrid();
+  } catch (error) {
+    alert(error);
+  }
+}
 export function renderProductsGrid() {
   let productsHTML = "";
   products.forEach((product) => {
diff --git a/views/includes/footer.ejs b/views/includes/footer.ejs
index 1ea1341..3665cc1 100644
--- a/views/includes/footer.ejs
+++ b/views/includes/footer.ejs
@@ -1,7 +1,5 @@
 <footer>
-  <a href="/amazon">
-    <div class="foot-panell">Back to top</div>
-  </a>
+  <div class="foot-panell" onclick="topFunction()">Back to top</div>
   <div class="panel2">
     <ul>
       <p>Get to know us</p>
@@ -80,3 +78,9 @@
     <div class="copyright">© 1996-2024, Amazon.com, Inc. or its affiliates</div>
   </div>
 </footer>
+<script>
+  function topFunction() {
+    document.body.scrollTop = 0;
+    document.documentElement.scrollTop = 0;
+  }
+</script>
diff --git a/views/layouts/boilerPlate.ejs b/views/layouts/boilerPlate.ejs
index 569bb78..90abdbb 100644
--- a/views/layouts/boilerPlate.ejs
+++ b/views/layouts/boilerPlate.ejs
@@ -13,6 +13,11 @@
     />
     <link rel="stylesheet" href="css/amazon-header.css" />
     <link rel="stylesheet" href="css/footer.css" />
+    <style>
+      html {
+        scroll-behavior: smooth;
+      }
+    </style>
   </head>
   <%- include('../includes/navbar') %> <%- body -%> <%-
   include('../includes/footer') %>

From 23a0f44ca17443e2de5bcb62b68cb08dc3592899 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Wed, 29 Jan 2025 12:50:10 +0530
Subject: [PATCH 25/31] Add loader animations and styles

---
 kaka.html                  |  28 ++++++
 loder.css                  | 171 +++++++++++++++++++++++++++++++++++++
 public/css/order/order.css |   1 +
 3 files changed, 200 insertions(+)
 create mode 100644 kaka.html
 create mode 100644 loder.css

diff --git a/kaka.html b/kaka.html
new file mode 100644
index 0000000..52366f4
--- /dev/null
+++ b/kaka.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Loader</title>
+  </head>
+  <link rel="stylesheet" href="loder.css">
+  <body>
+    <div class="loader">
+      <svg viewBox="0 0 80 80">
+        <circle cx="40" cy="40" r="32"></circle>
+      </svg>
+    </div>
+
+    <div class="loader triangle">
+      <svg viewBox="0 0 86 80">
+        <polygon points="43 8 79 72 7 72"></polygon>
+      </svg>
+    </div>
+
+    <div class="loader">
+      <svg viewBox="0 0 80 80">
+        <rect x="8" y="8" width="64" height="64"></rect>
+      </svg>
+    </div>
+  </body>
+</html>
diff --git a/loder.css b/loder.css
new file mode 100644
index 0000000..52aa147
--- /dev/null
+++ b/loder.css
@@ -0,0 +1,171 @@
+html {
+  -webkit-font-smoothing: antialiased;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  background: #485769; /* Black background */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.loader {
+  --path: #222f3d; /* Updated path color to white */
+  --dot: #febd69;
+  --duration: 3s;
+  width: 44px;
+  height: 44px;
+  position: relative;
+  margin: 0 8px; /* Reduced gap size */
+}
+
+.loader svg {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.loader svg rect,
+.loader svg polygon,
+.loader svg circle {
+  fill: none;
+  stroke: var(--path); /* This will now be white */
+  stroke-width: 10px;
+  stroke-linejoin: round;
+  stroke-linecap: round;
+}
+
+.loader svg polygon {
+  stroke-dasharray: 145 76 145 76;
+  stroke-dashoffset: 0;
+  -webkit-animation: pathTriangle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+  animation: pathTriangle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+.loader svg rect {
+  stroke-dasharray: 192 64 192 64;
+  stroke-dashoffset: 0;
+  -webkit-animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86)
+    infinite;
+  animation: pathRect 3s cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+.loader svg circle {
+  stroke-dasharray: 150 50 150 50;
+  stroke-dashoffset: 75;
+  -webkit-animation: pathCircle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+  animation: pathCircle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+.loader:before {
+  content: "";
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  position: absolute;
+  display: block;
+  background: var(--dot);
+  top: 37px;
+  left: 19px;
+  transform: translate(-18px, -18px);
+  -webkit-animation: dotMove var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+  animation: dotMove var(--duration) cubic-bezier(0.785, 0.135, 0.15, 0.86)
+    infinite;
+}
+
+.loader.triangle {
+  width: 48px;
+}
+
+.loader.triangle:before {
+  left: 21px;
+  transform: translate(-10px, -18px);
+  -webkit-animation: dotTriangle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+  animation: dotTriangle var(--duration)
+    cubic-bezier(0.785, 0.135, 0.15, 0.86) infinite;
+}
+
+@keyframes pathTriangle {
+  33% {
+    stroke-dashoffset: 74;
+  }
+  66% {
+    stroke-dashoffset: 147;
+  }
+  100% {
+    stroke-dashoffset: 221;
+  }
+}
+
+@keyframes dotTriangle {
+  33% {
+    transform: translate(0, 0);
+  }
+  66% {
+    transform: translate(10px, -18px);
+  }
+  100% {
+    transform: translate(-10px, -18px);
+  }
+}
+
+@keyframes pathRect {
+  25% {
+    stroke-dashoffset: 64;
+  }
+  50% {
+    stroke-dashoffset: 128;
+  }
+  75% {
+    stroke-dashoffset: 192;
+  }
+  100% {
+    stroke-dashoffset: 256;
+  }
+}
+
+@keyframes dotMove {
+  25% {
+    transform: translate(0, 0);
+  }
+  50% {
+    transform: translate(18px, -18px);
+  }
+  75% {
+    transform: translate(0, -36px);
+  }
+  100% {
+    transform: translate(-18px, -18px);
+  }
+}
+
+@keyframes pathCircle {
+  25% {
+    stroke-dashoffset: 125;
+  }
+  50% {
+    stroke-dashoffset: 175;
+  }
+  75% {
+    stroke-dashoffset: 225;
+  }
+  100% {
+    stroke-dashoffset: 275;
+  }
+}
\ No newline at end of file
diff --git a/public/css/order/order.css b/public/css/order/order.css
index 5e6c89a..52d82f1 100644
--- a/public/css/order/order.css
+++ b/public/css/order/order.css
@@ -93,6 +93,7 @@ body {
   margin-left: 1rem;
 }
 .orderTrack span a{
+  color: black;  
   text-decoration: none;
 }
 .orderTrack:hover {

From cdb5fc47a787702157ff99ef0fb14bcfda7b7a9b Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Thu, 30 Jan 2025 23:26:40 +0530
Subject: [PATCH 26/31] Refactor currency formatting tests; update test suite
 structure and add console logging for validation

---
 tests-jasmin/moneyTest.js | 53 ++++++++++++++++++++++++++++++++-------
 1 file changed, 44 insertions(+), 9 deletions(-)

diff --git a/tests-jasmin/moneyTest.js b/tests-jasmin/moneyTest.js
index d88e8e9..1d6b9d7 100644
--- a/tests-jasmin/moneyTest.js
+++ b/tests-jasmin/moneyTest.js
@@ -1,13 +1,48 @@
 import { formatCurrency } from "../public/js/money.js";
 
-describe('test suite: formateCurrency',()=>{
-  it('converts cents into dollars',()=>{
-    expect(formatCurrency(2095)).toEqual('20.95');
-  });
-  it('works with zero',()=>{
-    expect(formatCurrency(0)).toEqual("0.00");
+// describe("test suite: formateCurrency", () => {
+//   it("converts cents into dollars", () => {
+//     expect(formatCurrency(2095)).toEqual("20.95");
+//   });
+//   it("works with zero", () => {
+//     expect(formatCurrency(0)).toEqual("0.00");
+//   });
+//   it("round up to the nearest cent", () => {
+//     expect(formatCurrency(2000.5)).toEqual("20.01");
+//   });
+// });
+
+describe("A suite is just a function", function () {
+  let a = 1;
+
+  it("and so is a spec", function () {
+    a = true;
+
+    expect(a).toBe(true);
   });
-  it('round up to the nearest cent',()=>{
-    expect(formatCurrency(2000.5)).toEqual("20.01");
+});
+describe("A suite is just a function", function () {
+  let a = 1;
+
+  it("and so is a spec", function () {
+    a = true;
+
+    expect(a).toBe(true);
   });
-});
\ No newline at end of file
+});
+if(formatCurrency(2090)==='20.90'){
+  console.log('passed');
+}else{
+  console.log('failed');
+};
+
+if(formatCurrency(0)==='0.00'){
+  console.log("passed");
+}else{
+  console.log('failed');
+};
+if(formatCurrency(2000.23)==='20.00'){
+  console.log("passed");
+}else{
+  console.log('failed');
+};
\ No newline at end of file

From bef974cc00f9a96c2ac415a334a8ba25a2d1325c Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Fri, 31 Jan 2025 23:20:25 +0530
Subject: [PATCH 27/31] Refactor currency formatting tests; restore and enhance
 test cases for accuracy

---
 tests-jasmin/jasmin.html         | 20 +++++++++++++
 tests-jasmin/jasmin.js           | 10 +++++++
 tests-jasmin/moneyTest.js        | 51 +++++---------------------------
 tests-jasmin/orderSummaryTest.js |  3 --
 4 files changed, 38 insertions(+), 46 deletions(-)
 create mode 100644 tests-jasmin/jasmin.html
 create mode 100644 tests-jasmin/jasmin.js

diff --git a/tests-jasmin/jasmin.html b/tests-jasmin/jasmin.html
new file mode 100644
index 0000000..6b55e6a
--- /dev/null
+++ b/tests-jasmin/jasmin.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Jasmine Spec Runner v5.1.1</title>
+
+  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
+  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
+
+  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
+  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
+  <script src="lib/jasmine-5.1.1/boot0.js"></script>
+  <!-- optional: include a file here that configures the Jasmine env -->
+  <script src="lib/jasmine-5.1.1/boot1.js"></script>
+  <script src="./jasmin.js" type="module"></script>
+</head>
+
+<body>
+</body>
+</html>
diff --git a/tests-jasmin/jasmin.js b/tests-jasmin/jasmin.js
new file mode 100644
index 0000000..96b8002
--- /dev/null
+++ b/tests-jasmin/jasmin.js
@@ -0,0 +1,10 @@
+import { formatCurrency } from "../public/js/money.js";
+
+describe("A suite is just a function", function () {
+  let a;
+
+  it("test suite : formateCurrency", function () {
+    expect(formatCurrency(2000.4)).toBe('20.00');
+    expect(formatCurrency(-2000)).toBe('-20.00');
+  });
+});
diff --git a/tests-jasmin/moneyTest.js b/tests-jasmin/moneyTest.js
index 1d6b9d7..7891f04 100644
--- a/tests-jasmin/moneyTest.js
+++ b/tests-jasmin/moneyTest.js
@@ -1,48 +1,13 @@
 import { formatCurrency } from "../public/js/money.js";
 
-// describe("test suite: formateCurrency", () => {
-//   it("converts cents into dollars", () => {
-//     expect(formatCurrency(2095)).toEqual("20.95");
-//   });
-//   it("works with zero", () => {
-//     expect(formatCurrency(0)).toEqual("0.00");
-//   });
-//   it("round up to the nearest cent", () => {
-//     expect(formatCurrency(2000.5)).toEqual("20.01");
-//   });
-// });
-
-describe("A suite is just a function", function () {
-  let a = 1;
-
-  it("and so is a spec", function () {
-    a = true;
-
-    expect(a).toBe(true);
+describe("test suite: formateCurrency", () => {
+  it("converts cents into dollars", () => {
+    expect(formatCurrency(2095)).toEqual("20.95");
   });
-});
-describe("A suite is just a function", function () {
-  let a = 1;
-
-  it("and so is a spec", function () {
-    a = true;
-
-    expect(a).toBe(true);
+  it("works with zero", () => {
+    expect(formatCurrency(0)).toEqual("0.00");
+  });
+  it("round up to the nearest cent", () => {
+    expect(formatCurrency(2000.5)).toEqual("20.01");
   });
 });
-if(formatCurrency(2090)==='20.90'){
-  console.log('passed');
-}else{
-  console.log('failed');
-};
-
-if(formatCurrency(0)==='0.00'){
-  console.log("passed");
-}else{
-  console.log('failed');
-};
-if(formatCurrency(2000.23)==='20.00'){
-  console.log("passed");
-}else{
-  console.log('failed');
-};
\ No newline at end of file
diff --git a/tests-jasmin/orderSummaryTest.js b/tests-jasmin/orderSummaryTest.js
index bbb8ba6..1e65c26 100644
--- a/tests-jasmin/orderSummaryTest.js
+++ b/tests-jasmin/orderSummaryTest.js
@@ -1,5 +1,4 @@
 import {renderOrderSummary} from '/checkout/orderSummary.js';
-import {loadFromStorage} from '/checkout/orderSummary.js';
 
 describe('test suite: renderOrdersummary',()=>{
   it('displays the cart',()=>{
@@ -12,8 +11,6 @@ describe('test suite: renderOrdersummary',()=>{
         deliveryOptionId:'1',
       }]);
     });
-    loadFromStorage();
-
     renderOrderSummary();
 
   })

From 5583d67460a61fa563091d0f5687f3b3d890a867 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 3 Feb 2025 10:03:23 +0530
Subject: [PATCH 28/31] Remove obsolete Jasmine test

---
 tests-jasmin/cartTest.html             | 20 ----------------
 tests-jasmin/cartTest.js               | 32 --------------------------
 tests-jasmin/jasmin.html               | 20 ----------------
 tests-jasmin/jasmin.js                 | 10 --------
 tests-jasmin/moneyTest.html            | 20 ----------------
 tests-jasmin/moneyTest.js              | 13 -----------
 tests-jasmin/orderSummary.html         | 21 -----------------
 tests-jasmin/orderSummaryTest.js       | 17 --------------
 tests-jasmin/tests-simple/moneyTest.js | 24 -------------------
 tests-jasmin/tests-simple/test.html    |  7 ------
 10 files changed, 184 deletions(-)
 delete mode 100644 tests-jasmin/cartTest.html
 delete mode 100644 tests-jasmin/cartTest.js
 delete mode 100644 tests-jasmin/jasmin.html
 delete mode 100644 tests-jasmin/jasmin.js
 delete mode 100644 tests-jasmin/moneyTest.html
 delete mode 100644 tests-jasmin/moneyTest.js
 delete mode 100644 tests-jasmin/orderSummary.html
 delete mode 100644 tests-jasmin/orderSummaryTest.js
 delete mode 100644 tests-jasmin/tests-simple/moneyTest.js
 delete mode 100644 tests-jasmin/tests-simple/test.html

diff --git a/tests-jasmin/cartTest.html b/tests-jasmin/cartTest.html
deleted file mode 100644
index bb0bb2a..0000000
--- a/tests-jasmin/cartTest.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Jasmine Spec Runner v5.1.1</title>
-
-  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
-  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
-
-  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
-  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
-  <script src="lib/jasmine-5.1.1/boot0.js"></script>
-  <!-- optional: include a file here that configures the Jasmine env -->
-  <script src="lib/jasmine-5.1.1/boot1.js"></script>
-  <script src="./cartTest.js" type="module"></script>
-</head>
-
-<body>
-</body>
-</html>
diff --git a/tests-jasmin/cartTest.js b/tests-jasmin/cartTest.js
deleted file mode 100644
index f69e614..0000000
--- a/tests-jasmin/cartTest.js
+++ /dev/null
@@ -1,32 +0,0 @@
- import { addToCart,cart,loadFromStorage } from "../public/js/cart.js";
-
- describe('test suite: addToCart',()=>{
-  it('adds an existing product to the cart',()=>{
-    spyOn(localStorage,'setItem');
-    spyOn(localStorage,'getItem').and.callFake(()=>{
-      return JSON.stringify([{
-        productId: '8c9c52b5-5a19-4bcb-a5d1-158a74287c53',
-        quantity:1,
-        deliveryOptionId:'1',
-      }]);
-    });
-    loadFromStorage();
-    addToCart('8c9c52b5-5a19-4bcb-a5d1-158a74287c53');
-    expect(cart.lenght).toEqual(1);
-    expect(localStorage.setItem).toHaveBeenCalledTimes(1);
-    expect(cart[0].productId).toEqual('8c9c52b5-5a19-4bcb-a5d1-158a74287c53');
-    expect(cart[0].quantity).toEqual(2);
-  })
-  it('adds a new product to cart',()=>{
-    spyOn(localStorage,'setItem');
-    spyOn(localStorage,'getItem').and.callFake(()=>{
-      return JSON.stringify([]);
-    });
-    loadFromStorage();
-    addToCart('8c9c52b5-5a19-4bcb-a5d1-158a74287c53');
-    expect(cart.lenght).toEqual(1);
-    expect(localStorage.setItem).toHaveBeenCalledTimes(1);
-    expect(cart[0].productId).toEqual('8c9c52b5-5a19-4bcb-a5d1-158a74287c53');
-    expect(cart[0].quantity).toEqual(1);
-  });
- });
diff --git a/tests-jasmin/jasmin.html b/tests-jasmin/jasmin.html
deleted file mode 100644
index 6b55e6a..0000000
--- a/tests-jasmin/jasmin.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Jasmine Spec Runner v5.1.1</title>
-
-  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
-  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
-
-  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
-  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
-  <script src="lib/jasmine-5.1.1/boot0.js"></script>
-  <!-- optional: include a file here that configures the Jasmine env -->
-  <script src="lib/jasmine-5.1.1/boot1.js"></script>
-  <script src="./jasmin.js" type="module"></script>
-</head>
-
-<body>
-</body>
-</html>
diff --git a/tests-jasmin/jasmin.js b/tests-jasmin/jasmin.js
deleted file mode 100644
index 96b8002..0000000
--- a/tests-jasmin/jasmin.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import { formatCurrency } from "../public/js/money.js";
-
-describe("A suite is just a function", function () {
-  let a;
-
-  it("test suite : formateCurrency", function () {
-    expect(formatCurrency(2000.4)).toBe('20.00');
-    expect(formatCurrency(-2000)).toBe('-20.00');
-  });
-});
diff --git a/tests-jasmin/moneyTest.html b/tests-jasmin/moneyTest.html
deleted file mode 100644
index 23e6660..0000000
--- a/tests-jasmin/moneyTest.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Jasmine Spec Runner v5.1.1</title>
-
-  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
-  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
-
-  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
-  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
-  <script src="lib/jasmine-5.1.1/boot0.js"></script>
-  <!-- optional: include a file here that configures the Jasmine env -->
-  <script src="lib/jasmine-5.1.1/boot1.js"></script>
-  <script src="./moneyTest.js" type="module"></script>
-</head>
-
-<body>
-</body>
-</html>
diff --git a/tests-jasmin/moneyTest.js b/tests-jasmin/moneyTest.js
deleted file mode 100644
index 7891f04..0000000
--- a/tests-jasmin/moneyTest.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import { formatCurrency } from "../public/js/money.js";
-
-describe("test suite: formateCurrency", () => {
-  it("converts cents into dollars", () => {
-    expect(formatCurrency(2095)).toEqual("20.95");
-  });
-  it("works with zero", () => {
-    expect(formatCurrency(0)).toEqual("0.00");
-  });
-  it("round up to the nearest cent", () => {
-    expect(formatCurrency(2000.5)).toEqual("20.01");
-  });
-});
diff --git a/tests-jasmin/orderSummary.html b/tests-jasmin/orderSummary.html
deleted file mode 100644
index 83dea12..0000000
--- a/tests-jasmin/orderSummary.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Jasmine Spec Runner v5.1.1</title>
-
-  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
-  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
-
-  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
-  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
-  <script src="lib/jasmine-5.1.1/boot0.js"></script>
-  <!-- optional: include a file here that configures the Jasmine env -->
-  <script src="lib/jasmine-5.1.1/boot1.js"></script>
-  <script src="./orderSummaryTest.js" type="module"></script>
-</head>
-
-<body>
-  <div class="js-test-container"></div>
-</body>
-</html>
diff --git a/tests-jasmin/orderSummaryTest.js b/tests-jasmin/orderSummaryTest.js
deleted file mode 100644
index 1e65c26..0000000
--- a/tests-jasmin/orderSummaryTest.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import {renderOrderSummary} from '/checkout/orderSummary.js';
-
-describe('test suite: renderOrdersummary',()=>{
-  it('displays the cart',()=>{
-    document.querySelector('.js-test-container').innerHTML = '<div class="js-order-summary"></div>';
-
-    spyOn(localStorage,'getItem').and.callFake(()=>{
-      return JSON.stringify([{
-        productId: '8c9c52b5-5a19-4bcb-a5d1-158a74287c53',
-        quantity:1,
-        deliveryOptionId:'1',
-      }]);
-    });
-    renderOrderSummary();
-
-  })
-})
\ No newline at end of file
diff --git a/tests-jasmin/tests-simple/moneyTest.js b/tests-jasmin/tests-simple/moneyTest.js
deleted file mode 100644
index d10c056..0000000
--- a/tests-jasmin/tests-simple/moneyTest.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { formatCurrency } from "../../public/js/money.js";
-
-console.log('test suit: formatCurrency');
-console.log('converts cents into dollars');
-if(formatCurrency(2095) === "20.95"){
-  console.log('Passed');
-}else{
-  console.log('Failed');
-}
-
-console.log('works with zero');
-if(formatCurrency(0) === "0.00"){
-  console.log('Passed');
-}else{
-  console.log('Failed');
-}
-
-console.log('round up to the nearest cent');
-if(formatCurrency(2000.5) === '20.01'){
-  console.log('Passed');
-}else{
-  console.log('Failed');
-}
-console.log(formatCurrency(2000.5))
\ No newline at end of file
diff --git a/tests-jasmin/tests-simple/test.html b/tests-jasmin/tests-simple/test.html
deleted file mode 100644
index 5984c76..0000000
--- a/tests-jasmin/tests-simple/test.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head></head>
-  <body>
-    <script src="moneyTest.js" type="module"></script>
-  </body>
-</html>
\ No newline at end of file

From e6f7d4f78ff3f9fb8d899282b0873958d5d6d39c Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 3 Feb 2025 10:18:34 +0530
Subject: [PATCH 29/31] add jasmin

---
 .../MIT.LICENSE                               |   0
 jasmine-standalone-5.1.1 (1)/SpecRunner.html  |  28 +++++++++
 .../lib/jasmine-5.1.1/boot0.js                |   0
 .../lib/jasmine-5.1.1/boot1.js                |   0
 .../lib/jasmine-5.1.1/jasmine-html.js         |   0
 .../lib/jasmine-5.1.1/jasmine.css             |   0
 .../lib/jasmine-5.1.1/jasmine.js              |   0
 .../lib/jasmine-5.1.1/jasmine_favicon.png     | Bin
 .../spec/PlayerSpec.js                        |  58 ++++++++++++++++++
 .../spec/SpecHelper.js                        |  15 +++++
 jasmine-standalone-5.1.1 (1)/src/Player.js    |  22 +++++++
 jasmine-standalone-5.1.1 (1)/src/Song.js      |   6 ++
 moneyTest/moneyTest.html                      |  20 ++++++
 moneyTest/moneyTest.js                        |  22 +++++++
 14 files changed, 171 insertions(+)
 rename {tests-jasmin => jasmine-standalone-5.1.1 (1)}/MIT.LICENSE (100%)
 create mode 100644 jasmine-standalone-5.1.1 (1)/SpecRunner.html
 rename {tests-jasmin => jasmine-standalone-5.1.1 (1)}/lib/jasmine-5.1.1/boot0.js (100%)
 rename {tests-jasmin => jasmine-standalone-5.1.1 (1)}/lib/jasmine-5.1.1/boot1.js (100%)
 rename {tests-jasmin => jasmine-standalone-5.1.1 (1)}/lib/jasmine-5.1.1/jasmine-html.js (100%)
 rename {tests-jasmin => jasmine-standalone-5.1.1 (1)}/lib/jasmine-5.1.1/jasmine.css (100%)
 rename {tests-jasmin => jasmine-standalone-5.1.1 (1)}/lib/jasmine-5.1.1/jasmine.js (100%)
 rename {tests-jasmin => jasmine-standalone-5.1.1 (1)}/lib/jasmine-5.1.1/jasmine_favicon.png (100%)
 create mode 100644 jasmine-standalone-5.1.1 (1)/spec/PlayerSpec.js
 create mode 100644 jasmine-standalone-5.1.1 (1)/spec/SpecHelper.js
 create mode 100644 jasmine-standalone-5.1.1 (1)/src/Player.js
 create mode 100644 jasmine-standalone-5.1.1 (1)/src/Song.js
 create mode 100644 moneyTest/moneyTest.html
 create mode 100644 moneyTest/moneyTest.js

diff --git a/tests-jasmin/MIT.LICENSE b/jasmine-standalone-5.1.1 (1)/MIT.LICENSE
similarity index 100%
rename from tests-jasmin/MIT.LICENSE
rename to jasmine-standalone-5.1.1 (1)/MIT.LICENSE
diff --git a/jasmine-standalone-5.1.1 (1)/SpecRunner.html b/jasmine-standalone-5.1.1 (1)/SpecRunner.html
new file mode 100644
index 0000000..40a7798
--- /dev/null
+++ b/jasmine-standalone-5.1.1 (1)/SpecRunner.html	
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Jasmine Spec Runner v5.1.1</title>
+
+  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
+  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
+
+  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
+  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
+  <script src="lib/jasmine-5.1.1/boot0.js"></script>
+  <!-- optional: include a file here that configures the Jasmine env -->
+  <script src="lib/jasmine-5.1.1/boot1.js"></script>
+
+  <!-- include source files here... -->
+  <script src="src/Player.js"></script>
+  <script src="src/Song.js"></script>
+
+  <!-- include spec files here... -->
+  <script src="spec/SpecHelper.js"></script>
+  <script src="spec/PlayerSpec.js"></script>
+
+</head>
+
+<body>
+</body>
+</html>
diff --git a/tests-jasmin/lib/jasmine-5.1.1/boot0.js b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/boot0.js
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/boot0.js
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/boot0.js
diff --git a/tests-jasmin/lib/jasmine-5.1.1/boot1.js b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/boot1.js
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/boot1.js
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/boot1.js
diff --git a/tests-jasmin/lib/jasmine-5.1.1/jasmine-html.js b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine-html.js
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/jasmine-html.js
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine-html.js
diff --git a/tests-jasmin/lib/jasmine-5.1.1/jasmine.css b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.css
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/jasmine.css
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.css
diff --git a/tests-jasmin/lib/jasmine-5.1.1/jasmine.js b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.js
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/jasmine.js
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.js
diff --git a/tests-jasmin/lib/jasmine-5.1.1/jasmine_favicon.png b/jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine_favicon.png
similarity index 100%
rename from tests-jasmin/lib/jasmine-5.1.1/jasmine_favicon.png
rename to jasmine-standalone-5.1.1 (1)/lib/jasmine-5.1.1/jasmine_favicon.png
diff --git a/jasmine-standalone-5.1.1 (1)/spec/PlayerSpec.js b/jasmine-standalone-5.1.1 (1)/spec/PlayerSpec.js
new file mode 100644
index 0000000..9617c4f
--- /dev/null
+++ b/jasmine-standalone-5.1.1 (1)/spec/PlayerSpec.js	
@@ -0,0 +1,58 @@
+describe('Player', function() {
+  let player;
+  let song;
+
+  beforeEach(function() {
+    player = new Player();
+    song = new Song();
+  });
+
+  it('should be able to play a Song', function() {
+    player.play(song);
+    expect(player.currentlyPlayingSong).toEqual(song);
+
+    // demonstrates use of custom matcher
+    expect(player).toBePlaying(song);
+  });
+
+  describe('when song has been paused', function() {
+    beforeEach(function() {
+      player.play(song);
+      player.pause();
+    });
+
+    it('should indicate that the song is currently paused', function() {
+      expect(player.isPlaying).toBeFalsy();
+
+      // demonstrates use of 'not' with a custom matcher
+      expect(player).not.toBePlaying(song);
+    });
+
+    it('should be possible to resume', function() {
+      player.resume();
+      expect(player.isPlaying).toBeTruthy();
+      expect(player.currentlyPlayingSong).toEqual(song);
+    });
+  });
+
+  // demonstrates use of spies to intercept and test method calls
+  it('tells the current song if the user has made it a favorite', function() {
+    spyOn(song, 'persistFavoriteStatus');
+
+    player.play(song);
+    player.makeFavorite();
+
+    expect(song.persistFavoriteStatus).toHaveBeenCalledWith(true);
+  });
+
+  //demonstrates use of expected exceptions
+  describe('#resume', function() {
+    it('should throw an exception if song is already playing', function() {
+      player.play(song);
+
+      expect(function() {
+        player.resume();
+      }).toThrowError('song is already playing');
+    });
+  });
+});
diff --git a/jasmine-standalone-5.1.1 (1)/spec/SpecHelper.js b/jasmine-standalone-5.1.1 (1)/spec/SpecHelper.js
new file mode 100644
index 0000000..cc04bd8
--- /dev/null
+++ b/jasmine-standalone-5.1.1 (1)/spec/SpecHelper.js	
@@ -0,0 +1,15 @@
+beforeEach(function () {
+  jasmine.addMatchers({
+    toBePlaying: function () {
+      return {
+        compare: function (actual, expected) {
+          const player = actual;
+
+          return {
+            pass: player.currentlyPlayingSong === expected && player.isPlaying
+          };
+        }
+      };
+    }
+  });
+});
diff --git a/jasmine-standalone-5.1.1 (1)/src/Player.js b/jasmine-standalone-5.1.1 (1)/src/Player.js
new file mode 100644
index 0000000..f2fae6f
--- /dev/null
+++ b/jasmine-standalone-5.1.1 (1)/src/Player.js	
@@ -0,0 +1,22 @@
+class Player {
+  play(song) {
+    this.currentlyPlayingSong = song;
+    this.isPlaying = true;
+  }
+
+  pause() {
+    this.isPlaying = false;
+  }
+
+  resume() {
+    if (this.isPlaying) {
+      throw new Error('song is already playing');
+    }
+
+    this.isPlaying = true;
+  }
+
+  makeFavorite() {
+    this.currentlyPlayingSong.persistFavoriteStatus(true);
+  }
+}
diff --git a/jasmine-standalone-5.1.1 (1)/src/Song.js b/jasmine-standalone-5.1.1 (1)/src/Song.js
new file mode 100644
index 0000000..8914793
--- /dev/null
+++ b/jasmine-standalone-5.1.1 (1)/src/Song.js	
@@ -0,0 +1,6 @@
+class Song {
+  persistFavoriteStatus(value) {
+    // something complicated
+    throw new Error('not yet implemented');
+  }
+}
diff --git a/moneyTest/moneyTest.html b/moneyTest/moneyTest.html
new file mode 100644
index 0000000..b9bb732
--- /dev/null
+++ b/moneyTest/moneyTest.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>Jasmine Spec Runner v5.1.1</title>
+
+  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
+  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
+
+  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
+  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
+  <script src="lib/jasmine-5.1.1/boot0.js"></script>
+  <!-- optional: include a file here that configures the Jasmine env -->
+  <script src="lib/jasmine-5.1.1/boot1.js"></script>
+  <script src="moneyTest.js" type="module"></script>
+</head>
+
+<body>
+</body>
+</html>
diff --git a/moneyTest/moneyTest.js b/moneyTest/moneyTest.js
new file mode 100644
index 0000000..e6d3c4e
--- /dev/null
+++ b/moneyTest/moneyTest.js
@@ -0,0 +1,22 @@
+// import { formatCurrency } from "../../public/js/money.js";
+// describe("Test suite : formatCurrency", () => {
+//   it("Converts cents into dollars", () => {
+//     expect(formatCurrency(2000)).toEqual("20.00");
+//   });
+//   it("Works with zero", () => {
+//     expect(formatCurrency(0)).toEqual("0.00");
+//   });
+//   it("round up to the nearest cent", () => {
+//     expect(formatCurrency(2000.5)).toEqual("20.01");
+//   });
+// });
+
+describe("A suite is just a function", function () {
+  let a;
+
+  it("and so is a spec", function () {
+    a = true;
+
+    expect(a).toBe(true);
+  });
+});

From 0dc964fcaa0071a9579c21befc9dea555ccf055a Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Mon, 3 Feb 2025 10:41:07 +0530
Subject: [PATCH 30/31] Remove default tests and add money tests

---
 jasmine-standalone-5.1.1 (1)/SpecRunner.html  | 28 ---------
 jasmine-standalone-5.1.1 (1)/moneyTest.js     | 13 +++++
 .../spec/PlayerSpec.js                        | 58 -------------------
 .../spec/SpecHelper.js                        | 15 -----
 jasmine-standalone-5.1.1 (1)/src/Player.js    | 22 -------
 jasmine-standalone-5.1.1 (1)/src/Song.js      |  6 --
 jasmine-standalone-5.1.1 (1)/test.html        | 23 ++++++++
 moneyTest/moneyTest.html                      | 20 -------
 moneyTest/moneyTest.js                        | 22 -------
 9 files changed, 36 insertions(+), 171 deletions(-)
 delete mode 100644 jasmine-standalone-5.1.1 (1)/SpecRunner.html
 create mode 100644 jasmine-standalone-5.1.1 (1)/moneyTest.js
 delete mode 100644 jasmine-standalone-5.1.1 (1)/spec/PlayerSpec.js
 delete mode 100644 jasmine-standalone-5.1.1 (1)/spec/SpecHelper.js
 delete mode 100644 jasmine-standalone-5.1.1 (1)/src/Player.js
 delete mode 100644 jasmine-standalone-5.1.1 (1)/src/Song.js
 create mode 100644 jasmine-standalone-5.1.1 (1)/test.html
 delete mode 100644 moneyTest/moneyTest.html
 delete mode 100644 moneyTest/moneyTest.js

diff --git a/jasmine-standalone-5.1.1 (1)/SpecRunner.html b/jasmine-standalone-5.1.1 (1)/SpecRunner.html
deleted file mode 100644
index 40a7798..0000000
--- a/jasmine-standalone-5.1.1 (1)/SpecRunner.html	
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Jasmine Spec Runner v5.1.1</title>
-
-  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
-  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
-
-  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
-  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
-  <script src="lib/jasmine-5.1.1/boot0.js"></script>
-  <!-- optional: include a file here that configures the Jasmine env -->
-  <script src="lib/jasmine-5.1.1/boot1.js"></script>
-
-  <!-- include source files here... -->
-  <script src="src/Player.js"></script>
-  <script src="src/Song.js"></script>
-
-  <!-- include spec files here... -->
-  <script src="spec/SpecHelper.js"></script>
-  <script src="spec/PlayerSpec.js"></script>
-
-</head>
-
-<body>
-</body>
-</html>
diff --git a/jasmine-standalone-5.1.1 (1)/moneyTest.js b/jasmine-standalone-5.1.1 (1)/moneyTest.js
new file mode 100644
index 0000000..a77b9b0
--- /dev/null
+++ b/jasmine-standalone-5.1.1 (1)/moneyTest.js	
@@ -0,0 +1,13 @@
+import { formatCurrency } from "../public/js/money.js";
+describe("Test suite : formatCurrency", () => {
+  it("Converts cents into dollars", () => {
+    expect(formatCurrency(2000)).toEqual("20.00");
+  });
+  it("Works with zero", () => {
+    expect(formatCurrency(0)).toEqual("0.00");
+  });
+  it("round up to the nearest cent", () => {
+    expect(formatCurrency(2000.5)).toEqual("20.01");
+  });
+});
+
diff --git a/jasmine-standalone-5.1.1 (1)/spec/PlayerSpec.js b/jasmine-standalone-5.1.1 (1)/spec/PlayerSpec.js
deleted file mode 100644
index 9617c4f..0000000
--- a/jasmine-standalone-5.1.1 (1)/spec/PlayerSpec.js	
+++ /dev/null
@@ -1,58 +0,0 @@
-describe('Player', function() {
-  let player;
-  let song;
-
-  beforeEach(function() {
-    player = new Player();
-    song = new Song();
-  });
-
-  it('should be able to play a Song', function() {
-    player.play(song);
-    expect(player.currentlyPlayingSong).toEqual(song);
-
-    // demonstrates use of custom matcher
-    expect(player).toBePlaying(song);
-  });
-
-  describe('when song has been paused', function() {
-    beforeEach(function() {
-      player.play(song);
-      player.pause();
-    });
-
-    it('should indicate that the song is currently paused', function() {
-      expect(player.isPlaying).toBeFalsy();
-
-      // demonstrates use of 'not' with a custom matcher
-      expect(player).not.toBePlaying(song);
-    });
-
-    it('should be possible to resume', function() {
-      player.resume();
-      expect(player.isPlaying).toBeTruthy();
-      expect(player.currentlyPlayingSong).toEqual(song);
-    });
-  });
-
-  // demonstrates use of spies to intercept and test method calls
-  it('tells the current song if the user has made it a favorite', function() {
-    spyOn(song, 'persistFavoriteStatus');
-
-    player.play(song);
-    player.makeFavorite();
-
-    expect(song.persistFavoriteStatus).toHaveBeenCalledWith(true);
-  });
-
-  //demonstrates use of expected exceptions
-  describe('#resume', function() {
-    it('should throw an exception if song is already playing', function() {
-      player.play(song);
-
-      expect(function() {
-        player.resume();
-      }).toThrowError('song is already playing');
-    });
-  });
-});
diff --git a/jasmine-standalone-5.1.1 (1)/spec/SpecHelper.js b/jasmine-standalone-5.1.1 (1)/spec/SpecHelper.js
deleted file mode 100644
index cc04bd8..0000000
--- a/jasmine-standalone-5.1.1 (1)/spec/SpecHelper.js	
+++ /dev/null
@@ -1,15 +0,0 @@
-beforeEach(function () {
-  jasmine.addMatchers({
-    toBePlaying: function () {
-      return {
-        compare: function (actual, expected) {
-          const player = actual;
-
-          return {
-            pass: player.currentlyPlayingSong === expected && player.isPlaying
-          };
-        }
-      };
-    }
-  });
-});
diff --git a/jasmine-standalone-5.1.1 (1)/src/Player.js b/jasmine-standalone-5.1.1 (1)/src/Player.js
deleted file mode 100644
index f2fae6f..0000000
--- a/jasmine-standalone-5.1.1 (1)/src/Player.js	
+++ /dev/null
@@ -1,22 +0,0 @@
-class Player {
-  play(song) {
-    this.currentlyPlayingSong = song;
-    this.isPlaying = true;
-  }
-
-  pause() {
-    this.isPlaying = false;
-  }
-
-  resume() {
-    if (this.isPlaying) {
-      throw new Error('song is already playing');
-    }
-
-    this.isPlaying = true;
-  }
-
-  makeFavorite() {
-    this.currentlyPlayingSong.persistFavoriteStatus(true);
-  }
-}
diff --git a/jasmine-standalone-5.1.1 (1)/src/Song.js b/jasmine-standalone-5.1.1 (1)/src/Song.js
deleted file mode 100644
index 8914793..0000000
--- a/jasmine-standalone-5.1.1 (1)/src/Song.js	
+++ /dev/null
@@ -1,6 +0,0 @@
-class Song {
-  persistFavoriteStatus(value) {
-    // something complicated
-    throw new Error('not yet implemented');
-  }
-}
diff --git a/jasmine-standalone-5.1.1 (1)/test.html b/jasmine-standalone-5.1.1 (1)/test.html
new file mode 100644
index 0000000..054e58e
--- /dev/null
+++ b/jasmine-standalone-5.1.1 (1)/test.html	
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Jasmine Spec Runner v5.1.1</title>
+
+    <link
+      rel="shortcut icon"
+      type="image/png"
+      href="lib/jasmine-5.1.1/jasmine_favicon.png"
+    />
+    <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css" />
+
+    <script src="lib/jasmine-5.1.1/jasmine.js"></script>
+    <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
+    <script src="lib/jasmine-5.1.1/boot0.js"></script>
+    <!-- optional: include a file here that configures the Jasmine env -->
+    <script src="lib/jasmine-5.1.1/boot1.js"></script>
+    <script type="module" src="moneyTest.js"></script>
+  </head>
+
+  <body></body>
+</html>
diff --git a/moneyTest/moneyTest.html b/moneyTest/moneyTest.html
deleted file mode 100644
index b9bb732..0000000
--- a/moneyTest/moneyTest.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <title>Jasmine Spec Runner v5.1.1</title>
-
-  <link rel="shortcut icon" type="image/png" href="lib/jasmine-5.1.1/jasmine_favicon.png">
-  <link rel="stylesheet" href="lib/jasmine-5.1.1/jasmine.css">
-
-  <script src="lib/jasmine-5.1.1/jasmine.js"></script>
-  <script src="lib/jasmine-5.1.1/jasmine-html.js"></script>
-  <script src="lib/jasmine-5.1.1/boot0.js"></script>
-  <!-- optional: include a file here that configures the Jasmine env -->
-  <script src="lib/jasmine-5.1.1/boot1.js"></script>
-  <script src="moneyTest.js" type="module"></script>
-</head>
-
-<body>
-</body>
-</html>
diff --git a/moneyTest/moneyTest.js b/moneyTest/moneyTest.js
deleted file mode 100644
index e6d3c4e..0000000
--- a/moneyTest/moneyTest.js
+++ /dev/null
@@ -1,22 +0,0 @@
-// import { formatCurrency } from "../../public/js/money.js";
-// describe("Test suite : formatCurrency", () => {
-//   it("Converts cents into dollars", () => {
-//     expect(formatCurrency(2000)).toEqual("20.00");
-//   });
-//   it("Works with zero", () => {
-//     expect(formatCurrency(0)).toEqual("0.00");
-//   });
-//   it("round up to the nearest cent", () => {
-//     expect(formatCurrency(2000.5)).toEqual("20.01");
-//   });
-// });
-
-describe("A suite is just a function", function () {
-  let a;
-
-  it("and so is a spec", function () {
-    a = true;
-
-    expect(a).toBe(true);
-  });
-});

From 486827040297dd0ba7bb945a91dfd5d972e31702 Mon Sep 17 00:00:00 2001
From: vikrant-vikrant <123059176+vikrant-vikrant@users.noreply.github.com>
Date: Tue, 4 Feb 2025 12:23:32 +0530
Subject: [PATCH 31/31] Add Cart class and related tests for cart functionality

---
 jasmine-standalone-5.1.1 (1)/moneyTest.js | 51 +++++++++++++++++++++++
 public/js/cart-class.js                   |  2 +-
 2 files changed, 52 insertions(+), 1 deletion(-)

diff --git a/jasmine-standalone-5.1.1 (1)/moneyTest.js b/jasmine-standalone-5.1.1 (1)/moneyTest.js
index a77b9b0..b894a5c 100644
--- a/jasmine-standalone-5.1.1 (1)/moneyTest.js	
+++ b/jasmine-standalone-5.1.1 (1)/moneyTest.js	
@@ -1,4 +1,6 @@
 import { formatCurrency } from "../public/js/money.js";
+import { Cart } from "../public/js/cart-class.js";
+
 describe("Test suite : formatCurrency", () => {
   it("Converts cents into dollars", () => {
     expect(formatCurrency(2000)).toEqual("20.00");
@@ -11,3 +13,52 @@ describe("Test suite : formatCurrency", () => {
   });
 });
 
+describe("Cart Class", function () {
+  let cart;
+  const testProductId = "19c6a64a-5463-4d45-9af8-e41140a4100c";
+
+  // Mock localStorage
+  beforeEach(function () {
+    spyOn(localStorage, "getItem").and.callFake(() => {
+      return JSON.stringify([]);
+    });
+    spyOn(localStorage, "setItem");
+
+    const quantitySelector = document.createElement("input");
+    quantitySelector.classList.add(`js-quantity-selector-${testProductId}`);
+    quantitySelector.value = 1; // Default quantity for testing
+    document.body.appendChild(quantitySelector);
+
+    cart = new Cart("test-cart");
+  });
+
+  it("should add a new item to the cart", function () {
+    cart.addToCart(testProductId);
+
+    expect(cart.cartItems.length).toBe(1);
+    expect(cart.cartItems[0].productId).toBe(testProductId);
+    expect(cart.cartItems[0].quantity).toBe(1);
+    expect(localStorage.setItem).toHaveBeenCalled();
+  });
+
+  it("should increase quantity if item already exists", function () {
+    cart.addToCart(testProductId);
+    cart.addToCart(testProductId);
+
+    expect(cart.cartItems.length).toBe(1); // Still one item
+    expect(cart.cartItems[0].quantity).toBe(2); // Quantity increased
+    expect(localStorage.setItem).toHaveBeenCalledTimes(2);
+  });
+
+  // it("should handle multiple different products", function () {
+  //   cart.addToCart("a45cfa0a-66d6-4dc7-9475-e2b01595f7d7");
+  //   cart.addToCart("10ed8504-57db-433c-b0a3-fc71a35c88a1");
+
+  //   expect(cart.cartItems.length).toBe(2);
+  //   console.log(cart.cartItems)
+    // expect(cart.cartItems[0].productId).toBe("a45cfa0a-66d6-4dc7-9475-e2b01595f7d7");
+    // expect(cart.cartItems[1].productId).toBe("10ed8504-57db-433c-b0a3-fc71a35c88a1");
+    // expect(localStorage.setItem).toHaveBeenCalledTimes(2);
+  // });
+});
+
diff --git a/public/js/cart-class.js b/public/js/cart-class.js
index 6035249..2dc9510 100644
--- a/public/js/cart-class.js
+++ b/public/js/cart-class.js
@@ -1,4 +1,4 @@
-class Cart {
+export class Cart {
   cartItems;
   #localStoragekey;