Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I’m having issue on where I can put this condition “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.” in my script.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cash Register</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Cash Register</h1>
        <label for="price">Price:</label>
        <input type="number" id="price" value="1.87" step="0.01" required>
        
        <label for="cash">Cash Provided:</label>
        <input type="number" id="cash" step="0.01" required>
        
        <button id="purchase-btn">Purchase</button>
        
        <div id="change-due"></div>
    </div>
    <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]
];

// Currency unit values
const currencyUnit = {
  "PENNY": 0.01,
  "NICKEL": 0.05,
  "DIME": 0.1,
  "QUARTER": 0.25,
  "ONE": 1,
  "FIVE": 5,
  "TEN": 10,
  "TWENTY": 20,
  "ONE HUNDRED": 100
};

// Function to handle the cash register logic
function checkCashRegister(price, cash, cid) {
  let changeDue = cash - price;
  let totalCid = cid.reduce((sum, curr) => sum + curr[1], 0).toFixed(2);

  if (changeDue > totalCid) {
    return { status: "INSUFFICIENT_FUNDS", change: [] };
  }


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


  let changeArray = [];
  let cidCopy = [...cid].reverse();

  for (let [unit, amount] of cidCopy) {
    let unitValue = currencyUnit[unit];
    let unitChange = 0;

    while (changeDue >= unitValue && amount > 0) {
      changeDue -= unitValue;
      changeDue = changeDue.toFixed(2); // Avoid floating-point precision issues
      amount -= unitValue;
      unitChange += unitValue;
    }

    if (unitChange > 0) {
      changeArray.push([unit, unitChange]);
    }
  }
  
  if (changeDue > 0) {
    return { status: "INSUFFICIENT_FUNDS", change: [] };
  }

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

// Event listener for the purchase button
document.getElementById("purchase-btn").addEventListener("click", () => {
  const cashInput = parseFloat(document.getElementById("cash").value);
  const changeDueElement = document.getElementById("change-due");

  if (cashInput < price) {
    alert("Customer does not have enough money to purchase the item");
    return;
  }

  if (cashInput === price) {
    changeDueElement.textContent = "No change due - customer paid with exact cash";
    return;
  }

  const result = checkCashRegister(price, cashInput, cid);

  if (result.status === "INSUFFICIENT_FUNDS") {
    changeDueElement.textContent = "Status: INSUFFICIENT_FUNDS";
  } else if (result.status === "CLOSED") {
    // console.log('res',result)
    // const changeString = result.change.map(([unit, amount]) => `${unit}: $${amount.toFixed(2)}`).join(" ");
    
    
      const changeString = result.change[0][0] +": $"+ result.change[0][1].toFixed(2);

      changeDueElement.textContent = `Status: CLOSED ${changeString}`;
    
  } else if (result.status === "OPEN") {
    const changeString = result.change.map(([unit, amount]) => `${unit}: $${amount.toFixed(2)}`).join(" ");
    changeDueElement.textContent = `Status: OPEN ${changeString}`;
  }
//   let totalCid = cid.reduce((sum, curr) => sum + curr[1], 0).toFixed(2);
//       // console.log(totalCid + ' ' + (cashInput-price).toFixed(2))
// if((price < cashInput) &&(totalCid == (cashInput-price).toFixed(2))){
//       return changeDueElement.textContent = `Status: CLOSED`;
//     }
  
});

/* file: styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 20px;
}

.container {
    max-width: 400px;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

label {
    display: block;
    margin: 10px 0 5px;
}

input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

#change-due {
    margin-top: 20px;
    font-weight: bold;
}

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

You have issues with the calculations

In a situation like

cid =
   [ [ 'PENNY', 0.93 ],
     [ 'NICKEL', 0.25 ],
     [ 'DIME', 0.4 ],
     [ 'QUARTER', 1 ],
     [ 'ONE', 0 ],
     [ 'FIVE', 0 ],
     [ 'TEN', 10 ],
     [ 'TWENTY', 0 ],
     [ 'ONE HUNDRED', 0 ] ];
price = 57.42;
document.querySelector('#cash').value = '70'

your code is showing Status: CLOSED PENNY: $0.93 which is not correct

1 Like