From 798535a24f40f0c34dc87edd7709d6f6a373077d Mon Sep 17 00:00:00 2001 From: bochard Date: Sat, 1 Mar 2025 16:43:08 +0800 Subject: [PATCH] added functionality on updating ui for product lists and product indicator --- index.html | 10 +++--- index.js | 93 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 98 insertions(+), 5 deletions(-) diff --git a/index.html b/index.html index 7b47696..a858e2d 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ Digital Cash Register - +
@@ -19,9 +19,9 @@
-
+
-

Water $1.00

+

Water Bottle $1.00

0

@@ -29,7 +29,7 @@
-

Bread $2.50

+

Bread $2.50

0

@@ -41,6 +41,6 @@
- + \ No newline at end of file diff --git a/index.js b/index.js index e69de29..ebeb5c1 100644 --- a/index.js +++ b/index.js @@ -0,0 +1,93 @@ +const cash = document.getElementById('cash'); +const purchaseBtn = document.getElementById('purchase-btn'); +const totalPrice = document.getElementById('total-price'); +const changeDue = document.getElementById('change-due'); +const productList = document.getElementById('product-list'); +const changeDrawer = document.getElementById('change-drawer'); + +let price = 1.87; +let cart = {}; +let cid = [ + ['PENNY', 1.01], + ['NICKEL', 2.05], + ['DIME', 3.1], + ['QUARTER', 4.25], + ['ONE', 90], + ['FIVE', 55], + ['TEN', 20], + ['TWENTY', 60], + ['ONE HUNDRED', 100] +]; +let productsPrice = { + 'water bottle': 1.00, + 'bread': 2.50 +} + +// ===== UPDATE THE TOTAL ON PRICE INDICATOR ===== +function updatePriceIndicator(price) { + totalPrice.textContent = `$${price}`; +} + +// ===== REMOVE INPUT ===== + + +// ===== CALCULATE THE TOTAL OF PRODUCTS ADDED ===== +function calculateCartItems() { + let totalPriceOnCart = 0; + + Object.entries(cart).forEach(([product, price]) => { + const numberOfItem = price; + totalPriceOnCart += numberOfItem * productsPrice[product]; + }) + console.log(`total price on cart: $${totalPriceOnCart}`); + updatePriceIndicator(totalPriceOnCart.toFixed(2)); +} + +// ===== WHEN PLUS BTN OR MINUS BTN IS CLICKED ===== +function plusOrMinusBtnIsClicked(event) { + const plusBtn = event.target.classList.contains('plus-btn'); + const minusBtn = event.target.classList.contains('minus-btn'); + + if (plusBtn) { // plus btn is clicked + const quantity = event.target.previousElementSibling; + let quantityInt = parseInt(quantity.textContent); + const productName = event.target.parentElement.previousElementSibling.childNodes[0].textContent.trim().toLowerCase(); + + quantityInt += 1; + quantity.textContent = quantityInt; + + if (!cart[productName]) { + cart[productName] = 1; + } else { + cart[productName] += 1; + } + } + + if (minusBtn) { // minus btn is clicked + const quantity = event.target.nextElementSibling; + let quantityInt = parseInt(quantity.textContent); + const productName = event.target.parentElement.previousElementSibling.childNodes[0].textContent.trim().toLowerCase(); + + if (quantityInt > 0) { + quantityInt -= 1; + quantity.textContent = quantityInt; + } + + if (!cart[productName] || cart[productName] === 0) { + delete cart[productName]; + } else { + cart[productName] -= 1; + } + } + console.log(cart); +} + +// ===== LISTEN FOR UPDATE QUANTITY ===== +productList.addEventListener('click', (e) => { + plusOrMinusBtnIsClicked(e); + calculateCartItems(); +}) + +// ===== LISTEN FOR PURCHASE CLICK ===== +purchaseBtn.addEventListener('click', () => { +}) \ No newline at end of file -- 2.39.5