Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

I keep getting errors on two of the tests.
1.) When the Amount provided > price, and the denominations in CID don’t allow for perfect change, the user should receive “insufficient funds”. My code passes the specific test, but not the general test, but I can’t figure out why. I guess I’m not debugging correctly.
2.) Same issue as above for the exact change scenario, marking the status as “closed”. Again, passes the specific test but not the general for some reason

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta />
        <title>Build a Cash Register Project</title>
    </head>
    <body>
        <h1><strong>Cash Register Project</strong>  </h1>
        <div id="change-due"></div>
        <div id="customer-pay">
            <label for="cash">Enter amount you want to pay:</label> 
            <input id="cash" type="number" name="cash"/>
            <button type="button" id="purchase-btn">Purchase</button>
        </div>
        <p id="cost">Total: $<span></span></p>
        <div id="remainder">
            <p id="PENNY">Pennies: $<span class="amount"></span></p>
            <p id="NICKEL">Nickels: $<span class="amount"></span></p>
            <p id="DIME">Dimes: $<span class="amount"></span></p>
            <p id="QUARTER">Quarters: $<span class="amount"></span></p>
            <p id="ONE">Ones: $<span class="amount"></span></p>
            <p id="FIVE">Fives: $<span class="amount"></span></p>
            <p id="TEN">Tens: $<span class="amount"></span></p>
            <p id="TWENTY">Twenties: $<span class="amount"></span></p>
            <p id="ONE-HUNDRED">Hundreds: $<span class="amount"></span></p>
        </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 denomination = [
    0.01,
    0.05,
    0.1,
    0.25,
    1,
    5,
    10,
    20,
    100
]
const remainder = document.querySelectorAll('#remainder p span');
let cash = document.getElementById('cash').value;
const purchaseBtn = document.querySelector('button');
const systemResponse = document.getElementById('change-due');
let changeDueObj = {};
let totalInDrawer = cid.map(denom => denom[1]).reduce((a,b) => a+b).toFixed(2);

function updateChangeDrawer() {
    for (let [index, value] of cid.entries()) {
        remainder[index].textContent = value[1];
    }
}

window.onload = function () {
    document.getElementById('cost').textContent = price;
    updateChangeDrawer();
}

