Tell us what’s happening:
If i manually change the cid and price to the prompt amounts, everything functions exactly as requested, with the returns that are requested, but no matter what i do it will not accept it. please if anyone can tell me what I’m doing wrong here?
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Cash Register</title>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link rel="stylesheet" href="./styles.css"/>
</head>
<body>
<h1>Cash Register</h1>
<div id="input-box">
<input type="number" id="cash" class="user-inputs" value="" step="0.01"/>
<button id="purchase-btn">Purchase</button>
</div>
<div id="register-div">
<div id="register-screen">
<div id="price-screen"></div>
<div id="cash-screen"></div>
</div>
<div id="register">
<div id="numpad">
<button class="btn" id="btn-1" value="1">1</button>
<button class="btn" id="btn-2" value="2">2</button>
<button class="btn" id="btn-3" value="3">3</button>
<button class="btn" id="btn-4" value="4">4</button>
<button class="btn" id="btn-5" value="5">5</button>
<button class="btn" id="btn-6" value="6">6</button>
<button class="btn" id="btn-7" value="7">7</button>
<button class="btn" id="btn-8" value="8">8</button>
<button class="btn" id="btn-9" value="9">9</button>
<button class="btn" id="zero-btn" value="0">0</button>
<button class="btn" id="clr-btn" value="">C</button>
</div>
<div id="drawer-contents"></div>
<div id="change-due">
</div>
</div>
<div id="drawer">
<div id="left-indent"></div>
<div id="circle"></div>
<div id="right-indent"></div>
</div>
</div>
</body>
<script src="./script.js"></script>
</html>
/* file: script.js */
let price = 1.87;
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]
];
const cash = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const priceScreen = document.getElementById('price-screen');
const cashScreen = document.getElementById('cash-screen');
const numBtns = document.querySelectorAll('.btn');
const clrBtn = document.querySelector('#clr-btn');
const changeDue = document.getElementById('change-due');
const drawerContents = document.getElementById('drawer-contents');
const format = (status, change) => {
changeDue.innerHTML = `<p>Status: ${status}</p>`;
changeDue.innerHTML += change
.map(([currName, amount]) => `<p>${currName} $${amount}</p>`).join('');
};
/*const changeDueWindow = () => {
changeDue.style.display = 'block';
setTimeout(() => {
changeDue.style.display = 'none'
}, 5000)
}*/
const cashRegister = () => {
const curr = [10000, 2000, 1000, 500, 100, 25, 10, 5, 1];
const cashInCents = Math.round(Number(cash.value) * 100);
const priceInCents = Math.round(price * 100);
const reverseCid = [...cid].reverse().map(([currName, amount]) => [currName, Math.round(amount * 100)]);
const totalCid = reverseCid.reduce((prev, [_, amount]) => prev + amount, 0);
const results = {
status: 'OPEN',
change: []
};
let custChange = cashInCents - priceInCents;
if (priceInCents > cashInCents) {
alert('Customer does not have enough money to purchase the item');
cash.value = "";
return;
};
console.log(totalCid)
console.log(custChange)
if (priceInCents === cashInCents) {
//changeDueWindow();
changeDue.innerHTML = '<p>No change due - customer paid with exact cash</p>';
cash.value = "";
return;
};
if (totalCid < custChange) {
//changeDueWindow();
changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>';
return;
};
if (totalCid === custChange) {
//changeDueWindow();
results.status = 'CLOSED'
};
for (let i = 0; i <= reverseCid.length; i++) {
if (custChange >= curr[i] && custChange > 0) {
const [currName, total] = reverseCid[i];
const possible = Math.min(total, custChange);
const count = Math.floor(possible / curr[i]);
const changeBack = count * curr[i];
custChange -= changeBack;
if (count > 0) {
results.change.push([currName, changeBack / 100])
};
};
};
if (custChange > 0) {
//changeDueWindow();
changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
return;
};
format(results.status, results.change);
update(results.change);
};
const checkResults = () => {
if (!cash.value) {
return
}
cashRegister()
};
const update = change => {
const currNameMap = {
PENNY: 'Pennies',
NICKEL: 'Nickels',
DIME: 'Dimes',
QUARTER: 'Quarters',
ONE: 'Ones',
FIVE: 'Fives',
TEN: 'Tens',
TWENTY: 'Twenties',
"ONE HUNDRED": 'Hundreds'
};
if (change) {
change.forEach(([changeCurr, changeAmount]) => {
const arr = cid.find(([currName]) => currName === changeCurr);
arr[1] = (Math.round(arr[1] * 100) - Math.round(changeAmount * 100)) / 100;
}
)};
cash.value = "";
priceScreen.textContent = `Total: $${price}`;
drawerContents.innerHTML = `<h5>Change in drawer:</h5>
${cid.map(([currName, amount]) =>
`<p>${currNameMap[currName]}: $${amount}</p>`).join('')}`
};
numBtns.forEach(btn => {
btn.addEventListener('click', (e) => {
console.log(e.target.value);
cash.value = cash.value + e.target.value;
})
})
purchaseBtn.addEventListener('click', checkResults);
clrBtn.addEventListener('click', () => cash.value="");
cash.addEventListener('keydown', e => {
if (e.key === 'Enter') {
checkResults;
}
})
update();
/* file: styles.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--main-color1: #2e2536;
--main-color2: #cccccc;
--accent-color1: #131313;
--accent-color1-1: #292828;
--accent-color2: #b80000;
--accent-color2-2: #9f0000;
--accent-color3: #b9b9b9;
--accent-color3-2: #acacac;
--type-color1: white;
--type-color2: #33ff33;
}
body {
background-color: var(--main-color1);
color: var(--type-color1);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
padding-top: 2rem;
}
#change-due {
background-color: var(--accent-color1);
height: calc((8rem * .3333) + 8rem);
width: 6rem;
position: absolute;
z-index: 1;
right: 2rem;
top: 3rem;
border: 3px solid var(--type-color2);
font-size: 14px;
//display: none;
text-align: center;
color: var(--type-color2)
}
#purchase-btn {
background-color: var(--accent-color2);
border: 3px solid var(--accent-color2-2);
color: var(--type-color1);
z-index: 1;
position: absolute;
bottom: 12rem;
height: 2.5rem;
left: calc(50% - 9rem);
top: calc(50% + 5.5rem);
width: 8rem;
}
.btn {
background-color: var(--accent-color1-1);
border: 3px solid var(--accent-color1);
color: var(--type-color1);
}
#register {
background-color: var(--main-color2);
height: 18rem;
width: 20rem;
position: absolute;
left: calc(50% - 10rem);
top: calc(50% - 7rem);
}
#drawer {
background-color: var(--accent-color3);
height: 4rem;
width: 20rem;
border: 3px solid var(--main-color2);
position: absolute;
left: calc(50% - 10rem);
top: calc(50% + 9rem);
display: flex;
align-items: center;
justify-content: space-evenly;
}
#numpad {
width: 8rem;
height: 8rem;
display: grid;
grid-template-rows: 33.33% 33.33% 33.33%;
grid-template-columns: 33.33% 33.33% 33.33%;
position: absolute;
left: calc(50% - 9rem);
top: calc(50% - 7rem);
}
#zero-btn {
position: absolute;
height: 33%;
width: 5.375rem;
bottom: -32%;
}
#clr-btn {
position: absolute;
width: 33.33%;
height: 33%;
right: 0;
bottom: -32%;
background-color: var(--accent-color1-1);
border: 3px solid var(--accent-color1);
color: var(--type-color1);
}
#register-screen {
height: 5rem;
width: 10rem;
position: absolute;
background-color: var(--main-color2);
left: calc(50% - 10rem);
top: calc(50% - 12rem);
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
border-bottom: 2px solid var(--accent-color3-2);
}
#price-screen {
background-color: var(--accent-color1);
height: 2rem;
width: 9rem;
text-align: right;
font-size: 1.8rem;
}
#cash-screen {
background-color: var(--accent-color1);
height: 2rem;
width: 9rem;
text-align: right;
font-size: 1.8rem;
}
#cash {
height: 2rem;
width: 9rem;
position: absolute;
left: calc(50% - 9.5rem);
top: calc(50% - 9.4rem);
z-index: 1;
background-color: transparent;
color: var(--type-color2);
text-align: right;
font-size: 1.8rem;
}
#drawer-contents {
height: calc((8rem * .3333) + 10.5rem);
width: 8rem;
position: absolute;
background-color: var(--accent-color1);
right: 1rem;
top: 2rem;
color: var(--type-color2);
border: 3px solid var(--type-color2);
}
#drawer-contents p {
font-size: 12px;
text-align: center
}
h5 {
padding: 2px;
font-size: 14px;
text-align: center;
}
#left-indent {
height: 1rem;
width: 6rem;
border: 5px solid var(--accent-color3-2);
border-radius: 10px;
}
#circle {
height: 2rem;
width: 2rem;
border: 5px solid var(--accent-color3-2);
border-radius: 100%;
align-items: center;
}
#right-indent {
height: 1rem;
width: 6rem;
border: 5px solid var(--accent-color3-2);
border-radius: 10px
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0
Challenge Information:
Build a Cash Register Project - Build a Cash Register