+
+
+
+
+
+
diff --git a/js/index.js b/js/index.js
index 75405d6..701e7ea 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,42 +1,79 @@
-// ITERATION 1
-
+// Function to update the subtotal of a product
function updateSubtotal(product) {
- console.log('Calculating subtotal, yey!');
+ const price = product.querySelector('.price span').innerText;
+ const quantity = product.querySelector('.quantity input').value;
+ const subtotal = parseFloat(price) * parseInt(quantity);
+
+ const subtotalElement = product.querySelector('.subtotal span');
+ subtotalElement.innerText = subtotal.toFixed(2);
- //... your code goes here
+ return subtotal;
}
+// Function to calculate the total of all products
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.getElementsByClassName('product');
+ let total = 0;
- // ITERATION 2
- //... your code goes here
+ for (let product of products) {
+ total += updateSubtotal(product);
+ }
- // ITERATION 3
- //... your code goes here
+ document.getElementById('total').innerText = total.toFixed(2);
}
-// ITERATION 4
-
+// Function to remove a product from the cart
function removeProduct(event) {
- const target = event.currentTarget;
- console.log('The target in remove is:', target);
- //... your code goes here
+ const productRow = event.currentTarget.parentNode.parentNode;
+ productRow.remove();
+ calculateAll(); // Update total after removing a product
}
-// ITERATION 5
+// Function to create a new product row and append to the table
+function addProduct(event) {
+ event.preventDefault();
+
+ const nameInput = document.getElementById('product-name');
+ const priceInput = document.getElementById('product-price');
+
+ const productName = nameInput.value;
+ const productPrice = parseFloat(priceInput.value).toFixed(2);
+
+ const tableBody = document.querySelector('#cart tbody');
+
+ const newRow = document.createElement('tr');
+ newRow.classList.add('product');
+
+ newRow.innerHTML = `
+
${productName}
+
$${productPrice}
+
+
$0
+
+ `;
+
+ // Add the new product row to the cart
+ tableBody.appendChild(newRow);
-function createProduct() {
- //... your code goes here
+ // Add event listener for the new remove button
+ newRow.querySelector('.btn-remove').addEventListener('click', removeProduct);
+
+ // Clear input fields after adding
+ nameInput.value = '';
+ priceInput.value = '';
}
+// Setup event listeners on page load
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);
+ });
+
+ // Event listener for adding new products
+ const addProductForm = document.getElementById('add-product-form');
+ addProductForm.addEventListener('submit', addProduct);
});