function updateCID(changeDue) {
    while (changeDue > 0) {
        if (changeDue >= 100 && cid[8][1] > 0) {
            cid[8][1] -= 100;
            changeDue -= 100;
            if (changeDueObj.hasOwnProperty(cid[8][0])) {
                changeDueObj[cid[8][0]] += 100;
            } else {
                changeDueObj[cid[8][0]] = 100;
            }
        } else if (changeDue >= 20 && cid[7][1] > 0) {
            cid[7][1] -= 20;
            changeDue -= 20;
            if (changeDueObj.hasOwnProperty(cid[7][0])) {
                changeDueObj[cid[7][0]] += 20;
            } else {
                changeDueObj[cid[7][0]] = 20;
            }
        } else if (changeDue >= 10 && cid[6][1] > 0) {
            cid[6][1] -= 10;
            changeDue -= 10;
            if (changeDueObj.hasOwnProperty(cid[6][0])) {
                changeDueObj[cid[6][0]] += 10;
            } else {
                changeDueObj[cid[6][0]] = 10;
            }
        } else if (changeDue >= 5 && cid[5][1] > 0) {
            cid[5][1] -= 5;
            changeDue -= 5;
            if (changeDueObj.hasOwnProperty(cid[5][0])) {
                changeDueObj[cid[5][0]] += 5;
            } else {
                changeDueObj[cid[5][0]] = 5;
            }
        } else if (changeDue >= 1 && cid[4][1] > 0) {
            cid[4][1] -= 1;
            changeDue -= 1;
            if (changeDueObj.hasOwnProperty(cid[4][0])) {
                changeDueObj[cid[4][0]] += 1;
            } else {
                changeDueObj[cid[4][0]] = 1;
            }
        } else if (changeDue >= 0.25 && cid[3][1] > 0) {
            cid[3][1] -= 0.25;
            changeDue -= 0.25;
            if (changeDueObj.hasOwnProperty(cid[3][0])) {
                changeDueObj[cid[3][0]] += 0.25;
            } else {
                changeDueObj[cid[3][0]] = 0.25;
            }
        } else if (changeDue >= 0.1 && cid[2][1] > 0) {
            cid[2][1] = parseFloat((cid[2][1] - 0.1).toFixed(2));
            changeDue = parseFloat((changeDue - 0.1).toFixed(2));
            if (changeDueObj.hasOwnProperty(cid[2][0])) {
                changeDueObj[cid[2][0]] = parseFloat((changeDueObj[cid[2][0]] + 0.1).toFixed(2));
            } else {
                changeDueObj[cid[2][0]] = 0.1;
            }
        } else if (changeDue >= 0.05 && cid[1][1] > 0) {
            cid[1][1] = parseFloat((cid[1][1] - 0.05).toFixed(2));
            changeDue = parseFloat((changeDue - 0.05).toFixed(2));
            if (changeDueObj.hasOwnProperty(cid[1][0])) {
                changeDueObj[cid[1][0]] = parseFloat((changeDueObj[cid[1][0]] + 0.05).toFixed(2));
            } else {
                changeDueObj[cid[1][0]] = 0.05;
            }
        } else if (changeDue >= 0.01 && cid[0][1] > 0) {
            cid[0][1] = parseFloat((cid[0][1] - 0.01).toFixed(2));
            changeDue = parseFloat((changeDue - 0.01).toFixed(2));
            if (changeDueObj.hasOwnProperty(cid[0][0])) {
                changeDueObj[cid[0][0]] = parseFloat((changeDueObj[cid[0][0]] + 0.01).toFixed(2));
            } else {
                changeDueObj[cid[0][0]] = 0.01;
            }
        }
        changeDue = parseFloat(changeDue.toFixed(2));
        console.log(changeDueObj);
        console.log(changeDue);
    }
}


const isInadequateChange = (changeDue) => {
    let tempArr = [];
    let index = 0
    console.log(index);
    for (let i = denomination.length - 1; i >= 0; i--) {
        if (denomination[i] > changeDue) {

        } else {
            index = i;
            break;
        }
    }
    console.log(`Calc'd Index: ${index}\n`);
    tempArr = cid.slice(0, index+1);
    console.log(`Temporary Array: ${tempArr}\n`)
    console.log(tempArr.map(denom => denom[1]).reduce((a,b) => a+b))
    if (changeDue <= tempArr.map(denom => denom[1]).reduce((a,b) => a+b)) {
        return false;
    } else {
        return true;
    }
}

function calculateTotalChange(userInput) {
    let changeDue = userInput - price;
    let notEnoughChange = isInadequateChange(changeDue);
    if (userInput < price) {
        alert('Customer does not have enough money to purchase the item');
    } else if (userInput == price) {
        systemResponse.innerHTML += `<p>No change due - customer paid with exact cash</p>`;
    } else if (changeDue > totalInDrawer || notEnoughChange) {
        systemResponse.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
    } else {
        updateCID(parseFloat(changeDue.toFixed(2)));
        totalInDrawer = parseFloat(cid.map(denom => denom[1]).reduce((a,b) => a+b).toFixed(2));
        displayChangeDue();
    }
}

function displayChangeDue() {
    if (totalInDrawer > 0) {
        systemResponse.innerHTML += `<p>Status: OPEN</p>`
    } else if (totalInDrawer == 0) {
        systemResponse.innerHTML += `<p>Status: CLOSED</p>`
    }
    for (let item in changeDueObj) {
        systemResponse.innerHTML += `<p>${item}: $${changeDueObj[item]}</p>`;
    }
}

purchaseBtn.addEventListener('click', () => {
    changeDueObj = {};
    systemResponse.innerHTML = ``;
    cash = document.getElementById('cash').value;
    calculateTotalChange(cash);
    updateChangeDrawer();
})
/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) 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

you have a problem with global variables.
You need to not have any global variables that rely on the cid or price. (or that do anything with the change-due area)

