Done!

index.html

@@ -17,8 +17,8 @@ <h1>Root Cart</h1>
           <th>Subtotal</th>
           <th>Action</th>
         </tr>
-      </thead>
-      <tbody>
+      </thead> 
+      <tbody id="cart-items">
         <tr class="product">
           <td class="name">
             <span>Root Rubber Duck</span>
@@ -32,22 +32,35 @@ <h1>Root Cart</h1>
             <button class="btn btn-remove">Remove</button>
           </td>
         </tr>
+        <tr class="product">
+          <td class="name">
+            <span>PC</span>
+          </td>
+          <td class="price">$<span>425.00</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 class="new-product" type="text" placeholder="Product Name" />
           </td>
           <td>
-            <input type="number" min="0" value="0" placeholder="Product Price" />
+            <input class="new-product-quantity" type="number" min="0" value="0" placeholder="Product Price" />
           </td>
           <td></td>
           <td></td>
           <td>
             <button id="create" class="btn">Create Product</button>
           </td>
-        </tr> -->
+        </tr> 
       </tfoot>
     </table>
     <p class="calculate-total">

js/index.js

@@ -1,42 +1,84 @@
 // ITERATION 1
 
 function updateSubtotal(product) {
-  console.log('Calculating subtotal, yey!');
+  const price = parseFloat(product.querySelector('.price span').textContent)
+  const quantity = parseInt(product.querySelector('.quantity input').value)
+
+  const total = price * quantity
+  const subtotal = product.querySelector('.subtotal span')
+  subtotal.textContent = total
+  return total
 
-  //... your code goes here
 }
 
 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 products = document.getElementsByClassName('product');
+  let total = 0
+  Array.from(products).forEach(product => {
+    updateSubtotal(product)
+    total += updateSubtotal(product)
+  });
+
   // ITERATION 3
-  //... your code goes here
+  let totalValue = document.querySelector('#total-value span')
+  totalValue.textContent = total
 }
 
 // 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')
+  // Total to discount
+  const price = parseFloat(product.querySelector('.price span').textContent)
+  const quantity = parseInt(product.querySelector('.quantity input').value)
+  const total = price * quantity
+  // Discount
+  const totalValue = document.querySelector('#total-value span')
+  totalValue.textContent -= total
+  // Remove
+  target.closest('.product').remove()
 }
 
 // ITERATION 5
 
 function createProduct() {
-  //... your code goes here
+  const newProduct = document.querySelector('.new-product').value
+  const newProductPrice = parseFloat(document.querySelector('.new-product-quantity').value)
+  // Adding product
+  const cart = document.querySelector('#cart-items')
+  const newProductElement = document.createElement('tr')
+  newProductElement.classList.add('product')
+  newProductElement.innerHTML = `<td class="name">
+            <span>${newProduct}</span>
+          </td>
+          <td class="price">$<span>${newProductPrice}.00</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(newProductElement)
+
+  const removeButton = newProductElement.querySelector('.btn-remove')
+  removeButton.addEventListener('click', removeProduct)
+
+  document.querySelector('.new-product').value = ''
+  document.querySelector('.new-product-quantity').value = 0
 }
 
 window.addEventListener('load', () => {
   const calculatePricesBtn = document.getElementById('calculate');
   calculatePricesBtn.addEventListener('click', calculateAll);
 
-  //... your code goes here
+  const removeProductBtn = document.querySelectorAll('.btn-remove')
+  Array.from(removeProductBtn).forEach(btn => {
+    btn.addEventListener('click', removeProduct)
+  })
+
+  const createProductBtn = document.querySelector('#create')
+  createProductBtn.addEventListener('click', createProduct)
 });