Cash Register Failing Tests

gurvirsanghera52 · February 10, 2025, 1:12am

I understand some people were coming across bugs with this project. I am failing these three:

When price is less than the value in the #cash element, total cash in drawer cid is greater than the change due, individual denomination amounts allows for returning change due, and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: OPEN" with required change due in coins and bills sorted in highest to lowest order.

When price is 19.5, the value in the #cash element is 20, cid is [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]], and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: CLOSED PENNY: $0.5".

Failed:19. When price is less than the value in the #cash element, total cash in drawer cid is equal to change due, and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: CLOSED" with change due in coins and bills sorted in highest to lowest order.

When I manually input the test for 18, I get the same output:

Here is my Code:
HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container-div">
    <div class="price-div">
    <p>Price: <span id="price"></span></p>
    </div>
    <div class="input-div">
        <input id ="cash" type="number" />
        <button id="purchase-btn">Calculate</button>
    </div>
    <div class="output-div">
    <p id="change-due">Output</p>    </div>
    <div class="cid-div">
        <p class="cid">Penny: <span class="cidSpan"></span></p>
        <p class="cid">Nickel: <span class="cidSpan"></span></p>
        <p class="cid">Dime: <span class="cidSpan"></span></p>
        <p class="cid">Quarter: <span class="cidSpan"></span></p>
        <p class="cid">One: <span class="cidSpan"></span></p>
        <p class="cid">Five: <span class="cidSpan"></span></p>
        <p class="cid">Ten: <span class="cidSpan"></span></p>
        <p class="cid">Twenty: <span class="cidSpan"></span></p>
        <p class="cid">Hundred: <span class="cidSpan"></span></p>
    </div>
</div>
</body>
<script src="script.js"></script>
</html>

CSS


body{
  background-color: rgb(68, 66, 66)
}

p, span{
  text-align: center;
  color: #B3B3B4;
}


.container-div{


}

.price-div p{
  font-weight: bold;
  font-size: 20px


}

.input-div{
  display: flex;
  flex-direction: column;
  width:300px;
  align-items: center;
  margin: auto;

}


.cid-div p,.cid div span{
  font-size: 20px;
  margin: 5px

}

input{
  width: 100%;
  margin-bottom: 10px;
  font-size: 18px;
  text-align: center;
}

button{
  font-size: 20px;
  border-radius: 10px;
  background-color: 
}

.output-div{
  height: 100px;
  display:flex;
  width: 300px;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.output-div p{
  text-align: center;
  margin: auto;
  font-weight: bold;
  font-size: 20px
}

let price = 19.5;


let cid = [
    ['PENNY', 0.50],
    ['NICKEL', 0],
    ['DIME', 0],
    ['QUARTER', 0],
    ['ONE', 0],
    ['FIVE', 0],
    ['TEN', 0],
    ['TWENTY', 0],
    ['ONE HUNDRED', 0]
  ];

// 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 notes = {
    PENNY: 0.01,
    NICKEL: 0.05,
    DIME: 0.10,
    QUARTER: 0.25,
    ONE: 1,
    FIVE: 5,
    TEN: 10,
    TWENTY: 20,
    'ONE HUNDRED': 100
};

let noteCounter = {
    PENNY: 0,
    NICKEL: 0,
    DIME: 0,
    QUARTER: 0,
    ONE: 0,
    FIVE: 0,
    TEN: 0,
    TWENTY: 0,
    'ONE HUNDRED': 0
};

const cashInput= document.getElementById("cash");
const pricehtml = document.getElementById("price")
const changeOutput = document.getElementById("change-due")
const calcButton = document.getElementById("purchase-btn")
const cidOutSpan = document.querySelectorAll(".cidSpan")


pricehtml.textContent = price

// Loop which updates CID values in HTML

for(let i =0;i<=8; i++){
    cidOutSpan[i].textContent = `$${cid[i][1]}`
}

// Loop which calculates number of notes and coins

