diff --git a/index.html b/index.html
index 752a993..7846ca4 100644
--- a/index.html
+++ b/index.html
@@ -29,7 +29,7 @@
Root Cart
$0 |
-
+
|
diff --git a/js/index.js b/js/index.js
index 75405d6..e11545a 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,8 +2,12 @@
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);
+ const subtotal = price * quantity;
+ const subtotalElement = product.querySelector('.subtotal span');
+ subtotalElement.textContent = subtotal.toFixed(2);
+ return subtotal;
}
function calculateAll() {
@@ -14,29 +18,61 @@ function calculateAll() {
// end of test
// ITERATION 2
- //... your code goes here
+ const products = document.querySelectorAll('.product');
+ let total = 0;
// ITERATION 3
- //... your code goes here
+ products.forEach((product) => {
+ total += updateSubtotal(product);
+ });
+
+ document.querySelector('#total-value span').textContent = total.toFixed(2);
}
// ITERATION 4
+function addRemoveEventListeners() {
+ const removeButtons = document.querySelectorAll('.btn-remove');
+ removeButtons.forEach((button) => {
+ button.addEventListener('click', removeProduct);
+ });
+}
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.parentNode.removeChild(productRow);
+ calculateAll();
}
// ITERATION 5
function createProduct() {
- //... your code goes here
+ const nameInput = document.querySelector('.create-product input[type="text"]');
+ const priceInput = document.querySelector('.create-product input[type="number"]');
+
+ const name = nameInput.value;
+ const price = parseFloat(priceInput.value).toFixed(2);
+ const tableBody = document.querySelector('#cart tbody');
+ const newRow = document.createElement('tr');
+ newRow.classList.add('product');
+ newRow.innerHTML = `
+ ${name} |
+ $${price} |
+ |
+ $0 |
+ |
+ `;
+ tableBody.appendChild(newRow);
+ const removeButton = newRow.querySelector('.btn-remove');
+ removeButton.addEventListener('click', removeProduct);
+ nameInput.value = '';
+ priceInput.value = 0;
}
window.addEventListener('load', () => {
const calculatePricesBtn = document.getElementById('calculate');
calculatePricesBtn.addEventListener('click', calculateAll);
+ addRemoveEventListeners();
- //... your code goes here
+ const createProductBtn = document.getElementById('create');
+ createProductBtn.addEventListener('click', createProduct);
});
diff --git a/package.json b/package.json
index b1a8c31..89eed13 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
"jest-html-reporter": "^3.3.0",
"jest-junit": "^12.0.0",
"jest-puppeteer": "^5.0.3",
- "puppeteer": "^9.1.1",
+ "puppeteer": "^23.4.0",
"serve": "^11.3.2"
},
"jest": {