added functionality in the input

diff --git a/index.html b/index.html
index a858e2d86debda472d330ee8de277f2b6ae11cf3..f7bc147323d9b328ceaa6f368db44f884fcb1a54 100644 (file)
--- a/index.html
+++ b/index.html
@@ -36,6 +36,14 @@
             <button class="plus-btn">+</button>
           </div>
         </div>
+        <div class="product-wrapper">
+          <p class="product-name">Coffee <span class="price-tag">$1.50</span></p>
+          <div class="quantity-controls">
+            <button class="minus-btn">-</button>
+            <p class="product-quantity">0</p>
+            <button class="plus-btn">+</button>
+          </div>
+        </div>
       </div>
 
       <div id="change-drawer"></div>

diff --git a/index.js b/index.js
index ebeb5c1148846a0e8fb860865a1f129458da4415..c80ee779752f94f2d8ff105f88c85ac3aa57ddc7 100644 (file)
--- a/index.js
+++ b/index.js
@@ -1,12 +1,14 @@
 const cash = document.getElementById('cash');
 const purchaseBtn = document.getElementById('purchase-btn');
-const totalPrice = document.getElementById('total-price');
+const totalPriceIndicator = document.getElementById('total-price');
 const changeDue = document.getElementById('change-due');
 const productList = document.getElementById('product-list');
+const productQuantity = document.querySelectorAll('.product-quantity');
 const changeDrawer = document.getElementById('change-drawer');
 
 let price = 1.87;
 let cart = {};
+let totalPriceOnCart = 0;
 let cid = [
   ['PENNY', 1.01],
   ['NICKEL', 2.05],
@@ -19,28 +21,51 @@ let cid = [
   ['ONE HUNDRED', 100]
 ];
 let productsPrice = {
-  'water bottle': 1.00,
-  'bread': 2.50
+  'water bottle': 1,
+  'bread': 2.5,
+  'coffee': 1.5
 }
 
-// ===== UPDATE THE TOTAL ON PRICE INDICATOR =====
-function updatePriceIndicator(price) {
-  totalPrice.textContent = `$${price}`;
+// ===== CASH IS GREATER THAN THE TOTAL PRICE IN CART =====
+function checkCashAmount(cash) {
+  if (cash < totalPriceOnCart || !cash) {
+    alert('Customer does not have enough money to purchase the item');
+  } else if (cash === totalPriceOnCart) {
+    changeDue.textContent = 'No change due - customer paid with exact cash';
+  }
 }
 
 // ===== REMOVE INPUT =====
+function removeInput() {
+  cash.value = '';
+}
+
+// ===== RESET LIST QUANTITY =====
+function resetProductListQuantity() {
+  productQuantity.forEach((item) => {
+    item.textContent = '0';
+  })
+}
+
+// ===== RESET TOTAL PRICE INDICATOR =====
+function resetPriceIndicator() {
+  totalPriceIndicator.textContent = '$0.00';
+}
 
+// ===== UPDATE THE TOTAL ON PRICE INDICATOR =====
+function updatePriceIndicator() {
+  totalPriceIndicator.textContent = `$${totalPriceOnCart.toFixed(2)}`;
+}
 
 // ===== CALCULATE THE TOTAL OF PRODUCTS ADDED =====
 function calculateCartItems() {
-  let totalPriceOnCart = 0;
-
+  let temporaryPrice = 0;
   Object.entries(cart).forEach(([product, price]) => {
-    const numberOfItem = price;
-    totalPriceOnCart += numberOfItem * productsPrice[product];
+    console.log(`${price} + ${temporaryPrice}`);
+    temporaryPrice += price * productsPrice[product];
   })
+  totalPriceOnCart = temporaryPrice;
   console.log(`total price on cart: $${totalPriceOnCart}`);
-  updatePriceIndicator(totalPriceOnCart.toFixed(2));
 }
 
 // ===== WHEN PLUS BTN OR MINUS BTN IS CLICKED =====
@@ -56,10 +81,10 @@ function plusOrMinusBtnIsClicked(event) {
     quantityInt += 1;
     quantity.textContent = quantityInt;
 
-    if (!cart[productName]) {
-      cart[productName] = 1;
-    } else {
+    if (cart[productName]) {
       cart[productName] += 1;
+    } else {
+      cart[productName] = 1;
     }
   }
   
@@ -73,10 +98,11 @@ function plusOrMinusBtnIsClicked(event) {
       quantity.textContent = quantityInt;
     }
 
-    if (!cart[productName] || cart[productName] === 0) {
-      delete cart[productName];
-    } else {
+    if (cart[productName]) {
       cart[productName] -= 1;
+      if (cart[productName] === 0) {
+        delete cart[productName];
+      }
     }
   }
   console.log(cart);
@@ -86,8 +112,14 @@ function plusOrMinusBtnIsClicked(event) {
 productList.addEventListener('click', (e) => {
   plusOrMinusBtnIsClicked(e);
   calculateCartItems();
+  updatePriceIndicator();
 })
 
 // ===== LISTEN FOR PURCHASE CLICK =====
 purchaseBtn.addEventListener('click', () => {
+  const cashValue = Number(cash.value);
+  checkCashAmount(cashValue);
+  removeInput();
+  resetProductListQuantity()
+  resetPriceIndicator()
 })
\ No newline at end of file