DavidMejiaIntership

index.html

@@ -18,7 +18,7 @@ <h1>Root Cart</h1>
           <th>Action</th>
         </tr>
       </thead>
-      <tbody>
+      <tbody class="products">
         <tr class="product">
           <td class="name">
             <span>Root Rubber Duck</span>
@@ -33,9 +33,22 @@ <h1>Root Cart</h1>
           </td>
         </tr>
         <!-- Iteration 2: Add more products here -->
+        <tr class="product">
+          <td class="name">
+            <span>Ducky Headphones</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" />
           </td>
@@ -47,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">
@@ -57,3 +70,8 @@ <h2 id="total-value">Total: $<span>0</span></h2>
     <script type="text/javascript" src="./js/index.js"></script>
   </body>
 </html>
+
+
+<!-- const clearInputs = ()=>{
+  document.querySelectorAll('.create-product td input').forEach((input)=>input.innerText="")
+} -->

js/index.js

@@ -1,42 +1,85 @@
 // ITERATION 1
 
 function updateSubtotal(product) {
-  console.log('Calculating subtotal, yey!');
-
+  const price = product.querySelector('.price span').innerText
+  const quantity = product.querySelector('.quantity input').value;
+  let subtotal  = price*quantity
+  product.querySelector('.subtotal span').innerText = subtotal
+  return subtotal
   //... your code goes here
 }
-
+// ITERATION 2 & 3
 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
+  let totalElement = document.querySelector('#total-value span');
+  let products = document.getElementsByClassName('product')
+  let totalProducts = 0;
+  for(const product of products){
+    totalProducts += updateSubtotal(product);
+  }
+  totalElement.innerText = totalProducts
 
-  // ITERATION 3
-  //... your code goes here
 }
 
 // ITERATION 4
 
 function removeProduct(event) {
-  const target = event.currentTarget;
-  console.log('The target in remove is:', target);
-  //... your code goes here
+  const button = event.target; // 
+  const row = button.closest('.product');
+  if (row) {
+    row.remove();
+    calculateAll();
+  }
 }
 
 // ITERATION 5
 
 function createProduct() {
-  //... your code goes here
+  let productName = document.querySelector(
+    '.create-product td input[placeholder="Product Name"]'
+  ).value;
+
+  let unitPrice = document.querySelector(
+    '.create-product td input[placeholder="Product Price"]'
+  ).value;
+
+  let products = document.querySelector('.products')
+  let product = document.createElement('tr')
+  product.className='product'
+  product.innerHTML += `
+    <td class="name">
+      <span></span>
+    </td>
+    <td class="price">$<span></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>
+`;
+product.querySelector('.price span').textContent = unitPrice;
+product.querySelector('.name span').textContent = productName
+products.appendChild(product);
+
+//Clear inputs
+document
+  .querySelectorAll('.create-product td input')
+  .forEach((input) => (input.value = ''));
 }
 
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);
 
-  //... your code goes here
+  // Event delegation for remove buttons
+  document
+    .querySelector('.products')
+    .addEventListener('click', function (event) {
+      if (event.target.classList.contains('btn-remove')) {
+        removeProduct(event);
+      }
+    });
+  const createProductBtn = document.getElementById('create');
+  createProductBtn.addEventListener('click', createProduct);
 });