From 0dd998bb66a36a637df4d5b1b6e89a9f2fa19703 Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Wed, 3 Apr 2024 02:09:13 +0500 Subject: [PATCH 01/41] hhkaerak --- amazon.html | 1 + 1 file changed, 1 insertion(+) diff --git a/amazon.html b/amazon.html index d9f431b6..321b1b69 100644 --- a/amazon.html +++ b/amazon.html @@ -203,3 +203,4 @@ +krfjkfj;fsjl From 51bdf61e22050d9240fcc0f65d5989835b4986f1 Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Wed, 3 Apr 2024 02:45:51 +0500 Subject: [PATCH 02/41] Html with Js --- amazon.html | 244 ++++++++++------------------------------------ scripts/amazon.js | 84 ++++++++++++++++ 2 files changed, 134 insertions(+), 194 deletions(-) create mode 100644 scripts/amazon.js diff --git a/amazon.html b/amazon.html index 321b1b69..1ea57a4e 100644 --- a/amazon.html +++ b/amazon.html @@ -1,206 +1,62 @@ - - Amazon Project - - - - - - - - - - - - - - -
-
- - - - -
- -
- - - -
- -
- - Returns - & Orders - - - - -
3
-
Cart
- -
+ + + + + + + + + + + + + + +
+
+ + + +
- -
-
-
-
- -
- -
- Black and Gray Athletic Cotton Socks - 6 Pairs -
- -
- -
- 87 -
-
- -
- $10.90 -
- -
- -
- -
- -
- - Added -
- - -
-
-
- -
+
+ -
- Intermediate Size Basketball -
- -
- -
- 127 -
-
- -
- $20.95 -
- -
- -
- -
- -
- - Added -
- - -
- -
-
- -
- -
- Adults Plain Cotton T-Shirt - 2 Pack -
- -
- -
- 56 -
-
- -
- $7.99 -
- -
- -
+ +
-
+
+ + Returns + & Orders + + + + +
3
+
Cart
+ +
+
-
- - Added -
+
+
- -
-
- - -krfjkfj;fsjl +
+ + + + \ No newline at end of file diff --git a/scripts/amazon.js b/scripts/amazon.js new file mode 100644 index 00000000..e40a48c4 --- /dev/null +++ b/scripts/amazon.js @@ -0,0 +1,84 @@ +const products = [{ + image: "images/products/athletic-cotton-socks-6-pairs.jpg", + name: "Black and Gray Athletic Cotton Socks - 6 Pairs", + rating: { + stars: 4.5, + count: 87 + }, + priceCents: 1090 + + +}, +{ + image: "images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg", + name: "Adults Plain Cotton T-Shirt - 2 Pack", + rating: { + stars: 4.5, + count: 56 + }, + priceCents: 799 +}, +{ + image: "images/products/intermediate-composite-basketball.jpg", + name: "Intermediate Size Basketball", + rating: { + stars: 4, + count: 127 + }, + priceCents: 2095 +} +] + +let productsHTML=''; +products.forEach((product) =>{ + productsHTML+=`
+
+ +
+ +
+ ${product.name} +
+ +
+ +
+ ${product.rating.count} +
+
+ +
+ $${(product.priceCents/100).toFixed(2)} +
+ +
+ +
+
+ +
+ + Added +
+ + +
` +// document.querySelector('products-grid').innerHTML+=html + +}) +document.querySelector('.js-products-grid').innerHTML+=productsHTML From 6ba5c5ce7a6a7f94e3a86876e0cc1e4eb6e86c62 Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Wed, 3 Apr 2024 13:15:57 +0500 Subject: [PATCH 03/41] Make Home page interactive --- amazon.html | 4 ++- data/cart.js | 1 + scripts/amazon.js | 62 ++++++++++++++++++++++------------------------- 3 files changed, 33 insertions(+), 34 deletions(-) create mode 100644 data/cart.js diff --git a/amazon.html b/amazon.html index 1ea57a4e..8cac5ff7 100644 --- a/amazon.html +++ b/amazon.html @@ -56,7 +56,9 @@
- + + + \ No newline at end of file diff --git a/data/cart.js b/data/cart.js new file mode 100644 index 00000000..34e85961 --- /dev/null +++ b/data/cart.js @@ -0,0 +1 @@ +let cart=[]; \ No newline at end of file diff --git a/scripts/amazon.js b/scripts/amazon.js index e40a48c4..f8a0ecf2 100644 --- a/scripts/amazon.js +++ b/scripts/amazon.js @@ -1,34 +1,3 @@ -const products = [{ - image: "images/products/athletic-cotton-socks-6-pairs.jpg", - name: "Black and Gray Athletic Cotton Socks - 6 Pairs", - rating: { - stars: 4.5, - count: 87 - }, - priceCents: 1090 - - -}, -{ - image: "images/products/adults-plain-cotton-tshirt-2-pack-teal.jpg", - name: "Adults Plain Cotton T-Shirt - 2 Pack", - rating: { - stars: 4.5, - count: 56 - }, - priceCents: 799 -}, -{ - image: "images/products/intermediate-composite-basketball.jpg", - name: "Intermediate Size Basketball", - rating: { - stars: 4, - count: 127 - }, - priceCents: 2095 -} -] - let productsHTML=''; products.forEach((product) =>{ productsHTML+=`
@@ -74,11 +43,38 @@ products.forEach((product) =>{ Added
- ` // document.querySelector('products-grid').innerHTML+=html }) -document.querySelector('.js-products-grid').innerHTML+=productsHTML +document.querySelector('.js-products-grid').innerHTML+=productsHTML; +document.querySelectorAll('.js-add-to-cart').forEach( (button) => +{ + button.addEventListener('click', () => + { + let index=-1; + + const productId=button.dataset.productId; + cart.forEach((item,i) =>{ + if (productId===item.productId){ + index=i; + } + }) + if (index!==-1){ + cart[index].quantity+=1; + } + else{ + cart.push({ + productId:productId, + quantity:1 + }); + } + console.log(cart) + }); + +}); + From 0d0dad836ae48aa0555d835b894e00ed24e7cf45 Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Wed, 3 Apr 2024 13:39:28 +0500 Subject: [PATCH 04/41] Make Cart Quantity Interactive --- amazon.html | 2 +- scripts/amazon.js | 61 ++++++++++++++++++++++++++--------------------- 2 files changed, 35 insertions(+), 28 deletions(-) diff --git a/amazon.html b/amazon.html index 8cac5ff7..ea2c7c87 100644 --- a/amazon.html +++ b/amazon.html @@ -45,7 +45,7 @@ -
3
+
0
Cart
 diff --git a/scripts/amazon.js b/scripts/amazon.js index f8a0ecf2..d873e9c6 100644 --- a/scripts/amazon.js +++ b/scripts/amazon.js @@ -1,6 +1,6 @@ -let productsHTML=''; -products.forEach((product) =>{ - productsHTML+=`
+let productsHTML = ''; +products.forEach((product) => { + productsHTML += `
@@ -12,14 +12,14 @@ products.forEach((product) =>{
+ src="images/ratings/rating-${product.rating.stars * 10}.png">
${product.rating.count}
- $${(product.priceCents/100).toFixed(2)} + $${(product.priceCents / 100).toFixed(2)}
@@ -48,33 +48,40 @@ products.forEach((product) =>{ Add to Cart
` -// document.querySelector('products-grid').innerHTML+=html + // document.querySelector('products-grid').innerHTML+=html }) -document.querySelector('.js-products-grid').innerHTML+=productsHTML; -document.querySelectorAll('.js-add-to-cart').forEach( (button) => -{ - button.addEventListener('click', () => - { - let index=-1; +document.querySelector('.js-products-grid').innerHTML += productsHTML; + // Change const to let - const productId=button.dataset.productId; - cart.forEach((item,i) =>{ - if (productId===item.productId){ - index=i; +let CartQuantity = 0; // Change const to let + +document.querySelectorAll('.js-add-to-cart').forEach((button) => { + button.addEventListener('click', () => { + let index = -1; + + const productId = button.dataset.productId; + cart.forEach((item, i) => { + if (productId === item.productId) { + index = i; } - }) - if (index!==-1){ - cart[index].quantity+=1; + }); + + if (index !== -1) { + cart[index].quantity += 1; + } else { + cart.push({ + productId: productId, + quantity: 1 + }); } - else{ - cart.push({ - productId:productId, - quantity:1 + + // Update CartQuantity here + CartQuantity = 0; + cart.forEach((item) => { + CartQuantity += item.quantity; }); - } - console.log(cart) + // Update cart quantity display + document.querySelector('.js-cart-quantity').innerHTML = CartQuantity; }); - }); - From 89236a58bba7aaf7c4161dc087e08db20ca38d01 Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Thu, 4 Apr 2024 07:22:30 +0500 Subject: [PATCH 05/41] setTimeout for Add to cart confirmation --- scripts/amazon.js | 19 ++++++++++++++----- styles/pages/amazon.css | 2 +- 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/scripts/amazon.js b/scripts/amazon.js index d873e9c6..a12110b2 100644 --- a/scripts/amazon.js +++ b/scripts/amazon.js @@ -38,9 +38,8 @@ products.forEach((product) => {
-
- - Added +
+
- + - + \ No newline at end of file diff --git a/data/cart.js b/data/cart.js index 34e85961..b9773f83 100644 --- a/data/cart.js +++ b/data/cart.js @@ -1 +1 @@ -let cart=[]; \ No newline at end of file +export let cart=[]; \ No newline at end of file diff --git a/scripts/amazon.js b/scripts/amazon.js index a12110b2..2920b069 100644 --- a/scripts/amazon.js +++ b/scripts/amazon.js @@ -1,3 +1,5 @@ +import { cart } from "../data/cart.js"; + let productsHTML = ''; products.forEach((product) => { productsHTML += `
@@ -51,20 +53,20 @@ products.forEach((product) => { }) document.querySelector('.js-products-grid').innerHTML += productsHTML; - // Change const to let +// Change const to let let CartQuantity = 0; // Change const to let document.querySelectorAll('.js-add-to-cart').forEach((button) => { button.addEventListener('click', () => { let index = -1; - + const productId = button.dataset.productId; cart.forEach((item, i) => { if (productId === item.productId) { index = i; } - + }); if (index !== -1) { @@ -73,14 +75,14 @@ document.querySelectorAll('.js-add-to-cart').forEach((button) => { cart.push({ productId: productId, quantity: 1 - }); + }); + + addedToCart = document.querySelector(`.js-added-to-cart-${productId}`); + addedToCart.innerHTML = ` Added`; + setTimeout(function () { + addedToCart.innerHTML = ""; + }, 1300); - addedToCart=document.querySelector(`.js-added-to-cart-${productId}`); - addedToCart.innerHTML=` Added`; - setTimeout(function(){ - addedToCart.innerHTML=""; - },1300); - } // Update CartQuantity here @@ -90,7 +92,7 @@ document.querySelectorAll('.js-add-to-cart').forEach((button) => { }); // Update cart quantity display document.querySelector('.js-cart-quantity').innerHTML = CartQuantity; - + }); - + }); From b1ee128c9109e743c70004575995acc0de891fca Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Thu, 4 Apr 2024 08:40:06 +0500 Subject: [PATCH 07/41] Creating Add to Cart,UpdateQuantity Function and move it to their respective modules --- amazon.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/amazon.html b/amazon.html index 5698240a..e16a8bef 100644 --- a/amazon.html +++ b/amazon.html @@ -56,9 +56,8 @@
- - - + + \ No newline at end of file From 5664806de0f559539e6b540434c77ff1b776af06 Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Thu, 4 Apr 2024 08:40:34 +0500 Subject: [PATCH 08/41] Creating Add to Cart,UpdateQuantity Function and move it to their respective modules --- data/cart.js | 36 +++++++++++++++++++++++++++++++++- data/products.js | 2 +- scripts/amazon.js | 49 +++++++++++++---------------------------------- 3 files changed, 49 insertions(+), 38 deletions(-) diff --git a/data/cart.js b/data/cart.js index b9773f83..2554b78b 100644 --- a/data/cart.js +++ b/data/cart.js @@ -1 +1,35 @@ -export let cart=[]; \ No newline at end of file +export let cart = []; + +export function addedToCart(productId) { + let index = -1; + cart.forEach((cartItem, i) => { + if (productId === cartItem.productId) { + index = i; + } + + }); + const addedToCart = document.querySelector(`.js-added-to-cart-${productId}`); + + if (addedToCart) { + addedToCart.innerHTML = ` Added`; + setTimeout(function () { + addedToCart.innerHTML = ""; + }, 1300); + } + else { + console.error("Element with class 'js-added-to-cart' not found."); + } + if (index !== -1) { + cart[index].quantity += 1; + } else { + cart.push({ + productId: productId, + quantity: 1 + }); + + + } +} + + + diff --git a/data/products.js b/data/products.js index 61a7fdf7..7f577e0a 100644 --- a/data/products.js +++ b/data/products.js @@ -1,4 +1,4 @@ -const products = [ +export const products = [ { id: "e43638ce-6aa0-4b85-b27f-e1d07eb678c6", image: "images/products/athletic-cotton-socks-6-pairs.jpg", diff --git a/scripts/amazon.js b/scripts/amazon.js index 2920b069..f37d7596 100644 --- a/scripts/amazon.js +++ b/scripts/amazon.js @@ -1,4 +1,5 @@ -import { cart } from "../data/cart.js"; +import { cart,addedToCart } from "../data/cart.js"; +import { products } from "../data/products.js"; let productsHTML = ''; products.forEach((product) => { @@ -53,46 +54,22 @@ products.forEach((product) => { }) document.querySelector('.js-products-grid').innerHTML += productsHTML; -// Change const to let -let CartQuantity = 0; // Change const to let +function updateCartQuantity() { + let CartQuantity = 0; + cart.forEach((cartItem) => { + CartQuantity += cartItem.quantity; + }); + // Update cart quantity display + document.querySelector('.js-cart-quantity').innerHTML = CartQuantity; + +} document.querySelectorAll('.js-add-to-cart').forEach((button) => { button.addEventListener('click', () => { - let index = -1; const productId = button.dataset.productId; - cart.forEach((item, i) => { - if (productId === item.productId) { - index = i; - } - - }); - - if (index !== -1) { - cart[index].quantity += 1; - } else { - cart.push({ - productId: productId, - quantity: 1 - }); - - addedToCart = document.querySelector(`.js-added-to-cart-${productId}`); - addedToCart.innerHTML = ` Added`; - setTimeout(function () { - addedToCart.innerHTML = ""; - }, 1300); - - } - - // Update CartQuantity here - CartQuantity = 0; - cart.forEach((item) => { - CartQuantity += item.quantity; - }); - // Update cart quantity display - document.querySelector('.js-cart-quantity').innerHTML = CartQuantity; - + addedToCart(productId); + updateCartQuantity(); }); - }); From f4a1f331a1de847870ab866379ee7a43e2ef50bd Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Fri, 5 Apr 2024 16:49:59 +0500 Subject: [PATCH 09/41] generate html for order summary --- checkout.html | 151 +------------------------------------------- data/cart.js | 11 +++- scripts/amazon.js | 1 + scripts/checkout.js | 92 +++++++++++++++++++++++++++ 4 files changed, 105 insertions(+), 150 deletions(-) create mode 100644 scripts/checkout.js diff --git a/checkout.html b/checkout.html index da3f2497..55a277a9 100644 --- a/checkout.html +++ b/checkout.html @@ -43,156 +43,8 @@
Review your order
-
-
-
- Delivery date: Tuesday, June 21 -
+
-
- - -
-
- Black and Gray Athletic Cotton Socks - 6 Pairs -
-
- $10.90 -
-
- - Quantity: 2 - - - Update - - - Delete - -
-
- -
-
- Choose a delivery option: -
-
- -
-
- Tuesday, June 21 -
-
- FREE Shipping -
-
-
-
- -
-
- Wednesday, June 15 -
-
- $4.99 - Shipping -
-
-
-
- -
-
- Monday, June 13 -
-
- $9.99 - Shipping -
-
-
-
-
-
- -
-
- Delivery date: Wednesday, June 15 -
- -
- - -
-
- Intermediate Size Basketball -
-
- $20.95 -
-
- - Quantity: 1 - - - Update - - - Delete - -
-
- -
-
- Choose a delivery option: -
- -
- -
-
- Tuesday, June 21 -
-
- FREE Shipping -
-
-
-
- -
-
- Wednesday, June 15 -
-
- $4.99 - Shipping -
-
-
-
- -
-
- Monday, June 13 -
-
- $9.99 - Shipping -
-
-
-
-
-
@@ -231,5 +83,6 @@
+ diff --git a/data/cart.js b/data/cart.js index 2554b78b..5eb7687a 100644 --- a/data/cart.js +++ b/data/cart.js @@ -1,4 +1,13 @@ -export let cart = []; +export let cart = [ +{ + productId:"e43638ce-6aa0-4b85-b27f-e1d07eb678c6", + quantity:1 +}, +{ + productId:"15b6fc6f-327a-4ec4-896f-486349e85a3d", + quantity:2 +} +]; export function addedToCart(productId) { let index = -1; diff --git a/scripts/amazon.js b/scripts/amazon.js index f37d7596..22e4acdd 100644 --- a/scripts/amazon.js +++ b/scripts/amazon.js @@ -71,5 +71,6 @@ document.querySelectorAll('.js-add-to-cart').forEach((button) => { const productId = button.dataset.productId; addedToCart(productId); updateCartQuantity(); + console.log(cart); }); }); diff --git a/scripts/checkout.js b/scripts/checkout.js new file mode 100644 index 00000000..024612d4 --- /dev/null +++ b/scripts/checkout.js @@ -0,0 +1,92 @@ +import { cart } from "../data/cart.js"; +import { products } from "../data/products.js"; +console.log(cart) +cart.forEach((cartItem) => { + const productId = cartItem.productId; + let matchingProduct; + console.log(products.length) + // Find the product matching the cart item + for (let i = 0; i < products.length; i++) { + if (productId === products[i].id) { + matchingProduct = products[i]; + break; + } + } + + // Check if a matching product was found + if (matchingProduct) { + // Construct HTML for the cart item + const cartItemHtml = ` +
+
+ Delivery date: Tuesday, June 21 +
+ +
+ + +
+
${matchingProduct.name}
+
$${(matchingProduct.priceCents/100).toFixed(2)}
+
+ + Quantity: ${cartItem.quantity} + + Update + Delete +
+
+ +
+
+
+ Choose a delivery option: +
+
+ +
+
+ Tuesday, June 21 +
+
+ FREE Shipping +
+
+
+
+ +
+
+ Wednesday, June 15 +
+
+ $4.99 - Shipping +
+
+
+
+ +
+
+ Monday, June 13 +
+
+ $9.99 - Shipping +
+
+
+
+
+
+ `; + + // Append the HTML to the order summary element + document.querySelector('.js-order-summary').innerHTML +=cartItemHtml; + } +}); From da603d516b254c98a2f8946e8af0b6fba88d6603 Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Sat, 6 Apr 2024 16:00:16 +0500 Subject: [PATCH 10/41] fix price Formatting and Radio Selectors --- data/cart.js | 4 ++++ scripts/amazon.js | 4 ++-- scripts/checkout.js | 9 +++++---- scripts/utils/money.js | 3 +++ 4 files changed, 14 insertions(+), 6 deletions(-) create mode 100644 scripts/utils/money.js diff --git a/data/cart.js b/data/cart.js index 5eb7687a..e8943024 100644 --- a/data/cart.js +++ b/data/cart.js @@ -6,6 +6,10 @@ export let cart = [ { productId:"15b6fc6f-327a-4ec4-896f-486349e85a3d", quantity:2 +}, +{ + productId:"dd82ca78-a18b-4e2a-9250-31e67412f98d", + quantity:6 } ]; diff --git a/scripts/amazon.js b/scripts/amazon.js index 22e4acdd..8b8b4793 100644 --- a/scripts/amazon.js +++ b/scripts/amazon.js @@ -1,6 +1,6 @@ import { cart,addedToCart } from "../data/cart.js"; import { products } from "../data/products.js"; - +import { formatCurrency } from "./utils/money.js"; let productsHTML = ''; products.forEach((product) => { productsHTML += `
@@ -22,7 +22,7 @@ products.forEach((product) => {
- $${(product.priceCents / 100).toFixed(2)} + $${formatCurrency(product.priceCents)}
diff --git a/scripts/checkout.js b/scripts/checkout.js index 024612d4..fead456b 100644 --- a/scripts/checkout.js +++ b/scripts/checkout.js @@ -1,5 +1,6 @@ import { cart } from "../data/cart.js"; import { products } from "../data/products.js"; +import { formatCurrency } from "./utils/money.js"; console.log(cart) cart.forEach((cartItem) => { const productId = cartItem.productId; @@ -27,7 +28,7 @@ cart.forEach((cartItem) => {
${matchingProduct.name}
-
$${(matchingProduct.priceCents/100).toFixed(2)}
+
$${formatCurrency(matchingProduct.priceCents)}
Quantity: ${cartItem.quantity} @@ -45,7 +46,7 @@ cart.forEach((cartItem) => {
+ name="delivery-option-${matchingProduct.id}">
Tuesday, June 21 @@ -58,7 +59,7 @@ cart.forEach((cartItem) => {
+ name="delivery-option-${matchingProduct.id}">
Wednesday, June 15 @@ -71,7 +72,7 @@ cart.forEach((cartItem) => {
+ name="delivery-option-${matchingProduct.id}">
Monday, June 13 diff --git a/scripts/utils/money.js b/scripts/utils/money.js new file mode 100644 index 00000000..3bcc04ef --- /dev/null +++ b/scripts/utils/money.js @@ -0,0 +1,3 @@ +export function formatCurrency(priceCents){ + return (priceCents/100).toFixed(2) +} \ No newline at end of file From 3d84ae64949185e531c16d0f88c5e21730d26cfb Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Sat, 6 Apr 2024 16:29:19 +0500 Subject: [PATCH 11/41] implement the logic behind behingd delete link in checkout.html --- data/cart.js | 10 ++++++++++ scripts/checkout.js | 14 ++++++++++++-- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/data/cart.js b/data/cart.js index e8943024..38c69bcc 100644 --- a/data/cart.js +++ b/data/cart.js @@ -44,5 +44,15 @@ export function addedToCart(productId) { } } +export function removeFromCart(productid){ + const newCart=[]; + + cart.forEach((cartItem)=>{ + if (cartItem.productId !== productid){ + newCart.push(cartItem); + }; +}); + cart=newCart; +} diff --git a/scripts/checkout.js b/scripts/checkout.js index fead456b..785fd040 100644 --- a/scripts/checkout.js +++ b/scripts/checkout.js @@ -1,4 +1,4 @@ -import { cart } from "../data/cart.js"; +import { cart,removeFromCart } from "../data/cart.js"; import { products } from "../data/products.js"; import { formatCurrency } from "./utils/money.js"; console.log(cart) @@ -34,7 +34,7 @@ cart.forEach((cartItem) => { Quantity: ${cartItem.quantity} Update - Delete + Delete
@@ -89,5 +89,15 @@ cart.forEach((cartItem) => { // Append the HTML to the order summary element document.querySelector('.js-order-summary').innerHTML +=cartItemHtml; + } }); + +document.querySelectorAll('.js-delete-link') +.forEach((link) =>{ + link.addEventListener('click',()=>{ + const productId=link.dataset.productId; + removeFromCart(productId); + console.log(cart); + }); +}); From fe2ce8ff6d930cab86b2978c17ea9b12f91b4b1f Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Sat, 6 Apr 2024 16:35:08 +0500 Subject: [PATCH 12/41] delete container from the cart when press delete --- scripts/checkout.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/scripts/checkout.js b/scripts/checkout.js index 785fd040..6564022c 100644 --- a/scripts/checkout.js +++ b/scripts/checkout.js @@ -18,7 +18,7 @@ cart.forEach((cartItem) => { if (matchingProduct) { // Construct HTML for the cart item const cartItemHtml = ` -
+
Delivery date: Tuesday, June 21
@@ -99,5 +99,11 @@ document.querySelectorAll('.js-delete-link') const productId=link.dataset.productId; removeFromCart(productId); console.log(cart); + + const container=document.querySelector( + `.js-cart-item-container-${productId}` + ) + container.remove(); + }); }); From 56236a00e02c909b8b8f8acfe2e52383b46ea5d2 Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Sat, 6 Apr 2024 16:45:14 +0500 Subject: [PATCH 13/41] save cart to locat storage --- data/cart.js | 40 ++++++++++++++++++++++++++-------------- 1 file changed, 26 insertions(+), 14 deletions(-) diff --git a/data/cart.js b/data/cart.js index 38c69bcc..65db8ff2 100644 --- a/data/cart.js +++ b/data/cart.js @@ -1,17 +1,22 @@ -export let cart = [ -{ - productId:"e43638ce-6aa0-4b85-b27f-e1d07eb678c6", - quantity:1 -}, -{ - productId:"15b6fc6f-327a-4ec4-896f-486349e85a3d", - quantity:2 -}, -{ - productId:"dd82ca78-a18b-4e2a-9250-31e67412f98d", - quantity:6 +export let cart = JSON.parse(localStorage.getItem('cart')); + +if(!cart){ +cart=[ + { + productId:"e43638ce-6aa0-4b85-b27f-e1d07eb678c6", + quantity:1 + }, + { + productId:"15b6fc6f-327a-4ec4-896f-486349e85a3d", + quantity:2 + }, + { + productId:"dd82ca78-a18b-4e2a-9250-31e67412f98d", + quantity:6 + } + ]; + } -]; export function addedToCart(productId) { let index = -1; @@ -40,7 +45,7 @@ export function addedToCart(productId) { quantity: 1 }); - + savetoStorage(); } } @@ -53,6 +58,13 @@ export function removeFromCart(productid){ }; }); cart=newCart; + savetoStorage(); } +function savetoStorage(){ + + localStorage.setItem('cart',JSON.stringify(cart)); + + +} From 9b91d6ee12bbe4f107b31cd7ef8715523002c99a Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Fri, 19 Apr 2024 23:33:39 +0500 Subject: [PATCH 14/41] Show cart quantity on checkout and home page --- amazon.html | 2 +- checkout.html | 5 +++-- data/cart.js | 12 ++++++++++++ scripts/amazon.js | 25 ++++++++++++++----------- scripts/checkout.js | 9 ++++++++- 5 files changed, 38 insertions(+), 15 deletions(-) diff --git a/amazon.html b/amazon.html index e16a8bef..50fe9436 100644 --- a/amazon.html +++ b/amazon.html @@ -45,7 +45,7 @@ -
0
+
Cart
diff --git a/checkout.html b/checkout.html index 55a277a9..8c0d0568 100644 --- a/checkout.html +++ b/checkout.html @@ -29,8 +29,8 @@
- Checkout (3 items) + Checkout ()
@@ -44,6 +44,7 @@
+
diff --git a/data/cart.js b/data/cart.js index 65db8ff2..aacabd78 100644 --- a/data/cart.js +++ b/data/cart.js @@ -68,3 +68,15 @@ function savetoStorage(){ } +export function updateCartQuantity() { + let CartQuantity = 0; + + cart.forEach((cartItem) => { + CartQuantity += cartItem.quantity; + }); + // Update cart quantity display + return CartQuantity; + + +} + diff --git a/scripts/amazon.js b/scripts/amazon.js index 8b8b4793..94c7400f 100644 --- a/scripts/amazon.js +++ b/scripts/amazon.js @@ -1,6 +1,14 @@ -import { cart,addedToCart } from "../data/cart.js"; +import { cart,addedToCart,updateCartQuantity } from "../data/cart.js"; import { products } from "../data/products.js"; import { formatCurrency } from "./utils/money.js"; + +if (updateCartQuantity()===0){ + document.querySelector('.js-cart-quantity').innerHTML = ' '; + +} +else{ +document.querySelector('.js-cart-quantity').innerHTML = updateCartQuantity(); +} let productsHTML = ''; products.forEach((product) => { productsHTML += `
@@ -55,22 +63,17 @@ products.forEach((product) => { }) document.querySelector('.js-products-grid').innerHTML += productsHTML; -function updateCartQuantity() { - let CartQuantity = 0; - cart.forEach((cartItem) => { - CartQuantity += cartItem.quantity; - }); - // Update cart quantity display - document.querySelector('.js-cart-quantity').innerHTML = CartQuantity; -} document.querySelectorAll('.js-add-to-cart').forEach((button) => { button.addEventListener('click', () => { const productId = button.dataset.productId; addedToCart(productId); - updateCartQuantity(); - console.log(cart); + document.querySelector('.js-cart-quantity').innerHTML = updateCartQuantity(); + }); }); + + + diff --git a/scripts/checkout.js b/scripts/checkout.js index 6564022c..d29dbade 100644 --- a/scripts/checkout.js +++ b/scripts/checkout.js @@ -1,7 +1,9 @@ import { cart,removeFromCart } from "../data/cart.js"; import { products } from "../data/products.js"; import { formatCurrency } from "./utils/money.js"; -console.log(cart) +import { updateCartQuantity } from "../data/cart.js"; +document.querySelector('.js-return-to-home-link').innerHTML = `${updateCartQuantity()} items`; + cart.forEach((cartItem) => { const productId = cartItem.productId; let matchingProduct; @@ -104,6 +106,11 @@ document.querySelectorAll('.js-delete-link') `.js-cart-item-container-${productId}` ) container.remove(); + document.querySelector('.js-return-to-home-link').innerHTML = `${updateCartQuantity()} items`; + + }); }); + + From 88bcb95b116e898ebf87791087f6dde800b69105 Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Sat, 20 Apr 2024 01:34:55 +0500 Subject: [PATCH 15/41] make update button interactive --- .vscode/settings.json | 3 ++ data/cart.js | 10 +++++++ scripts/checkout.js | 47 +++++++++++++++++++++++++++--- styles/pages/checkout/checkout.css | 18 ++++++++++++ 4 files changed, 74 insertions(+), 4 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..aef84430 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/data/cart.js b/data/cart.js index aacabd78..80f63111 100644 --- a/data/cart.js +++ b/data/cart.js @@ -80,3 +80,13 @@ export function updateCartQuantity() { } +export function updateQuantity(productId,newQuantity){ + for (let i=0;i {
$${formatCurrency(matchingProduct.priceCents)}
- Quantity: ${cartItem.quantity} + Quantity: ${cartItem.quantity} - Update + Update + + + Save Delete
@@ -100,7 +104,7 @@ document.querySelectorAll('.js-delete-link') link.addEventListener('click',()=>{ const productId=link.dataset.productId; removeFromCart(productId); - console.log(cart); + const container=document.querySelector( `.js-cart-item-container-${productId}` @@ -114,3 +118,38 @@ document.querySelectorAll('.js-delete-link') }); +document.querySelectorAll('.js-update-quantity-link') +.forEach((link) =>{ + link.addEventListener('click',()=>{ + const productId= link.dataset.productId; + const cartItemContainer=document.querySelector(`.js-cart-item-container-${productId}`) + cartItemContainer.classList.add('is-editing-quantity'); + // console.log(cartItemContainer); + + }); +}); + +document.querySelectorAll('.js-save-quantity-link').forEach((link) => { + link.addEventListener('click', () => { + // Get the product ID from the clicked link's data attribute + const productId = link.dataset.productId; + + // Find the cart-item-container for the product + const cartItemContainer = document.querySelector(`.js-cart-item-container-${productId}`); + + cartItemContainer.classList.remove('is-editing-quantity'); + const quantityInput = document.querySelector( + `.js-quantity-input-${productId}` + ); + if (quantityInput){ + const newQuantity = Number(quantityInput.value); + console.log(newQuantity); + updateQuantity(productId,newQuantity); + document.querySelector(`.quantity-label-${productId}`).innerHTML=newQuantity; + document.querySelector('.js-return-to-home-link').innerHTML = `${updateCartQuantity()} items`; + } + }); +}); + + + diff --git a/styles/pages/checkout/checkout.css b/styles/pages/checkout/checkout.css index 764bfa58..4687875e 100644 --- a/styles/pages/checkout/checkout.css +++ b/styles/pages/checkout/checkout.css @@ -209,3 +209,21 @@ margin-top: 11px; margin-bottom: 15px; } +.quantity-input{ +width: 30px; + +} +.quantity-input,.save-quantity-link{ + display: none; +} + +.is-editing-quantity .quantity-input, +.is-editing-quantity .save-quantity-link { + display: initial; +} + +.is-editing-quantity .quantity-display, +.is-editing-quantity .js-update-quantity-link { + display: none; +} + From 35bc2cde3fb439f747c4b789591274cca396bd73 Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Thu, 25 Apr 2024 21:22:13 +0500 Subject: [PATCH 16/41] correctly implement add to cart function --- data/cart.js | 48 ++++++++++++++++-------------- styles/pages/checkout/checkout.css | 2 +- 2 files changed, 26 insertions(+), 24 deletions(-) diff --git a/data/cart.js b/data/cart.js index 80f63111..7212fe43 100644 --- a/data/cart.js +++ b/data/cart.js @@ -17,38 +17,40 @@ cart=[ ]; } - export function addedToCart(productId) { - let index = -1; - cart.forEach((cartItem, i) => { - if (productId === cartItem.productId) { - index = i; - } + // Find the index of the product in the cart based on its productId + const index = cart.findIndex(cartItem => cartItem.productId === productId); - }); - const addedToCart = document.querySelector(`.js-added-to-cart-${productId}`); + // Get the element to show "Added" message + const addedToCartElement = document.querySelector(`.js-added-to-cart-${productId}`); - if (addedToCart) { - addedToCart.innerHTML = ` Added`; - setTimeout(function () { - addedToCart.innerHTML = ""; - }, 1300); - } - else { - console.error("Element with class 'js-added-to-cart' not found."); + // If the element exists, display the checkmark and "Added" message + if (addedToCartElement) { + addedToCartElement.innerHTML = ` Added`; + // Remove the message after 1.3 seconds + setTimeout(() => { + addedToCartElement.innerHTML = ""; + }, 1300); + } else { + console.error(`Element with class 'js-added-to-cart-${productId}' not found.`); } + + // If the product is found in the cart, increment the quantity if (index !== -1) { - cart[index].quantity += 1; + cart[index].quantity += 1; } else { - cart.push({ - productId: productId, - quantity: 1 - }); - - savetoStorage(); + // If the product is not found, add a new entry to the cart with quantity 1 + cart.push({ + productId: productId, + quantity: 1 + }); } + + // Save the updated cart to storage + savetoStorage(); } + export function removeFromCart(productid){ const newCart=[]; diff --git a/styles/pages/checkout/checkout.css b/styles/pages/checkout/checkout.css index 4687875e..96a52430 100644 --- a/styles/pages/checkout/checkout.css +++ b/styles/pages/checkout/checkout.css @@ -3,7 +3,7 @@ padding-left: 30px; padding-right: 30px; - margin-top: 140px; + margin-top: 140px; margin-bottom: 100px; /* margin-left: auto; From 7c31ec8075e774c7c1eeb9c7c9267b7868e4abb4 Mon Sep 17 00:00:00 2001 From: Muhammad Asharib <112008946+Asharib706@users.noreply.github.com> Date: Thu, 25 Apr 2024 21:30:38 +0500 Subject: [PATCH 17/41] Create README.md --- README.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 00000000..55b2e475 --- /dev/null +++ b/README.md @@ -0,0 +1 @@ +It is the amazon project made by the help of SuperSimpleDev tutorial on Javascript Full Course From 5c3b1dc7de564bfdecfe4442c9642d3d80894ab1 Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Sat, 27 Apr 2024 02:46:54 +0500 Subject: [PATCH 18/41] Save data and generate html for delivery options --- checkout.html | 147 +++++++++++++++++----------------- data/cart.js | 12 ++- data/deliveryOptions.js | 20 +++++ scripts/checkout.js | 171 ++++++++++++++++++++++------------------ 4 files changed, 197 insertions(+), 153 deletions(-) create mode 100644 data/deliveryOptions.js diff --git a/checkout.html b/checkout.html index 8c0d0568..7c9620a5 100644 --- a/checkout.html +++ b/checkout.html @@ -1,89 +1,92 @@ - - Checkout - - - - - - - - - - - - - - -
-
-
- - - - -
+ -
- Checkout () -
+ + + + -
- -
+ + + + + + + +
+
+
+ + + + +
+ +
+ Checkout () +
+ +
+
+
-
-
Review your order
+
+
Review your order
-
-
- +
+
+ + +
+
+
+ Order Summary
-
-
- Order Summary -
- -
-
Items (3):
-
$42.75
-
- -
-
Shipping & handling:
-
$4.99
-
- -
-
Total before tax:
-
$47.74
-
- -
-
Estimated tax (10%):
-
$4.77
-
- -
-
Order total:
-
$52.51
-
- - +
+
Items (3):
+
$42.75
+ +
+
Shipping & handling:
+
$4.99
+
+ +
+
Total before tax:
+
$47.74
+
+ +
+
Estimated tax (10%):
+
$4.77
+
+ +
+
Order total:
+
$52.51
+
+ +
- - - +
+ + + + + \ No newline at end of file diff --git a/data/cart.js b/data/cart.js index 7212fe43..68afe5ed 100644 --- a/data/cart.js +++ b/data/cart.js @@ -4,15 +4,18 @@ if(!cart){ cart=[ { productId:"e43638ce-6aa0-4b85-b27f-e1d07eb678c6", - quantity:1 + quantity:1, + deliveryOptionId:'1' }, { productId:"15b6fc6f-327a-4ec4-896f-486349e85a3d", - quantity:2 + quantity:2, + deliveryOptionId:'2' }, { productId:"dd82ca78-a18b-4e2a-9250-31e67412f98d", - quantity:6 + quantity:6, + deliveryOptionId:"1" } ]; @@ -42,7 +45,8 @@ export function addedToCart(productId) { // If the product is not found, add a new entry to the cart with quantity 1 cart.push({ productId: productId, - quantity: 1 + quantity: 1, + deliveryOptionId:'1' }); } diff --git a/data/deliveryOptions.js b/data/deliveryOptions.js new file mode 100644 index 00000000..ea2982ea --- /dev/null +++ b/data/deliveryOptions.js @@ -0,0 +1,20 @@ +export const deliveryOptions=[ + { + id:'1', + deliveryDays:7, + priceCents:0 + +}, +{ + id:'2', + deliveryDays:3, + priceCents:499 + +}, +{ + id:'3', + deliveryDays:1, + priceCents:999 + +} +] \ No newline at end of file diff --git a/scripts/checkout.js b/scripts/checkout.js index ab686630..66c96777 100644 --- a/scripts/checkout.js +++ b/scripts/checkout.js @@ -1,7 +1,13 @@ -import { cart,removeFromCart,updateQuantity } from "../data/cart.js"; +import { cart, removeFromCart, updateQuantity } from "../data/cart.js"; import { products } from "../data/products.js"; import { formatCurrency } from "./utils/money.js"; import { updateCartQuantity } from "../data/cart.js"; +import dayjs from 'https://unpkg.com/dayjs@1.11.10/esm/index.js'; +import { deliveryOptions } from '../data/deliveryOptions.js'; + +const today = dayjs(); +const deliveryDate = today.add(7, 'days'); +console.log(deliveryDate.format('dddd,MMMM D,YYYY')); document.querySelector('.js-return-to-home-link').innerHTML = `${updateCartQuantity()} items`; cart.forEach((cartItem) => { @@ -18,11 +24,30 @@ cart.forEach((cartItem) => { // Check if a matching product was found if (matchingProduct) { + const deliveryOptionId=cartItem.deliveryOptionId; + + let deliveryOption; + + deliveryOptions.forEach((option)=>{ + if (option.id===deliveryOptionId){ + deliveryOption=option; + + } + }); + const today = dayjs(); + const delivaryDate = today.add( + deliveryOption.deliveryDays, + 'days' + ) + const dateString = delivaryDate.format('dddd, MMMM D'); + + + const isChecked=deliveryOption.id===cartItem.deliveryOptionId; // Construct HTML for the cart item const cartItemHtml = `
- Delivery date: Tuesday, June 21 + Delivery date: ${dateString}
@@ -49,105 +74,97 @@ cart.forEach((cartItem) => {
Choose a delivery option:
-
- -
-
- Tuesday, June 21 -
-
- FREE Shipping -
-
-
-
- -
-
- Wednesday, June 15 -
-
- $4.99 - Shipping -
-
-
-
- -
-
- Monday, June 13 -
-
- $9.99 - Shipping -
-
-
-
+ ${deliveryOptionsHtml(matchingProduct,cartItem)}
`; // Append the HTML to the order summary element - document.querySelector('.js-order-summary').innerHTML +=cartItemHtml; - + document.querySelector('.js-order-summary').innerHTML += cartItemHtml; + } }); +function deliveryOptionsHtml(matchingProduct,cartItem) { + let html = ''; + deliveryOptions.forEach((deliveryOption) => { + const today = dayjs(); + const delivaryDate = today.add( + deliveryOption.deliveryDays, + 'days' + ) + const dateString = delivaryDate.format('dddd,MMMM D'); + const priceString = deliveryOption.priceCents === 0 + ? `FREE ` + : `$${formatCurrency(deliveryOption.priceCents)} - `; + + const isChecked=deliveryOption.id===cartItem.deliveryOptionId; + html += `
+ + +
+ +` + + }); + return html; +} document.querySelectorAll('.js-delete-link') -.forEach((link) =>{ - link.addEventListener('click',()=>{ - const productId=link.dataset.productId; - removeFromCart(productId); - + .forEach((link) => { + link.addEventListener('click', () => { + const productId = link.dataset.productId; + removeFromCart(productId); - const container=document.querySelector( - `.js-cart-item-container-${productId}` + + const container = document.querySelector( + `.js-cart-item-container-${productId}` ) - container.remove(); - document.querySelector('.js-return-to-home-link').innerHTML = `${updateCartQuantity()} items`; + container.remove(); + document.querySelector('.js-return-to-home-link').innerHTML = `${updateCartQuantity()} items`; - - + + + }); }); -}); document.querySelectorAll('.js-update-quantity-link') -.forEach((link) =>{ - link.addEventListener('click',()=>{ - const productId= link.dataset.productId; - const cartItemContainer=document.querySelector(`.js-cart-item-container-${productId}`) - cartItemContainer.classList.add('is-editing-quantity'); - // console.log(cartItemContainer); + .forEach((link) => { + link.addEventListener('click', () => { + const productId = link.dataset.productId; + const cartItemContainer = document.querySelector(`.js-cart-item-container-${productId}`) + cartItemContainer.classList.add('is-editing-quantity'); + // console.log(cartItemContainer); + }); }); -}); document.querySelectorAll('.js-save-quantity-link').forEach((link) => { link.addEventListener('click', () => { - // Get the product ID from the clicked link's data attribute - const productId = link.dataset.productId; - - // Find the cart-item-container for the product - const cartItemContainer = document.querySelector(`.js-cart-item-container-${productId}`); - - cartItemContainer.classList.remove('is-editing-quantity'); - const quantityInput = document.querySelector( - `.js-quantity-input-${productId}` - ); - if (quantityInput){ + // Get the product ID from the clicked link's data attribute + const productId = link.dataset.productId; + + // Find the cart-item-container for the product + const cartItemContainer = document.querySelector(`.js-cart-item-container-${productId}`); + + cartItemContainer.classList.remove('is-editing-quantity'); + const quantityInput = document.querySelector( + `.js-quantity-input-${productId}` + ); + if (quantityInput) { const newQuantity = Number(quantityInput.value); console.log(newQuantity); - updateQuantity(productId,newQuantity); - document.querySelector(`.quantity-label-${productId}`).innerHTML=newQuantity; + updateQuantity(productId, newQuantity); + document.querySelector(`.quantity-label-${productId}`).innerHTML = newQuantity; document.querySelector('.js-return-to-home-link').innerHTML = `${updateCartQuantity()} items`; - } + } }); }); From 40124125619e3bb37c7d26dc3f41179d09e18c6f Mon Sep 17 00:00:00 2001 From: Asharib706 Date: Sun, 28 Apr 2024 00:01:04 +0500 Subject: [PATCH 19/41] make delivery options interactive --- data/cart.js | 10 ++++++++++ scripts/checkout.js | 35 ++++++++++++++++++++++------------- 2 files changed, 32 insertions(+), 13 deletions(-) diff --git a/data/cart.js b/data/cart.js index 68afe5ed..2159d3a5 100644 --- a/data/cart.js +++ b/data/cart.js @@ -96,3 +96,13 @@ export function updateQuantity(productId,newQuantity){ savetoStorage(); } +export function updateDeliveryOption(productId,deliveryOptionId){ + let matchingItem; + cart.forEach((cartItem)=>{ + if (productId===cartItem.productId){ + matchingItem=cartItem; + } + }); + matchingItem.deliveryOptionId=deliveryOptionId; + savetoStorage(); +} \ No newline at end of file diff --git a/scripts/checkout.js b/scripts/checkout.js index 66c96777..a576c658 100644 --- a/scripts/checkout.js +++ b/scripts/checkout.js @@ -1,4 +1,4 @@ -import { cart, removeFromCart, updateQuantity } from "../data/cart.js"; +import { cart, removeFromCart, updateQuantity, updateDeliveryOption } from "../data/cart.js"; import { products } from "../data/products.js"; import { formatCurrency } from "./utils/money.js"; import { updateCartQuantity } from "../data/cart.js"; @@ -24,13 +24,13 @@ cart.forEach((cartItem) => { // Check if a matching product was found if (matchingProduct) { - const deliveryOptionId=cartItem.deliveryOptionId; + const deliveryOptionId = cartItem.deliveryOptionId; let deliveryOption; - - deliveryOptions.forEach((option)=>{ - if (option.id===deliveryOptionId){ - deliveryOption=option; + + deliveryOptions.forEach((option) => { + if (option.id === deliveryOptionId) { + deliveryOption = option; } }); @@ -40,9 +40,9 @@ cart.forEach((cartItem) => { 'days' ) const dateString = delivaryDate.format('dddd, MMMM D'); - - const isChecked=deliveryOption.id===cartItem.deliveryOptionId; + + const isChecked = deliveryOption.id === cartItem.deliveryOptionId; // Construct HTML for the cart item const cartItemHtml = `
@@ -74,7 +74,7 @@ cart.forEach((cartItem) => {
Choose a delivery option:
- ${deliveryOptionsHtml(matchingProduct,cartItem)} + ${deliveryOptionsHtml(matchingProduct, cartItem)}
`; @@ -84,7 +84,7 @@ cart.forEach((cartItem) => { } }); -function deliveryOptionsHtml(matchingProduct,cartItem) { +function deliveryOptionsHtml(matchingProduct, cartItem) { let html = ''; deliveryOptions.forEach((deliveryOption) => { const today = dayjs(); @@ -97,11 +97,13 @@ function deliveryOptionsHtml(matchingProduct,cartItem) { ? `FREE ` : `$${formatCurrency(deliveryOption.priceCents)} - `; - const isChecked=deliveryOption.id===cartItem.deliveryOptionId; - html += `
+ const isChecked = deliveryOption.id === cartItem.deliveryOptionId; + html += `
+ class="delivery-option-input" name="delivery-option-${matchingProduct.id}" ${isChecked ? 'checked' : ''}>