function changeCalculator(cash){
    if(price>cash){
        alert("Customer does not have enough money to purchase the item")
        return
    }else if(price == cash){
        return "No change due - customer paid with exact cash"
    }
    let change = cash-price
    console.log(change)
    for(let i = 8; i>=0; i--){
        if(change >= notes[cid[i][0]] && cid[i][1]>=notes[cid[i][0]]){
            for(let j=1; change >= notes[cid[i][0]] && cid[i][1] > 0; j++){
                cid[i][1] = Math.round((cid[i][1] - notes[cid[i][0]])*100)/100
                change = Math.round((change - notes[cid[i][0]])*100)/100
                noteCounter[cid[i][0]] = j
            }
        }
        if(i===0 && change > 0){
            return "Status: INSUFFICIENT_FUNDS"
        }
    }
    return noteCounter
}


// Converts number of notes to dollar value then string

function noteCountToString(noteCount){
    let noteString = ""
    for(let i = 8; i>=0; i--){
        if(noteCount[cid[i][0]] > 0){
            noteString += ` ${cid[i][0]}: $${noteCount[cid[i][0]]*notes[cid[i][0]]} `
            console.log(noteString)
        }
    }
    return noteString
}

// repeating above loop which updates CID values in HTML

function updateCID(){
    for(let i =0;i<=8; i++){
        cidOutSpan[i].textContent = `$${cid[i][1]}`
    }
    
} 

// changes status to closed if there is no cash in register

function status(){
    let registerStatus = "OPEN"
    if (cid.every((element)=>element[1]=== 0)){
        registerStatus = "CLOSED"
    }
    return registerStatus
}

// main function

function main(){
    let notesAndCoins = changeCalculator(cashInput.value)
    updateCID()
        if (notesAndCoins === "Status: INSUFFICIENT_FUNDS"){
            changeOutput.textContent = notesAndCoins
            return
        }else if(notesAndCoins == "No change due - customer paid with exact cash"){
            changeOutput.textContent = notesAndCoins

        
        }else if (!notesAndCoins){
            return
        }else if(notesAndCoins)
    changeOutput.textContent = `Status: ${status()} ${noteCountToString(notesAndCoins)}`
}

calcButton.addEventListener("click", main)

gurvirsanghera52 · February 10, 2025, 3:12am

Hi, I am reposting this because the code wasn’t formatted properly so it was probably too difficult to respond too

A few tests are failing but they shouldnt be because they are returning the outputs as instructed

// Loop which calculates number of notes and coins

function changeCalculator(cash){
    if(price>cash){
        alert("Customer does not have enough money to purchase the item")
        return
    }else if(price == cash){
        return "No change due - customer paid with exact cash"
    }
    let change = cash-price
    console.log(change)
    for(let i = 8; i>=0; i--){
        if(change >= notes[cid[i][0]] && cid[i][1]>=notes[cid[i][0]]){
            for(let j=1; change >= notes[cid[i][0]] && cid[i][1] > 0; j++){
                cid[i][1] = Math.round((cid[i][1] - notes[cid[i][0]])*100)/100
                change = Math.round((change - notes[cid[i][0]])*100)/100
                noteCounter[cid[i][0]] = j
            }
        }
        if(i===0 && change > 0){
            return "Status: INSUFFICIENT_FUNDS"
        }
    }
    return noteCounter
}

