Solved lab

css/style.css

@@ -1,10 +1,10 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap');
+@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,700&display=swap");
 
 body {
   margin: 0 auto;
   padding: 1em;
   max-width: 60em;
-  font-family: 'Roboto Mono', sans-serif;
+  font-family: "Roboto Mono", sans-serif;
   line-height: 1.5;
   color: #2d354c;
 }
@@ -36,7 +36,7 @@ table input {
   border: 1px solid #dadada;
 }
 
-table input[type='number'] {
+table input[type="number"] {
   max-width: 4em;
 }
 
@@ -53,7 +53,7 @@ table input[type='number'] {
 }
 
 .btn-success {
-  background-color: #2cc5fa;
+  background-color: #9ed387;
 }
 
 .btn-remove {
@@ -65,3 +65,7 @@ h2,
 .calculate-total {
   text-align: center;
 }
+
+#create {
+  background-color: rgb(139, 213, 215);
+}

index.html

@@ -32,22 +32,39 @@ <h1>Ironhack Cart</h1>
             <button class="btn btn-remove">Remove</button>
           </td>
         </tr>
-        <!-- Iteration 2: Add more products here -->
+        <tr class="product">
+          <td class="name">
+            <span>IronHack T-Shirt</span>
+          </td>
+          <td class="price">$<span>12.99</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>
           <td>
-            <input type="number" min="0" value="0" placeholder="Product Price" />
+            <input
+              type="number"
+              min="0"
+              value="0"
+              placeholder="Product Price" />
           </td>
           <td></td>
           <td></td>
           <td>
-            <button id="create" class="btn">Create Product</button>
+            <button id="create" class="btn">Create</button>
           </td>
-        </tr> -->
+        </tr>
       </tfoot>
     </table>
     <p class="calculate-total">

src/index.js

@@ -1,42 +1,96 @@
-// ITERATION 1
-
 function updateSubtotal(product) {
-  console.log('Calculating subtotal, yey!');
-
-  //... your code goes here
+  const price = parseFloat(product.querySelector(".price span").textContent);
+  const quantity =
+    parseInt(product.querySelector(".quantity input").value) || 0;
+  let subtotalValue = price * quantity;
+  let subtotalElement = product.querySelector(".subtotal span");
+  subtotalElement.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
-
-  // ITERATION 2
-  //... your code goes here
+  const allProducts = document.getElementsByClassName("product");
+  let totalValue = 0;
 
-  // ITERATION 3
-  //... your code goes here
+  for (let i = 0; i < allProducts.length; i++) {
+    totalValue += updateSubtotal(allProducts[i]);
+  }
+  calculateTotal(totalValue);
 }
 
-// ITERATION 4
+function calculateTotal(totalValue) {
+  let totalElement = document.getElementById("total-value");
+  totalElement.textContent = `Total: $${totalValue.toFixed(2)}`;
+}
 
 function removeProduct(event) {
   const target = event.currentTarget;
-  console.log('The target in remove is:', target);
-  //... your code goes here
-}
+  const trElement = target.closest(".product");
 
-// ITERATION 5
+  if (trElement) {
+    trElement.remove();
+    calculateAll();
+  }
+}
 
 function createProduct() {
-  //... your code goes here
+  const newProductName = document.querySelector('input[type="text"]').value;
+  const priceInput = document.querySelector(
+    'input[type="number"][placeholder="Product Price"]'
+  );
+  const newProductPrice = parseFloat(priceInput.value);
+
+  const tbody = document.getElementsByTagName("tbody")[0];
+  const productElement = document.createElement("tr");
+  productElement.className = "product";
+  productElement.innerHTML = `
+    <td class="name"><span>${newProductName}</span></td>
+    <td class="price">$<span>${newProductPrice.toFixed(2)}</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>
+  `;
+
+  tbody.appendChild(productElement);
+
+  document.querySelector('input[type="text"]').value = "";
+  priceInput.value = "";
+
+  const quantityInput = productElement.querySelector(".quantity input");
+  const removeBtn = productElement.querySelector(".btn-remove");
+
+  quantityInput.addEventListener("input", () => {
+    updateSubtotal(productElement);
+    calculateAll();
+  });
+
+  removeBtn.addEventListener("click", removeProduct);
+
+  calculateAll();
 }
 
-window.addEventListener('load', () => {
-  const calculatePricesBtn = document.getElementById('calculate');
-  calculatePricesBtn.addEventListener('click', calculateAll);
+window.addEventListener("load", () => {
+  const calculatePricesBtn = document.getElementById("calculate");
+  const createProductBtn = document.getElementById("create");
 
-  //... your code goes here
+  calculatePricesBtn.addEventListener("click", calculateAll);
+  createProductBtn.addEventListener("click", createProduct);
+
+  attachEventListenersToProducts();
 });
+
+function attachEventListenersToProducts() {
+  const allProducts = document.getElementsByClassName("product");
+
+  for (let product of allProducts) {
+    const quantityInput = product.querySelector(".quantity input");
+    const removeBtn = product.querySelector(".btn-remove");
+
+    quantityInput.addEventListener("input", () => {
+      updateSubtotal(product);
+      calculateAll();
+    });
+
+    removeBtn.addEventListener("click", removeProduct);
+  }
+}