Build a cash register project

JavaScript
1

I’m about done with the JavaScript Curriculum and I have to admit that I’m stuck like Chuck on this project. I’m at the very end and I can’t get the last two requirements. Number 18 and 19.

This is what’s wrong:
18. 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".

  1. 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.

Here are the questions that correspond with what they expect:
9. 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".

  1. 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"

Here is my code. when I got stuck, I watched a video on YouTube and the guy couldn’t figure it out but got he’s code to pass, but mine didn’t and it was pretty much spot on to what he got, but he called it good and that was it:

let price = 19.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 cash = document.getElementById("cash");
const change = document.getElementById("change-due");
const sale = document.getElementById("purchase-btn");

let currencyUnits = [
  ['PENNY', 0.01],
  ['NICKEL', 0.05],
  ['DIME', 0.1],
  ['QUARTER', 0.25],
  ['ONE', 1],
  ['FIVE', 5],
  ['TEN', 10],
  ['TWENTY', 20],
  ['ONE HUNDRED', 100]
];

sale.addEventListener("click", () => {
  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) {
    change.innerText = "No change due - Customer paid with exact cash";
    return;
  }

  const changeResult = getChange(changeDue, cid);

  if(changeResult.status === "INSUFFICIENT_FUNDS" || changeResult.status === "CLOSED") {
    change.innerText = `Status: ${changeResult.status} ${formatChange(changeResult.change)}`
  } else {
    let changeText = `Status: OPEN ${formatChange(changeResult.change)}`;
    change.innerText = changeText;
  }

});

const getChange = (changeDue, cid) => {
const totalCid = parseFloat(cid.reduce((sum, [_, amount]) => sum + amount, 0).toFixed(2));
  if (totalCid < changeDue) {
    return { status: "INSUFFICIENT_FUNDS", change: [] };
  }

  let changeArray = [];
  let remainingChange = parseFloat(changeDue.toFixed(2));

for (let i = currencyUnits.length - 1; i >= 0; i--) {
    let unit = currencyUnits[i][0];
    let unitValue = currencyUnits[i][1];
    let unitInDrawer = cid[i][1];
    
  if(unitValue <= remainingChange && unitInDrawer > 0) {
    let amountFromUnit = 0;

while (remainingChange >= unitValue && unitInDrawer > 0) {
      remainingChange = (remainingChange - unitValue).toFixed(2);
      unitInDrawer -= unitValue;
      amountFromUnit += unitValue;
      } // while loop ends

      if (amountFromUnit > 0) {
      changeArray.push([unit, amountFromUnit]);
      }
    }
 }  //end of for loop
  
  if (remainingChange > 0) {
    return { status: "INSUFFICIENT_FUNDS", change: [] };
  }

  if(changeDue === totalCid) {
    return { status: "CLOSED", change: cid };
  }

 return { status: "OPEN", change: changeArray };


}// end of getChange()

const formatChange = changeArray => changeArray.map(([unit, amount]) => `${unit}: $${amount.toFixed(2)}`).join(" ");
2

Pls share your html as well so people can test your code.

3

Sure, here it is. It’s a simple structure that includes an input element for entering the dollar amount, a button to perform the calculations, and a space to display all the messages. I’m not sure how this will help you, but if it does, that’s great!

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cash Register</title>
  </head>
  <body>
    <input id="cash" placeholder="Enter amount">
    <div id="change-due"></div>
    <button id="purchase-btn">Purchase</button>
    <script src="./script.js"></script>
  </body>
</html>
4

I tested your code with one of the failed test cases and the result did not match the one they expected.

Your output

Status: CLOSED PENNY: $0.50 NICKEL: $0.00 DIME: $0.00 QUARTER: $0.00 ONE: $0.00 FIVE: $0.00 TEN: $0.00 TWENTY: $0.00 ONE HUNDRED: $0.00

Their output:

Status: CLOSED PENNY: $0.5

Hopefully the issue you need to fix is clear now.

5

I already know that you’re telling me something that I already know. I know what they want, but that is not the problem. The problem how to do it is the problem.

6

Okay. So you are saying that you already knew that your code was producing output that included zero values of change? Is there any reason that you didn’t mention that in your original post?

What code did you write to try to solve this?