function noteCountToString(noteCount){
    let noteString = ""
    for(let i = 8; i>=0; i--){
        if(noteCount[cid[i][0]] > 0){
            noteString += ` ${cid[i][0]}: $${noteCount[cid[i][0]]*notes[cid[i][0]]} `
            console.log(noteString)
        }
    }
    return noteString

function updateCID(){
    for(let i =0;i<=8; i++){
        cidOutSpan[i].textContent = `$${cid[i][1]}`
    }
    
} 

// changes status to closed if there is no cash in register

function status(){
    let registerStatus = "OPEN"
    if (cid.every((element)=>element[1]=== 0)){
        registerStatus = "CLOSED"
    }
    return registerStatus
}

function main(){
    let notesAndCoins = changeCalculator(cashInput.value)
    updateCID()
        if (notesAndCoins === "Status: INSUFFICIENT_FUNDS"){
            changeOutput.textContent = notesAndCoins
            return
        }else if(notesAndCoins == "No change due - customer paid with exact cash"){
            changeOutput.textContent = notesAndCoins

        
        }else if (!notesAndCoins){
            return
        }else if(notesAndCoins)
    changeOutput.textContent = `Status: ${status()} ${noteCountToString(notesAndCoins)}`
}

calcButton.addEventListener("click", main)

Above is the main sections of the code
Here is the whole javascript + html + css

Summary

This text will be hidden

let price = 19.5;


let cid = [
    ['PENNY', 0.50],
    ['NICKEL', 0],
    ['DIME', 0],
    ['QUARTER', 0],
    ['ONE', 0],
    ['FIVE', 0],
    ['TEN', 0],
    ['TWENTY', 0],
    ['ONE HUNDRED', 0]
  ];

// 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 notes = {
    PENNY: 0.01,
    NICKEL: 0.05,
    DIME: 0.10,
    QUARTER: 0.25,
    ONE: 1,
    FIVE: 5,
    TEN: 10,
    TWENTY: 20,
    'ONE HUNDRED': 100
};

let noteCounter = {
    PENNY: 0,
    NICKEL: 0,
    DIME: 0,
    QUARTER: 0,
    ONE: 0,
    FIVE: 0,
    TEN: 0,
    TWENTY: 0,
    'ONE HUNDRED': 0
};

const cashInput= document.getElementById("cash");
const pricehtml = document.getElementById("price")
const changeOutput = document.getElementById("change-due")
const calcButton = document.getElementById("purchase-btn")
const cidOutSpan = document.querySelectorAll(".cidSpan")


pricehtml.textContent = price

// Loop which updates CID values in HTML

for(let i =0;i<=8; i++){
    cidOutSpan[i].textContent = `$${cid[i][1]}`
}

// Loop which calculates number of notes and coins

function changeCalculator(cash){
    if(price>cash){
        alert("Customer does not have enough money to purchase the item")
        return
    }else if(price == cash){
        return "No change due - customer paid with exact cash"
    }
    let change = cash-price
    console.log(change)
    for(let i = 8; i>=0; i--){
        if(change >= notes[cid[i][0]] && cid[i][1]>=notes[cid[i][0]]){
            for(let j=1; change >= notes[cid[i][0]] && cid[i][1] > 0; j++){
                cid[i][1] = Math.round((cid[i][1] - notes[cid[i][0]])*100)/100
                change = Math.round((change - notes[cid[i][0]])*100)/100
                noteCounter[cid[i][0]] = j
            }
        }
        if(i===0 && change > 0){
            return "Status: INSUFFICIENT_FUNDS"
        }
    }
    return noteCounter
}


// Converts number of notes to dollar value then string

function noteCountToString(noteCount){
    let noteString = ""
    for(let i = 8; i>=0; i--){
        if(noteCount[cid[i][0]] > 0){
            noteString += ` ${cid[i][0]}: $${noteCount[cid[i][0]]*notes[cid[i][0]]} `
            console.log(noteString)
        }
    }
    return noteString
}

// repeating above loop which updates CID values in HTML

function updateCID(){
    for(let i =0;i<=8; i++){
        cidOutSpan[i].textContent = `$${cid[i][1]}`
    }
    
} 

// changes status to closed if there is no cash in register

function status(){
    let registerStatus = "OPEN"
    if (cid.every((element)=>element[1]=== 0)){
        registerStatus = "CLOSED"
    }
    return registerStatus
}

// main function

function main(){
    let notesAndCoins = changeCalculator(cashInput.value)
    updateCID()
        if (notesAndCoins === "Status: INSUFFICIENT_FUNDS"){
            changeOutput.textContent = notesAndCoins
            return
        }else if(notesAndCoins == "No change due - customer paid with exact cash"){
            changeOutput.textContent = notesAndCoins

        
        }else if (!notesAndCoins){
            return
        }else if(notesAndCoins)
    changeOutput.textContent = `Status: ${status()} ${noteCountToString(notesAndCoins)}`
}

