From d1d737cf51965ad1e731bc1924e408b0027a8288 Mon Sep 17 00:00:00 2001
From: Jaskaranjot254 <jaskaranjotsingh85@gmail.com>
Date: Sat, 5 Oct 2024 19:06:22 +0530
Subject: [PATCH] Solved lab

---
 index.html  |  4 +--
 js/index.js | 97 +++++++++++++++++++++++++++++++++++++++++++++++++----
 2 files changed, 92 insertions(+), 9 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..444d7a7 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,8 +2,12 @@
 
 function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
+  let price = Number(product.querySelector('.price span').innerText);
+  let quantity = Number(product.querySelector('.quantity input').value);
+  let subtotal = price * quantity;
+  product.querySelector('.subtotal span').innerText = subtotal;
+  return subtotal;
 
-  //... your code goes here
 }
 
 function calculateAll() {
@@ -14,10 +18,18 @@ function calculateAll() {
   // end of test
 
   // ITERATION 2
-  //... your code goes here
+  let products = document.getElementsByClassName('product');
+  for (let i = 0; i < products.length; i++) {
+    updateSubtotal(products[i]);
+  }
 
   // ITERATION 3
-  //... your code goes here
+  let total = 0;
+  for (let i = 0; i < products.length; i++) {
+    total += Number(products[i].querySelector('.subtotal span').innerHTML);
+  }
+  document.querySelector('#total-value span').innerHTML = total;
+
 }
 
 // ITERATION 4
@@ -25,18 +37,89 @@ function calculateAll() {
 function removeProduct(event) {
   const target = event.currentTarget;
   console.log('The target in remove is:', target);
-  //... your code goes here
+  let targetProduct = target.parentNode.parentNode;
+  let targetCart = targetProduct.parentNode;
+  console.log(targetCart);
+  document.querySelector('#total-value span').innerHTML =
+    Number(document.querySelector('#total-value span').innerHTML) -
+    Number(targetProduct.querySelector('.subtotal span').innerHTML);
+  targetCart.removeChild(targetProduct);
 }
 
 // ITERATION 5
 
-function createProduct() {
-  //... your code goes here
+function createProduct(event) {
+  let target = event.currentTarget;
+  let parentTarget = target.parentNode.parentNode;
+  let proName = parentTarget
+    .getElementsByTagName('td')[0]
+    .getElementsByTagName('input')[0].value;
+  let price = parseFloat(
+    parentTarget.getElementsByTagName('td')[1].getElementsByTagName('input')[0]
+      .value
+  ).toFixed(2);
+
+  let nameHolder = document.createElement('td');
+  let nameTag = document.createElement('span');
+  let nameText = document.createTextNode(proName);
+  nameTag.appendChild(nameText);
+  nameHolder.appendChild(nameTag);
+  nameHolder.className = 'name';
+
+  let priceHolder = document.createElement('td');
+  priceHolder.innerHTML = '$';
+  let priceTag = document.createElement('span');
+  let priceText = document.createTextNode(price);
+  priceTag.appendChild(priceText);
+  priceHolder.appendChild(priceTag);
+  priceHolder.className = 'price';
+
+  let quantityHolder = document.createElement('td');
+  let Input = document.createElement('input');
+  Input.type = 'number';
+  Input.defaultValue = '0';
+  Input.min = '0';
+  Input.placeholder = 'Quantity';
+  quantityHolder.appendChild(Input);
+  quantityHolder.className = 'quantity';
+
+  let subtotalHolder = document.createElement('td');
+  subtotalHolder.innerHTML = '$';
+  let subtotalTag = document.createElement('span');
+  subtotalTag.innerHTML = 0;
+  subtotalHolder.appendChild(subtotalTag);
+  subtotalHolder.className = 'subtotal';
+
+  let actionHolder = document.createElement('td');
+  let buttonTag = document.createElement('button');
+  buttonTag.innerHTML = 'Remove';
+  actionHolder.appendChild(buttonTag);
+  actionHolder.className = 'action';
+  buttonTag.className = 'btn btn-remove';
+  buttonTag.addEventListener('click', removeProduct);
+
+  let productHolder = document.createElement('tr');
+  productHolder.appendChild(nameHolder);
+  productHolder.appendChild(priceHolder);
+  productHolder.appendChild(quantityHolder);
+  productHolder.appendChild(subtotalHolder);
+  productHolder.appendChild(actionHolder);
+  productHolder.className = 'product';
+
+  let prodList = document.getElementsByTagName('tbody')[0];
+  prodList.appendChild(productHolder);
 }
 
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);
 
-  //... your code goes here
+  let removeBtns = document.getElementsByClassName('btn-remove');
+  for (let i = 0; i < removeBtns.length; i++) {
+    removeBtns[i].addEventListener('click', removeProduct);
+  }
+
+  let createBtn = document.getElementById('create');
+  createBtn.addEventListener('click', createProduct);
 });
+