From e08f81484a9b20d27c4bce7af99ac820bbe2d488 Mon Sep 17 00:00:00 2001
From: Rahul-Jena-2002 <rahuljenasonu@gmail.com>
Date: Mon, 2 Sep 2024 21:41:19 +0530
Subject: [PATCH] Solved Lab

---
 index.html  | 24 +++++++++++++++---
 js/index.js | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 90 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 752a993..b49b268 100644
--- a/index.html
+++ b/index.html
@@ -33,21 +33,37 @@ <h1>Root Cart</h1>
           </td>
         </tr>
         <!-- Iteration 2: Add more products here -->
+        <tr class="product">
+        <td class="name">
+          <span>Root T-shirt</span>
+        </td>
+        <td class="price">$<span>50.00</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>
+      </tr>
       </tbody>
       <tfoot>
-        <!-- <tr class="create-product">
+        <tr class="create-product">
           <td>
-            <input type="text" placeholder="Product Name" />
+            <input type="text" placeholder="Product Name" class="name-input" />
           </td>
           <td>
-            <input type="number" min="0" value="0" placeholder="Product Price" />
+            <input type="number" placeholder="Produt Price" class="price-input">
+          </td>
+          <td class="quantity">
+            <input type="number" value="0" min="0" placeholder="Quantity" />
           </td>
           <td></td>
           <td></td>
           <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..12dea33 100644
--- a/js/index.js
+++ b/js/index.js
@@ -4,6 +4,12 @@ function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
 
   //... your code goes here
+  const price = product.querySelector('.price span').innerHTML;
+  const quantity = product.querySelector('.quantity input').value;
+  let total = quantity * price;
+  const subTotal = product.querySelector('.subtotal span');
+  subTotal.innerHTML = total;
+  return subTotal.innerHTML;
 }
 
 function calculateAll() {
@@ -11,13 +17,22 @@ function calculateAll() {
   // 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 = Array.from(document.querySelectorAll('.product'));
+  let sum = 0;
+  products.forEach((product) => {
+    sum += parseInt(updateSubtotal(product));
+  });
 
   // ITERATION 3
   //... your code goes here
+  const total = document.querySelector('#total-value span');
+  total.innerHTML = sum;
 }
 
 // ITERATION 4
@@ -25,13 +40,57 @@ function calculateAll() {
 function removeProduct(event) {
   const target = event.currentTarget;
   console.log('The target in remove is:', target);
+  console.log('The target in remove is:', target.parentElement.parentElement);
   //... your code goes here
+
+  target.parentElement.parentElement.remove();
+  calculateAll(); // recalculate total after removing product
 }
 
 // ITERATION 5
 
 function createProduct() {
   //... your code goes here
+  console.log("PRODUCT CREATED");
+
+  // creating new row and cells
+  const tableBody = document.querySelector('tbody');
+  let row = tableBody.insertRow(-1);
+  row.classList.add("product");
+  let nameCell = row.insertCell(0);
+  nameCell.classList.add("name");
+  let priceCell = row.insertCell(1);
+  priceCell.classList.add("price");
+  let quantityCell = row.insertCell(2);
+  let input = document.createElement("input");
+  input.setAttribute('type', 'number');
+  input.setAttribute('min', '0');
+  input.setAttribute('placeholder', 'Quantity');
+  input.setAttribute('value', '0');
+  quantityCell.appendChild(input);
+  quantityCell.classList.add('quantity');
+  let subTotalCell = row.insertCell(3);
+  subTotalCell.classList.add("subtotal");
+  let actionCell = row.insertCell(4);
+  actionCell.classList.add("action");
+  let btn = document.createElement("button");
+  btn.classList.add("btn", "btn-remove");
+  btn.innerHTML = "Remove";
+  actionCell.appendChild(btn);
+
+  // adding the values dynamically from the form
+  let inputName = document.querySelector('.name-input');
+  nameCell.innerHTML = `<span>${inputName.value}</span>`;
+  let inputPrice = document.querySelector('.price-input');
+  priceCell.innerHTML = `$<span>${inputPrice.value}</span>`;
+  subTotalCell.innerHTML = "$<span>0</span>";
+
+  // clear the form fields
+  inputName.value = '';
+  inputPrice.value = '';
+  calculateAll(); // recalculate total after adding new product
+
+  btn.addEventListener('click', removeProduct);
 }
 
 window.addEventListener('load', () => {
@@ -39,4 +98,14 @@ window.addEventListener('load', () => {
   calculatePricesBtn.addEventListener('click', calculateAll);
 
   //... your code goes here
-});
+
+  // create Product
+  const createProductBtn = document.getElementById('create');
+  createProductBtn.addEventListener('click', createProduct);
+
+  // remove product
+  const removeButtonArray = Array.from(document.querySelectorAll('.btn-remove'));
+  removeButtonArray.forEach((button) => {
+    button.addEventListener('click', removeProduct);
+  });
+});
\ No newline at end of file