Status: Closed problem in cash register project

So I have been struggeling with this project for quite a while now. Can someone please tell me where my problem is with the Status: Closed part, I cant seem to find the solution. I have redo the project 3 times now and trying to find something different even trying to use an AI tool to see if that helps with the problems but it just caused even more. Can someone maybe help me with this?

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 currencyUnit = [
  ['PENNY', 0.01],
  ['NICKEL', 0.05],
  ['DIME', 0.1],
  ['QUARTER', 0.25],
  ['ONE', 1],
  ['FIVE', 5],
  ['TEN', 10],
  ['TWENTY', 20],
  ['ONE HUNDRED', 100]
];

// Listen for the button click
sale.addEventListener('click', () => {
  const cashValue = parseFloat(cash.value);
  const changeDue = cashValue - price;

  // If customer doesn't have enough money
  if (cashValue < price) {
    alert('Customer does not have enough money to purchase the item');
    return;
  }

  // If customer paid exactly the price
  if (cashValue === price) {
    change.innerHTML = 'No change due - customer paid with exact cash';
    return;
  }

  // Otherwise, calculate the change due
  const changeResult = getChange(changeDue, cid);

  // Display result based on status
  if (changeResult.status === 'INSUFFICIENT_FUNDS' || changeResult.status === 'CLOSED') {
    change.innerHTML = `Status: ${changeResult.status}<br>${formatChange(changeResult.change)}`;
  } else {
    change.innerHTML = `Status: OPEN<br>${formatChange(changeResult.change)}`;
  }
});

// Function to calculate change
const getChange = (changeDue, cid) => {
  // Convert to cents to avoid floating-point issues
  let changeDueInCents = Math.round(changeDue * 100);
  let totalCidInCents = Math.round(cid.reduce((sum, [_, amount]) => sum + amount * 100, 0));

  // If total cash in the drawer is less than the change due, return insufficient funds
  if (totalCidInCents < changeDueInCents) {
    return {
      status: 'INSUFFICIENT_FUNDS',
      change: []
    };
  }

  // Prepare to calculate the change
  let changedArray = [];
  let remainingChange = changeDueInCents;

  // Create a copy of the drawer to avoid modifying the original
  let drawerCopy = cid.map(([unit, amount]) => [unit, Math.round(amount * 100)]);

  // Process denominations in descending order (from highest to lowest)
  for (let i = currencyUnit.length - 1; i >= 0; i--) {
    let unit = currencyUnit[i][0];
    let unitValue = Math.round(currencyUnit[i][1] * 100); // Convert to cents
    let unitInDrawer = drawerCopy[i][1];

    if (unitValue <= remainingChange && unitInDrawer > 0) {
      let amountFromUnit = 0;

      while (remainingChange >= unitValue && unitInDrawer >= unitValue) {
        remainingChange -= unitValue;
        unitInDrawer -= unitValue;
        amountFromUnit += unitValue;
      }

      if (amountFromUnit > 0) {
        changedArray.push([unit, amountFromUnit / 100]); // Convert back to dollars
      }
    }
  }

  // If we couldn't give exact change
  if (remainingChange > 0) {
    return {
      status: 'INSUFFICIENT_FUNDS',
      change: []
    };
  }

  // If the total cash in the drawer equals the change due, return CLOSED
  if (totalCidInCents === changeDueInCents) {
    return {
      status: 'CLOSED',
      change: cid
    };
  }

  // Otherwise, return the calculated change
  return {
    status: 'OPEN',
    change: changedArray
  };
};

// Format the change into a string for display
const formatChange = changedArray => {
  return changedArray.map(([unit, amount]) => `${unit}: $${amount.toFixed(2)}`).join('<br>');
};


please share the link to the project

also for proper debugging please share your HTML

Here is the link to the project

Ok here is the HTML aswell, there might be a few variables that doesnt make sense. This is because I have redo the project a few times and havent changed my HTML so I will change this later but youll see what i mean. Thanks alot

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cash Register Project</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

    <div class="page-container">
      <div class="content-container">
        <div class="user-name">Ludwig</div>
        <div class="heading">Cash Register Project</div>
        <div class="results js-results" id="change-due"><!--Results should display here--></div>
        <div class="cash-input">Enter cash from customer:</div>
        <input type="number" class="input-cash js-cash-input" id="cash">
        <button class="purchase-btn js-purchase-btn" id="purchase-btn">Purchase</button>
        
        <div class="cash-register-container">
         <!--SCREEN--> 
          <div class="screen-container">
            <div class="screen">
              <div class="screen-output-container">
                <div class="total-price js-screen-output"></div>
              </div>
            </div>
          </div>
         <!--SCREEN-->

          <div class="screen-arm"></div>
          
          <div class="register-top">
          <!--BUTTONS-->
            <div class="register-btn-container">
              <div class="btn-row">
                <div class="btn"></div>
                <div class="btn"></div>
                <div class="btn"></div>
              </div>
              <div class="btn-row">
                <div class="btn"></div>
                <div class="btn"></div>
                <div class="btn"></div>
              </div>
              <div class="btn-row">
                <div class="btn"></div>
                <div class="btn"></div>
                <div class="btn"></div>
              </div>
            </div>
          <!--BUTTONS-->
            <div class="cash-avail">
              <div>Change in drawer:</div>
              <div>Pennies: $1.01</div>
              <div>Nickels: $2.05</div>
              <div>Dimes: $3.1</div>
              <div>Quarters: $4.25</div>
              <div>Ones: $90</div>
              <div>Fives: $55</div>
              <div>Tens: $20</div>
              <div>Twenties: $60</div>
              <div>Hundreds: $100</div>
            </div>

          </div>
          <div class="register-bottom">
            <div class="lock"></div>
          </div>
        </div>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

have you checked what your app outputs for the values of the test?

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

Yes I did, it just shows :

Status: OPEN
QUARTER: $0.50

It might be a small little problem i keep overseeing but yeah

that’s not what I see when I try it with the code you shared
I see more than that

Actually cause I just added 20 again and it said the same thing. Idk I might keep making the same mistake over and over but idk.

What I see is this:

can you describe how you are testing?

let me send a screenshot of what im getting:

This is what I get and I usually console.log() the variables like totalCidInCents to check if everything is working fine. i might have a problem somewhere but where that is I just dont know lol.

can you describe how you are testing?


I have added

price = 19.5;
cash.value = 20;
cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];

at the bottom of the editor, then pressed the button.

Please describe how you are testing so I can do the same

I have actually never thought on testing it like that. i just kept trying to check how much total cid i had and what might be wrong. I have never tested it. :sweat_smile: should i try and test it like that and try to figure out the problem from there?

what are you doing if not testing and debugging your code? how are you trying to see what is the output of your function and what is causing it?

Most of the time I just console.log some of the variables checking if most of the code is working then trying to figure out where I might have done something wrong then console.log that result. thats usually what I do :sweat_smile: been working the past few projects but yeah idk this one has been making my head scratch for a few weeks now lol.

I need specific steps to do the same testing you are doing.

With my description you are able to repeat the same steps and get a result, with yours I am not able to.

With the testing you shared, it doesn’t look like you checked with the cid of that test

Hi there, sorry for taking this long to get back to you. I was busy with university papers, but don’t worry im going to do a few other tasks on my own maybe I’ll just click with more practice with coding some random projects and trying new things. Thanks for trying to help