Move all the code like the above 2 lines so they are locally-scoped inside the function that runs when the purchase button is clicked.
The tests run one after the other without reloading the code. So that means anything in the global scope will not get reset in between the tests.

1 Like

You shouldn’t be using global variables like this. The tests run your functions multiple times without re-running all the code in the global scope, so your behavior needs to be isolated to your functions.

1 Like

Understood. Is this standard practice in general? My attempt was to prevent having to pass it as an argument for subsequent functions, since it would be defined locally in my .addEventListener callback. Thanks for your help, it’s much appreciated!

That makes sense. Is this standard coding practice in general? My attempt was to prevent having to pass it as an argument for subsequent functions, since it would be defined locally in my .addEventListener callback. Thanks for your help, it’s much appreciated!

In general, yes, you should avoid stashing information in the global space. Its much easier to debug if you largely design a function to rely upon its inputs and create specific outputs.

1 Like

That’s very helpful to know, thanks again!

1 Like

Still running into this after clearing all the global variables, which I guess means that the code could be wrong. Is there something I’m missing in my code? (Also, sorry for creating a new topic for this earlier, won’t happen again)

The only test I cannot seem to pass is the INSUFFICIENT_FUNDS test provided:

When price is less than the value in the #cash element, total cash in drawer cid is greater than change due, individual denomination amounts make impossible to return needed change, and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: INSUFFICIENT_FUNDS"

However, my code passes this test that provides the inputs for visibility:

When price is 19.5 , the value in the #cash element is 20 , cid is [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["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: INSUFFICIENT_FUNDS"

I’m really not sure what I’m doing wrong here, I’ve quadruple-checked my code and can’t seem to figure it out.

HTML →

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <meta />
        <title>Build a Cash Register Project</title>
    </head>
    <body>
        <h1><strong>Cash Register Project</strong>  </h1>
        <div id="change-due"></div>
        <div id="customer-pay">
            <label for="cash">Enter amount you want to pay:</label> 
            <input id="cash" type="number" name="cash"/>
            <button type="button" id="purchase-btn">Purchase</button>
        </div>
        <p id="cost">Total: $<span></span></p>
        <div id="remainder">
            <p id="PENNY">Pennies: $<span class="amount"></span></p>
            <p id="NICKEL">Nickels: $<span class="amount"></span></p>
            <p id="DIME">Dimes: $<span class="amount"></span></p>
            <p id="QUARTER">Quarters: $<span class="amount"></span></p>
            <p id="ONE">Ones: $<span class="amount"></span></p>
            <p id="FIVE">Fives: $<span class="amount"></span></p>
            <p id="TEN">Tens: $<span class="amount"></span></p>
            <p id="TWENTY">Twenties: $<span class="amount"></span></p>
            <p id="ONE-HUNDRED">Hundreds: $<span class="amount"></span></p>
        </div>
    <script src="script.js"></script>
    </body>
</html>

JavaScript →

let price = 19.5;
let cid = [
    ['PENNY', 0.49],
    ['NICKEL', 0],
    ['DIME', 0],
    ['QUARTER', 0],
    ['ONE', 0],
    ['FIVE', 0],
    ['TEN', 0],
    ['TWENTY', 0],
    ['ONE HUNDRED', 0]
]
const denomination = [
    0.01,
    0.05,
    0.1,
    0.25,
    1,
    5,
    10,
    20,
    100
]
const remainder = document.querySelectorAll('#remainder p span');
const purchaseBtn = document.querySelector('button');
const systemResponse = document.getElementById('change-due');


function updateChangeDrawer() {
    for (let [index, value] of cid.entries()) {
        remainder[index].textContent = value[1];
    }
    document.getElementById('cost').textContent = price;   
}

