From 69d15948d496fd727242761887aa366422b7ddd8 Mon Sep 17 00:00:00 2001
From: BrotherlyHamlet16 <80749000+Clever-Niwagaba@users.noreply.github.com>
Date: Thu, 31 Oct 2024 13:01:49 +0300
Subject: [PATCH 1/2] Solved Lab
---
index.html | 131 +++++++++++++++++++++++++++++------------------------
1 file changed, 72 insertions(+), 59 deletions(-)
diff --git a/index.html b/index.html
index 752a993..e6cec27 100644
--- a/index.html
+++ b/index.html
@@ -1,59 +1,72 @@
-
-
-
-
-
-
- Root Cart
-
-
- Root Cart
-
-
-
-
- Total: $0
-
-
-
+
+
+
+
+
+
+ Root Cart
+
+
+ Root Cart
+
+
+
+
+ Total: $0
+
+
+
From 4b1cbf22d0f190ccfa1959b6cfbd8ec25abeec47 Mon Sep 17 00:00:00 2001
From: BrotherlyHamlet16 <80749000+Clever-Niwagaba@users.noreply.github.com>
Date: Thu, 31 Oct 2024 13:02:27 +0300
Subject: [PATCH 2/2] Solved lab
---
js/index.js | 129 +++++++++++++++++++++++++++++++++++-----------------
1 file changed, 87 insertions(+), 42 deletions(-)
diff --git a/js/index.js b/js/index.js
index 75405d6..a941d3c 100644
--- a/js/index.js
+++ b/js/index.js
@@ -1,42 +1,87 @@
-// ITERATION 1
-
-function updateSubtotal(product) {
- console.log('Calculating subtotal, yey!');
-
- //... 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
-
- // ITERATION 3
- //... your code goes here
-}
-
-// ITERATION 4
-
-function removeProduct(event) {
- const target = event.currentTarget;
- console.log('The target in remove is:', target);
- //... your code goes here
-}
-
-// ITERATION 5
-
-function createProduct() {
- //... your code goes here
-}
-
-window.addEventListener('load', () => {
- const calculatePricesBtn = document.getElementById('calculate');
- calculatePricesBtn.addEventListener('click', calculateAll);
-
- //... your code goes here
-});
+// 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);
+ const subtotal = price * quantity;
+ 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
+
+ // 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);
+});