From 667bcce136ceec9743d1a856f3172e953392843a Mon Sep 17 00:00:00 2001 From: Aman Gupta Date: Sat, 2 Nov 2024 14:20:54 +0530 Subject: [PATCH 01/16] Enhanced the ui of 404 page --- pagenotfound.html | 86 ++++++++++++++++++++++++++++++++++++++--------- 1 file changed, 71 insertions(+), 15 deletions(-) diff --git a/pagenotfound.html b/pagenotfound.html index 1766b817..15fff26f 100644 --- a/pagenotfound.html +++ b/pagenotfound.html @@ -1,18 +1,74 @@ - - - - 404 Page Not Found - + + + + 404 PAGE + + + + + - -
-

404

-

- Oops! The page you're looking for doesn't exist. -

- Go back to Home -
- - + + + +
+
+
+
+
+
+

404

+ + +
+ +
+

+ Look like you're lost +

+ +

the page you are looking for not avaible!

+ + Go to Home +
+
+
+
+
+
+ + + + \ No newline at end of file From fed7d96c1f2684e7e53f7e113aeb477c7c1ad049 Mon Sep 17 00:00:00 2001 From: Arshia Date: Sun, 3 Nov 2024 02:23:09 +0530 Subject: [PATCH 02/16] Added Responsive code in css --- styles/view.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) diff --git a/styles/view.css b/styles/view.css index c2194b5a..73141c38 100644 --- a/styles/view.css +++ b/styles/view.css @@ -88,3 +88,45 @@ body { color: white; background-color: var(--secondary-color); } + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .modal-content { + flex-direction: column; /* Stack content vertically on smaller screens */ + width: 90%; + } + + .modal-right h2 { + font-size: 18px; + } + + .modal-right p, .modal-right .price { + font-size: 16px; /* Adjust text size for readability */ + } + + .quick-view-btn, .close { + font-size: 20px; + } + + .modal { + padding: 10px; /* Add padding around the modal for smaller screens */ + } +} + +@media (max-width: 480px) { + .modal-content { + width: 95%; /* Further reduce modal width for very small screens */ + } + + .close { + font-size: 24px; /* Smaller close button */ + } + + .modal-right h2 { + font-size: 18px; + } + + .modal-right p, .modal-right .price { + font-size: 14px; + } +} \ No newline at end of file From 7b853268ad62467989f2b3899dfa18bb4392f8f0 Mon Sep 17 00:00:00 2001 From: shar2710 Date: Sun, 3 Nov 2024 02:27:12 +0530 Subject: [PATCH 03/16] Fixed Increment Functionality in Cart --- script/products.js | 154 +++++++++++++++++++++++++++------------------ 1 file changed, 94 insertions(+), 60 deletions(-) diff --git a/script/products.js b/script/products.js index 9449870e..3af9a025 100644 --- a/script/products.js +++ b/script/products.js @@ -274,81 +274,73 @@ function displayCartItems() { function handleQuantityButtonsInProductCard() { const productsBox = document.querySelector(".products-box"); if (!productsBox) return; + productsBox.addEventListener("click", (e) => { if (e.target.classList.contains("increase")) { const qtySpan = e.target.previousElementSibling; let currentQty = parseInt(qtySpan.textContent); - qtySpan.textContent = currentQty + 1; - - } - if (e.target.classList.contains("decrease")) { + setTimeout(() => { + qtySpan.textContent = currentQty + 1; + }, 600); // 0.6 second delay + } else if (e.target.classList.contains("decrease")) { const qtySpan = e.target.nextElementSibling; let currentQty = parseInt(qtySpan.textContent); if (currentQty > 1) { - qtySpan.textContent = currentQty - 1; - + setTimeout(() => { + qtySpan.textContent = currentQty - 1; + }, 1000); // 1 second delay } } }); } -function handleQuantityButtonsInCart() { - const cartList = document.querySelector(".cart-list-items"); - function updateSubtotal() { - const subtotalElement = document.querySelector(".sub-total"); - const subtotal = cartItems.reduce((acc, item) => acc + item.amount, 0); - subtotalElement.textContent = `$${subtotal.toFixed(2)}`; - } - - cartList.addEventListener("click", (e) => { - const itemId = e.target.closest("li").getAttribute("id"); - let cartItem = cartItems.find((item) => item.itemId == itemId); - - if (e.target.classList.contains("increase")) { - const qtySpan = e.target.previousElementSibling; - let currentQty = parseInt(qtySpan.textContent); - qtySpan.textContent = currentQty + 1; - cartItem.pcs = currentQty + 1; - cartItem.amount = - cartItem.pcs * products_list.find((p) => p.id == itemId).price; - - const priceElement = e.target.closest("li").querySelector(".price"); - priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; - - const textQtyElement = e.target.closest("li").querySelector(".text .qty"); - textQtyElement.textContent = cartItem.pcs; - - localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); - - updateSubtotal(); - } - - if (e.target.classList.contains("decrease")) { - const qtySpan = e.target.nextElementSibling; - let currentQty = parseInt(qtySpan.textContent); - if (currentQty > 1) { - qtySpan.textContent = currentQty - 1; - cartItem.pcs = currentQty - 1; - cartItem.amount = - cartItem.pcs * products_list.find((p) => p.id == itemId).price; - - const priceElement = e.target.closest("li").querySelector(".price"); - priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; - - const textQtyElement = e.target - .closest("li") - .querySelector(".text .qty"); - textQtyElement.textContent = cartItem.pcs; - localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); - - updateSubtotal(); - } + function handleQuantityButtonsInCart() { + const cartList = document.querySelector(".cart-list-items"); + function updateSubtotal() { + const subtotalElement = document.querySelector(".sub-total"); + const subtotal = cartItems.reduce((acc, item) => acc + item.amount, 0); + subtotalElement.textContent = `$${subtotal.toFixed(2)}`; + } + + cartList.addEventListener("click", (e) => { + const itemId = e.target.closest("li").getAttribute("id"); + let cartItem = cartItems.find((item) => item.itemId == itemId); + + if (e.target.classList.contains("increase")) { + const qtySpan = e.target.previousElementSibling; + let currentQty = parseInt(qtySpan.textContent); + console.log(`Increasing cart quantity for item ${itemId} from ${currentQty} to ${currentQty + 1}`); + qtySpan.textContent = currentQty + 1; + cartItem.pcs = currentQty + 1; + cartItem.amount = cartItem.pcs * products_list.find((p) => p.id == itemId).price; + + const priceElement = e.target.closest("li").querySelector(".price"); + priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; + + localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); + updateSubtotal(); + } + + if (e.target.classList.contains("decrease")) { + const qtySpan = e.target.nextElementSibling; + let currentQty = parseInt(qtySpan.textContent); + if (currentQty > 1) { + console.log(`Decreasing cart quantity for item ${itemId} from ${currentQty} to ${currentQty - 1}`); + qtySpan.textContent = currentQty - 1; + cartItem.pcs = currentQty - 1; + cartItem.amount = cartItem.pcs * products_list.find((p) => p.id == itemId).price; + + const priceElement = e.target.closest("li").querySelector(".price"); + priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; + + localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); + updateSubtotal(); } - }); + } + }); } - // Add items to wishlist function addToWishlist(e) { @@ -612,4 +604,46 @@ window.onclick = function (event) { if (event.target === modal) { modal.style.display = "none"; } -}; \ No newline at end of file +}; + +function incrementProduct() { + setTimeout(function() { + // Your product increment logic here + console.log("Product incremented"); + }, 1000); // 1000 milliseconds = 1 second +} + +function decrementProduct() { + setTimeout(function() { + // Your product decrement logic here + console.log("Product decremented"); + }, 1000); // 1000 milliseconds = 1 second +} + +function incrementCartProduct() { + setTimeout(function() { + // Your cart product increment logic here + console.log("Cart product incremented"); + }, 1000); // 1000 milliseconds = 1 second +} + +function decrementCartProduct() { + setTimeout(function() { + // Your cart product decrement logic here + console.log("Cart product decremented"); + }, 1000); // 1000 milliseconds = 1 second +} + +function incrementWishlistProduct() { + setTimeout(function() { + // Your wishlist product increment logic here + console.log("Wishlist product incremented"); + }, 1000); // 1000 milliseconds = 1 second +} + +function decrementWishlistProduct() { + setTimeout(function() { + // Your wishlist product decrement logic here + console.log("Wishlist product decremented"); + }, 1000); // 1000 milliseconds = 1 second +} From a653c72a11dfe0966d45a430962a4473d2059ec3 Mon Sep 17 00:00:00 2001 From: Arshia Date: Sun, 3 Nov 2024 02:36:07 +0530 Subject: [PATCH 04/16] changed code --- styles/view.css | 42 ------------------------------------------ 1 file changed, 42 deletions(-) diff --git a/styles/view.css b/styles/view.css index 73141c38..c2194b5a 100644 --- a/styles/view.css +++ b/styles/view.css @@ -88,45 +88,3 @@ body { color: white; background-color: var(--secondary-color); } - -/* Responsive Adjustments */ -@media (max-width: 768px) { - .modal-content { - flex-direction: column; /* Stack content vertically on smaller screens */ - width: 90%; - } - - .modal-right h2 { - font-size: 18px; - } - - .modal-right p, .modal-right .price { - font-size: 16px; /* Adjust text size for readability */ - } - - .quick-view-btn, .close { - font-size: 20px; - } - - .modal { - padding: 10px; /* Add padding around the modal for smaller screens */ - } -} - -@media (max-width: 480px) { - .modal-content { - width: 95%; /* Further reduce modal width for very small screens */ - } - - .close { - font-size: 24px; /* Smaller close button */ - } - - .modal-right h2 { - font-size: 18px; - } - - .modal-right p, .modal-right .price { - font-size: 14px; - } -} \ No newline at end of file From 13fd2457e3d696553958698e4798f5a04104e9ef Mon Sep 17 00:00:00 2001 From: Aman Gupta Date: Sun, 3 Nov 2024 20:07:59 +0530 Subject: [PATCH 05/16] Changes made --- pagenotfound.html | 143 +++++++++++++++++++++++++--------------------- 1 file changed, 79 insertions(+), 64 deletions(-) diff --git a/pagenotfound.html b/pagenotfound.html index 15fff26f..e402e67d 100644 --- a/pagenotfound.html +++ b/pagenotfound.html @@ -1,74 +1,89 @@ + 404 PAGE - - - - - - - - + + + + + + + +
-
-
-
-
-
-

404

- - -
- -
-

- Look like you're lost -

- -

the page you are looking for not avaible!

- - Go to Home -
-
-
-
-
-
- - +
+
+
+
+
+

404

+ + +
+ +
+

+ Look like you're lost +

+ +

the page you are looking for not avaible!

+ + Go to Home +
+
+
+
+
+ + + + \ No newline at end of file From 6e4a5b7a9d431374bc55af6714adbab9a1f31215 Mon Sep 17 00:00:00 2001 From: Jomana Mahmoud Tantawy <140981371+JomanaMahmoud@users.noreply.github.com> Date: Mon, 4 Nov 2024 18:20:35 +0000 Subject: [PATCH 06/16] added notes for delievery field --- delivery.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/delivery.html b/delivery.html index 4b25cd08..efcba6ba 100644 --- a/delivery.html +++ b/delivery.html @@ -127,6 +127,8 @@

Enter Your Details

pattern="\d{6}" title="Please enter a valid 6-digit PIN code" maxlength="6"> + +
@@ -160,7 +162,10 @@

Enter Your Details

- +
+ + +
From dae6862a411d61c123ff4ece5031569f36b55bea Mon Sep 17 00:00:00 2001 From: Antima Mishra <114092138+Antima2004@users.noreply.github.com> Date: Tue, 5 Nov 2024 21:51:56 +0530 Subject: [PATCH 07/16] Added Homebtn --- login.html | 5 +++++ styles/login-signup.css | 18 ++++++++++++++++++ 2 files changed, 23 insertions(+) diff --git a/login.html b/login.html index 3f375f69..310ed363 100644 --- a/login.html +++ b/login.html @@ -63,6 +63,11 @@
+ + + + +

Login to IcyCo

diff --git a/styles/login-signup.css b/styles/login-signup.css index 2b0d5498..3bc9e719 100644 --- a/styles/login-signup.css +++ b/styles/login-signup.css @@ -7,6 +7,24 @@ body { min-height: 100dvh; } +.homeBtn { + position: absolute; + top: 20px; + left: 20px; + background: #c08ea5; + color: #000000; + padding: 10px; + border-radius: 10px; + cursor: pointer; + transition: 0.3s; + text-decoration: none; + z-index: 10; +} +.homeBtn:hover { + background: #ffabd2; + color: #ffffff; +} + #logo { display: flex; justify-content: center; From 71a010639b9655e3cfc0f04ea2ac2e9a9aca40cd Mon Sep 17 00:00:00 2001 From: Arshia Date: Tue, 5 Nov 2024 22:39:05 +0530 Subject: [PATCH 08/16] Add responsive code --- styles/view.css | 41 +++++++++++++++++++++++++++++++++++++++++ 1 file changed, 41 insertions(+) diff --git a/styles/view.css b/styles/view.css index c2194b5a..4f7bd274 100644 --- a/styles/view.css +++ b/styles/view.css @@ -88,3 +88,44 @@ body { color: white; background-color: var(--secondary-color); } + +/* Responsive Adjustments */ +@media (max-width: 768px) { + .modal-content { + flex-direction: column; /* Stack content vertically on smaller screens */ + } + + .modal-right h2 { + font-size: 20px; /* Adjust heading size for mobile */ + } + + .modal-right p, .modal-right .price { + font-size: 16px; /* Adjust text size for readability */ + } + + .quick-view-btn, .close { + font-size: 20px; /* Adjust button size */ + } + + .modal { + padding: 10px; /* Add padding around the modal for smaller screens */ + } +} + +@media (max-width: 480px) { + .modal-content { + width: 95%; /* Further reduce modal width for very small screens */ + } + + .close { + font-size: 24px; /* Smaller close button */ + } + + .modal-right h2 { + font-size: 18px; + } + + .modal-right p, .modal-right .price { + font-size: 14px; + } +} \ No newline at end of file From f09ef4ad0222dbc8eff74b5e9a83cb21047d2634 Mon Sep 17 00:00:00 2001 From: Dharshi Balasubramaniyam <139672976+DharshiBalasubramaniyam@users.noreply.github.com> Date: Wed, 6 Nov 2024 11:51:14 +0530 Subject: [PATCH 09/16] Revert "Enhanced the ui of 404 page" --- pagenotfound.html | 103 +++++++--------------------------------------- 1 file changed, 16 insertions(+), 87 deletions(-) diff --git a/pagenotfound.html b/pagenotfound.html index e402e67d..1766b817 100644 --- a/pagenotfound.html +++ b/pagenotfound.html @@ -1,89 +1,18 @@ - - - - - 404 PAGE - - - - - - - - - -
-
-
-
-
-
-

404

- - -
- -
-

- Look like you're lost -

- -

the page you are looking for not avaible!

- - Go to Home -
-
-
-
-
-
- - - - - \ No newline at end of file + + + + 404 Page Not Found + + + +
+

404

+

+ Oops! The page you're looking for doesn't exist. +

+ Go back to Home +
+ + From f5ea1dc735481fbcf7e51fd1a2800f0c21f427f5 Mon Sep 17 00:00:00 2001 From: Dharshi Balasubramaniyam <139672976+DharshiBalasubramaniyam@users.noreply.github.com> Date: Wed, 6 Nov 2024 13:40:40 +0530 Subject: [PATCH 10/16] Revert "Added Homebtn" --- login.html | 5 ----- styles/login-signup.css | 18 ------------------ 2 files changed, 23 deletions(-) diff --git a/login.html b/login.html index 310ed363..3f375f69 100644 --- a/login.html +++ b/login.html @@ -63,11 +63,6 @@
- - - - -

Login to IcyCo

diff --git a/styles/login-signup.css b/styles/login-signup.css index 3bc9e719..2b0d5498 100644 --- a/styles/login-signup.css +++ b/styles/login-signup.css @@ -7,24 +7,6 @@ body { min-height: 100dvh; } -.homeBtn { - position: absolute; - top: 20px; - left: 20px; - background: #c08ea5; - color: #000000; - padding: 10px; - border-radius: 10px; - cursor: pointer; - transition: 0.3s; - text-decoration: none; - z-index: 10; -} -.homeBtn:hover { - background: #ffabd2; - color: #ffffff; -} - #logo { display: flex; justify-content: center; From 93d7402ee3058fc41f17a36717564ed7f663f5e9 Mon Sep 17 00:00:00 2001 From: shar2710 Date: Wed, 6 Nov 2024 14:16:29 +0530 Subject: [PATCH 11/16] rc --- script/products.js | 1 - 1 file changed, 1 deletion(-) diff --git a/script/products.js b/script/products.js index 3af9a025..2a83b691 100644 --- a/script/products.js +++ b/script/products.js @@ -346,7 +346,6 @@ function handleQuantityButtonsInProductCard() { function addToWishlist(e) { let wishlistItemId = e.target.closest(".box").getAttribute("id"); let pcs = parseInt(e.target.closest(".box").querySelector(".pcs").textContent, 10); - // Ensure pcs is a valid number if (isNaN(pcs) || pcs <= 0) { showToast("Please select the number of cups you want!"); From f08bfb3f9068ff5b035a0a993c52eb156dc245cc Mon Sep 17 00:00:00 2001 From: shar2710 Date: Wed, 6 Nov 2024 14:21:38 +0530 Subject: [PATCH 12/16] rc --- script/products.js | 208 +++++++++++++++++++++++---------------------- 1 file changed, 108 insertions(+), 100 deletions(-) diff --git a/script/products.js b/script/products.js index 2a83b691..72671a2a 100644 --- a/script/products.js +++ b/script/products.js @@ -344,136 +344,144 @@ function handleQuantityButtonsInProductCard() { // Add items to wishlist function addToWishlist(e) { - let wishlistItemId = e.target.closest(".box").getAttribute("id"); - let pcs = parseInt(e.target.closest(".box").querySelector(".pcs").textContent, 10); - // Ensure pcs is a valid number - if (isNaN(pcs) || pcs <= 0) { - showToast("Please select the number of cups you want!"); - return; - } - - let existingWishlistItem = wishlistItems.find(item => item.itemId == wishlistItemId); - let item = products_list.find(item => item.id == wishlistItemId); - let amount = item.price * pcs; + let wishlistItemId = e.target.closest(".box").getAttribute("id"); + let pcs = parseInt(e.target.closest(".box").querySelector(".pcs").textContent, 10); + // Ensure pcs is a valid number + if (isNaN(pcs) || pcs <= 0) { + showToast("Please select the number of cups you want!"); + return; + } - if (existingWishlistItem) { - existingWishlistItem.pcs += pcs; // Increment by the correct number of pcs - existingWishlistItem.amount = existingWishlistItem.pcs * item.price; - showToast(`${pcs} more ${item.name} ice cream/s successfully added to the wishlist!`); - } else { - wishlistItems.push({ - itemId: wishlistItemId, - pcs: pcs, // Ensure pcs is a number - amount: amount - }); - showToast(`${pcs} ${item.name} ice cream/s successfully added to the wishlist!`); - } + let existingWishlistItem = wishlistItems.find(item => item.itemId == wishlistItemId); + let item = products_list.find(item => item.id == wishlistItemId); + let amount = item.price * pcs; + + if (existingWishlistItem) { + existingWishlistItem.pcs += pcs; // Increment by the correct number of pcs + existingWishlistItem.amount = existingWishlistItem.pcs * item.price; + showToast(`${pcs} more ${item.name} ice cream/s successfully added to the wishlist!`); + } else { + wishlistItems.push({ + itemId: wishlistItemId, + pcs: pcs, // Ensure pcs is a number + amount: amount + }); + showToast(`${pcs} ${item.name} ice cream/s successfully added to the wishlist!`); + } - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - displayWishlistItems(); + localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); + displayWishlistItems(); } - - - function handleRemoveButtonInWishlist() { - let removeBtns = document.querySelectorAll(".remove-wishlist-item-btn"); - removeBtns.forEach(btn => { - btn.addEventListener("click", () => { - let itemId = btn.closest('li').getAttribute("id"); - wishlistItems = wishlistItems.filter(item => item.itemId !== itemId); + let removeBtns = document.querySelectorAll(".remove-wishlist-item-btn"); + removeBtns.forEach(btn => { + btn.addEventListener("click", () => { + let itemId = btn.closest('li').getAttribute("id"); + wishlistItems = wishlistItems.filter(item => item.itemId !== itemId); - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - displayWishlistItems(); // Update the wishlist display + localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); + displayWishlistItems(); // Update the wishlist display - // Reset button text to "Add to Wishlist" if necessary - const productBox = document.querySelector(`.box[id='${itemId}']`); - if (productBox) { - const addToWishlistButton = productBox.querySelector(".wishlist-btn"); - addToWishlistButton.innerHTML = ''; // Reset icon and text - } - }); - }); + // Reset button text to "Add to Wishlist" if necessary + const productBox = document.querySelector(`.box[id='${itemId}']`); + if (productBox) { + const addToWishlistButton = productBox.querySelector(".wishlist-btn"); + addToWishlistButton.innerHTML = ''; // Reset icon and text + } + }); + }); } - function displayWishlistItems() { - const wishlistUlList = document.querySelector(".wishlist-list-items"); - wishlistUlList.innerHTML = ""; - - if (wishlistItems.length > 0) { - document.querySelector(".empty-wishlist").classList.remove("active"); - document.querySelector(".no-empty-wishlist").classList.add("active"); - } else { - document.querySelector(".empty-wishlist").classList.add("active"); - document.querySelector(".no-empty-wishlist").classList.remove("active"); - } + const wishlistUlList = document.querySelector(".wishlist-list-items"); + wishlistUlList.innerHTML = ""; + + if (wishlistItems.length > 0) { + document.querySelector(".empty-wishlist").classList.remove("active"); + document.querySelector(".no-empty-wishlist").classList.add("active"); + } else { + document.querySelector(".empty-wishlist").classList.add("active"); + document.querySelector(".no-empty-wishlist").classList.remove("active"); + } - wishlistItems.forEach(wi => { - let itemLi = document.createElement("li"); - itemLi.setAttribute("id", wi.itemId); - let product = products_list.find(p => p.id == wi.itemId); + wishlistItems.forEach(wi => { + let itemLi = document.createElement("li"); + itemLi.setAttribute("id", wi.itemId); + let product = products_list.find(p => p.id == wi.itemId); - if (product) { - itemLi.innerHTML = ` + if (product) { + itemLi.innerHTML = `
${product.name}
- - ${ci.pcs} x ${product.price}
-
$${ci.amount}
- + ${wi.pcs} x ${product.price}
+
$${wi.amount}
+
- - ${ci.pcs} + ${wi.pcs} + -
`; - wishlistUlList.appendChild(itemLi); - handleRemoveButtonInWishlist(); // Attach remove functionality - - let moveToCartBtn = itemLi.querySelector(".move-to-cart"); - moveToCartBtn.addEventListener("click", () => moveToCart(wi.itemId)); - } - }); + wishlistUlList.appendChild(itemLi); + handleRemoveButtonInWishlist(); // Attach remove functionality + let moveToCartBtn = itemLi.querySelector(".move-to-cart"); + moveToCartBtn.addEventListener("click", () => moveToCart(wi.itemId)); + } + }); } - // Function to move item from wishlist to cart function moveToCart(wishlistItemId) { - // Find the item in wishlist - let wishlistItemIndex = wishlistItems.findIndex(item => item.itemId == wishlistItemId); - if (wishlistItemIndex > -1) { - let wishlistItem = wishlistItems[wishlistItemIndex]; - - // Check if the item already exists in the cart - let existingCartItem = cartItems.find(item => item.itemId == wishlistItemId); - if (existingCartItem) { - existingCartItem.pcs += wishlistItem.pcs; // Update quantity if it already exists - existingCartItem.amount = existingCartItem.pcs * products_list.find(p => p.id == wishlistItemId).price; // Update amount - showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} moved to cart!`); - } else { - cartItems.push({ - itemId: wishlistItem.itemId, - pcs: wishlistItem.pcs, - amount: wishlistItem.amount - }); - showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} added to cart!`); - } + // Find the item in wishlist + let wishlistItemIndex = wishlistItems.findIndex(item => item.itemId == wishlistItemId); + if (wishlistItemIndex > -1) { + let wishlistItem = wishlistItems[wishlistItemIndex]; + + // Check if the item already exists in the cart + let existingCartItem = cartItems.find(item => item.itemId == wishlistItemId); + if (existingCartItem) { + existingCartItem.pcs += wishlistItem.pcs; // Update quantity if it already exists + existingCartItem.amount = existingCartItem.pcs * products_list.find(p => p.id == wishlistItemId).price; // Update amount + showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} moved to cart!`); + } else { + cartItems.push({ + itemId: wishlistItem.itemId, + pcs: wishlistItem.pcs, + amount: wishlistItem.amount + }); + showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} added to cart!`); + } - // Remove the item from the wishlist - wishlistItems.splice(wishlistItemIndex, 1); - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); + // Remove the item from the wishlist + wishlistItems.splice(wishlistItemIndex, 1); + localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - // Re-display the wishlist and cart items - displayWishlistItems(); - displayCartItems(); - } + // Re-display the wishlist and cart items + displayWishlistItems(); + displayCartItems(); + } } +// Scroll animation +document.addEventListener("DOMContentLoaded", () => { + // Apply ScrollReveal to products + const productBoxes = document.querySelectorAll(".products-box .box"); + productBoxes.forEach((box) => { + sr.reveal(box, { + origin: "left", + distance: "80px", + duration: 600, + easing: "ease-in", + interval: 400, + reset: true, + }); + }); +}); + // Scroll animation From f181692869f54f57df0e48f80944ae4ef2455719 Mon Sep 17 00:00:00 2001 From: shar2710 Date: Wed, 6 Nov 2024 14:27:24 +0530 Subject: [PATCH 13/16] rc --- script/products.js | 203 +++------------------------------------------ 1 file changed, 13 insertions(+), 190 deletions(-) diff --git a/script/products.js b/script/products.js index 72671a2a..3021b0a9 100644 --- a/script/products.js +++ b/script/products.js @@ -18,6 +18,18 @@ document.addEventListener("DOMContentLoaded", () => { displayProducts(products_list); } + // Scroll animation + const productBoxes = document.querySelectorAll(".products-box .box"); + productBoxes.forEach((box) => { + sr.reveal(box, { + origin: "left", + distance: "80px", + duration: 600, + easing: "ease-in", + interval: 400, + reset: true, + }); + }); }); function displayProducts(products) { @@ -464,193 +476,4 @@ function moveToCart(wishlistItemId) { displayWishlistItems(); displayCartItems(); } -} - -// Scroll animation -document.addEventListener("DOMContentLoaded", () => { - // Apply ScrollReveal to products - const productBoxes = document.querySelectorAll(".products-box .box"); - productBoxes.forEach((box) => { - sr.reveal(box, { - origin: "left", - distance: "80px", - duration: 600, - easing: "ease-in", - interval: 400, - reset: true, - }); - }); -}); - - -// Scroll animation - - - -document.addEventListener("DOMContentLoaded", () => { - // Apply ScrollReveal to products - const productBoxes = document.querySelectorAll(".products-box .box"); - productBoxes.forEach((box) => { - sr.reveal(box, { - origin: "left", - distance: "80px", - duration: 600, - easing: "ease-in", - interval: 400, - reset: true, - }); - }); -}); - -function createSearchBar() { - const searchBarContainer = document.querySelector(".search-container"); - - // Check if the search bar already exists - if (document.getElementById("search-bar")) return; - - // Create the search bar only if it doesn't already exist - const searchBar = document.createElement("input"); - searchBar.setAttribute("type", "text"); - searchBar.setAttribute("id", "search-bar"); - searchBar.setAttribute("placeholder", "Search for flavors..."); - searchBarContainer.appendChild(searchBar); - - // Check if the search button already exists - if (document.getElementById("search-btn")) return; - - // Create the search button only if it doesn't already exist - const searchButton = document.createElement("button"); - searchButton.setAttribute("id", "search-btn"); - searchButton.innerText = "Search"; - searchBarContainer.appendChild(searchButton); - - // Attach event listener for the search button - searchButton.addEventListener("click", () => { - const query = searchBar.value.toLowerCase(); - const filteredProducts = products_list.filter((product) => { - const flavorName = flavor_list - .find((f) => f.id === product.flavor_id) - ?.name.toLowerCase(); - return ( - product.name.toLowerCase().includes(query) || flavorName.includes(query) - ); - }); - displayProducts(filteredProducts); - }); - - // Handle input event for live search - handleSearchInput(); -} - -function handleSearchInput() { - const searchInput = document.getElementById("search-bar"); - searchInput.addEventListener("input", () => { - const query = searchInput.value.toLowerCase(); - const filteredProducts = products_list.filter((product) => { - const flavorName = flavor_list - .find((f) => f.id === product.flavor_id) - ?.name.toLowerCase(); - return ( - product.name.toLowerCase().includes(query) || flavorName.includes(query) - ); - - }); - displayProducts(filteredProducts); - }); -} - -function showQuickView(product) { - const overlay = document.getElementById("overlay"); - - // Set the inner HTML of overlay with the product details in two sections - overlay.innerHTML = ` -
- × -
- -
- ${product.name} -
- -
-

${product.name}

-

${product.description}

-
Price: $${product.price}
-
-
-
- `; - - // Show the overlay - overlay.style.display = "flex"; - - // Close popup on clicking the close button - overlay.querySelector(".close-btn").addEventListener("click", () => { - overlay.style.display = "none"; - }); - - // Close popup when clicking outside of it - overlay.addEventListener("click", (e) => { - if (e.target === overlay) { - overlay.style.display = "none"; - } - }); -} - -function openModal() { - document.getElementById("quickViewModal").style.display = "flex"; -} - -function closeModal() { - document.getElementById("quickViewModal").style.display = "none"; -} - -// Close modal when clicking outside content -window.onclick = function (event) { - const modal = document.getElementById("quickViewModal"); - if (event.target === modal) { - modal.style.display = "none"; - } -}; - -function incrementProduct() { - setTimeout(function() { - // Your product increment logic here - console.log("Product incremented"); - }, 1000); // 1000 milliseconds = 1 second -} - -function decrementProduct() { - setTimeout(function() { - // Your product decrement logic here - console.log("Product decremented"); - }, 1000); // 1000 milliseconds = 1 second -} - -function incrementCartProduct() { - setTimeout(function() { - // Your cart product increment logic here - console.log("Cart product incremented"); - }, 1000); // 1000 milliseconds = 1 second -} - -function decrementCartProduct() { - setTimeout(function() { - // Your cart product decrement logic here - console.log("Cart product decremented"); - }, 1000); // 1000 milliseconds = 1 second -} - -function incrementWishlistProduct() { - setTimeout(function() { - // Your wishlist product increment logic here - console.log("Wishlist product incremented"); - }, 1000); // 1000 milliseconds = 1 second -} - -function decrementWishlistProduct() { - setTimeout(function() { - // Your wishlist product decrement logic here - console.log("Wishlist product decremented"); - }, 1000); // 1000 milliseconds = 1 second -} +} \ No newline at end of file From c09361375129775e621e0baee43c12e5d0a7d936 Mon Sep 17 00:00:00 2001 From: shar2710 Date: Wed, 6 Nov 2024 15:12:40 +0530 Subject: [PATCH 14/16] k --- script/products.js | 330 +++++++++++++-------------------------------- 1 file changed, 96 insertions(+), 234 deletions(-) diff --git a/script/products.js b/script/products.js index c6275eed..3021b0a9 100644 --- a/script/products.js +++ b/script/products.js @@ -87,6 +87,8 @@ function displayProducts(products) { box.appendChild(addToCartButton); + // Add click event for the quick view icon + box.querySelector(".quick-view-icon").addEventListener("click", () => { showQuickView(product); }); @@ -94,8 +96,8 @@ function displayProducts(products) { productsSection?.appendChild(box); }); + handleQuantityButtonsInProductCard(); } - function displayFlavorFilter() { let flavorFilterSection = document.querySelector(".categories-wrapper"); @@ -304,6 +306,7 @@ function handleQuantityButtonsInProductCard() { }); } + function handleQuantityButtonsInCart() { const cartList = document.querySelector(".cart-list-items"); function updateSubtotal() { @@ -350,268 +353,127 @@ function handleQuantityButtonsInProductCard() { }); } - // Add items to wishlist function addToWishlist(e) { - let wishlistItemId = e.target.closest(".box").getAttribute("id"); - let pcs = parseInt(e.target.closest(".box").querySelector(".pcs").textContent, 10); - - // Ensure pcs is a valid number - if (isNaN(pcs) || pcs <= 0) { - showToast("Please select the number of cups you want!"); - return; - } - - let existingWishlistItem = wishlistItems.find(item => item.itemId == wishlistItemId); - let item = products_list.find(item => item.id == wishlistItemId); - let amount = item.price * pcs; + let wishlistItemId = e.target.closest(".box").getAttribute("id"); + let pcs = parseInt(e.target.closest(".box").querySelector(".pcs").textContent, 10); + // Ensure pcs is a valid number + if (isNaN(pcs) || pcs <= 0) { + showToast("Please select the number of cups you want!"); + return; + } - if (existingWishlistItem) { - existingWishlistItem.pcs += pcs; // Increment by the correct number of pcs - existingWishlistItem.amount = existingWishlistItem.pcs * item.price; - showToast(`${pcs} more ${item.name} ice cream/s successfully added to the wishlist!`); - } else { - wishlistItems.push({ - itemId: wishlistItemId, - pcs: pcs, // Ensure pcs is a number - amount: amount - }); - showToast(`${pcs} ${item.name} ice cream/s successfully added to the wishlist!`); - } + let existingWishlistItem = wishlistItems.find(item => item.itemId == wishlistItemId); + let item = products_list.find(item => item.id == wishlistItemId); + let amount = item.price * pcs; + + if (existingWishlistItem) { + existingWishlistItem.pcs += pcs; // Increment by the correct number of pcs + existingWishlistItem.amount = existingWishlistItem.pcs * item.price; + showToast(`${pcs} more ${item.name} ice cream/s successfully added to the wishlist!`); + } else { + wishlistItems.push({ + itemId: wishlistItemId, + pcs: pcs, // Ensure pcs is a number + amount: amount + }); + showToast(`${pcs} ${item.name} ice cream/s successfully added to the wishlist!`); + } - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - displayWishlistItems(); + localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); + displayWishlistItems(); } - - - function handleRemoveButtonInWishlist() { - let removeBtns = document.querySelectorAll(".remove-wishlist-item-btn"); - removeBtns.forEach(btn => { - btn.addEventListener("click", () => { - let itemId = btn.closest('li').getAttribute("id"); - wishlistItems = wishlistItems.filter(item => item.itemId !== itemId); + let removeBtns = document.querySelectorAll(".remove-wishlist-item-btn"); + removeBtns.forEach(btn => { + btn.addEventListener("click", () => { + let itemId = btn.closest('li').getAttribute("id"); + wishlistItems = wishlistItems.filter(item => item.itemId !== itemId); - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - displayWishlistItems(); // Update the wishlist display + localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); + displayWishlistItems(); // Update the wishlist display - // Reset button text to "Add to Wishlist" if necessary - const productBox = document.querySelector(`.box[id='${itemId}']`); - if (productBox) { - const addToWishlistButton = productBox.querySelector(".wishlist-btn"); - addToWishlistButton.innerHTML = ''; // Reset icon and text - } - }); - }); + // Reset button text to "Add to Wishlist" if necessary + const productBox = document.querySelector(`.box[id='${itemId}']`); + if (productBox) { + const addToWishlistButton = productBox.querySelector(".wishlist-btn"); + addToWishlistButton.innerHTML = ''; // Reset icon and text + } + }); + }); } - function displayWishlistItems() { - const wishlistUlList = document.querySelector(".wishlist-list-items"); - wishlistUlList.innerHTML = ""; - - if (wishlistItems.length > 0) { - document.querySelector(".empty-wishlist").classList.remove("active"); - document.querySelector(".no-empty-wishlist").classList.add("active"); - } else { - document.querySelector(".empty-wishlist").classList.add("active"); - document.querySelector(".no-empty-wishlist").classList.remove("active"); - } + const wishlistUlList = document.querySelector(".wishlist-list-items"); + wishlistUlList.innerHTML = ""; + + if (wishlistItems.length > 0) { + document.querySelector(".empty-wishlist").classList.remove("active"); + document.querySelector(".no-empty-wishlist").classList.add("active"); + } else { + document.querySelector(".empty-wishlist").classList.add("active"); + document.querySelector(".no-empty-wishlist").classList.remove("active"); + } - wishlistItems.forEach(wi => { - let itemLi = document.createElement("li"); - itemLi.setAttribute("id", wi.itemId); - let product = products_list.find(p => p.id == wi.itemId); + wishlistItems.forEach(wi => { + let itemLi = document.createElement("li"); + itemLi.setAttribute("id", wi.itemId); + let product = products_list.find(p => p.id == wi.itemId); - if (product) { - itemLi.innerHTML = ` + if (product) { + itemLi.innerHTML = `
${product.name}
- - ${ci.pcs} x ${product.price}
-
$${ci.amount}
- + ${wi.pcs} x ${product.price}
+
$${wi.amount}
+
- - ${ci.pcs} + ${wi.pcs} + -
`; - wishlistUlList.appendChild(itemLi); - handleRemoveButtonInWishlist(); // Attach remove functionality - - let moveToCartBtn = itemLi.querySelector(".move-to-cart"); - moveToCartBtn.addEventListener("click", () => moveToCart(wi.itemId)); - } - }); + wishlistUlList.appendChild(itemLi); + handleRemoveButtonInWishlist(); // Attach remove functionality + let moveToCartBtn = itemLi.querySelector(".move-to-cart"); + moveToCartBtn.addEventListener("click", () => moveToCart(wi.itemId)); + } + }); } - // Function to move item from wishlist to cart function moveToCart(wishlistItemId) { - // Find the item in wishlist - let wishlistItemIndex = wishlistItems.findIndex(item => item.itemId == wishlistItemId); - if (wishlistItemIndex > -1) { - let wishlistItem = wishlistItems[wishlistItemIndex]; - - // Check if the item already exists in the cart - let existingCartItem = cartItems.find(item => item.itemId == wishlistItemId); - if (existingCartItem) { - existingCartItem.pcs += wishlistItem.pcs; // Update quantity if it already exists - existingCartItem.amount = existingCartItem.pcs * products_list.find(p => p.id == wishlistItemId).price; // Update amount - showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} moved to cart!`); - } else { - cartItems.push({ - itemId: wishlistItem.itemId, - pcs: wishlistItem.pcs, - amount: wishlistItem.amount - }); - showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} added to cart!`); - } - - // Remove the item from the wishlist - wishlistItems.splice(wishlistItemIndex, 1); - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - - // Re-display the wishlist and cart items - displayWishlistItems(); - displayCartItems(); - } -} - - -// Scroll animation - - - -document.addEventListener("DOMContentLoaded", () => { - // Apply ScrollReveal to products - const productBoxes = document.querySelectorAll(".products-box .box"); - productBoxes.forEach((box) => { - sr.reveal(box, { - origin: "left", - distance: "80px", - duration: 600, - easing: "ease-in", - interval: 400, - reset: true, - }); - }); -}); - -function createSearchBar() { - const searchBarContainer = document.querySelector(".search-container"); - - // Check if the search bar already exists - if (document.getElementById("search-bar")) return; - - // Create the search bar only if it doesn't already exist - const searchBar = document.createElement("input"); - searchBar.setAttribute("type", "text"); - searchBar.setAttribute("id", "search-bar"); - searchBar.setAttribute("placeholder", "Search for flavors..."); - searchBarContainer.appendChild(searchBar); - - // Check if the search button already exists - if (document.getElementById("search-btn")) return; - - // Create the search button only if it doesn't already exist - const searchButton = document.createElement("button"); - searchButton.setAttribute("id", "search-btn"); - searchButton.innerText = "Search"; - searchBarContainer.appendChild(searchButton); - - // Attach event listener for the search button - searchButton.addEventListener("click", () => { - const query = searchBar.value.toLowerCase(); - const filteredProducts = products_list.filter((product) => { - const flavorName = flavor_list - .find((f) => f.id === product.flavor_id) - ?.name.toLowerCase(); - return ( - product.name.toLowerCase().includes(query) || flavorName.includes(query) - ); - }); - displayProducts(filteredProducts); - }); - - // Handle input event for live search - handleSearchInput(); -} - -function handleSearchInput() { - const searchInput = document.getElementById("search-bar"); - searchInput.addEventListener("input", () => { - const query = searchInput.value.toLowerCase(); - const filteredProducts = products_list.filter((product) => { - const flavorName = flavor_list - .find((f) => f.id === product.flavor_id) - ?.name.toLowerCase(); - return ( - product.name.toLowerCase().includes(query) || flavorName.includes(query) - ); - + // Find the item in wishlist + let wishlistItemIndex = wishlistItems.findIndex(item => item.itemId == wishlistItemId); + if (wishlistItemIndex > -1) { + let wishlistItem = wishlistItems[wishlistItemIndex]; + + // Check if the item already exists in the cart + let existingCartItem = cartItems.find(item => item.itemId == wishlistItemId); + if (existingCartItem) { + existingCartItem.pcs += wishlistItem.pcs; // Update quantity if it already exists + existingCartItem.amount = existingCartItem.pcs * products_list.find(p => p.id == wishlistItemId).price; // Update amount + showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} moved to cart!`); + } else { + cartItems.push({ + itemId: wishlistItem.itemId, + pcs: wishlistItem.pcs, + amount: wishlistItem.amount }); - displayProducts(filteredProducts); - }); -} - -function showQuickView(product) { - const overlay = document.getElementById("overlay"); - - // Set the inner HTML of overlay with the product details in two sections - overlay.innerHTML = ` -
- × -
- -
- ${product.name} -
- -
-

${product.name}

-

${product.description}

-
Price: $${product.price}
-
-
-
- `; - - // Show the overlay - overlay.style.display = "flex"; - - // Close popup on clicking the close button - overlay.querySelector(".close-btn").addEventListener("click", () => { - overlay.style.display = "none"; - }); - - // Close popup when clicking outside of it - overlay.addEventListener("click", (e) => { - if (e.target === overlay) { - overlay.style.display = "none"; - } - }); -} - -function openModal() { - document.getElementById("quickViewModal").style.display = "flex"; -} + showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} added to cart!`); + } -function closeModal() { - document.getElementById("quickViewModal").style.display = "none"; -} + // Remove the item from the wishlist + wishlistItems.splice(wishlistItemIndex, 1); + localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); -// Close modal when clicking outside content -window.onclick = function (event) { - const modal = document.getElementById("quickViewModal"); - if (event.target === modal) { - modal.style.display = "none"; - } -}; \ No newline at end of file + // Re-display the wishlist and cart items + displayWishlistItems(); + displayCartItems(); + } +} \ No newline at end of file From ea60c3acedf4faf55d849bce7cbea762178c4004 Mon Sep 17 00:00:00 2001 From: Dharshi Balasubramaniyam <139672976+DharshiBalasubramaniyam@users.noreply.github.com> Date: Wed, 6 Nov 2024 20:54:23 +0530 Subject: [PATCH 15/16] Revert "Fixed Increment Functionality in Cart" --- script/products.js | 346 +++++++++++++++++++++------------------------ 1 file changed, 163 insertions(+), 183 deletions(-) diff --git a/script/products.js b/script/products.js index 3021b0a9..abfbaf91 100644 --- a/script/products.js +++ b/script/products.js @@ -18,18 +18,6 @@ document.addEventListener("DOMContentLoaded", () => { displayProducts(products_list); } - // Scroll animation - const productBoxes = document.querySelectorAll(".products-box .box"); - productBoxes.forEach((box) => { - sr.reveal(box, { - origin: "left", - distance: "80px", - duration: 600, - easing: "ease-in", - interval: 400, - reset: true, - }); - }); }); function displayProducts(products) { @@ -87,8 +75,6 @@ function displayProducts(products) { box.appendChild(addToCartButton); - // Add click event for the quick view icon - box.querySelector(".quick-view-icon").addEventListener("click", () => { showQuickView(product); }); @@ -96,8 +82,8 @@ function displayProducts(products) { productsSection?.appendChild(box); }); - handleQuantityButtonsInProductCard(); } + function displayFlavorFilter() { let flavorFilterSection = document.querySelector(".categories-wrapper"); @@ -286,194 +272,188 @@ function displayCartItems() { function handleQuantityButtonsInProductCard() { const productsBox = document.querySelector(".products-box"); if (!productsBox) return; - productsBox.addEventListener("click", (e) => { if (e.target.classList.contains("increase")) { const qtySpan = e.target.previousElementSibling; let currentQty = parseInt(qtySpan.textContent); - setTimeout(() => { - qtySpan.textContent = currentQty + 1; - }, 600); // 0.6 second delay - } else if (e.target.classList.contains("decrease")) { + qtySpan.textContent = currentQty + 1; + + } + if (e.target.classList.contains("decrease")) { const qtySpan = e.target.nextElementSibling; let currentQty = parseInt(qtySpan.textContent); if (currentQty > 1) { - setTimeout(() => { - qtySpan.textContent = currentQty - 1; - }, 1000); // 1 second delay + qtySpan.textContent = currentQty - 1; + } } }); } +handleQuantityButtonsInProductCard(); + +function handleQuantityButtonsInCart() { + const cartList = document.querySelector(".cart-list-items"); + function updateSubtotal() { + const subtotalElement = document.querySelector(".sub-total"); + const subtotal = cartItems.reduce((acc, item) => acc + item.amount, 0); + subtotalElement.textContent = `$${subtotal.toFixed(2)}`; + } + + cartList.addEventListener("click", (e) => { + const itemId = e.target.closest("li").getAttribute("id"); + let cartItem = cartItems.find((item) => item.itemId == itemId); + + if (e.target.classList.contains("increase")) { + const qtySpan = e.target.previousElementSibling; + let currentQty = parseInt(qtySpan.textContent); + qtySpan.textContent = currentQty + 1; + cartItem.pcs = currentQty + 1; + cartItem.amount = + cartItem.pcs * products_list.find((p) => p.id == itemId).price; + + const priceElement = e.target.closest("li").querySelector(".price"); + priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; + const textQtyElement = e.target.closest("li").querySelector(".text .qty"); + textQtyElement.textContent = cartItem.pcs; + + localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); - function handleQuantityButtonsInCart() { - const cartList = document.querySelector(".cart-list-items"); - function updateSubtotal() { - const subtotalElement = document.querySelector(".sub-total"); - const subtotal = cartItems.reduce((acc, item) => acc + item.amount, 0); - subtotalElement.textContent = `$${subtotal.toFixed(2)}`; - } - - cartList.addEventListener("click", (e) => { - const itemId = e.target.closest("li").getAttribute("id"); - let cartItem = cartItems.find((item) => item.itemId == itemId); - - if (e.target.classList.contains("increase")) { - const qtySpan = e.target.previousElementSibling; - let currentQty = parseInt(qtySpan.textContent); - console.log(`Increasing cart quantity for item ${itemId} from ${currentQty} to ${currentQty + 1}`); - qtySpan.textContent = currentQty + 1; - cartItem.pcs = currentQty + 1; - cartItem.amount = cartItem.pcs * products_list.find((p) => p.id == itemId).price; - - const priceElement = e.target.closest("li").querySelector(".price"); - priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; - - localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); - updateSubtotal(); - } - - if (e.target.classList.contains("decrease")) { - const qtySpan = e.target.nextElementSibling; - let currentQty = parseInt(qtySpan.textContent); - if (currentQty > 1) { - console.log(`Decreasing cart quantity for item ${itemId} from ${currentQty} to ${currentQty - 1}`); - qtySpan.textContent = currentQty - 1; - cartItem.pcs = currentQty - 1; - cartItem.amount = cartItem.pcs * products_list.find((p) => p.id == itemId).price; - - const priceElement = e.target.closest("li").querySelector(".price"); - priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; - - localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); - updateSubtotal(); + updateSubtotal(); } - } - }); + + if (e.target.classList.contains("decrease")) { + const qtySpan = e.target.nextElementSibling; + let currentQty = parseInt(qtySpan.textContent); + if (currentQty > 1) { + qtySpan.textContent = currentQty - 1; + cartItem.pcs = currentQty - 1; + cartItem.amount = + cartItem.pcs * products_list.find((p) => p.id == itemId).price; + + const priceElement = e.target.closest("li").querySelector(".price"); + priceElement.textContent = `$${cartItem.amount.toFixed(2)}`; + + const textQtyElement = e.target + .closest("li") + .querySelector(".text .qty"); + textQtyElement.textContent = cartItem.pcs; + + localStorage.setItem(LOCAL_STORAGE_CART_KEY, JSON.stringify(cartItems)); + + updateSubtotal(); + } + } + }); } -// Add items to wishlist - -function addToWishlist(e) { - let wishlistItemId = e.target.closest(".box").getAttribute("id"); - let pcs = parseInt(e.target.closest(".box").querySelector(".pcs").textContent, 10); - // Ensure pcs is a valid number - if (isNaN(pcs) || pcs <= 0) { - showToast("Please select the number of cups you want!"); - return; - } - - let existingWishlistItem = wishlistItems.find(item => item.itemId == wishlistItemId); - let item = products_list.find(item => item.id == wishlistItemId); - let amount = item.price * pcs; - - if (existingWishlistItem) { - existingWishlistItem.pcs += pcs; // Increment by the correct number of pcs - existingWishlistItem.amount = existingWishlistItem.pcs * item.price; - showToast(`${pcs} more ${item.name} ice cream/s successfully added to the wishlist!`); - } else { - wishlistItems.push({ - itemId: wishlistItemId, - pcs: pcs, // Ensure pcs is a number - amount: amount - }); - showToast(`${pcs} ${item.name} ice cream/s successfully added to the wishlist!`); - } - - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - displayWishlistItems(); +function createSearchBar() { + const searchBarContainer = document.querySelector(".search-container"); + + // Check if the search bar already exists + if (document.getElementById("search-bar")) return; + + // Create the search bar only if it doesn't already exist + const searchBar = document.createElement("input"); + searchBar.setAttribute("type", "text"); + searchBar.setAttribute("id", "search-bar"); + searchBar.setAttribute("placeholder", "Search for flavors..."); + searchBarContainer.appendChild(searchBar); + + // Check if the search button already exists + if (document.getElementById("search-btn")) return; + + // Create the search button only if it doesn't already exist + const searchButton = document.createElement("button"); + searchButton.setAttribute("id", "search-btn"); + searchButton.innerText = "Search"; + searchBarContainer.appendChild(searchButton); + + // Attach event listener for the search button + searchButton.addEventListener("click", () => { + const query = searchBar.value.toLowerCase(); + const filteredProducts = products_list.filter((product) => { + const flavorName = flavor_list + .find((f) => f.id === product.flavor_id) + ?.name.toLowerCase(); + return ( + product.name.toLowerCase().includes(query) || flavorName.includes(query) + ); + }); + displayProducts(filteredProducts); + }); + + // Handle input event for live search + handleSearchInput(); } -function handleRemoveButtonInWishlist() { - let removeBtns = document.querySelectorAll(".remove-wishlist-item-btn"); - removeBtns.forEach(btn => { - btn.addEventListener("click", () => { - let itemId = btn.closest('li').getAttribute("id"); - wishlistItems = wishlistItems.filter(item => item.itemId !== itemId); - - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - displayWishlistItems(); // Update the wishlist display - - // Reset button text to "Add to Wishlist" if necessary - const productBox = document.querySelector(`.box[id='${itemId}']`); - if (productBox) { - const addToWishlistButton = productBox.querySelector(".wishlist-btn"); - addToWishlistButton.innerHTML = ''; // Reset icon and text +function handleSearchInput() { + const searchInput = document.getElementById("search-bar"); + searchInput.addEventListener("input", () => { + const query = searchInput.value.toLowerCase(); + const filteredProducts = products_list.filter((product) => { + const flavorName = flavor_list + .find((f) => f.id === product.flavor_id) + ?.name.toLowerCase(); + return ( + product.name.toLowerCase().includes(query) || flavorName.includes(query) + ); + + }); + displayProducts(filteredProducts); + }); +} + +function showQuickView(product) { + const overlay = document.getElementById("overlay"); + + // Set the inner HTML of overlay with the product details in two sections + overlay.innerHTML = ` +
+ × +
+ +
+ ${product.name} +
+ +
+

${product.name}

+

${product.description}

+
Price: $${product.price}
+
+
+
+ `; + + // Show the overlay + overlay.style.display = "flex"; + + // Close popup on clicking the close button + overlay.querySelector(".close-btn").addEventListener("click", () => { + overlay.style.display = "none"; + }); + + // Close popup when clicking outside of it + overlay.addEventListener("click", (e) => { + if (e.target === overlay) { + overlay.style.display = "none"; } - }); - }); + }); } -function displayWishlistItems() { - const wishlistUlList = document.querySelector(".wishlist-list-items"); - wishlistUlList.innerHTML = ""; - - if (wishlistItems.length > 0) { - document.querySelector(".empty-wishlist").classList.remove("active"); - document.querySelector(".no-empty-wishlist").classList.add("active"); - } else { - document.querySelector(".empty-wishlist").classList.add("active"); - document.querySelector(".no-empty-wishlist").classList.remove("active"); - } - - wishlistItems.forEach(wi => { - let itemLi = document.createElement("li"); - itemLi.setAttribute("id", wi.itemId); - let product = products_list.find(p => p.id == wi.itemId); - - if (product) { - itemLi.innerHTML = ` - -
- ${product.name}
- ${wi.pcs} x ${product.price}
-
$${wi.amount}
- -
-
- - - ${wi.pcs} - + -
- `; - wishlistUlList.appendChild(itemLi); - handleRemoveButtonInWishlist(); // Attach remove functionality - - let moveToCartBtn = itemLi.querySelector(".move-to-cart"); - moveToCartBtn.addEventListener("click", () => moveToCart(wi.itemId)); - } - }); +function openModal() { + document.getElementById("quickViewModal").style.display = "flex"; } -// Function to move item from wishlist to cart -function moveToCart(wishlistItemId) { - // Find the item in wishlist - let wishlistItemIndex = wishlistItems.findIndex(item => item.itemId == wishlistItemId); - if (wishlistItemIndex > -1) { - let wishlistItem = wishlistItems[wishlistItemIndex]; - - // Check if the item already exists in the cart - let existingCartItem = cartItems.find(item => item.itemId == wishlistItemId); - if (existingCartItem) { - existingCartItem.pcs += wishlistItem.pcs; // Update quantity if it already exists - existingCartItem.amount = existingCartItem.pcs * products_list.find(p => p.id == wishlistItemId).price; // Update amount - showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} moved to cart!`); - } else { - cartItems.push({ - itemId: wishlistItem.itemId, - pcs: wishlistItem.pcs, - amount: wishlistItem.amount - }); - showToast(`${wishlistItem.pcs} ${products_list.find(p => p.id == wishlistItemId).name} added to cart!`); - } - - // Remove the item from the wishlist - wishlistItems.splice(wishlistItemIndex, 1); - localStorage.setItem('wishlistItems', JSON.stringify(wishlistItems)); - - // Re-display the wishlist and cart items - displayWishlistItems(); - displayCartItems(); - } -} \ No newline at end of file +function closeModal() { + document.getElementById("quickViewModal").style.display = "none"; +} + +// Close modal when clicking outside content +window.onclick = function (event) { + const modal = document.getElementById("quickViewModal"); + if (event.target === modal) { + modal.style.display = "none"; + } +}; From 346dbfdb478ce8a2940cc790cb3387b6328f22ae Mon Sep 17 00:00:00 2001 From: Tatheer Fathima <148070120+T-Fathima@users.noreply.github.com> Date: Wed, 6 Nov 2024 17:20:07 +0000 Subject: [PATCH 16/16] added btn --- README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 7227d558..4305d7c2 100644 --- a/README.md +++ b/README.md @@ -191,4 +191,8 @@ For any inquiries or support, please contact: - **GitHub:** (https://github.com/DharshiBalasubramaniyam) --- - +