Build a Cash Register

JavaScript
1 

let price = 3.26; 
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]
];
document.getElementById('purchase-btn').addEventListener('click', function() {
    const cash = parseFloat(document.getElementById('cash').value);
    const changeDue = (cash - price).toFixed(2);
    const changeArr = [];
    if (cash < price) {
        alert("Customer does not have enough money to purchase the item");
        return;
    }
    if (changeDue === "0.00") {
        document.getElementById('change-due').innerText = "No change due - customer paid with exact cash";
        return;
    }

    let totalCid = parseFloat(cid.reduce((acc, curr) => acc + curr[1], 0).toFixed(2));
    
    if (parseFloat(changeDue) > totalCid) {
        document.getElementById('change-due').innerText = "Status: INSUFFICIENT_FUNDS";
        return;
    }
    
    let remainingChange = parseFloat(changeDue);
    
    for (let i = cid.length - 1; i >= 0; i--) {
        let coinName = cid[i][0];
        let coinValue = cid[i][1];
        let coinTotalValue = 0;
        
        while (remainingChange >= getCoinValue(coinName) && coinValue > 0) {
            remainingChange = (remainingChange - getCoinValue(coinName)).toFixed(2);
            coinValue -= getCoinValue(coinName);
            coinTotalValue += getCoinValue(coinName);
        }

        if (coinTotalValue > 0) {
            changeArr.push([coinName, coinTotalValue]);
        }
    }

    if (remainingChange > 0) {
        document.getElementById('change-due').innerText = "Status: INSUFFICIENT_FUNDS";
    } else {
        if (totalCid - changeArr.reduce((acc, curr) => acc + curr[1], 0).toFixed(2) === "0.00") {
            document.getElementById('change-due').innerText = "Status: CLOSED " + formatChange(cid);
        } else {
            document.getElementById('change-due').innerText = "Status: OPEN " + formatChange(changeArr);
        }
    }
});

function getCoinValue(coin) {
    switch (coin) {
        case "PENNY": return 0.01;
        case "NICKEL": return 0.05;
        case "DIME": return 0.1;
        case "QUARTER": return 0.25;
        case "ONE": return 1;
        case "FIVE": return 5;
        case "TEN": return 10;
        case "TWENTY": return 20;
        case "ONE HUNDRED": return 100;
        default: return 0;
    }
}
function formatChange(changeArr) {
    return changeArr.map(coin => `${coin[0]}: $${coin[1].toFixed(2)}`).join(" ");
}

unable to pass last two tests

2

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356Ă—380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

You haven’t shared the html?

Also please include a link to the project page to help people check your code.

4

thank you so much for the tip!!
I’ve done this before, but it slipped out of my mind:(

1 Like
5 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cash Register</title>
    <link rel="stylesheet" href="./styles.css" />
    </head>
    <body>
      <main>
      <h1> Cash Register</h1>
      <div id="change-due"></div>
    <div id="input-div">
      <label for="cash"> Enter the cash from the customer: </label>
      <input id="cash" type="number" class="user-input" value=""/>
      <button class="check-btn-styles" id="purchase-btn">Purchase</button>
    </div>
    <div class="container">
      <div class="top-display-screen-container">
        <p class="price-screen" id="price-screen">Total: $3.26</p>
    <div class="connector"></div>
        </div>
        <div class="top-register">
          <div class="btns-container">
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
            <button class="btn"></button>
          </div>
          <div id="cash-drawer-display" class="cash-drawer-display">
            <p><strong>Change in drawer:</strong></p>
            <p>Pennies: $1.01</p>
            <p>Nickels: $2.05</p>
            <p>Dimes: $3.1</p>
            <p>Quarters: $4.25</p>
            <p>Ones: $90</p>
            <p>Fives: $55</p>
            <p>Tens: $20</p>
            <p>Twenties: $60</p>
            <p>Hundreds: $100</p>
          </div>
        </div>
        <div class="bottom-register">
          <div class="circle"></div>
        </div>
      </div>
      </main>
<script src="./script.js"></script>
      </body>
      
    </html>

here’s my html code

7

Any time you do a strict comparison like this one in the code, I believe the if will always fail because you are comparing a float to a string. I would change all of these statements to an == 0.

Also, the failing testcase is failing because you are leaving in zero value items in the change-due string. You have to filter those out.

Here’s a test I did for eg:
I kept the same price as in your code and zeroed out all the bills and coins except for the nickels which I left at 2.05. Then I typed in $3.27 to trigger the insufficient funds status. After that I typed in 5.31 and I got this:

IMG_6924
IMG_69241170Ă—2532 224 KB

Edit: I fixed the strict equals first though just fyi.

8

Thank you so much!!!
I passed :partying_face:

1 Like