From 60e13946b79cd2d908838e4a34b4dc4583d04151 Mon Sep 17 00:00:00 2001 From: IanNgacha Date: Fri, 26 Jul 2024 12:37:47 +0300 Subject: [PATCH 1/2] Solved lab --- index.html | 9 ++-- js/index.js | 120 +++++++++++++++++++++++++++++++++++++++++++++------- 2 files changed, 109 insertions(+), 20 deletions(-) diff --git a/index.html b/index.html index 752a993..824c68e 100644 --- a/index.html +++ b/index.html @@ -35,20 +35,21 @@

Root Cart

- + +

diff --git a/js/index.js b/js/index.js index 75405d6..c46998f 100644 --- a/js/index.js +++ b/js/index.js @@ -1,39 +1,127 @@ // ITERATION 1 - function updateSubtotal(product) { console.log('Calculating subtotal, yey!'); - //... your code goes here + // Get the price element + const priceElement = product.querySelector('.price span'); + // Get the quantity input element + const quantityElement = product.querySelector('.quantity input'); + + // Extract the values from the DOM elements + const price = parseFloat(priceElement.innerHTML); + const quantity = parseInt(quantityElement.value); + + // Calculate the subtotal price + const subtotal = price * quantity; + + // Get the DOM element that should hold the subtotal + const subtotalElement = product.querySelector('.subtotal span'); + + // Set the subtotal price to the corresponding DOM element + subtotalElement.innerHTML = subtotal.toFixed(2); + + // Return the subtotal value + 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 + // Get all product rows + const products = document.querySelectorAll('.product'); - // ITERATION 2 - //... your code goes here + // Initialize total value + let total = 0; - // ITERATION 3 - //... your code goes here + // Loop through each product and update subtotal + products.forEach(product => { + total += updateSubtotal(product); + }); + + // Update the total value in the DOM + const totalValueElement = document.querySelector('#total-value span'); + totalValueElement.innerHTML = total.toFixed(2); } -// ITERATION 4 +// Add event listener to the "Calculate Prices" button +const calculateButton = document.getElementById('calculate'); +calculateButton.addEventListener('click', calculateAll); +// ITERATION 4: Removing Products function removeProduct(event) { const target = event.currentTarget; - console.log('The target in remove is:', target); - //... your code goes here + + // Get the product row + const productRow = target.closest('.product'); + + // Remove the product row from the DOM + productRow.parentNode.removeChild(productRow); + + // Recalculate the total price after removal + calculateAll(); +} + +// Add event listeners to all "Remove" buttons +function setupRemoveButtons() { + // Get all remove buttons + const removeButtons = document.querySelectorAll('.btn-remove'); + + // Loop through each remove button and add the click event listener + removeButtons.forEach(button => { + button.addEventListener('click', removeProduct); + }); } -// ITERATION 5 +// Set up the remove buttons on page load +setupRemoveButtons(); +// ITERATION 5: Adding New Products function createProduct() { - //... your code goes here + // Get the values from the input fields + const nameInput = document.getElementById('new-product-name'); + const priceInput = document.getElementById('new-product-price'); + + const name = nameInput.value; + const price = parseFloat(priceInput.value); + + // Check for valid input + if (!name || isNaN(price) || price <= 0) { + alert('Please enter a valid product name and price.'); + return; + } + + // Create a new product row + const newRow = document.createElement('tr'); + newRow.classList.add('product'); + newRow.innerHTML = ` + + ${name} + + $${price.toFixed(2)} + + + + $0 + + + + `; + + // Append the new row to the table body + const tbody = document.querySelector('#cart tbody'); + tbody.appendChild(newRow); + + // Clear the input fields + nameInput.value = ''; + priceInput.value = 0; + + // Set up the remove button for the new row + setupRemoveButtons(); } +// Add event listener to the "Create Product" button +const createButton = document.getElementById('create'); +createButton.addEventListener('click', createProduct); + + window.addEventListener('load', () => { const calculatePricesBtn = document.getElementById('calculate'); calculatePricesBtn.addEventListener('click', calculateAll); From ebe6ca666c20ce5ac0bb6a4e32928166eb87574c Mon Sep 17 00:00:00 2001 From: IanNgacha Date: Fri, 26 Jul 2024 12:41:14 +0300 Subject: [PATCH 2/2] Solved lab --- js/index.js | 38 +++++--------------------------------- 1 file changed, 5 insertions(+), 33 deletions(-) diff --git a/js/index.js b/js/index.js index c46998f..b808b87 100644 --- a/js/index.js +++ b/js/index.js @@ -2,93 +2,71 @@ function updateSubtotal(product) { console.log('Calculating subtotal, yey!'); - // Get the price element const priceElement = product.querySelector('.price span'); - // Get the quantity input element + const quantityElement = product.querySelector('.quantity input'); - // Extract the values from the DOM elements const price = parseFloat(priceElement.innerHTML); const quantity = parseInt(quantityElement.value); - // Calculate the subtotal price const subtotal = price * quantity; - // Get the DOM element that should hold the subtotal const subtotalElement = product.querySelector('.subtotal span'); - // Set the subtotal price to the corresponding DOM element subtotalElement.innerHTML = subtotal.toFixed(2); - // Return the subtotal value return subtotal; } function calculateAll() { - // Get all product rows const products = document.querySelectorAll('.product'); - // Initialize total value let total = 0; - // Loop through each product and update subtotal - products.forEach(product => { + products.forEach((product) => { total += updateSubtotal(product); }); - // Update the total value in the DOM const totalValueElement = document.querySelector('#total-value span'); totalValueElement.innerHTML = total.toFixed(2); } -// Add event listener to the "Calculate Prices" button const calculateButton = document.getElementById('calculate'); calculateButton.addEventListener('click', calculateAll); // ITERATION 4: Removing Products function removeProduct(event) { const target = event.currentTarget; - - // Get the product row + const productRow = target.closest('.product'); - // Remove the product row from the DOM productRow.parentNode.removeChild(productRow); - // Recalculate the total price after removal calculateAll(); } -// Add event listeners to all "Remove" buttons function setupRemoveButtons() { - // Get all remove buttons const removeButtons = document.querySelectorAll('.btn-remove'); - - // Loop through each remove button and add the click event listener - removeButtons.forEach(button => { + removeButtons.forEach((button) => { button.addEventListener('click', removeProduct); }); } -// Set up the remove buttons on page load setupRemoveButtons(); // ITERATION 5: Adding New Products function createProduct() { - // Get the values from the input fields const nameInput = document.getElementById('new-product-name'); const priceInput = document.getElementById('new-product-price'); - + const name = nameInput.value; const price = parseFloat(priceInput.value); - // Check for valid input if (!name || isNaN(price) || price <= 0) { alert('Please enter a valid product name and price.'); return; } - // Create a new product row const newRow = document.createElement('tr'); newRow.classList.add('product'); newRow.innerHTML = ` @@ -104,24 +82,18 @@ function createProduct() { `; - - // Append the new row to the table body const tbody = document.querySelector('#cart tbody'); tbody.appendChild(newRow); - // Clear the input fields nameInput.value = ''; priceInput.value = 0; - // Set up the remove button for the new row setupRemoveButtons(); } -// Add event listener to the "Create Product" button const createButton = document.getElementById('create'); createButton.addEventListener('click', createProduct); - window.addEventListener('load', () => { const calculatePricesBtn = document.getElementById('calculate'); calculatePricesBtn.addEventListener('click', calculateAll);