function updateCID(changeDue, changeDueObj) {
    while (changeDue > 0) {
        if (changeDue >= 100 && cid[8][1] > 0) {
            cid[8][1] -= 100;
            changeDue -= 100;
            if (changeDueObj.hasOwnProperty(cid[8][0])) {
                changeDueObj[cid[8][0]] += 100;
            } else {
                changeDueObj[cid[8][0]] = 100;
            }
        } else if (changeDue >= 20 && cid[7][1] > 0) {
            cid[7][1] -= 20;
            changeDue -= 20;
            if (changeDueObj.hasOwnProperty(cid[7][0])) {
                changeDueObj[cid[7][0]] += 20;
            } else {
                changeDueObj[cid[7][0]] = 20;
            }
        } else if (changeDue >= 10 && cid[6][1] > 0) {
            cid[6][1] -= 10;
            changeDue -= 10;
            if (changeDueObj.hasOwnProperty(cid[6][0])) {
                changeDueObj[cid[6][0]] += 10;
            } else {
                changeDueObj[cid[6][0]] = 10;
            }
        } else if (changeDue >= 5 && cid[5][1] > 0) {
            cid[5][1] -= 5;
            changeDue -= 5;
            if (changeDueObj.hasOwnProperty(cid[5][0])) {
                changeDueObj[cid[5][0]] += 5;
            } else {
                changeDueObj[cid[5][0]] = 5;
            }
        } else if (changeDue >= 1 && cid[4][1] > 0) {
            cid[4][1] -= 1;
            changeDue -= 1;
            if (changeDueObj.hasOwnProperty(cid[4][0])) {
                changeDueObj[cid[4][0]] += 1;
            } else {
                changeDueObj[cid[4][0]] = 1;
            }
        } else if (changeDue >= 0.25 && cid[3][1] > 0) {
            cid[3][1] -= 0.25;
            changeDue -= 0.25;
            if (changeDueObj.hasOwnProperty(cid[3][0])) {
                changeDueObj[cid[3][0]] += 0.25;
            } else {
                changeDueObj[cid[3][0]] = 0.25;
            }
        } else if (changeDue >= 0.1 && cid[2][1] > 0) {
            cid[2][1] = parseFloat((cid[2][1] - 0.1).toFixed(2));
            changeDue = parseFloat((changeDue - 0.1).toFixed(2));
            if (changeDueObj.hasOwnProperty(cid[2][0])) {
                changeDueObj[cid[2][0]] = parseFloat((changeDueObj[cid[2][0]] + 0.1).toFixed(2));
            } else {
                changeDueObj[cid[2][0]] = 0.1;
            }
        } else if (changeDue >= 0.05 && cid[1][1] > 0) {
            cid[1][1] = parseFloat((cid[1][1] - 0.05).toFixed(2));
            changeDue = parseFloat((changeDue - 0.05).toFixed(2));
            if (changeDueObj.hasOwnProperty(cid[1][0])) {
                changeDueObj[cid[1][0]] = parseFloat((changeDueObj[cid[1][0]] + 0.05).toFixed(2));
            } else {
                changeDueObj[cid[1][0]] = 0.05;
            }
        } else if (changeDue >= 0.01 && cid[0][1] > 0) {
            cid[0][1] = parseFloat((cid[0][1] - 0.01).toFixed(2));
            changeDue = parseFloat((changeDue - 0.01).toFixed(2));
            if (changeDueObj.hasOwnProperty(cid[0][0])) {
                changeDueObj[cid[0][0]] = parseFloat((changeDueObj[cid[0][0]] + 0.01).toFixed(2));
            } else {
                changeDueObj[cid[0][0]] = 0.01;
            }
        }
        changeDue = parseFloat(changeDue.toFixed(2));
        console.log(changeDueObj);
        console.log(changeDue);
    }
}


const isInadequateChange = (changeDue) => {
    let tempArr = [];
    let index = 0
    for (let i = denomination.length - 1; i >= 0; i--) {
        if (denomination[i] > changeDue) {

        } else {
            index = i;
            break;
        }
    }
    tempArr = cid.slice(0, index+1);
    if (changeDue <= tempArr.map(denom => denom[1]).reduce((a,b) => a+b)) {
        return false;
    } else {
        return true;
    }
}

