From 3a95f670af0052f8cae9f9026f700804870e5125 Mon Sep 17 00:00:00 2001
From: Muhammad Irshad <85778819+Irshadmdk19@users.noreply.github.com>
Date: Mon, 7 Oct 2024 22:05:35 +0530
Subject: [PATCH] solved lab

---
 js/index.js | 54 ++++++++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 47 insertions(+), 7 deletions(-)

diff --git a/js/index.js b/js/index.js
index 75405d6..6087c50 100644
--- a/js/index.js
+++ b/js/index.js
@@ -3,21 +3,48 @@
 function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
 
+  // Step 1: Get the price and quantity elements from the product row
+  const priceElement = product.querySelector('.price span');
+  const quantityElement = product.querySelector('.quantity input');
+
+  // Step 2: Extract the values (price as a float, quantity as an integer)
+  const price = parseFloat(priceElement.textContent);
+  const quantity = parseInt(quantityElement.value) || 0;
+
+  // Step 3: Calculate the subtotal
+  const subtotal = price * quantity;
+
+  // Step 4: Get the element where the subtotal will be displayed
+  const subtotalElement = product.querySelector('.subtotal span');
+
+  // Step 5: Update the subtotal in the DOM
+  subtotalElement.textContent = subtotal.toFixed(2); // Format subtotal to 2 decimal places
+
+  // Return the subtotal value
+  return subtotal;
+
   //... your code goes here
 }
 
 function calculateAll() {
   // code in the following two lines is added just for testing purposes.
   // it runs when only iteration 1 is completed. at later point, it can be removed.
-  const singleProduct = document.querySelector('.product');
-  updateSubtotal(singleProduct);
-  // end of test
-
   // ITERATION 2
-  //... your code goes here
+  // Get all the product rows in the cart
+  const allProducts = document.querySelectorAll('.product');
+  
+  // Variable to store the total price
+  let total = 0;
+
+  // Iterate through all products and update their subtotals
+  allProducts.forEach(product => {
+    total += updateSubtotal(product); // Sum the subtotals
+  });
 
   // ITERATION 3
-  //... your code goes here
+  // Update the total price in the DOM
+  const totalElement = document.querySelector('#total-value span');
+  totalElement.textContent = total.toFixed(2);  // Set total with 2 decimal places
 }
 
 // ITERATION 4
@@ -25,7 +52,14 @@ function calculateAll() {
 function removeProduct(event) {
   const target = event.currentTarget;
   console.log('The target in remove is:', target);
-  //... your code goes here
+
+
+  // Remove the product row from the DOM
+  const productRow = target.closest('.product');
+  productRow.parentNode.removeChild(productRow);
+
+  // After removing, recalculate the total
+  calculateAll();
 }
 
 // ITERATION 5
@@ -38,5 +72,11 @@ window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);
 
+  // ITERATION 4: Add event listeners to all "Remove" buttons
+  const removeButtons = document.querySelectorAll('.btn-remove');
+  
+  removeButtons.forEach(button => {
+    button.addEventListener('click', removeProduct);
+  });
   //... your code goes here
 });