From bb3c3ab0da22b1fdef6f04021f2d36c55faf3a61 Mon Sep 17 00:00:00 2001
From: FranRevi8 <fcorevidiego@gmail.com>
Date: Thu, 20 Jun 2024 19:26:25 +0200
Subject: [PATCH 1/2] done -1 error pending to be solved-

---
 index.html   | 17 ++++++++++--
 src/index.js | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 2 files changed, 90 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 883839837..34261cc77 100644
--- a/index.html
+++ b/index.html
@@ -33,9 +33,22 @@ <h1>Ironhack Cart</h1>
           </td>
         </tr>
         <!-- Iteration 2: Add more products here -->
+        <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>
       </tbody>
       <tfoot>
-        <!-- <tr class="create-product">
+        <tr class="create-product">
           <td>
             <input type="text" placeholder="Product Name" />
           </td>
@@ -47,7 +60,7 @@ <h1>Ironhack Cart</h1>
           <td>
             <button id="create" class="btn">Create Product</button>
           </td>
-        </tr> -->
+        </tr> 
       </tfoot>
     </table>
     <p class="calculate-total">
diff --git a/src/index.js b/src/index.js
index 75405d6cf..c63708f76 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,20 +4,46 @@ function updateSubtotal(product) {
   console.log('Calculating subtotal, yey!');
 
   //... your code goes here
+  let priceElement = product.querySelector(".price span");
+  let quantityElement = product.querySelector(".quantity input");
+  
+  let price = priceElement.innerText;
+  let quantity = quantityElement.value;
+  
+  let subtotalPrice = price * quantity;
+
+  let subtotalElement = product.querySelector(".subtotal span");
+  subtotalElement.innerText = subtotalPrice;
 }
 
 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);
+  // const singleProduct = document.querySelector('.product');
+  // updateSubtotal(singleProduct);
   // end of test
 
   // ITERATION 2
   //... your code goes here
 
+  const products = document.querySelectorAll(".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++){
+    let subtotal = Number(products[i].querySelector('.subtotal span').innerText);
+    total += subtotal
+  }
+
+  let totalElement = document.querySelector("#total-value span");
+  totalElement.innerText = total
 }
 
 // ITERATION 4
