From 784ab01418101d35b552dd246cbfa3703e4e2872 Mon Sep 17 00:00:00 2001 From: Nazaret Date: Tue, 12 Aug 2025 14:05:36 +0200 Subject: [PATCH 1/3] First iteration --- js/index.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/js/index.js b/js/index.js index 75405d6..82a9051 100644 --- a/js/index.js +++ b/js/index.js @@ -2,15 +2,27 @@ function updateSubtotal(product) { console.log('Calculating subtotal, yey!'); - - //... your code goes here + const price = product.querySelector('.price span') + const quantity = product.querySelector('.quantity input') + const subtotal = product.querySelector('.subtotal span') + + + let priceValue = parseFloat(price.textContent) + let quantityValue = parseFloat(quantity.value) + let result = priceValue * quantityValue + subtotal.textContent = result + + console.log(quantityValue) } + + 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 @@ -19,6 +31,7 @@ function calculateAll() { // ITERATION 3 //... your code goes here } +calculateAll() // ITERATION 4 From 817b8a8e96aa86ecadf1c17c8cdca344cd4e387b Mon Sep 17 00:00:00 2001 From: Nazaret Date: Tue, 12 Aug 2025 19:19:18 +0200 Subject: [PATCH 2/3] Second iteration --- index.html | 13 +++++++++++++ js/index.js | 15 +++++++++------ 2 files changed, 22 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 752a993..b3ddd2f 100644 --- a/index.html +++ b/index.html @@ -33,6 +33,19 @@

Root Cart

+ + + Rubber Rabbit + + $20.00 + + + + $0 + + + + - Rubber Rabbit + Root Rubber Duck $20.00 @@ -48,7 +48,7 @@

Root Cart

- +

diff --git a/js/index.js b/js/index.js index 2c7d9a6..bc55cfc 100644 --- a/js/index.js +++ b/js/index.js @@ -2,39 +2,42 @@ function updateSubtotal(product) { //console.log('Calculating subtotal, yey!'); - const price = product.querySelector('.price span') - const quantity = product.querySelector('.quantity input') - const subtotal = product.querySelector('.subtotal span') - + const price = product.querySelector('.price span'); + const quantity = product.querySelector('.quantity input'); + const subtotal = product.querySelector('.subtotal span'); - let priceValue = parseFloat(price.textContent) - let quantityValue = parseFloat(quantity.value) + let priceValue = parseFloat(price.textContent); + let quantityValue = parseFloat(quantity.value); - let result = priceValue * quantityValue - subtotal.textContent = result + let result = priceValue * quantityValue; + subtotal.textContent = result; + return result; } - - 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 const productRows = document.getElementsByClassName('product'); for (let product of productRows) { - updateSubtotal(product) + updateSubtotal(product); } // ITERATION 3 - //... your code goes here + const totalValue = document.querySelector('#total-value span'); + let counter = 0; + for (let product of productRows) { + counter += updateSubtotal(product); + } + totalValue.textContent = counter; } -calculateAll() +calculateAll(); // ITERATION 4 @@ -42,12 +45,70 @@ function removeProduct(event) { const target = event.currentTarget; console.log('The target in remove is:', target); //... your code goes here + const productRow = target.parentNode.parentNode; + productRow.parentNode.removeChild(productRow); + calculateAll(); } // ITERATION 5 function createProduct() { - //... your code goes here + const nameInput = document.querySelector('tfoot tr input[type="text"]'); + const priceInput = document.querySelector('tfoot tr input[type="number"]'); + + const nameValue = nameInput.value; + const priceValue = parseFloat(priceInput.value).toFixed(2); + + const tbody = document.querySelector('tbody'); + const tr = document.createElement('tr'); + tr.className = 'product'; + + const tdName = document.createElement('td'); + tdName.className = 'name'; + const spanName = document.createElement('span'); + spanName.textContent = nameValue; + tdName.appendChild(spanName); + tr.appendChild(tdName); + + const tdPrice = document.createElement('td'); + tdPrice.className = 'price'; + const spanPrice = document.createElement('span'); + spanPrice.textContent = priceValue; + tdPrice.appendChild(document.createTextNode('$')); + tdPrice.appendChild(spanPrice); + tr.appendChild(tdPrice); + + const tdQuantity = document.createElement('td'); + tdQuantity.className = 'quantity'; + const inputQuantity = document.createElement('input'); + inputQuantity.type = 'number'; + inputQuantity.value = 0; + inputQuantity.min = 0; + tdQuantity.appendChild(inputQuantity); + tr.appendChild(tdQuantity); + + const tdSubtotal = document.createElement('td'); + tdSubtotal.className = 'subtotal'; + const spanSubtotal = document.createElement('span'); + spanSubtotal.textContent = '0'; + tdSubtotal.appendChild(document.createTextNode('$')); + tdSubtotal.appendChild(spanSubtotal); + tr.appendChild(tdSubtotal); + + const tdAction = document.createElement('td'); + tdAction.className = 'action'; + const btnRemove = document.createElement('button'); + btnRemove.className = 'btn btn-remove'; + btnRemove.textContent = 'Remove'; + tdAction.appendChild(btnRemove); + tr.appendChild(tdAction); + + tbody.appendChild(tr); + + nameInput.value = ''; + priceInput.value = 0; + + btnRemove.addEventListener('click', removeProduct); } window.addEventListener('load', () => { @@ -55,4 +116,9 @@ window.addEventListener('load', () => { calculatePricesBtn.addEventListener('click', calculateAll); //... your code goes here + const removeBtns = document.querySelectorAll('.btn-remove'); + removeBtns.forEach((btn) => btn.addEventListener('click', removeProduct)); + + const btnCreate = document.getElementById('create'); + btnCreate.addEventListener('click', createProduct); });