From 16b01ab4498d477f936041911b9ccf553a8c7105 Mon Sep 17 00:00:00 2001 From: saqhibbilal Date: Tue, 5 Nov 2024 02:50:37 +0530 Subject: [PATCH] Solved Lab --- css/style.css | 2 +- index.html | 117 ++++++++++++++++++++++++++++---------------------- js/index.js | 72 ++++++++++++++++++++++++------- 3 files changed, 123 insertions(+), 68 deletions(-) diff --git a/css/style.css b/css/style.css index 30d6e01..1cdf277 100644 --- a/css/style.css +++ b/css/style.css @@ -64,4 +64,4 @@ h1, h2, .calculate-total { text-align: center; -} +} \ No newline at end of file diff --git a/index.html b/index.html index 752a993..94b29f1 100644 --- a/index.html +++ b/index.html @@ -1,59 +1,74 @@ - - - - + + + Root Cart - - + + +

Root Cart

+ + - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + +
Product NameUnit PriceQuantitySubtotalAction
- Root Rubber Duck - $25.00 - - $0 - -
Product NameUnit PriceQuantitySubtotalAction
+ Root Rubber Duck + $25.00 + + $0 + +
+ Root T-shirt + $15.00 + + $0 + +

- + +

Total: $0

-

Total: $0

- - - + + +

Add a new product

+
+ + + + + + + +
+ + + + + + \ No newline at end of file diff --git a/js/index.js b/js/index.js index 75405d6..265a80a 100644 --- a/js/index.js +++ b/js/index.js @@ -2,41 +2,81 @@ function updateSubtotal(product) { console.log('Calculating subtotal, yey!'); + const price = product.querySelector('.price span').innerText; + const quantity = product.querySelector('.quantity input').value; + const subtotal = parseFloat(price) * parseInt(quantity); + + const subtotalElement = product.querySelector('.subtotal span'); + subtotalElement.innerText = subtotal.toFixed(2); + + return subtotal; - //... 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 + const products = document.getElementsByClassName('product'); + let total = 0; - // ITERATION 2 - //... your code goes here + for (let product of products) { + total += updateSubtotal(product); + } - // ITERATION 3 - //... your code goes here + document.getElementById('total').innerText = total.toFixed(2); } // ITERATION 4 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.remove(); + calculateAll(); // Update total after removing a product } // ITERATION 5 function createProduct() { - //... your code goes here + event.preventDefault(); + + const nameInput = document.getElementById('product-name'); + const priceInput = document.getElementById('product-price'); + + const productName = nameInput.value; + const productPrice = parseFloat(priceInput.value).toFixed(2); + + const tableBody = document.querySelector('#cart tbody'); + + const newRow = document.createElement('tr'); + newRow.classList.add('product'); + + newRow.innerHTML = ` + ${productName} + $${productPrice} + + $0 + + `; + + // Add the new product row to the cart + tableBody.appendChild(newRow); + + // Add event listener for the new remove button + newRow.querySelector('.btn-remove').addEventListener('click', removeProduct); + + // Clear input fields after adding + nameInput.value = ''; + priceInput.value = ''; } window.addEventListener('load', () => { const calculatePricesBtn = document.getElementById('calculate'); calculatePricesBtn.addEventListener('click', calculateAll); - //... your code goes here -}); + const removeButtons = document.querySelectorAll('.btn-remove'); + removeButtons.forEach(button => { + button.addEventListener('click', removeProduct); + }); + + // Event listener for adding new products + const addProductForm = document.getElementById('add-product-form'); + addProductForm.addEventListener('submit', addProduct); +}); \ No newline at end of file