Solved lab Valeria

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">
+      <!-- <tfoot>
+        <tr class="create-product">
           <td>
             <input type="text" placeholder="Product Name" />
           </td>
@@ -47,8 +60,8 @@ <h1>Ironhack Cart</h1>
           <td>
             <button id="create" class="btn">Create Product</button>
           </td>
-        </tr> -->
-      </tfoot>
+        </tr>
+      </tfoot> -->
     </table>
     <p class="calculate-total">
       <button id="calculate" class="btn btn-success">Calculate Prices</button>

src/index.js

@@ -1,23 +1,55 @@
 // ITERATION 1
 
 function updateSubtotal(product) {
-  console.log('Calculating subtotal, yey!');
+  // console.log('Calculating subtotal, yey!');
+  const price = product.querySelector('.price span');
+  const quantity = product.querySelector('.quantity input');
 
   //... your code goes here
+
+  const valueOfPrice = Number(price.innerHTML);
+  console.log(valueOfPrice);
+
+  const valueOfQuantity = Number(quantity.value);
+  console.log(valueOfQuantity);
+
+
+  let subtotalPrice = 0;
+  if (valueOfPrice === valueOfPrice && valueOfQuantity === valueOfQuantity) {
+    subtotalPrice = valueOfPrice * valueOfQuantity;
+  } 
+  else {
+    return 0;
+  }
+  const subtotalElement = product.querySelector('.subtotal span');
+  subtotalElement.innerHTML = subtotalPrice;
+  return 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 productElements = document.getElementsByClassName("product");
+
+  let totalPrice = 0;
+
+  for (let i = 0; i < productElements.length; i++) {
+    const oneProduct = productElements[i];
+    console.log(oneProduct);
+    let productTotal = updateSubtotal(oneProduct);
+    totalPrice += productTotal;
+  }
 
   // ITERATION 3
   //... your code goes here
+  let totalPriceElement = document.querySelector("#total-value span");
+  totalPriceElement.textContent = totalPrice; 
 }
 
 // ITERATION 4