Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I’m not sure what I’m doing wrong or where I went wrong with this project. I’m getting an error message for the last 2. I need some help please.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>Cash Register</title>
    <meta charset="UTF-8">
  </head>
  <body>
  <main id="container">
    <h2>Cash Register Project</h2>
    <input autocomplete="off type="text id="cash"></input>
  <button id="purchase-btn"></button>
<p id="price"></p>
<p id="change"></p>
<div id="change-due"></div>
<div id="cash-in-drawer"></div>
</main>
<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]
];

const cash = document.getElementById("cash");
const change = document.getElementById("change-due");
const sale = document.getElementById("purchase-btn");
let currencyUnits = [
  ['PENNY', .01],
  ['NICKEL', .05],
  ['DIME', .1],
  ['QUARTER', .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.trim()
}

});

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

let changeArray = [];
let remainingChange = changeDue;

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;
 }

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(" ");

//console.log(getChange(.5, cid))









   
 
 

 






/* 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

2

when I type in 20 and the price is 19.5 your output currently is:

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

but it should be:

Status: CLOSED PENNY: $0.50

with none of the others printed as they’re zero

3

Hello,
the output when the #purchase-btn button is pressed should not contain those currencies with zero amount so you have to remove them before displaying, you can change your formatChange function to filter those with zero amount before using the map method

4

Sorry…I’m not sure if I understand.

5

I understand to remove the currencies with zero amount but I don’t quite understand when you say change the formatChange function to filter with zero amount.

1 Like
6

hello,

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

I meant using the filter method right here before the map method to leave only the units with amounts greater than zero

7

ok…let me see if I can figure that out.

8

I still have not figured this out yet. Is it possible to get a hint?

9

you don’t have to use filter. You can use any code that you like to remove the zero valued change

10

a = a.filter(function(val) {
return val !== 0;
const formatChange = changeArray => changeArray.map(([unit, amount]) => ${unit}: $${amount.toFixed(2)}).join(" ");
});

11

Here is an example similar to your situation imagine you have an array of numbers, and you want to add 1 to each number but you want to filter out the zeros before that

const arr = [58, 0, 785, 0, 555, 0, 4, 5];
const newArr = arr.filter((num)=> num !== 0).map((num)=> num + 1);
12

Thank you. Let me give this a try again. I’m giving up on myself. lol