Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

help me figure the correct code out the last four checks are not passing :

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

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

  • Failed: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".

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

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content=" a Cash Register">
    <link rel="stylesheet" href="styles.css">
    <title> a Cash Register App</title>
  </head>
  <body>
    <div class="header">
      <h1 class="title">Cash Register Project</h1>
    </div>
    <div class="container" id="container">
      <div id="change-due"></div>
      <label for="cash">Enter cash from customer:</label>
      <input type="number" min="0" id="cash" class="cash">
      <button id="purchase-btn">Purchase</button>
    </div>
    <script src="./script.js"></script>
  </body>
</html>

/* file: script.js */
let price = 1.87;
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 cashInput = document.getElementById('cash');

const purchaseBtn = document.getElementById('purchase-btn');

const changeDueElement = document.getElementById('change-due');


//Cash Register function


 function cashRegister() {
  const cashInt = parseFloat(cashInput.value);
  const change = Number((cashInt - price).toFixed(2));
  const totalCash = cashInDrawer(cid);
  const changeArr = calculateChange(change, cid);

  if (isNaN(cashInt) || cashInt < price) {
    alert("Customer does not have enough money to purchase the item");
    return;
  } else if (cashInt === price) {
    changeDueElement.innerHTML = "No change due - customer paid with exact cash";
    return;
  }

 if (change > totalCash) {
    changeDueElement.textContent = "Status: INSUFFICIENT_FUNDS";
    return;
  }

  if (changeArr.length === 0) {
    changeDueElement.textContent = "Status: INSUFFICIENT_FUNDS";
    return;
  }

  let returnAmount = "Return Amount: ";
  changeArr.forEach(unit => {
    returnAmount += `${unit[0]}: $${unit[1].toFixed(2)}, `;
  });
  
returnAmount = returnAmount.slice(0, -2); 

if (totalCash === 0) {
    changeDueElement.textContent = "Status: CLOSED " + returnAmount;
    cid = cid.map(unit => [unit[0], 0]);
  } else {
    changeDueElement.textContent = "Status: OPEN " + returnAmount;
  }
}

// Function to calculate total cash in drawer
function cashInDrawer(cid) {
  return cid.reduce((total, currency) => total + currency[1], 0).toFixed(2);
}

// calculateChange function

function calculateChange(change, cid) {
  const changeArr = [];
  let remainingChange = change;

  for (let i = cid.length - 1; i >= 0; i--) {
    const currency = cid[i][0];
    let amountInDrawer = cid[i][1];
    const currencyValue = getCurrencyValue(currency);

  if (remainingChange >= currencyValue && amountInDrawer > 0) {
      let currencyToReturn = 0;

      while (remainingChange >= currencyValue && amountInDrawer > 0) {
        remainingChange -= currencyValue;
        amountInDrawer -= currencyValue;
        currencyToReturn += currencyValue;
        remainingChange = Number(remainingChange.toFixed(2));
      }

      changeArr.push([currency, currencyToReturn]);
    }
 }
  return changeArr.filter(unit => unit[1] > 0);
}


//function to get currency value

function getCurrencyValue(currency) {
  switch (currency) {
    case 'PENNY': return 0.01;
    case 'NICKEL': return 0.05;
    case 'DIME': return 0.10;
    case 'QUARTER': return 0.25;
    case 'ONE': return 1.00;
    case 'FIVE': return 5.00;
    case 'TEN': return 10.00;
    case 'TWENTY': return 20.00;
    case 'ONE HUNDRED': return 100.00;
    default: return 0;
  }
}
//purchase button
purchaseBtn.addEventListener('click', cashRegister);


/* file: styles.css */

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Can you talk about what debugging you’ve attempted so far and where you got stuck in your debugging?

3

How do I handle these different scenarios? I tried to reassign the price and CID

4

What “different scenarios” do you mean? You should try different values of price and cid.

5

the code when it checks if the cash amount is enough to cover the price. If not, it displays “Status: INSUFFICIENT_FUNDS”. If the cash is enough but the cashier cannot provide the correct change due to insufficient denominations, it also displays “Status: INSUFFICIENT_FUNDS”. If the cash is enough and the change can be provided, the system displays “Status: CLOSED” and the change due in the correct denominations.

6

What’s your HTML?

8

When I try test case 16, I get

Status: OPEN Return Amount: PENNY: $0.01

Which is not

Status: INSUFFICIENT_FUNDS

9

can you give me a hint on how to correct my code!

10

I don’t know. I cannot fix it for you. I would start by looking at the failing test case I showed you and trying to figure why that test case is giving the wrong result instead of the result the test expects.

1 Like
11

Use console.log() throughout your function to display variable contents to the console to make sure they are what you think they should be at that point in the code.

You can use this technique to trace the running code and see what’s happening at various steps. Test it this way with different function calls to understand the execution better.

1 Like