Solved Lab

index.html

@@ -35,20 +35,21 @@ <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" />
+            <input type="text" id="new-product-name" placeholder="Product Name" />
           </td>
           <td>
-            <input type="number" min="0" value="0" placeholder="Product Price" />
+            <input type="number" id="new-product-price" min="0" value="0" placeholder="Product Price" />
           </td>
           <td></td>
           <td></td>
           <td>
             <button id="create" class="btn">Create Product</button>
           </td>
-        </tr> -->
+        </tr>
       </tfoot>
+
     </table>
     <p class="calculate-total">
       <button id="calculate" class="btn btn-success">Calculate Prices</button>

js/index.js

@@ -1,39 +1,99 @@
 // ITERATION 1
-
 function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
 
-  //... your code goes here
+  const priceElement = product.querySelector('.price span');
+
+  const quantityElement = product.querySelector('.quantity input');
+
+  const price = parseFloat(priceElement.innerHTML);
+  const quantity = parseInt(quantityElement.value);
+
+  const subtotal = price * quantity;
+
+  const subtotalElement = product.querySelector('.subtotal span');
+
+  subtotalElement.innerHTML = 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
+  const products = document.querySelectorAll('.product');
 
-  // ITERATION 2
-  //... your code goes here
+  let total = 0;
 
-  // ITERATION 3
-  //... your code goes here
+  products.forEach((product) => {
+    total += updateSubtotal(product);
+  });
+
+  const totalValueElement = document.querySelector('#total-value span');
+  totalValueElement.innerHTML = total.toFixed(2);
 }
 
-// ITERATION 4
+const calculateButton = document.getElementById('calculate');
+calculateButton.addEventListener('click', calculateAll);
 
+// ITERATION 4: Removing Products
 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.parentNode.removeChild(productRow);
+
+  calculateAll();
 }
 
-// ITERATION 5
+function setupRemoveButtons() {
+  const removeButtons = document.querySelectorAll('.btn-remove');
+  removeButtons.forEach((button) => {
+    button.addEventListener('click', removeProduct);
+  });
+}
+
+setupRemoveButtons();
 
+// ITERATION 5: Adding New Products
 function createProduct() {
-  //... your code goes here
+  const nameInput = document.getElementById('new-product-name');
+  const priceInput = document.getElementById('new-product-price');
+
+  const name = nameInput.value;
+  const price = parseFloat(priceInput.value);
+
+  if (!name || isNaN(price) || price <= 0) {
+    alert('Please enter a valid product name and price.');
+    return;
+  }
+
+  const newRow = document.createElement('tr');
+  newRow.classList.add('product');
+  newRow.innerHTML = `
+    <td class="name">
+      <span>${name}</span>
+    </td>
+    <td class="price">$<span>${price.toFixed(2)}</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>
+  `;
+  const tbody = document.querySelector('#cart tbody');
+  tbody.appendChild(newRow);
+
+  nameInput.value = '';
+  priceInput.value = 0;
+
+  setupRemoveButtons();
 }
 
+const createButton = document.getElementById('create');
+createButton.addEventListener('click', createProduct);
+
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);