Add delete functionality in cart and refactor code

-Refactor code to combine similar functions

front/js/cart.js

@@ -6,10 +6,6 @@ const cart = sessionStorage;
 const savedProducts = Object.keys(sessionStorage);
 const savedQtys = Object.values(sessionStorage);
 
-//Totals Variables
-let totalItems = 0;
-let totalPrice = 0;
-
 //Function to set element values
 function setElement(selector, value) {
     const element = document.querySelector(selector);
@@ -25,13 +21,39 @@ async function fetchProducts(productID) {
     return data;
 }
 
+//Calculate new totals and insert in DOM
+function updateTotals() {
+    totalItems = 0;
+    totalPrice = 0;
+    let currentQtys = document.querySelectorAll(".itemQuantity");
+    let values = Object.values(currentQtys);
+
+    for (let input in values) {
+        if (cart.length > 0) {
+            let quantity = values[input].value;
+            totalItems += Number(quantity);
+
+            let priceElement = values[input]
+                .closest("article")
+                .querySelector(
+                    ".cart__item__content__description p:nth-child(3)"
+                );
+            let price = priceElement.textContent;
+            let itemPrice = Number(price.replace("€", "")) * Number(quantity);
+            totalPrice += itemPrice;
+        }
+
+        setElement("#totalQuantity", totalItems);
+        setElement("#totalPrice", `${totalPrice.toFixed(2)}`);
+    }
+}
+
 //Loop through cart list to display each item on page
 for (let item in savedProducts) {
     const productID = JSON.parse(savedProducts[item]);
     fetchProducts(productID.id).then((data) => {
         // Calculate quantities and total price per product
         let quantity = savedQtys[item];
-        const itemPrice = data.price * quantity;
 
         // Create and insert HTML for each item in cart
         const cartItem = document.createElement("div");
@@ -59,21 +81,14 @@ for (let item in savedProducts) {
         </article>`;
         cartList.appendChild(cartItem);
 
-        // Update total items and total price
-        totalItems += Number(quantity);
-        totalPrice += itemPrice;
-        setElement("#totalQuantity", totalItems);
-        setElement("#totalPrice", `${totalPrice.toFixed(2)}`);
+        updateTotals();
     });
 }
 
 //Update cart on input changes
 cartList.addEventListener("change", (event) => {
     if (event.target.classList.contains("itemQuantity")) {
-        alert("Quantity changed");
-
         //Product Variables from DOM
-        let currentQtys = document.querySelectorAll(".itemQuantity");
         let product = event.target.closest("article");
         let quantity = event.target.value;
         let colorOption = product.dataset.color;
@@ -84,26 +99,26 @@ cartList.addEventListener("change", (event) => {
         let cartItem = JSON.stringify(item);
         cart[cartItem] = quantity;
 
-        //Get current quantity values from DOM
-        let values = Object.values(currentQtys);
+        updateTotals();
+    }
+});
+//
 
-        //Calculate new totals and insert in DOM
-        totalItems = 0;
-        totalPrice = 0;
-        for (let input in values) {
-            let quantity = values[input].value;
-            totalItems += Number(quantity);
-            setElement("#totalQuantity", totalItems);
+cartList.addEventListener("click", (event) => {
+    if (event.target.classList.contains("deleteItem")) {
+        //Product Variables from DOM
+        let product = event.target.closest("article");
+        let colorOption = product.dataset.color;
+        let productID = product.dataset.id;
 
-            let priceElement = values[input]
-                .closest("article")
-                .querySelector(
-                    ".cart__item__content__description p:nth-child(3)"
-                );
-            let price = priceElement.textContent;
-            let itemPrice = Number(price.replace("€", "")) * Number(quantity);
-            totalPrice += itemPrice;
-            setElement("#totalPrice", `${totalPrice.toFixed(2)}`);
-        }
+        //Update stored cart quantities
+        let item = { id: productID, color: colorOption };
+        let cartItem = JSON.stringify(item);
+        delete cart[cartItem];
+
+        //Remove item from DOM
+        product.remove();
+
+        updateTotals();
     }
 });