vikrant-vikrant · vikrant-vikrant · Jan 8, 2025 · Jan 9, 2025 · Jan 9, 2025 · Jan 9, 2025
diff --git a/index.js b/index.js
@@ -17,6 +17,14 @@ app.get("/checkout", (req, res) => {
   res.render("listings/checkout.ejs");
 });
 
+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/tests-jasmin/MIT.LICENSE → jasmine-standalone-5.1.1 (1)/MIT.LICENSE b/tests-jasmin/MIT.LICENSE → jasmine-standalone-5.1.1 (1)/MIT.LICENSE
diff --git a/tests-jasmin/lib/jasmine-5.1.1/boot0.js → ...lone-5.1.1 (1)/lib/jasmine-5.1.1/boot0.js b/tests-jasmin/lib/jasmine-5.1.1/boot0.js → ...lone-5.1.1 (1)/lib/jasmine-5.1.1/boot0.js
diff --git a/tests-jasmin/lib/jasmine-5.1.1/boot1.js → ...lone-5.1.1 (1)/lib/jasmine-5.1.1/boot1.js b/tests-jasmin/lib/jasmine-5.1.1/boot1.js → ...lone-5.1.1 (1)/lib/jasmine-5.1.1/boot1.js
diff --git a/...-jasmin/lib/jasmine-5.1.1/jasmine-html.js → ...1.1 (1)/lib/jasmine-5.1.1/jasmine-html.js b/...-jasmin/lib/jasmine-5.1.1/jasmine-html.js → ...1.1 (1)/lib/jasmine-5.1.1/jasmine-html.js
diff --git a/tests-jasmin/lib/jasmine-5.1.1/jasmine.css → ...e-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.css b/tests-jasmin/lib/jasmine-5.1.1/jasmine.css → ...e-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.css
diff --git a/tests-jasmin/lib/jasmine-5.1.1/jasmine.js → ...ne-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.js b/tests-jasmin/lib/jasmine-5.1.1/jasmine.js → ...ne-5.1.1 (1)/lib/jasmine-5.1.1/jasmine.js
diff --git a/...min/lib/jasmine-5.1.1/jasmine_favicon.png → ...(1)/lib/jasmine-5.1.1/jasmine_favicon.png b/...min/lib/jasmine-5.1.1/jasmine_favicon.png → ...(1)/lib/jasmine-5.1.1/jasmine_favicon.png
diff --git a/jasmine-standalone-5.1.1 (1)/moneyTest.js b/jasmine-standalone-5.1.1 (1)/moneyTest.js
@@ -0,0 +1,64 @@
+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");
+  });
+  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("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/jasmine-standalone-5.1.1 (1)/test.html 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/kaka.html 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
@@ -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;
+  }
+}
diff --git 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,9 +255,17 @@
   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,.view-products a {
+  text-decoration: none;
+  color: black;
 }
 .quantity-input {
   width: 30px;

diff --git 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;