From 6627001e4a49c9780460e77d8a2280333ce8a303 Mon Sep 17 00:00:00 2001 From: Poorna Chandra2000 Date: Wed, 25 Sep 2024 03:22:22 +0530 Subject: [PATCH] Root cart lab assignment complete --- css/style.css | 2 + index.html | 115 ++++++++++++++++++++++++++++---------------------- js/index.js | 81 +++++++++++++++++++++++++---------- 3 files changed, 126 insertions(+), 72 deletions(-) diff --git a/css/style.css b/css/style.css index 30d6e01..ffdda78 100644 --- a/css/style.css +++ b/css/style.css @@ -65,3 +65,5 @@ h2, .calculate-total { text-align: center; } + + diff --git a/index.html b/index.html index 752a993..7917957 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

+
+ + + + + + + +
+ + + + + diff --git a/js/index.js b/js/index.js index 75405d6..701e7ea 100644 --- a/js/index.js +++ b/js/index.js @@ -1,42 +1,79 @@ -// ITERATION 1 - +// Function to update the subtotal of a product 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); - //... your code goes here + return subtotal; } +// Function to calculate the total of all products 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 to remove a product from the cart 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 to create a new product row and append to the table +function addProduct(event) { + 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); -function createProduct() { - //... your code goes here + // Add event listener for the new remove button + newRow.querySelector('.btn-remove').addEventListener('click', removeProduct); + + // Clear input fields after adding + nameInput.value = ''; + priceInput.value = ''; } +// Setup event listeners on page load 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); });