-
-
+
+
-
-
-
Total: $4.23
+
@@ -52,18 +43,7 @@
- Cash Register Project
-
+
Change in Drawer
-Pennies: $1.01
-Nickels: $2.05
-Dimes: $3.10
-Quarters: $4.25
-Ones: $90
-Fives: $55
-Tens: $20
-Twenties: $60
-Hundreds: $100
-
diff --git a/apps/cash-register/public/script.js b/apps/cash-register/public/script.js
index dc0a7029..93b9254c 100644
--- a/apps/cash-register/public/script.js
+++ b/apps/cash-register/public/script.js
@@ -1,33 +1,24 @@
-// Do not change code below this line
-const 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 price = 3.26;
+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]
];
-// Do not change code above this line
-const message = document.getElementById('message');
const displayChangeDue = document.getElementById('change-due');
const cash = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
-const newItemBtn = document.getElementById('new-btn');
-let newItemPrice = 4.23;
-
-const getNewPrice = () => {
- displayChangeDue.innerHTML = '';
- cash.value = '';
- newItemPrice = Number((Math.random() * 200 + 1).toFixed(2));
- message.innerHTML = `Total: $${newItemPrice}`;
-};
+const priceScreen = document.getElementById('price-screen');
+const cashDrawerDisplay = document.getElementById('cash-drawer-display');
const formatResults = (status, change) => {
- displayChangeDue.innerHTML = `Status: ${status}`;
+ displayChangeDue.innerHTML = `Palindrome Checker
-
![]()
-
Status: ${status}
`; change.map( money => (displayChangeDue.innerHTML += `${money[0]}: $${money[1]}
`) ); @@ -35,19 +26,20 @@ const formatResults = (status, change) => { }; const checkCashRegister = () => { - if (Number(cash.value) < newItemPrice) { - alert('Customer does not have enough money to purchase item'); + if (Number(cash.value) < price) { + alert('Customer does not have enough money to purchase the item'); cash.value = ''; return; } - if (Number(cash.value) === newItemPrice) { - displayChangeDue.innerHTML = 'No change due. Customer paid with exact cash'; + if (Number(cash.value) === price) { + displayChangeDue.innerHTML = + 'No change due - customer paid with exact cash
'; cash.value = ''; return; } - let changeDue = Number(cash.value) - newItemPrice; + let changeDue = Number(cash.value) - price; let reversedCid = [...cid].reverse(); let denominations = [100, 20, 10, 5, 1, 0.25, 0.1, 0.05, 0.01]; let result = { status: 'OPEN', change: [] }; @@ -59,7 +51,7 @@ const checkCashRegister = () => { ); if (totalCID < changeDue) { - return (displayChangeDue.innerHTML = 'Status: INSUFFICIENT_FUNDS'); + return (displayChangeDue.innerHTML = 'Status: INSUFFICIENT_FUNDS
'); } if (totalCID === changeDue) { @@ -79,12 +71,11 @@ const checkCashRegister = () => { } } if (changeDue > 0) { - return (displayChangeDue.innerHTML = 'Status: INSUFFICIENT_FUNDS'); + return (displayChangeDue.innerHTML = 'Status: INSUFFICIENT_FUNDS
'); } formatResults(result.status, result.change); - cash.value = ''; - return; + updateUI(result.change); }; const checkResults = () => { @@ -94,11 +85,41 @@ const checkResults = () => { checkCashRegister(); }; +const updateUI = change => { + const currencyNameMap = { + PENNY: 'Pennies', + NICKEL: 'Nickels', + DIME: 'Dimes', + QUARTER: 'Quarters', + ONE: 'Ones', + FIVE: 'Fives', + TEN: 'Tens', + TWENTY: 'Twenties', + 'ONE HUNDRED': 'Hundreds' + }; + // Update cid if change is passed in + if (change) { + change.forEach(changeArr => { + const targetArr = cid.find(cidArr => cidArr[0] === changeArr[0]); + targetArr[1] = parseFloat((targetArr[1] - changeArr[1]).toFixed(2)); + }); + } + + cash.value = ''; + priceScreen.textContent = `Total: $${price}`; + cashDrawerDisplay.innerHTML = `Change in drawer:
+ ${cid + .map(money => `${currencyNameMap[money[0]]}: $${money[1]}
`) + .join('')} + `; +}; + purchaseBtn.addEventListener('click', checkResults); + cash.addEventListener('keydown', e => { if (e.key === 'Enter') { checkResults(); } }); -newItemBtn.addEventListener('click', getNewPrice); +updateUI(); diff --git a/apps/cash-register/public/styles.css b/apps/cash-register/public/styles.css index ff9aa783..1e24e38a 100644 --- a/apps/cash-register/public/styles.css +++ b/apps/cash-register/public/styles.css @@ -49,12 +49,17 @@ h1 { .input-div { display: flex; + flex-direction: column; justify-content: center; align-items: center; flex-wrap: wrap; margin: 10px 0 20px; } +label { + font-size: 18px; +} + .user-input { height: 30px; padding: 10px; @@ -62,10 +67,6 @@ h1 { font-size: 15px; } -.change-title { - font-weight: bold; -} - .price-screen { border: 10px solid #99c9ff; background-color: black; @@ -100,18 +101,18 @@ h1 { padding-top: 20px; background-color: #99c9ff; height: 250px; - width: 350px; + width: 325px; } .btns-container { - width: 30%; + width: 25%; } .btn { border-radius: 10%; border: none; - width: 30px; - height: 30px; + width: 20px; + height: 20px; background-color: black; } @@ -129,10 +130,10 @@ h1 { border-width: 3px; } -.results { +.cash-drawer-display { font-size: 1.1rem; background-color: white; - width: 50%; + width: 55%; height: 95%; color: black; padding: 10px; @@ -141,7 +142,7 @@ h1 { .bottom-register { background-color: #99c9ff; height: 50px; - width: 400px; + width: 325px; margin-top: 10px; } diff --git a/apps/palindrome-checker/index.html b/apps/palindrome-checker/index.html index 9e7b30d4..e05d359c 100644 --- a/apps/palindrome-checker/index.html +++ b/apps/palindrome-checker/index.html @@ -12,7 +12,6 @@Is it a Palindrome?
-
-
+
+
+
💡 - A palindrome is a word or phrase that can be read the same way - forwards and backwards. + A palindrome is a word or sentence that's spelled the same + way both forward and backward, ignoring punctuation, case, and + spacing.