Tell us what’s happening:
My code passes all the tests except the last test which doesn’t show the specific values for the test. Can i see the values used in that test?
Note : My code passes the similar tests before that test.
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" />
<link rel="stylesheet" href="./styles.css" />
<title>Cash Register</title>
</head>
<body>
<div id="container">
<h1>Cash Register Project</h1>
<div id="change-due">
</div>
<div class="input-container">
<label for="cash">Enter cash from customer:</label>
<input type="number" id="cash" min="0">
<button type="submit" id="purchase-btn">Purchase</button>
</div>
<div class="price-div">
<h2 id="price">Total: $</h2>
</div>
<div class="drawer">
<p>Change in drawer:</p>
<ul>
<li>Pennies: $<span id="penny"></span></li>
<li>Nickels: $<span id="nickel"></span></li>
<li>Dimes: $<span id="dime"></span></li>
<li>Quarters: $<span id="quarter"></span></li>
<li>Ones: $<span id="one"></span></li>
<li>Fives: $<span id="five"></span></li>
<li>Tens: $<span id="ten"></span></li>
<li>Twenties: $<span id="twenty"></span></li>
<li>Hundreds: $<span id="one hundred"></span></li>
</ul>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
/* file: script.js */
let price = 19.5;
let cid = [
["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]
];
let units = [["PENNY", .01], ["NICKEL", .05], ["DIME", .1], ["QUARTER", .25], ["ONE", 1], ["FIVE", 5], ["TEN", 10], ["TWENTY", 20], ["ONE HUNDRED", 100]];
const button = document.getElementById("purchase-btn");
const priceDoc = document.getElementById("price");
const statusWindow = document.getElementById("change-due");
const cash = document.getElementById("cash");
priceDoc.innerText +=price;
const clearStatus = ()=>{
statusWindow.innerHTML = '';
}
const updateDrawerWindow=()=>{
cid.forEach(item=> {
const moneyItem = document.getElementById(item[0].toLowerCase());
moneyItem.textContent = item[1];
});
}
const statusUpdate=(changeArr)=>{
changeArr.forEach(item=>{
statusWindow.innerHTML += `<p>${item[0]}: $${item[1]}</p>`;
})
}
const updateDrawer=(changeArr)=>{
for(let i=0; i<cid.length;i++){
for(let j=0; j<changeArr.length;j++){
if(cid[i][0] === changeArr[j][0]){
cid[i][1] -= changeArr[j][1];
}
}
}
updateDrawerWindow();
}
clearStatus();
updateDrawerWindow();
const start = ()=>{
clearStatus();
const cashValue = parseFloat(cash.value);
const changeDue = cashValue - price;
if(cashValue < price){
alert("Customer does not have enough money to purchase the item");
return;
}
if(cashValue === price){
statusWindow.innerHTML += `<p>No change due - customer paid with exact cash</p>`;
return;
}
getChange(changeDue, cid);
}
const getChange = (changeDue, cid)=>{
let totalOfCid = parseFloat(cid.reduce((sum, [_, amount])=> sum+amount, 0).toFixed(2));
if(totalOfCid < changeDue){
statusWindow.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
return;
}
let changeArr = [];
let remainingChange = changeDue;
for(let i =8; i>=0; i--){
let unit = units[i][0];
let unitValue = units[i][1];
let unitInDrawer = cid[i][1];
if(unitValue <= remainingChange && unitInDrawer > 0){
let amounFromUnit = 0;
while(remainingChange >= unitValue && unitInDrawer > 0){
remainingChange = (remainingChange - unitValue).toFixed(2);
unitInDrawer -= unitValue;
amounFromUnit += unitValue;
}
if(amounFromUnit >0){
changeArr.push([unit, amounFromUnit.toFixed(2)]);
}
}
}
if(remainingChange >0){
statusWindow.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
return;
}
if (changeDue === totalOfCid){
statusWindow.innerHTML += `<p>Status: CLOSED</p>`;
statusUpdate(changeArr);
updateDrawer(changeArr);
return;
}
statusWindow.innerHTML += `<p>Status: OPEN</p>`;
statusUpdate(changeArr);
updateDrawer(changeArr);
return;
}
button.addEventListener("click", start);
/* file: styles.css */
*,
::before,
::after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #1b1b32;
color: #f5f6f7;
}
#container{
display : flex;
align-items: center;
flex-direction: column;
margin-top: 40px;
}
h1{
font-family: Helvetica, Arial, sans-serif;
font-size: 3rem;
padding: 30px;
}
#change-due{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
font-size: 1.2rem;
background-color: #855700;
color: #f5f6f7;
width: 18%;
padding: 5px;
border-radius: 10px;
height: auto;
}
.input-container{
display: flex;
flex-direction: column;
font-size: 1.5rem;
align-items: center;
padding: 5px;
}
label{
margin: 5px;
}
input{
margin: 5px;
font-size: 1.1rem;
}
button{
width: 35%;
font-size: 1.1rem;
background-color:#ee8319;
margin: 5px;
border-radius: 5px;
}
.drawer{
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
font-size: 1.2rem;
background-color: #19ee87;
width: 18%;
padding: 5px;
border-radius: 10px;
}
ul{
list-style-type: none;
}
li{
margin: 3px
}
.price-div{
margin: 10px;
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0
Challenge Information:
Build a Cash Register Project - Build a Cash Register
.
.