function calculateTotalChange(userInput) {
    let changeDueObj = {};
    let changeDue = userInput - price;
    let notEnoughChange = isInadequateChange(changeDue);
    let totalInDrawer = parseFloat(cid.map(denom => denom[1]).reduce((a,b) => a+b).toFixed(2));
    if (userInput < price) {
        alert('Customer does not have enough money to purchase the item');
    } else if (userInput == price) {
        systemResponse.innerHTML += `<p>No change due - customer paid with exact cash</p>`;
    } else if (changeDue > totalInDrawer || notEnoughChange) {
        systemResponse.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
    } else {
        updateCID(parseFloat(changeDue.toFixed(2)), changeDueObj);
        totalInDrawer = parseFloat(cid.map(denom => denom[1]).reduce((a,b) => a+b).toFixed(2));
        displayChangeDue(changeDueObj, totalInDrawer);
    }
}

function displayChangeDue(changeDueObj, totalInDrawer) {
    if (totalInDrawer > 0) {
        systemResponse.innerHTML += `<p>Status: OPEN</p>`
    } else if (totalInDrawer == 0) {
        systemResponse.innerHTML += `<p>Status: CLOSED</p>`
    }
    for (let item in changeDueObj) {
        systemResponse.innerHTML += `<p>${item}: ${changeDueObj[item]}</p>`;
    }
}

purchaseBtn.addEventListener('click', () => {
    systemResponse.innerHTML = ``;
    let cash = document.getElementById('cash').value;
    calculateTotalChange(cash);
    updateChangeDrawer();
})

updateChangeDrawer();

I can’t imagine a scenario where it would fail due to anything other than this code portion of the code provided:

const isInadequateChange = (changeDue) => {
    let tempArr = [];
    let index = 0
    for (let i = denomination.length - 1; i >= 0; i--) {
        if (denomination[i] > changeDue) {

        } else {
            index = i;
            break;
        }
    }
    tempArr = cid.slice(0, index+1);
    if (changeDue <= tempArr.map(denom => denom[1]).reduce((a,b) => a+b)) {
        return false;
    } else {
        return true;
    }
}

function calculateTotalChange(userInput) {
    let changeDueObj = {};
    let changeDue = userInput - price;
    let notEnoughChange = isInadequateChange(changeDue);
    let totalInDrawer = parseFloat(cid.map(denom => denom[1]).reduce((a,b) => a+b).toFixed(2));
    if (userInput < price) {
        alert('Customer does not have enough money to purchase the item');
    } else if (userInput == price) {
        systemResponse.innerHTML += `<p>No change due - customer paid with exact cash</p>`;
    } else if (changeDue > totalInDrawer || notEnoughChange) {
        systemResponse.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
    } else {
        updateCID(parseFloat(changeDue.toFixed(2)), changeDueObj);
        totalInDrawer = parseFloat(cid.map(denom => denom[1]).reduce((a,b) => a+b).toFixed(2));
        displayChangeDue(changeDueObj, totalInDrawer);
    }
}

hiya,

I copied your code into the cash register editor and it is failing multiple tests for me, not just one.
Is the code above the latest?

Hi there! Yes, the above should be correct and up to date. I just re-ran, and still only received the one error. Let me re-paste here, just to confirm. Thanks for your help on this, I’m very appreciative!

HTML →

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8"/>
        <meta />
        <title>Build a Cash Register Project</title>
    </head>
    <body>
        <h1><strong>Cash Register Project</strong>  </h1>
        <div id="change-due"></div>
        <div id="customer-pay">
            <label for="cash">Enter amount you want to pay:</label> 
            <input id="cash" type="number" name="cash"/>
            <button type="button" id="purchase-btn">Purchase</button>
        </div>
        <p id="cost">Total: $<span></span></p>
        <div id="remainder">
            <p id="PENNY">Pennies: $<span class="amount"></span></p>
            <p id="NICKEL">Nickels: $<span class="amount"></span></p>
            <p id="DIME">Dimes: $<span class="amount"></span></p>
            <p id="QUARTER">Quarters: $<span class="amount"></span></p>
            <p id="ONE">Ones: $<span class="amount"></span></p>
            <p id="FIVE">Fives: $<span class="amount"></span></p>
            <p id="TEN">Tens: $<span class="amount"></span></p>
            <p id="TWENTY">Twenties: $<span class="amount"></span></p>
            <p id="ONE-HUNDRED">Hundreds: $<span class="amount"></span></p>
        </div>
    <script src="script.js"></script>
    </body>