calcButton.addEventListener("click", main)


body{
  background-color: rgb(68, 66, 66)
}

p, span{
  text-align: center;
  color: #B3B3B4;
}


.container-div{


}

.price-div p{
  font-weight: bold;
  font-size: 20px


}

.input-div{
  display: flex;
  flex-direction: column;
  width:300px;
  align-items: center;
  margin: auto;

}


.cid-div p,.cid div span{
  font-size: 20px;
  margin: 5px

}

input{
  width: 100%;
  margin-bottom: 10px;
  font-size: 18px;
  text-align: center;
}

button{
  font-size: 20px;
  border-radius: 10px;
  background-color: 
}

.output-div{
  height: 100px;
  display:flex;
  width: 300px;
  text-align: center;
  justify-content: center;
  align-items: center;
  margin: auto;
}

.output-div p{
  text-align: center;
  margin: auto;
  font-weight: bold;
  font-size: 20px
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="container-div">
    <div class="price-div">
    <p>Price: <span id="price"></span></p>
    </div>
    <div class="input-div">
        <input id ="cash" type="number" />
        <button id="purchase-btn">Calculate</button>
    </div>
    <div class="output-div">
    <p id="change-due">Output</p>    </div>
    <div class="cid-div">
        <p class="cid">Penny: <span class="cidSpan"></span></p>
        <p class="cid">Nickel: <span class="cidSpan"></span></p>
        <p class="cid">Dime: <span class="cidSpan"></span></p>
        <p class="cid">Quarter: <span class="cidSpan"></span></p>
        <p class="cid">One: <span class="cidSpan"></span></p>
        <p class="cid">Five: <span class="cidSpan"></span></p>
        <p class="cid">Ten: <span class="cidSpan"></span></p>
        <p class="cid">Twenty: <span class="cidSpan"></span></p>
        <p class="cid">Hundred: <span class="cidSpan"></span></p>
    </div>
</div>
</body>
<script src="script.js"></script>
</html>

Any help is appreciated

gurvirsanghera52 · February 10, 2025, 3:21am

Hi I noticed nobody is responding, can I get some feedback? Is the code too difficult to read? cid[i][1] or notes[cid[i][0]} I assume

gurvirsanghera52 · February 10, 2025, 4:25am

I am meeting the requirement of this test but it is failing

When price is less than the value in the #cash element, total cash in drawer cid is equal to change due, and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: CLOSED" with change due in coins and bills sorted in highest to lowest order.

ILM · February 10, 2025, 9:43am

Calm down, please, there are times where there aren’t people available to help, and it will take some more time.

One thing you forgot to share is a link to the project.

Looking at your code, testing the single test case it works, that means you are having issues with dealing with multiple test cases one after the other: the app is not restarted, the tests change price and cid, write a new number in the input and press the button, multiple times in a row.

Your code contains global variables that are changed each time the function is run. This means that after each function call completes, subsequent function calls start with the previous value. To fix this, make sure your function doesn’t change any global variables, and declare/assign variables within the function if they need to be changed.

Example:

var myGlobal = [1];
function returnGlobal(arg) {
  myGlobal.push(arg);
  return myGlobal;
} // unreliable - array gets longer each time the function is run

function returnLocal(arg) {
  var myLocal = [1];
  myLocal.push(arg);
  return myLocal;
} // reliable - always returns an array of length 2

ILM · February 10, 2025, 9:57am

Trying the tests one by one they all seem to pass, but adding this code below the one you have already written you can simulate the way the tests are run:

console.log("\nTest #12");
price = 3.26;
document.querySelector('#cash').value = 100;
cid = [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]];
document.querySelector('#purchase-btn').click();
console.log("actual", document.querySelector('#change-due').innerText);
console.log("expected", "Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04")

