Solución Semana3 dia4

css/style.css

@@ -52,6 +52,7 @@ table input[type='number'] {
   color: #fff;
 }
 
+
 .btn-success {
   background-color: #2cc5fa;
 }

index.html

@@ -32,22 +32,35 @@ <h1>Ironhack Cart</h1>
             <button class="btn btn-remove">Remove</button>
           </td>
         </tr>
+        <tr class="product">
+          <td class="name">
+            <span>Ironhack Beach Towel</span>
+          </td>
+          <td class="price">$<span>12.50</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>
         <!-- 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" placeholder="Product Name" id="new-name" />
           </td>
           <td>
-            <input type="number" min="0" value="0" placeholder="Product Price" />
+            <input type="number" min="0" value="0" placeholder="Product Price" id="new-price"/>
           </td>
           <td></td>
           <td></td>
           <td>
             <button id="create" class="btn">Create Product</button>
           </td>
-        </tr> -->
+        </tr> 
       </tfoot>
     </table>
     <p class="calculate-total">

src/index.js

@@ -1,23 +1,31 @@
 // ITERATION 1
 
 function updateSubtotal(product) {
-  console.log('Calculating subtotal, yey!');
-
-  //... your code goes here
+  // Obtener elementos DOM del product
+  const price = product.querySelector('.price span').innerHTML;
+  const quantity = product.querySelector('.quantity input').value;
+  console.log(quantity)
+  // Calcular el subtotal
+  let subtotal = price * quantity;
+  // Actualizar el subtotal en el DOM
+  const subtotalElement = product.querySelector('.subtotal span');
+  subtotalElement.innerHTML = subtotal;
+  // Retornar el subtotal
+  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
-
+  const productElements = Array.from(document.getElementsByClassName('product'));
+  // Usar forEach para iterar sobre cada producto y actualizar el subtotal
+  let total = 0;
+  productElements.forEach(product => {
+    total += updateSubtotal(product);
+  });
   // ITERATION 3
-  //... your code goes here
+  // Actualizar el total general
+  const totalElement = document.querySelector('#total-value span');
+  totalElement.innerHTML = total
 }
 
 // ITERATION 4
@@ -26,17 +34,52 @@ 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.remove();
+  calculateAll();
 }
 
 // ITERATION 5
 
 function createProduct() {
+  const productTable = document.getElementById('cart');
+  const newproductName = document.getElementById("new-name").value;
+  const newproductPrice = document.getElementById("new-price").value;
+  console.log(newproductName);
+  const newRow = document.createElement('tr');
+  newRow.className = 'product';
+
+  newRow.innerHTML = `
+     <td class="name">
+            <span>${newproductName}</span>
+          </td>
+          <td class="price">$<span>${newproductPrice}</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>
+  `;
+  cart.appendChild(newRow);
+  const removeBtns = document.querySelectorAll('.btn-remove');
+  removeBtns.forEach(btn => {
+    btn.addEventListener('click', removeProduct);
+  });
+  document.getElementById('new-name').value = '';
+  document.getElementById('new-price').value = '';
   //... your code goes here
 }
 
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
-  calculatePricesBtn.addEventListener('click', calculateAll);
-
+  calculatePricesBtn.addEventListener('click', calculateAll); 
+  const removeBtns = document.querySelectorAll('.btn-remove');
+  removeBtns.forEach(btn => {
+    btn.addEventListener('click', removeProduct);
+  });
+  const createProductBtn = document.getElementById('create');
+  createProductBtn.addEventListener('click', createProduct);
   //... your code goes here
 });