Solved lab

js/index.js

@@ -1,42 +1,68 @@
-// ITERATION 1
-
 function updateSubtotal(product) {
-  console.log('Calculating subtotal, yey!');
+  const priceElement = product.querySelector('.price span');
+  const quantityElement = product.querySelector('.quantity input');
+
+  const price = parseFloat(priceElement.textContent);
+  const quantity = parseInt(quantityElement.value);
+
+  const subtotal = price * quantity;
 
-  //... your code goes here
+  const subtotalElement = product.querySelector('.subtotal span');
+  subtotalElement.textContent = subtotal.toFixed(2);
+
+  return subtotal;
 }
 
 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.querySelectorAll('.product');
+  let total = 0;
 
-  // ITERATION 2
-  //... your code goes here
+  products.forEach(product => {
+    total += updateSubtotal(product);
+  });
 
-  // ITERATION 3
-  //... your code goes here
+  const totalElement = document.querySelector('#total-value span');
+  totalElement.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 productRow = event.target.parentNode.parentNode;
+  productRow.parentNode.removeChild(productRow);
+  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 name = nameInput.value;
+  const price = parseFloat(priceInput.value);
+
+  const newProductRow = document.createElement('tr');
+  newProductRow.className = 'product';
+  newProductRow.innerHTML = `
+    <td><span>${name}</span></td>
+    <td>$<span>${price.toFixed(2)}</span></td>
+    <td><input type="number" value="0" min="0" placeholder="Quantity"></td>
+    <td>$<span>0</span></td>
+    <td><button class="btn btn-remove">Remove</button></td>
+  `;
+
+  document.querySelector('#cart tbody').appendChild(newProductRow);
+  nameInput.value = '';
+  priceInput.value = '';
+  calculateAll();
 }
 
 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 createButton = document.getElementById('create');
+  createButton.addEventListener('click', createProduct);
+});

package.json

@@ -7,12 +7,12 @@
     "test:watch": "jest --watchAll --verbose=false"
   },
   "devDependencies": {
-    "jest": "^26.6.3",
+    "jest": "^29.7.0",
     "jest-html-reporter": "^3.3.0",
     "jest-junit": "^12.0.0",
-    "jest-puppeteer": "^5.0.3",
+    "jest-puppeteer": "^10.1.1",
     "puppeteer": "^9.1.1",
-    "serve": "^11.3.2"
+    "serve": "^14.2.3"
   },
   "jest": {
     "preset": "jest-puppeteer",