</html>

JavaScript →

let price = 19.5;
let cid = [
    ['PENNY', 0.49],
    ['NICKEL', 0],
    ['DIME', 0],
    ['QUARTER', 0],
    ['ONE', 0],
    ['FIVE', 0],
    ['TEN', 0],
    ['TWENTY', 0],
    ['ONE HUNDRED', 0]
]
const denomination = [
    0.01,
    0.05,
    0.1,
    0.25,
    1,
    5,
    10,
    20,
    100
]
const remainder = document.querySelectorAll('#remainder p span');
const purchaseBtn = document.querySelector('button');
const systemResponse = document.getElementById('change-due');


function updateChangeDrawer() {
    for (let [index, value] of cid.entries()) {
        remainder[index].textContent = value[1];
    }
    document.getElementById('cost').textContent = price;   
}

function updateCID(changeDue, changeDueObj) {
    while (changeDue > 0) {
        if (changeDue >= 100 && cid[8][1] > 0) {
            cid[8][1] -= 100;
            changeDue -= 100;
            if (changeDueObj.hasOwnProperty(cid[8][0])) {
                changeDueObj[cid[8][0]] += 100;
            } else {
                changeDueObj[cid[8][0]] = 100;
            }
        } else if (changeDue >= 20 && cid[7][1] > 0) {
            cid[7][1] -= 20;
            changeDue -= 20;
            if (changeDueObj.hasOwnProperty(cid[7][0])) {
                changeDueObj[cid[7][0]] += 20;
            } else {
                changeDueObj[cid[7][0]] = 20;
            }
        } else if (changeDue >= 10 && cid[6][1] > 0) {
            cid[6][1] -= 10;
            changeDue -= 10;
            if (changeDueObj.hasOwnProperty(cid[6][0])) {
                changeDueObj[cid[6][0]] += 10;
            } else {
                changeDueObj[cid[6][0]] = 10;
            }
        } else if (changeDue >= 5 && cid[5][1] > 0) {
            cid[5][1] -= 5;
            changeDue -= 5;
            if (changeDueObj.hasOwnProperty(cid[5][0])) {
                changeDueObj[cid[5][0]] += 5;
            } else {
                changeDueObj[cid[5][0]] = 5;
            }
        } else if (changeDue >= 1 && cid[4][1] > 0) {
            cid[4][1] -= 1;
            changeDue -= 1;
            if (changeDueObj.hasOwnProperty(cid[4][0])) {
                changeDueObj[cid[4][0]] += 1;
            } else {
                changeDueObj[cid[4][0]] = 1;
            }
        } else if (changeDue >= 0.25 && cid[3][1] > 0) {
            cid[3][1] -= 0.25;
            changeDue -= 0.25;
            if (changeDueObj.hasOwnProperty(cid[3][0])) {
                changeDueObj[cid[3][0]] += 0.25;
            } else {
                changeDueObj[cid[3][0]] = 0.25;
            }
        } else if (changeDue >= 0.1 && cid[2][1] > 0) {
            cid[2][1] = parseFloat((cid[2][1] - 0.1).toFixed(2));
            changeDue = parseFloat((changeDue - 0.1).toFixed(2));
            if (changeDueObj.hasOwnProperty(cid[2][0])) {
                changeDueObj[cid[2][0]] = parseFloat((changeDueObj[cid[2][0]] + 0.1).toFixed(2));
            } else {
                changeDueObj[cid[2][0]] = 0.1;
            }
        } else if (changeDue >= 0.05 && cid[1][1] > 0) {
            cid[1][1] = parseFloat((cid[1][1] - 0.05).toFixed(2));
            changeDue = parseFloat((changeDue - 0.05).toFixed(2));
            if (changeDueObj.hasOwnProperty(cid[1][0])) {
                changeDueObj[cid[1][0]] = parseFloat((changeDueObj[cid[1][0]] + 0.05).toFixed(2));
            } else {
                changeDueObj[cid[1][0]] = 0.05;
            }
        } else if (changeDue >= 0.01 && cid[0][1] > 0) {
            cid[0][1] = parseFloat((cid[0][1] - 0.01).toFixed(2));
            changeDue = parseFloat((changeDue - 0.01).toFixed(2));
            if (changeDueObj.hasOwnProperty(cid[0][0])) {
                changeDueObj[cid[0][0]] = parseFloat((changeDueObj[cid[0][0]] + 0.01).toFixed(2));
            } else {
                changeDueObj[cid[0][0]] = 0.01;
            }
        }
        changeDue = parseFloat(changeDue.toFixed(2));
        console.log(changeDueObj);
        console.log(changeDue);
    }
}


