From 0bdcd5e23c730856cab9b444e0c3183f86bcb5dd Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Sun, 28 Sep 2025 12:23:55 +0100
Subject: [PATCH 1/4] complete updateSubtotal()

---
 js/index.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/js/index.js b/js/index.js
index 75405d6..cf0726c 100644
--- a/js/index.js
+++ b/js/index.js
@@ -4,6 +4,11 @@ function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
 
   //... your code goes here
+  const price = product.querySelector('.price span').innerText;
+  const quantity = product.querySelector('.quantity input').value;
+  const subtotal = price * quantity;
+  product.querySelector('.subtotal span').innerText = subtotal;
+  return subtotal;
 }
 
 function calculateAll() {

From ed6ef16934628d62471e5a159bafb16d47e63b31 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Sun, 28 Sep 2025 12:50:16 +0100
Subject: [PATCH 2/4] complete calculateAll() and make duplicate of tr with
 class product

---
 index.html  | 15 ++++++++++++++-
 js/index.js | 10 ++++++++--
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 752a993..6b7226b 100644
--- a/index.html
+++ b/index.html
@@ -25,7 +25,7 @@ <h1>Root Cart</h1>
           </td>
           <td class="price">$<span>25.00</span></td>
           <td class="quantity">
-            <input type="number" value="0" min="0" placeholder="Quantity" />
+            <input type="number" value="3" min="0" placeholder="Quantity" />
           </td>
           <td class="subtotal">$<span>0</span></td>
           <td class="action">
@@ -33,6 +33,19 @@ <h1>Root Cart</h1>
           </td>
         </tr>
         <!-- Iteration 2: Add more products here -->
+        <tr class="product">
+          <td class="name">
+            <span>Root Rubber Duck</span>
+          </td>
+          <td class="price">$<span>25.00</span></td>
+          <td class="quantity">
+            <input type="number" value="5" min="0" placeholder="Quantity" />
+          </td>
+          <td class="subtotal">$<span>0</span></td>
+          <td class="action">
+            <button class="btn btn-remove">Remove</button>
+          </td>
+        </tr>
       </tbody>
       <tfoot>
         <!-- <tr class="create-product">
diff --git a/js/index.js b/js/index.js
index cf0726c..feaa74b 100644
--- a/js/index.js
+++ b/js/index.js
@@ -14,12 +14,18 @@ function updateSubtotal(product) {
 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);
+  /* const singleProduct = document.querySelector('.product');
+     updateSubtotal(singleProduct);  */
   // end of test
 
   // ITERATION 2
   //... your code goes here
+  const products = document.getElementsByClassName('product');
+  let total = 0;
+  for (let i = 0; i < products.length; i++) {
+    total += updateSubtotal(products[i]);
+  }
+  document.querySelector('#total-value span').innerText = total;
 
   // ITERATION 3
   //... your code goes here

From 3bf75222cf1ca862b106dbb547b826785c455613 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Sun, 28 Sep 2025 12:55:31 +0100
Subject: [PATCH 3/4] complete removeProduct()

---
 index.html  | 4 ++--
 js/index.js | 8 ++++++--
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 6b7226b..3fef769 100644
--- a/index.html
+++ b/index.html
@@ -37,9 +37,9 @@ <h1>Root Cart</h1>
           <td class="name">
             <span>Root Rubber Duck</span>
           </td>
-          <td class="price">$<span>25.00</span></td>
+          <td class="price">$<span>35.00</span></td>
           <td class="quantity">
-            <input type="number" value="5" min="0" placeholder="Quantity" />
+            <input type="number" value="2" min="0" placeholder="Quantity" />
           </td>
           <td class="subtotal">$<span>0</span></td>
           <td class="action">
diff --git a/js/index.js b/js/index.js
index feaa74b..e095c70 100644
--- a/js/index.js
+++ b/js/index.js
@@ -21,14 +21,15 @@ function calculateAll() {
   // ITERATION 2
   //... your code goes here
   const products = document.getElementsByClassName('product');
+
+  // ITERATION 3
+  //... your code goes here
   let total = 0;
   for (let i = 0; i < products.length; i++) {
     total += updateSubtotal(products[i]);
   }
   document.querySelector('#total-value span').innerText = total;
 
-  // ITERATION 3
-  //... your code goes here
 }
 
 // ITERATION 4
@@ -37,6 +38,9 @@ function removeProduct(event) {
   const target = event.currentTarget;
   console.log('The target in remove is:', target);
   //... your code goes here
+  const productRow = target.closest('.product');
+  productRow.remove();
+  calculateAll();
 }
 
 // ITERATION 5

From 5eacaedf6e2e1b2cc4cc5628d8fd4183d13fe928 Mon Sep 17 00:00:00 2001
From: SiyaM108 <deprominent@gmail.com>
Date: Sun, 28 Sep 2025 13:16:05 +0100
Subject: [PATCH 4/4] Solved lab

---
 index.html  |  4 ++--
 js/index.js | 44 ++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 46 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 3fef769..feb2c3e 100644
--- a/index.html
+++ b/index.html
@@ -48,7 +48,7 @@ <h1>Root Cart</h1>
         </tr>
       </tbody>
       <tfoot>
-        <!-- <tr class="create-product">
+        <tr class="create-product">
           <td>
             <input type="text" placeholder="Product Name" />
           </td>
@@ -60,7 +60,7 @@ <h1>Root Cart</h1>
           <td>
             <button id="create" class="btn">Create Product</button>
           </td>
-        </tr> -->
+        </tr>
       </tfoot>
     </table>
     <p class="calculate-total">
diff --git a/js/index.js b/js/index.js
index e095c70..8f4bbb2 100644
--- a/js/index.js
+++ b/js/index.js
@@ -47,6 +47,44 @@ function removeProduct(event) {
 
 function createProduct() {
   //... your code goes here
+  const createRow = document.querySelector('.create-product');
+  const nameInput = createRow.querySelector('input[type="text"]');
+  const priceInput = createRow.querySelector('input[type="number"]');
+
+  const name = nameInput.value;
+  const price = parseFloat(priceInput.value).toFixed(2);
+
+  if (name === '' || isNaN(price) || price <= 0) {
+    alert('Please enter a valid product name and price.');
+    return;
+  }
+
+  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);
+
+  // Clear input fields
+  nameInput.value = '';
+  priceInput.value = '';
+
+  // Add event listener to the new remove button
+  const removeBtn = newRow.querySelector('.btn-remove');
+  removeBtn.addEventListener('click', removeProduct);
 }
 
 window.addEventListener('load', () => {
@@ -54,4 +92,10 @@ window.addEventListener('load', () => {
   calculatePricesBtn.addEventListener('click', calculateAll);
 
   //... your code goes here
+  const removeButtons = document.getElementsByClassName('btn-remove');
+  for (let i = 0; i < removeButtons.length; i++) {
+    removeButtons[i].addEventListener('click', removeProduct);
+  }
+
+  const createButton = document.getElementById('create');
 });