From ef8549013d3b146c9075d66c95ef25dcc183bc10 Mon Sep 17 00:00:00 2001
From: Rahul Ankam <rahulankam1234@gmail.com>
Date: Mon, 3 Mar 2025 17:01:15 +0530
Subject: [PATCH] Solved lab

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

diff --git a/index.html b/index.html
index 752a993..d005877 100644
--- a/index.html
+++ b/index.html
@@ -35,7 +35,7 @@ <h1>Root Cart</h1>
         <!-- Iteration 2: Add more products here -->
       </tbody>
       <tfoot>
-        <!-- <tr class="create-product">
+        <tr class="create-product">
           <td>
             <input type="text" placeholder="Product Name" />
           </td>
@@ -47,7 +47,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 75405d6..1a7c27b 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,42 +1,73 @@
 // ITERATION 1
 
 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;
+  product.querySelector('.subtotal span').textContent = subtotal.toFixed(2);
+  return subtotal;
 }
 
-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
+function calculateAll() {
+  const products = document.querySelectorAll('.product');
+  let total = 0;
+  
+  products.forEach(product => {
+    total += updateSubtotal(product);
+  });
 
-  // ITERATION 3
-  //... your code goes here
+  document.querySelector('#total-value span').textContent = total.toFixed(2);
 }
 
+
 // ITERATION 4
 
 function removeProduct(event) {
-  const target = event.currentTarget;
-  console.log('The target in remove is:', target);
-  //... your code goes here
+  const productRow = event.currentTarget.closest('.product');
+  productRow.remove();
+  calculateAll();
 }
 
+document.querySelectorAll('.btn-remove').forEach(button => {
+  button.addEventListener('click', removeProduct);
+});
+
+
+
 // ITERATION 5
 
 function createProduct() {
-  //... your code goes here
+  const name = document.querySelector('.create-product input[type="text"]').value;
+  const price = parseFloat(document.querySelector('.create-product input[type="number"]').value).toFixed(2);
+
+  if (!name || price <= 0) return; // Ensure valid input
+
+  const table = 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" /></td>
+    <td class="subtotal">$<span>0</span></td>
+    <td class="action"><button class="btn btn-remove">Remove</button></td>
+  `;
+
+  table.appendChild(newRow);
+  newRow.querySelector('.btn-remove').addEventListener('click', removeProduct);
 }
+document.getElementById('create').addEventListener('click', createProduct);
+
 
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);
 
-  //... your code goes here
+  document.querySelectorAll('.btn-remove').forEach((btn) => {
+    btn.addEventListener('click', removeProduct);
+  });
+
+  document.getElementById('create').addEventListener('click', createProduct);
 });