Tell us what’s happening:
Hi everyone,
My code seems to be working but for some reason I cannot pass this challenge. Am I going wrong about the logic? Or is there an error that i cannot see? Or maybe both haha. Any help is welcome. Thanks
Your code so far
<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<title>Cash Register</title>
</head>
</head>
<body>
<div class="container-fluid main-container text-center">
<h1 class="text-primary">Cash Register</h1>
<div class="main-container">
<label for="cash"><span class="fs-3">Input here the amount received</span></label><br>
<input type="number" id="cash" class="form-control">
<div class="fs-5" id="change-due"></div>
<button class="btn btn-primary" id="purchase-btn">Purchase</button>
<h4 id="status">Status: OPEN</h4>
<div class="row">
<!-- Cash-in-drawer Column -->
<div class="col-md-6">
<span class="text-center"><h3>Cash-in-drawer</h3></span>
<div id="cid"></div>
</div>
<!-- Cash-Out Column -->
<div class="col-md-6">
<div id="cod">
<h4 id="cod-header">Cash Out</h4>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>
/* file: script.js */
const cash = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const changeDueContainer = document.getElementById("change-due");
const cidContainer = document.getElementById("cid");
const codContainer = document.getElementById("cod");
const codHeader = document.getElementById("cod-header");
const cidStatusDom = document.getElementById("status");
let price = 5.5;
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 isCashEnough = () => {
const cashFixed = cash.value;
const priceFixed = price;
if (Number(cashFixed) === Number(priceFixed)) {
alert("No change due - customer paid with exact cash");
return true;
} else if (Number(cashFixed) > Number(priceFixed)) {
return true;
} else {
alert("Customer does not have enough money to purchase the item");
return false;
}
};
const changeDue = (cash, price) => parseFloat((cash.value - price).toFixed(2));
const convertMap = [
{string: "ONE HUNDRED", value: 100},
{string: "TWENTY", value: 20},
{string: "TEN", value: 10},
{string: "FIVE", value: 5},
{string: "ONE", value: 1},
{string: "QUARTER", value: 0.25},
{string: "DIME", value: 0.1},
{string: "NICKEL", value: 0.05},
{string: "PENNY", value: 0.01}
];
const breakChange = () => {
let change = changeDue(cash, price);
let subtrahends = [];
const tempCid = cid.map(([denomination, amount]) => [denomination, amount]); // Copy of cid
convertMap.forEach(money => {
let denomAmount = tempCid.find(([denom]) => denom === money.string)[1];
while (change >= money.value && denomAmount > 0) {
subtrahends.push({key: money.string, value: money.value});
change = parseFloat((change -= money.value).toFixed(2));
denomAmount = parseFloat((denomAmount -= money.value).toFixed(2));
}
});
if (change > 0) {
alert("Status: INSUFFICIENT_FUNDS");
return []; // Return an empty array to indicate failure
}
return subtrahends;
};
const updateCid = () => {
const subtrahends = breakChange();
let cidStatus = "Status: OPEN";
if (subtrahends.length === 0) {
cidStatus = "Status: INSUFFICIENT_FUNDS";
cidStatusDom.innerText = cidStatus;
return cid; // Stop updating cid
}
subtrahends.forEach(subtrahend => {
const moneyDrawer = cid.find(money => money[0] === subtrahend.key);
if (moneyDrawer && moneyDrawer[1] >= subtrahend.value) {
moneyDrawer[1] = parseFloat((moneyDrawer[1] - subtrahend.value).toFixed(2));
cidStatus = "Status: OPEN";
}
});
cidStatusDom.innerText = cidStatus;
return cid;
};
const displayCid = () => {
const updatedCid = updateCid();
cidContainer.innerHTML = '';
updatedCid.forEach(array => {
cidContainer.innerHTML += `${array[0]} : ${array[1].toFixed(2)}<br>`;
});
};
displayCid();
purchaseBtn.addEventListener("click", () => {
changeDueContainer.innerHTML = "";
codContainer.innerHTML = "";
cidContainer.innerHTML = "";
if (isCashEnough()) {
const change = changeDue(cash, price);
const givenCash = parseFloat(cash.value).toFixed(2);
const subtrahends = breakChange();
const repeatedSubtrahends = {};
subtrahends.map(subtrahend => {
if (repeatedSubtrahends[subtrahend.key]) {
repeatedSubtrahends[subtrahend.key] += subtrahend.value;
} else {
repeatedSubtrahends[subtrahend.key] = subtrahend.value;
}
});
console.log(repeatedSubtrahends);
changeDueContainer.innerHTML = `
Cash: <span class="positive">$ ${givenCash}</span><br>
Price: <span class="negative">$ ${price.toFixed(2)}</span><br>
<span class="fw-bold">Change: <span class="positive">$ ${change}</span></span>
`;
codContainer.innerHTML = `
<h4 class="text-center"><span class="negative">Cash-Out</span></h4>
`;
for (const [key, value] of Object.entries(repeatedSubtrahends)) {
codContainer.innerHTML += `
<p class="text-center fs-6">${key}<br><span class="negative">-${value.toFixed(2)}</span></p>`;
}
displayCid();
cash.value = "";
/*-------------------- jQuery styling------------------------------*/
$(".positive").css("color", "green");
$(".negative").css("color", "red");
/*-------------------- jQuery styling------------------------------*/
} else {
displayCid();
cash.value = "";
}
});
/* file: styles.css */
#cid {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.main-container {
display: flex;
flex-direction: column;
align-items: center;
}
.main-container * {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
#purchase-btn {
border-radius: 5%;
}
#cash {
width: 200px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36
Challenge Information:
Build a Cash Register Project - Build a Cash Register