resuelto

css/style.css

@@ -9,6 +9,11 @@ body {
   color: #2d354c;
 }
 
+a{
+  text-decoration: none;
+  color: white;
+}
+
 button,
 input {
   font: inherit;

index.html

@@ -35,7 +35,7 @@ <h1>Ironhack 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,11 +47,12 @@ <h1>Ironhack Cart</h1>
           <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>
+      <button class="btn btn-success"><a href="index.html">Recargar pagina</a></button>
     </p>
     <h2 id="total-value">Total: $<span>0</span></h2>
     <script type="text/javascript" src="./src/index.js"></script>

src/index.js

@@ -3,40 +3,92 @@
 function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
 
-  //... your code goes here
+  const price = product.querySelector('.price span');
+  const quantity = product.querySelector('.quantity input');
+
+  const priceValue = parseFloat(price.textContent);
+  const quantityValue = parseInt(quantity.value);
+
+  const subtotalValue = priceValue * quantityValue;
+
+  const subtotal = product.querySelector('.subtotal span');
+  subtotal.textContent = subtotalValue.toFixed(2);
+
+  return subtotalValue;
 }
 
 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.getElementsByClassName('product');
+  let total = 0;
 
   // ITERATION 2
   //... your code goes here
+  for (let product of products) {
+    total += updateSubtotal(product);
+  }
 
   // ITERATION 3
   //... your code goes here
+  const totalValue = document.querySelector('#total-value span');
+  totalValue.textContent = total.toFixed(2);
 }
 
 // ITERATION 4
 
 function removeProduct(event) {
   const target = event.currentTarget;
   console.log('The target in remove is:', target);
-  //... your code goes here
+
+  const product = target.closest('.product');
+  product.remove();
+
+  calculateAll();
 }
 
 // ITERATION 5
 
 function createProduct() {
-  //... your code goes here
+  const nameInput = document.querySelector('.create-product input[placeholder="Product Name"]');
+  const priceInput = document.querySelector('.create-product input[placeholder="Product Price"]');
+
+  const nameValue = nameInput.value;
+  const priceValue = parseFloat(priceInput.value).toFixed(2);
+
+  const newProductRow = document.createElement('tr');
+  newProductRow.classList.add('product');
+  newProductRow.innerHTML = `
+    <td class="name">
+      <span>${nameValue}</span>
+    </td>
+    <td class="price">$<span>${priceValue}</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 cartBody = document.querySelector('#cart tbody');
+  cartBody.appendChild(newProductRow);
+
+  const removeButton = newProductRow.querySelector('.btn-remove');
+  removeButton.addEventListener('click', removeProduct);
+
+  nameInput.value = '';
+  priceInput.value = '';
 }
 
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);
 
-  //... your code goes here
+  const removeButtons = document.querySelectorAll('.btn-remove');
+  removeButtons.forEach(button => {
+    button.addEventListener('click', removeProduct);
+  });
+
+  const createProductBtn = document.getElementById('create');
+  createProductBtn.addEventListener('click', createProduct);
 });