@@ -26,12 +52,51 @@ function removeProduct(event) {
   const target = event.currentTarget;
   console.log('The target in remove is:', target);
   //... your code goes here
+  const buttonClicked = target;
+  const productElement = buttonClicked.closest(".product");
+  let totalPrice = document.querySelector("#total-value span");
+  let productSubtotal = productElement.querySelector(".subtotal span")
+
+  newPrice = Number(totalPrice.innerText) - Number(productSubtotal.innerText);
+
+  totalPrice.innerText = newPrice
+
+  productElement.innerHTML = "";
+
 }
 
 // ITERATION 5
 
 function createProduct() {
   //... your code goes here
+
+  const newProductInput = document.querySelector(`tfoot tr td input[type="text"]`);
+  const newPriceInput = document.querySelector(`tfoot tr td input[type="number"]`);
+
+  const newProduct = newProductInput.value;
+  const newPrice = newPriceInput.value;
+
+  const newProductRow = document.createElement("tr");
+  newProductRow.classList.add("product");
+
+  newProductRow.innerHTML = `<td class="name">
+          <span>${newProduct}</span>
+        </td>
+        <td class="price">$<span>${newPrice}</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>`
+
+  document.querySelector("tbody").appendChild(newProductRow);
+
+  newProductInput.value = "";
+  newPriceInput.value = 0 ;
+
+  newProductRow.querySelector(".btn-remove").addEventListener("click", removeProduct);
 }
 
 window.addEventListener('load', () => {
@@ -39,4 +104,12 @@ window.addEventListener('load', () => {
   calculatePricesBtn.addEventListener('click', calculateAll);
 
   //... your code goes here
+
+  const removeProductBtn = document.querySelectorAll(".btn-remove");
+  removeProductBtn.forEach(element => {
+    element.addEventListener("click", removeProduct)
+  });
+
+  const newProductBtn = document.querySelector("#create");
+  newProductBtn.addEventListener("click", createProduct)
 });

From 6e52666bfaa7f1829380a264d70e3d29776117db Mon Sep 17 00:00:00 2001
From: FranRevi8 <fcorevidiego@gmail.com>
Date: Fri, 21 Jun 2024 09:22:04 +0200
Subject: [PATCH 2/2] debugged

---
 src/index.js | 55 +++++++++++++++++++++++++++++-----------------------
 1 file changed, 31 insertions(+), 24 deletions(-)

diff --git a/src/index.js b/src/index.js
index c63708f76..ace149350 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,15 +1,15 @@
 // ITERATION 1
 
 function updateSubtotal(product) {
-  console.log('Calculating subtotal, yey!');
+  console.log("Calculating subtotal, yey!");
 
   //... your code goes here
   let priceElement = product.querySelector(".price span");
   let quantityElement = product.querySelector(".quantity input");
-  
+
   let price = priceElement.innerText;
   let quantity = quantityElement.value;
-  
+
   let subtotalPrice = price * quantity;
 
   let subtotalElement = product.querySelector(".subtotal span");
@@ -35,34 +35,35 @@ function calculateAll() {
   // ITERATION 3
   //... your code goes here
 
-  let total = 0
+  let total = 0;
 
-  for(let i = 0; i <products.length; i++){
-    let subtotal = Number(products[i].querySelector('.subtotal span').innerText);
-    total += subtotal
+  for (let i = 0; i < products.length; i++) {
+    let subtotal = Number(
+      products[i].querySelector(".subtotal span").innerText
+    );
+    total += subtotal;
   }
 
   let totalElement = document.querySelector("#total-value span");
-  totalElement.innerText = total
+  totalElement.innerText = total;
 }
 
 // ITERATION 4
 
 function removeProduct(event) {
   const target = event.currentTarget;
-  console.log('The target in remove is:', target);
+  console.log("The target in remove is:", target);
   //... your code goes here
   const buttonClicked = target;
   const productElement = buttonClicked.closest(".product");
   let totalPrice = document.querySelector("#total-value span");
-  let productSubtotal = productElement.querySelector(".subtotal span")
+  let productSubtotal = productElement.querySelector(".subtotal span");
 
   newPrice = Number(totalPrice.innerText) - Number(productSubtotal.innerText);
 
-  totalPrice.innerText = newPrice
-
-  productElement.innerHTML = "";
+  totalPrice.innerText = newPrice;
 
+  productElement.remove();
 }
 
 // ITERATION 5
@@ -70,8 +71,12 @@ function removeProduct(event) {
 function createProduct() {
   //... your code goes here
 
-  const newProductInput = document.querySelector(`tfoot tr td input[type="text"]`);
-  const newPriceInput = document.querySelector(`tfoot tr td input[type="number"]`);
+  const newProductInput = document.querySelector(
+    `tfoot tr td input[type="text"]`
+  );
+  const newPriceInput = document.querySelector(
+    `tfoot tr td input[type="number"]`
+  );
 
   const newProduct = newProductInput.value;
   const newPrice = newPriceInput.value;
@@ -89,27 +94,29 @@ function createProduct() {
         <td class="subtotal">$<span>0</span></td>
         <td class="action">
           <button class="btn btn-remove">Remove</button>
-        </td>`
+        </td>`;
 
   document.querySelector("tbody").appendChild(newProductRow);
 
   newProductInput.value = "";
-  newPriceInput.value = 0 ;
+  newPriceInput.value = 0;
 
-  newProductRow.querySelector(".btn-remove").addEventListener("click", removeProduct);
+  newProductRow
+    .querySelector(".btn-remove")
+    .addEventListener("click", removeProduct);
 }
 
-window.addEventListener('load', () => {
-  const calculatePricesBtn = document.getElementById('calculate');
-  calculatePricesBtn.addEventListener('click', calculateAll);
+window.addEventListener("load", () => {
+  const calculatePricesBtn = document.getElementById("calculate");
+  calculatePricesBtn.addEventListener("click", calculateAll);
 
   //... your code goes here
 
   const removeProductBtn = document.querySelectorAll(".btn-remove");
-  removeProductBtn.forEach(element => {
-    element.addEventListener("click", removeProduct)
+  removeProductBtn.forEach((element) => {
+    element.addEventListener("click", removeProduct);
   });
 
   const newProductBtn = document.querySelector("#create");
-  newProductBtn.addEventListener("click", createProduct)
+  newProductBtn.addEventListener("click", createProduct);
 });