From e282231b3d847dc83749100dcc0c671a4a06d40e Mon Sep 17 00:00:00 2001
From: Gowtham Jangiti <gowtham310703@gmail.com>
Date: Sun, 13 Oct 2024 10:22:12 +0530
Subject: [PATCH 1/2] Initial Setup

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 752a993..7846ca4 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@ <h1>Root Cart</h1>
           </td>
           <td class="subtotal">$<span>0</span></td>
           <td class="action">
-            <button class="btn btn-remove">Remove</button>
+            <button class="btn-remove">Remove</button>
           </td>
         </tr>
         <!-- Iteration 2: Add more products here -->

From a8925d9ae72f6f23393b8cf64e7d3bd4b3c181bd Mon Sep 17 00:00:00 2001
From: Gowtham Jangiti <gowtham310703@gmail.com>
Date: Sun, 13 Oct 2024 10:34:10 +0530
Subject: [PATCH 2/2] Completed

---
 js/index.js  | 54 +++++++++++++++++++++++++++++++++++++++++++---------
 package.json |  2 +-
 2 files changed, 46 insertions(+), 10 deletions(-)

diff --git a/js/index.js b/js/index.js
index 75405d6..e11545a 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,8 +2,12 @@
 
 function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
-
-  //... your code goes here
+  const price = parseFloat(product.querySelector('.price span').textContent);
+  const quantity = parseInt(product.querySelector('.quantity input').value);
+  const subtotal = price * quantity;
+  const subtotalElement = product.querySelector('.subtotal span');
+  subtotalElement.textContent = subtotal.toFixed(2);
+  return subtotal;
 }
 
 function calculateAll() {
@@ -14,29 +18,61 @@ function calculateAll() {
   // end of test
 
   // ITERATION 2
-  //... your code goes here
+  const products = document.querySelectorAll('.product');
+  let total = 0;
 
   // ITERATION 3
-  //... your code goes here
+   products.forEach((product) => {
+          total += updateSubtotal(product);
+      });
+  
+      document.querySelector('#total-value span').textContent = total.toFixed(2);
 }
 
 // ITERATION 4
+function addRemoveEventListeners() {
+  const removeButtons = document.querySelectorAll('.btn-remove');
+  removeButtons.forEach((button) => {
+      button.addEventListener('click', removeProduct);
+  });
+}
 
 function removeProduct(event) {
-  const target = event.currentTarget;
-  console.log('The target in remove is:', target);
-  //... your code goes here
+  const productRow = event.currentTarget.parentNode.parentNode;
+    productRow.parentNode.removeChild(productRow);
+    calculateAll(); 
 }
 
 // ITERATION 5
 
 function createProduct() {
-  //... your code goes here
+  const nameInput = document.querySelector('.create-product input[type="text"]');
+  const priceInput = document.querySelector('.create-product input[type="number"]');
+
+  const name = nameInput.value;
+  const price = parseFloat(priceInput.value).toFixed(2);
+  const tableBody = document.querySelector('#cart tbody');
+  const newRow = document.createElement('tr');
+  newRow.classList.add('product');
+  newRow.innerHTML = `
+    <td class="name"><span>${name}</span></td>
+    <td class="price">$<span>${price}</span></td>
+    <td class="quantity"><input type="number" value="0" min="0" placeholder="Quantity" /></td>
+    <td class="subtotal">$<span>0</span></td>
+    <td class="action"><button class="btn btn-remove">Remove</button></td>
+    `;
+  tableBody.appendChild(newRow);
+  const removeButton = newRow.querySelector('.btn-remove');
+  removeButton.addEventListener('click', removeProduct);
+  nameInput.value = '';
+  priceInput.value = 0;
 }
 
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);
+  addRemoveEventListeners();
 
-  //... your code goes here
+  const createProductBtn = document.getElementById('create');
+  createProductBtn.addEventListener('click', createProduct);
 });
diff --git a/package.json b/package.json
index b1a8c31..89eed13 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
     "jest-html-reporter": "^3.3.0",
     "jest-junit": "^12.0.0",
     "jest-puppeteer": "^5.0.3",
-    "puppeteer": "^9.1.1",
+    "puppeteer": "^23.4.0",
     "serve": "^11.3.2"
   },
   "jest": {