const isInadequateChange = (changeDue) => {
    let tempArr = [];
    let index = 0;
    for (let i = denomination.length - 1; i >= 0; i--) {
        if (denomination[i] > changeDue) {

        } else {
            index = i;
            break;
        }
    }
    tempArr = cid.slice(0, index+1);
    if (changeDue <= tempArr.map(denom => denom[1]).reduce((a,b) => a+b)) {
        return false;
    } else {
        return true;
    }
}

function calculateTotalChange(userInput) {
    let changeDueObj = {};
    let changeDue = userInput - price;
    let notEnoughChange = isInadequateChange(changeDue);
    let totalInDrawer = parseFloat(cid.map(denom => denom[1]).reduce((a,b) => a+b).toFixed(2));
    if (userInput < price) {
        alert('Customer does not have enough money to purchase the item');
    } else if (userInput == price) {
        systemResponse.innerHTML += `<p>No change due - customer paid with exact cash</p>`;
    } else if (changeDue > totalInDrawer || notEnoughChange) {
        systemResponse.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
    } else {
        updateCID(parseFloat(changeDue.toFixed(2)), changeDueObj);
        totalInDrawer = parseFloat(cid.map(denom => denom[1]).reduce((a,b) => a+b).toFixed(2));
        displayChangeDue(changeDueObj, totalInDrawer);
    }
}

function displayChangeDue(changeDueObj, totalInDrawer) {
    if (totalInDrawer > 0) {
        systemResponse.innerHTML += `<p>Status: OPEN</p>`
    } else if (totalInDrawer == 0) {
        systemResponse.innerHTML += `<p>Status: CLOSED</p>`
    }
    for (let item in changeDueObj) {
        systemResponse.innerHTML += `<p>${item}: $${changeDueObj[item]}</p>`;
    }
}

purchaseBtn.addEventListener('click', () => {
    systemResponse.innerHTML = ``;
    let cash = document.getElementById('cash').value;
    calculateTotalChange(cash);
    updateChangeDrawer();
})

updateChangeDrawer();

hmm, now I see 2 failed testcases…
Are you sure you only see 1?

Edit:
The two testcases that are failing with the code above are:

When price is less than the value in the #cash element, total cash in drawer cid is greater than change due, individual denomination amounts make impossible to return needed change, and the #purchase-btn element is clicked, the value in the #change-due element should be "Status: INSUFFICIENT_FUNDS"

and

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.

To test the first scenario, I changed the cid line in your code to:

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

Then I typed in 20 into the cash input and your code gave back INSUFFICIENT_FUNDS as expected. HOWEVER,
-without- reloading, I then typed in 19.51 into the cash input expecting your code to say status is closed and change is 1 penny, but in fact, it just stayed stuck on INSUFFICIENT_FUNDS.

Please try doing what I did and if you can recreate the issue, add some logs to see why your code stays stuck on INSUFFICIENT_FUNDS even when there is a penny left.

2nd Edit: if it turns out after you investigate that the issue is you’re losing accuracy because of the floating point arithmetic, you can consider changing your algorithm slightly to use cents instead of dollars, that way you only have to worry about floating point numbers when you convert at the beginning to cents and when you convert at the end to dollars.