console.log("\nTest #12");
price = 19.5;
document.querySelector('#cash').value = 20;
cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector('#purchase-btn').click();
console.log("actual", document.querySelector('#change-due').innerText);
console.log('expected', "Status: INSUFFICIENT_FUNDS")

console.log("\nTest #17 (it's random)");
price = 56.75;
document.querySelector('#cash').value = 70;
cid = [ [ 'PENNY', 0.02 ],
     [ 'NICKEL', 0 ],
     [ 'DIME', 0.2 ],
     [ 'QUARTER', 0 ],
     [ 'ONE', 4 ],
     [ 'FIVE', 20 ],
     [ 'TEN', 120 ],
     [ 'TWENTY', 260 ],
     [ 'ONE HUNDRED', 300 ] ];
document.querySelector('#purchase-btn').click();
console.log("actual", document.querySelector('#change-due').innerText);
console.log('expected', "Status: INSUFFICIENT_FUNDS");

console.log("\nTest #18");
price = 19.5;
document.querySelector('#cash').value = 20;
cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
document.querySelector('#purchase-btn').click();
console.log("actual", document.querySelector('#change-due').innerText);
console.log('expected', "Status: CLOSED PENNY: $0.5");

console.log("\nTest #19 (it's random)");
price = 46.23;
document.querySelector('#cash').value = 60;
cid = [ [ 'PENNY', 1.77 ],
     [ 'NICKEL', 0.15 ],
     [ 'DIME', 0.6 ],
     [ 'QUARTER', 0.25 ],
     [ 'ONE', 1 ],
     [ 'FIVE', 0 ],
     [ 'TEN', 10 ],
     [ 'TWENTY', 0 ],
     [ 'ONE HUNDRED', 0 ] ];
document.querySelector('#purchase-btn').click();
console.log("actual", document.querySelector('#change-due').innerText);
console.log('expected', "Status: CLOSED");

the logs here show:

Test #12
actual Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04
expected Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04

Test #12
actual Status: INSUFFICIENT_FUNDS
expected Status: INSUFFICIENT_FUNDS

Test #17 (it's random)
actual Status: INSUFFICIENT_FUNDS
expected Status: INSUFFICIENT_FUNDS

Test #18
actual Status: CLOSED TWENTY: $60 TEN: $10 FIVE: $15 ONE: $3 QUARTER: $0.5 DIME: $0.2 PENNY: $0.5
expected Status: CLOSED PENNY: $0.5

Test #19 (it's random)
actual Status: CLOSED TWENTY: $60 TEN: $10 FIVE: $15 ONE: $1 QUARTER: $0.25 DIME: $0.6000000000000001 NICKEL: $0.15000000000000002 PENNY: $1.77
expected Status: CLOSED

if you remove tests 12 and 17 instead the logs show this:

Test #18
actual Status: CLOSED PENNY: $0.5
expected Status: CLOSED PENNY: $0.5

Test #19 (it's random)
actual Status: CLOSED TEN: $10 ONE: $1 QUARTER: $0.25 DIME: $0.6000000000000001 NICKEL: $0.15000000000000002 PENNY: $1.77
expected Status: CLOSED

now magically test 18 passes

you have issues with values kept between calculations

gurvirsanghera52 · February 10, 2025, 7:21pm

Sorry for the late response, still working on it

gurvirsanghera52 · February 10, 2025, 8:28pm

Hey ILM,

How can I reference the original array (cid) without the new local variable changing the values of the original?

fcc4b6d10c4-b540-4e2 · February 10, 2025, 8:46pm

Please explain what it is you don’t understand about this suggestion.

gurvirsanghera52 · February 10, 2025, 9:28pm

I will get back to you - I think I have found a solution, I will update within an hour!

Topic		Replies	Views
Build a Cash Register Project - Build a Cash Register JavaScript	7	61	January 8, 2025
Build a cash register bug? JavaScript	17	83	October 2, 2024
Build a cash register project issue with tests JavaScript	4	24	September 21, 2024
Build a Cash Register Project - Build a Cash Register JavaScript	9	31	February 25, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	2	24	January 8, 2025

Cash Register Failing Tests

Related topics