From 2384c291df7e2e9d37142683997d113edebba2ac Mon Sep 17 00:00:00 2001 From: ShadyLane Date: Wed, 2 Oct 2024 11:07:41 +0530 Subject: [PATCH 1/2] Added a Cart Icon with functionality to add and remove items from cart --- assets/css/style.css | 39 ++++++++++++++++++++-- assets/js/script.js | 41 ++++++++++++++++++++++- index.html | 78 ++++++++++++++++++++++++++++++++++++++++---- 3 files changed, 148 insertions(+), 10 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 380dfd7..fa958b3 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -264,6 +264,17 @@ body.nav-active { overflow: hidden; } margin-inline: auto; } +/* Cart anchor styling */ +#cart-anchor { + display: flex; + align-items: center; + cursor: pointer; +} + +#cart-anchor:hover .span { + color: var(--gold-crayola); /* Similar hover effect as other items */ +} + .contact-number::after { bottom: -5px; } .text-center { text-align: center; } @@ -303,6 +314,11 @@ body.nav-active { overflow: hidden; } padding: 12px 45px; overflow: hidden; z-index: 1; + + +} +.menu-card .add-to-cart { + margin-left: 15px; /* Adds space between price and button */ } .btn::before { @@ -992,9 +1008,28 @@ body.nav-active { overflow: hidden; } .menu-card { display: flex; - align-items: flex-start; - gap: 20px; + /* align-items: flex-start; */ + /* gap: 20px; */ } +.menu-card { + display: grid; + grid-template-columns: 150px 500px 300px 300px; + grid-template-rows: auto; /* Two equal columns */ + /* height: 50px; */ + row-gap: 5px; + gap: 20px; /* Gap between the columns */ + align-items: center; /* Aligns buttons vertically */ +} + +/* .menu-card .btn { + width: 150px; + text-align: center; +} */ + +/* .menu-card .title-wrapper { + margin-bottom: 15px; +} */ + .hover\:card .card-banner { background-color: var(--gold-crayola); } diff --git a/assets/js/script.js b/assets/js/script.js index 6403e32..5f8bc71 100644 --- a/assets/js/script.js +++ b/assets/js/script.js @@ -23,6 +23,44 @@ const addEventOnElements = function (elements, eventType, callback) { } } +// Select the cart anchor and elements +const cartAnchor = document.getElementById("cart-anchor"); +const addToCartButtons = document.querySelectorAll(".add-to-cart"); +const removeFromCartButtons = document.querySelectorAll(".remove"); + +let cartItemCount = 0; + +// Function to update cart text +const updateCartDisplay = () => { + if (cartItemCount > 99) { + cartAnchor.querySelector(".span").textContent = "Cart 99+"; + } else if (cartItemCount > 0) { + cartAnchor.querySelector(".span").textContent = `Cart ${cartItemCount}`; + } else { + cartAnchor.querySelector(".span").textContent = "Cart"; + } +}; + +// Add event listeners to "Add to Cart" buttons +addToCartButtons.forEach(button => { + button.addEventListener("click", () => { + cartItemCount += 1; + updateCartDisplay(); + }); +}); + +// Add event listeners to "Remove" buttons +removeFromCartButtons.forEach(button => { + button.addEventListener("click", () => { + if (cartItemCount > 0) { + cartItemCount -= 1; + updateCartDisplay(); + } + }); +}); + +// Initialize the cart display on page load +window.addEventListener("load", updateCartDisplay); /** @@ -141,4 +179,5 @@ window.addEventListener("mousemove", function (event) { parallaxItems[i].style.transform = `translate3d(${x}px, ${y}px, 0px)`; } -}); \ No newline at end of file +}); + diff --git a/index.html b/index.html index e97ba51..fcd4a96 100644 --- a/index.html +++ b/index.html @@ -87,10 +87,16 @@ Number + +
+ +
+ Cart +
- +
@@ -332,8 +338,8 @@

We Offer Top Notch

- Enjoy a premium dining experience with exceptional culinary artistry at Grilli. -

+ Get the best in class dining experience with the most articulate culinary craftsmanship at Grilli. Bon Apétit! +