I’ve been having trouble passing the " When price is less than the value in the #cash element" tests. Everything works as it’s supposed to and I’ve even console.logged the tests boolean values and they all equal what they should, but it always says I fail anyway. I had a professional programmer look at my code and she said everything is working and the tests are just bugged so I’m wondering if this is the case. It won’t let me reset the project either as I’ve tried several times. Any insight is helpful, thank you.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Cash Register</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="container">
<h1>Cash Register</h1>
<div id="change-due"></div>
<input id="cash">
<button id="purchase-btn">Purchase</button>
<div id="register">
<p id="total"></p>
<h4>Change in Drawer</h4>
<p id="pennies"></p>
<p id="nickels"></p>
<p id="dimes"></p>
<p id="quarters"></p>
<p id="ones"></p>
<p id="fives"></p>
<p id="tens"></p>
<p id="twenties"></p>
<p id="hundreds"></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
* {
overflow: hidden;
margin: 0;
padding: 0;
}
#container {
width: 100%;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background-color: rgb(156, 160, 230);
}
h1 {
margin-top: 2em;
}
#change-due {
width: 200px;
height: 500px;
position: absolute;
margin-left: 400px;
margin-top: 300px;
}
input {
margin-top : 1em;
width: 35%;
height: 30px;
font-size: 18px;
}
button {
margin-top: 1em;
width: 20%;
height: 30px;
font-size: 18px;
}
#register {
margin-top: 3rem;
font-size: 20px;
}
h4 {
margin: 20px 0px;
}
#register p {
margin: 4px 0px;
}
const input = document.getElementById("cash");
const button = document.getElementById("purchase-btn");
const changeDueDiv = document.getElementById("change-due");
const total = document.getElementById("total");
const pennies = document.getElementById("pennies");
const nickels = document.getElementById("nickels");
const dimes = document.getElementById("dimes");
const quarters = document.getElementById("quarters");
const ones = document.getElementById("ones");
const fives = document.getElementById("fives");
const tens = document.getElementById("tens");
const twenties = document.getElementById("twenties");
const hundreds = document.getElementById("hundreds");
let price = 1.82;
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]];
let allCashInDrawer = cid.map(total => total[1]).reduce((total, arg) => total + arg, 0).toFixed(2);
let cidNumbers = [pennies, nickels, dimes, quarters, ones, fives, tens, twenties, hundreds];
let cidWords = ["Pennies: $", "Nickels: $", "Dimes: $", "Quarters: $", "Ones: $", "Fives: $", "Tens: $", "Twenties: $", "Hundreds: $"];
function updateCid() {
total.innerText = `Total: $${price}`;
for (let i = 0; i < cidNumbers.length; i++) {
cidNumbers[i].innerText = `${cidWords[i]}${cid[i][1]}`;
}
}
updateCid();
// FIXES ROUNDING ERROR
function roundCorrectly (number, n) {
var power = Math.pow(10, n);
return (Math.round(number * power) / power);
}
function getChange(inputValue) {
let changeDue = inputValue - price;
let cashValues = [100, 20, 10, 5, 1, .25, .1, .05, .01];
let newValues = [0, 0, 0, 0, 0, 0, 0, 0, 0];
let reverseCid = [...cid].reverse();
// REDUCE CHANGEDUE TO 0 FROM LARGEST TO SMALLEST BILL AND STORE VALUE IN NEWVALUES[]
for (let i = 0; i < newValues.length; i++) {
while (changeDue >= cashValues[i] && reverseCid[i][1] >= cashValues[i]) {
reverseCid[i][1] = roundCorrectly(reverseCid[i][1] - cashValues[i], 2);
changeDue = roundCorrectly(changeDue - cashValues[i], 2);
newValues[i] = roundCorrectly(newValues[i] + cashValues[i], 2);
console.log(reverseCid[i][1]);
}
}
// ADD TEXT TO SCREEN BASED ON WHICH VALUES WERE ADDED TO NEWVALUES[]
function addText () {
for (let i = 0; i < newValues.length; i++) {
if (newValues[i] > 0) {
changeDueDiv.innerText += `${reverseCid[i][0]}: $${newValues[i]}\n`
}
console.log("New Values :", newValues[i]);
}
}
console.log("Change Due: ", changeDue, "All Cash :", allCashInDrawer);
if (input.value - allCashInDrawer == price) {
changeDueDiv.innerText = "Status: CLOSED\n";
addText();
} else if (changeDue < allCashInDrawer && changeDue == 0) {
changeDueDiv.innerText = "Status: OPEN\n"
addText();
} else {
changeDueDiv.innerText = "Status: INSUFFICIENT_FUNDS";
}
}
button.addEventListener("click", () => {
if (Number(input.value).toFixed(2) < price) {
alert("Customer does not have enough money to purchase the item");
input.value = '';
} else if (input.value == price) {
changeDueDiv.innerHTML = "No change due - customer paid with exact cash";
} else {
getChange(input.value);
}
updateCid();
});
Hello 