add images and also enhance the user interface

siddharthbaleja7 · Jul 23, 2024 · 0d7f06f · 0d7f06f
1 parent 8d1a413
commit 0d7f06f
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 3 deletions.
diff --git a/Html-files/MenuAPI.js b/Html-files/MenuAPI.js
@@ -79,7 +79,7 @@ function renderMeals(mealData) {
                     <div class="black-overlay">
                     	<img src="${mealDetails.imgSrc}" alt="" class="card-img-top">
                     </div>
-                    <button class="btn btn-warning add-to-cart-button" data-product-id="${mealDetails.id}" data-product-name="${mealDetails.name}" data-product-price="10.20">+ Add to Cart</button>
+                    <button class="btn btn-warning add-to-cart-button" data-product-id="${mealDetails.id}" data-product-name="${mealDetails.name}" data-product-price="10.20" data-product-img-source="${mealDetails.imgSrc}">+ Add to Cart</button>
             	</div>
             	<div class="card-body">
                     <h3>${mealDetails.name}</h3>
@@ -205,9 +205,11 @@ function cartBtn() {
         const clickedElement = event.target;
         if (clickedElement.classList.contains("add-to-cart-button")) {
             const productName = clickedElement.dataset.productName;
-            const productImgSource = clickedElement.dataset.productImgsource;
+            const productImgSource = clickedElement.dataset.productImgSource ;
             const productPrice = clickedElement.dataset.productPrice;
 
+            console.log("dataset", clickedElement.dataset)
+
             // Get the current cart items
             const cartItems = getCartItems();
 

diff --git a/Html-files/cart.html b/Html-files/cart.html
@@ -33,6 +33,48 @@
             text-shadow: #FC0 1px 0 6px;
             text-decoration: none;
         }
+        .cart-item {
+    display: flex;
+    align-items: center;
+    margin-bottom: 10px;
+    padding: 10px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    position: relative; /* for the remove button positioning */
+}
+
+.cart-item img {
+    margin-right: 15px; /* space between image and details */
+}
+
+.detail {
+    display: flex;
+    flex-direction: row;
+    justify-content: inherit;
+}
+
+.quantity-wrapper {
+    display: flex;
+    align-items: center;
+}
+
+.btn {
+    cursor: pointer;
+    padding: 5px;
+    margin: 0 5px;
+}
+
+.price {
+    margin-top: 5px;
+}
+
+.remove {
+    cursor: pointer;
+    font-weight: bold;
+    background-color: red;
+    color:white;
+}
+
     </style>
     <style>
        #progressBar {

diff --git a/carts.js b/carts.js
@@ -13,7 +13,6 @@ const addToCart = function(name, price){
     if (!existingItem) {
         cartItems.push({ name, price });
         localStorage.setItem('cartItems', JSON.stringify(cartItems));
-        console.log(cartItems);
     }
 
     updateCartDisplay();