From 3e92f6177f4c73f3ed07ec4b4883572e00af07ec Mon Sep 17 00:00:00 2001 From: Pawan Rawat Date: Sun, 18 Aug 2024 22:26:25 +0530 Subject: [PATCH 1/3] Solved lab --- index.html | 17 ++++++++- js/index.js | 104 ++++++++++++++++++++++++++++++++++++++++++++++++++-- 2 files changed, 115 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 752a993..159f20b 100644 --- a/index.html +++ b/index.html @@ -32,10 +32,23 @@

Root Cart

+ + + SteelSeries Apex 3 RGB Gaming Keyboard + + $40.00 + + + + $0 + + + + - +

diff --git a/js/index.js b/js/index.js index 75405d6..e59b8f5 100644 --- a/js/index.js +++ b/js/index.js @@ -4,20 +4,36 @@ function updateSubtotal(product) { console.log('Calculating subtotal, yey!'); //... your code goes here + let price = Number(product.querySelector('.price span').innerText); + let quantity = Number(product.querySelector('.quantity input').value); + let subtotal = price * quantity; + product.querySelector('.subtotal span').innerText = subtotal; + + 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); + // const singleProduct = document.querySelector('.product'); + // updateSubtotal(singleProduct); // end of test // ITERATION 2 //... your code goes here - + let products = document.getElementsByClassName('product'); + for (let i = 0; i < products.length; i++) { + updateSubtotal(products[i]); + } // ITERATION 3 //... your code goes here + + let total = 0; + for (let i = 0; i < products.length; i++) { + total += Number(products[i].querySelector('.subtotal span').innerHTML); + } + document.querySelector('#total-value span').innerHTML = total; } // ITERATION 4 @@ -26,14 +42,94 @@ function removeProduct(event) { const target = event.currentTarget; console.log('The target in remove is:', target); //... your code goes here + let targetProduct = target.parentNode.parentNode; + let targetCart = targetProduct.parentNode; + console.log(targetCart); + document.querySelector('#total-value span').innerHTML = + Number(document.querySelector('#total-value span').innerHTML) - + Number(targetProduct.querySelector('.subtotal span').innerHTML); + targetCart.removeChild(targetProduct); } // ITERATION 5 -function createProduct() { +function createProduct(event) { //... your code goes here + let target = event.currentTarget; + let parentTarget = target.parentNode.parentNode; + let proName = parentTarget + .getElementsByTagName('td')[0] + .getElementsByTagName('input')[0].value; + let price = parseFloat( + parentTarget.getElementsByTagName('td')[1].getElementsByTagName('input')[0] + .value + ).toFixed(2); + + let nameHolder = document.createElement('td'); + let nameTag = document.createElement('span'); + let nameText = document.createTextNode(proName); + nameTag.appendChild(nameText); + nameHolder.appendChild(nameTag); + nameHolder.className = 'name'; + + let priceHolder = document.createElement('td'); + priceHolder.innerHTML = '$'; + let priceTag = document.createElement('span'); + let priceText = document.createTextNode(price); + priceTag.appendChild(priceText); + priceHolder.appendChild(priceTag); + priceHolder.className = 'price'; + + let quantityHolder = document.createElement('td'); + let qInput = document.createElement('input'); + qInput.type = 'number'; + qInput.defaultValue = '0'; + qInput.min = '0'; + qInput.placeholder = 'Quantity'; + quantityHolder.appendChild(qInput); + quantityHolder.className = 'quantity'; + + let subtotalHolder = document.createElement('td'); + subtotalHolder.innerHTML = '$'; + let subtotalTag = document.createElement('span'); + subtotalTag.innerHTML = 0; + subtotalHolder.appendChild(subtotalTag); + subtotalHolder.className = 'subtotal'; + + let actionHolder = document.createElement('td'); + let buttonTag = document.createElement('button'); + buttonTag.innerHTML = 'Remove'; + actionHolder.appendChild(buttonTag); + actionHolder.className = 'action'; + buttonTag.className = 'btn btn-remove'; + buttonTag.addEventListener('click', removeProduct); + + let productHolder = document.createElement('tr'); + productHolder.appendChild(nameHolder); + productHolder.appendChild(priceHolder); + productHolder.appendChild(quantityHolder); + productHolder.appendChild(subtotalHolder); + productHolder.appendChild(actionHolder); + productHolder.className = 'product'; + + let prodList = document.getElementsByTagName('tbody')[0]; + prodList.appendChild(productHolder); } +window.addEventListener('load', () => { + const calculatePricesBtn = document.getElementById('calculate'); + calculatePricesBtn.addEventListener('click', calculateAll); + + //... your code goes here + let removeBtns = document.getElementsByClassName('btn-remove'); + for (let i = 0; i < removeBtns.length; i++) { + removeBtns[i].addEventListener('click', removeProduct); + } + + let createBtn = document.getElementById('create'); + createBtn.addEventListener('click', createProduct); +}); + window.addEventListener('load', () => { const calculatePricesBtn = document.getElementById('calculate'); calculatePricesBtn.addEventListener('click', calculateAll); From 824cacac2bf5224878af9824ee3b1c3fb1c54b16 Mon Sep 17 00:00:00 2001 From: Pawan Rawat Date: Sun, 18 Aug 2024 22:41:04 +0530 Subject: [PATCH 2/3] Solved lab --- js/index.js | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/js/index.js b/js/index.js index e59b8f5..8cdf68f 100644 --- a/js/index.js +++ b/js/index.js @@ -21,14 +21,11 @@ function calculateAll() { // end of test // ITERATION 2 - //... your code goes here let products = document.getElementsByClassName('product'); for (let i = 0; i < products.length; i++) { updateSubtotal(products[i]); } // ITERATION 3 - //... your code goes here - let total = 0; for (let i = 0; i < products.length; i++) { total += Number(products[i].querySelector('.subtotal span').innerHTML); @@ -37,11 +34,9 @@ function calculateAll() { } // ITERATION 4 - function removeProduct(event) { const target = event.currentTarget; console.log('The target in remove is:', target); - //... your code goes here let targetProduct = target.parentNode.parentNode; let targetCart = targetProduct.parentNode; console.log(targetCart); @@ -52,9 +47,7 @@ function removeProduct(event) { } // ITERATION 5 - function createProduct(event) { - //... your code goes here let target = event.currentTarget; let parentTarget = target.parentNode.parentNode; let proName = parentTarget @@ -120,7 +113,6 @@ window.addEventListener('load', () => { const calculatePricesBtn = document.getElementById('calculate'); calculatePricesBtn.addEventListener('click', calculateAll); - //... your code goes here let removeBtns = document.getElementsByClassName('btn-remove'); for (let i = 0; i < removeBtns.length; i++) { removeBtns[i].addEventListener('click', removeProduct); @@ -129,10 +121,3 @@ window.addEventListener('load', () => { let createBtn = document.getElementById('create'); createBtn.addEventListener('click', createProduct); }); - -window.addEventListener('load', () => { - const calculatePricesBtn = document.getElementById('calculate'); - calculatePricesBtn.addEventListener('click', calculateAll); - - //... your code goes here -}); From e4104212f1568b61546df27a6c3205854a99e5fd Mon Sep 17 00:00:00 2001 From: Pawan Rawat Date: Sun, 18 Aug 2024 22:48:39 +0530 Subject: [PATCH 3/3] Solved lab --- js/index.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/js/index.js b/js/index.js index 8cdf68f..4ddabf7 100644 --- a/js/index.js +++ b/js/index.js @@ -2,15 +2,11 @@ function updateSubtotal(product) { console.log('Calculating subtotal, yey!'); - - //... your code goes here let price = Number(product.querySelector('.price span').innerText); let quantity = Number(product.querySelector('.quantity input').value); let subtotal = price * quantity; product.querySelector('.subtotal span').innerText = subtotal; - return subtotal; - } function calculateAll() {