Tell us what’s happening:
Please see this following snippet:
const totalNoteNeeded = Math.floor(totalChangeDue / cid[i][2]);
const var1 = totalNoteNeeded * cid[i][2];
const var2 = 0.5;
console.log("is var1 === var2 ", var1 === var2);
results.push([`${cid[i][0]}:`, var2]
The odd is, If I use var2 in
results.push([`${cid[i][0]}:`, var2]
The test will pass. But if I replace var2 with var1 the test will fail.
As a note var1 has the same exact value & type as var2. I confirm it by log it using:
console.log("var1 === var2 is ", var1 === var2);
The failing test is the test number 11 that says >> the value in the #change-due element should be “Status: OPEN QUARTER: $0.5”
I will include the full code.
The way to test it: Enter 20 in the input / text box then click “purchase” button. The output will be in the console, as well as the test number 11 will fail.
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cash Register</title>
</head>
<body>
<div id="main-container" class="main-container">
<h1>Cash Register</h1>
<input id="cash" type="number" placeholder="Enter cash amount">
<button id="purchase-btn">Purchase</button>
<span class="list-card list-card-item">
<span>Price</span>
<span id="price" class="currency-amount-inline"></span>
</span>
<h2>Change due</h2>
<div id="change-due">
<ol id="change-due-list" class="list-card">
</ol>
</div>
<h2 id="change-in-drawer">Change in drawer</h2>
<ul id="change-list" class="list-card"></ul>
</div>
<script src="script.js">
</script>
</body>
</html>
/* file: script.js */
const cashInputEl = document.getElementById("cash");
const changeListEl = document.getElementById("change-list");
const purchaseBtnEl = document.getElementById("purchase-btn");
const changeDueEl = document.getElementById("change-due");
const changeDueListEl = document.getElementById("change-due-list");
const priceEl = document.getElementById("price");
let price = 19.5;
// let price = 1.87;
let cid = [
['PENNY', 1.01, 0.01],
['NICKEL', 2.05, 0.05],
['DIME', 3.1, 0.10],
['QUARTER', 4.25, 0.25],
['ONE', 90, 1],
['FIVE', 55, 5],
['TEN', 20, 10],
['TWENTY', 60, 20],
['ONE HUNDRED', 100, 100]
];
let cash = 0;
window.addEventListener("load", () => {
priceEl.textContent = ` $ ${price}`;
changeDueListEl.textContent = "No cash entered"
// updateCIDUI(cid, changeListEl);
})
purchaseBtnEl.addEventListener("click", () => {
cash = Number(cashInputEl.value);
const totalChangeDue = (cash - price) < 0 ? 0 : cash - price;
const totalCashInDrawer = cid.reduce((total, item) => item[1] + total, 0);
if (cash < price) {
alert("Customer does not have enough money to purchase the item");
return;
} else if (cash === price) {
changeDueListEl.textContent = "No change due - customer paid with exact cash";
return;
}
updateChangeDueListUI(calculateChange(cash, price, totalChangeDue, totalCashInDrawer, cid));
// updateCIDUI(cid, changeListEl);
});
const getStatus = (totalChangeDue, totalCashInDrawer) => {
if(totalCashInDrawer > totalChangeDue){
return `OPEN`;
}else if(totalCashInDrawer === totalChangeDue){
return `CLOSED`;
}else if(totalCashInDrawer < totalChangeDue){
return `INSUFFICIENT_FUNDS`;
}
}
const calculateChange = (cash, price, totalChangeDue, totalCashInDrawer, cid) => {
const results = [];
results.push([`Status:`, getStatus(totalChangeDue, totalCashInDrawer)]);
for(let i = cid.length - 1; i >= 0; i--){
if(cid[i][2] > totalChangeDue){
continue;
}else{
const totalNoteNeeded = Math.floor(totalChangeDue / cid[i][2]);
const var1 = totalNoteNeeded * cid[i][2];
const var2 = 0.5;
console.log("var1 === var2 is ", var1 === var2);
results.push([`${cid[i][0]}:`, var1]);
if(Number.isInteger(totalChangeDue / cid[i][2])){
break;
}
}
}
return results;
}
const fuckit = () => `0.5`;
const updateChangeDueListUI = (array) => {
changeDueListEl.innerHTML = "";
changeDueListEl.innerHTML = `
<li class="list-card-item">
${array[0][0]} ${array[0][1]}
</li>
`;
for(let i = 1; i < array.length; i++){
// TODO: make the "QUARTER: $0.5" using variable from array
changeDueListEl.innerHTML += `
<li class="list-card-item">
QUARTER: $${array[i][1]}
</li>
`;
}
}
const updateCIDUI = (cidArray, parentEl) => {
parentEl.innerHTML = "";
cidArray.forEach(element => {
parentEl.innerHTML += `
<li class="list-card-item">
<span>${element[0]}</span>
<span class="currency-amount">
<span>$</span>
<span>${element[1]}</span>
</span>
</li>`;
});
}
/* file: styles.css */
/* CSS reset */
*,
::before,
::after{
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* end CSS reset */
/* general */
body{
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: black;
font-family: Arial, Helvetica, sans-serif;
}
button{
background-color: #0aaf60;
color: whitesmoke;
font-size: 1rem;
}
h1{
margin-bottom: 0.5rem;
}
h2{
font-size: 1.2rem;
font-weight: bold;
}
input{
border: 1px solid green;
border-radius: 12px;
min-height: 2rem;
padding-left: 1rem;
}
button{
border-radius: 12px;
min-height: 2rem;
}
/* end general */
.main-container{
min-width: 300px;
display: flex;
flex-direction: column;
row-gap: 10px;
padding: 15px;
border-radius: 20px;
background-color: whitesmoke;
}
.list-card{
padding: 1rem;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15);
border-radius: 20px;
border: 20px;
background-color: white;
}
.list-card-item{
display: flex;
justify-content: space-between;
list-style-type: none;
margin: 0.4rem 0;
}
.currency-amount{
display: flex;
min-width: 3rem;
justify-content: space-between;
font-weight: 700;
}
.currency-amount-inline{
display: inline;
min-width: 3rem;
justify-content: space-between;
font-weight: 700;
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register