Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

Why i didn’t passed the last two instructions : I tried so many times but still not pass the code why?

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>
  <h1>Cash Register</h1>
  <label for="price">Price:</label>
  <input type="number" id="price" value="1.87" step="0.01"><br>

  <label for="cash">Cash Provided:</label>
  <input type="number" id="cash" step="0.01"><br>

  <button id="purchase-btn">Purchase</button>

  <p id="change-due"></p>

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

/* file: script.js */
// Initial values
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]
];

// Add event listener to the purchase button
document.getElementById('purchase-btn').addEventListener('click', () => {
  let cash = parseFloat(document.getElementById('cash').value);
  let changeDue = cash - price;
  let result = { status: '', change: [] };

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

  if (cash === price) {
    document.getElementById('change-due').innerText = 'No change due - customer paid with exact cash';
    return;
  }

  // Determine if we have enough funds to give the correct change
  const totalCid = getTotalCid(cid);
  if (changeDue > totalCid) {
    result.status = 'INSUFFICIENT_FUNDS';
  } else {
    const change = getChange(changeDue, cid);
    if (change === null) {
      result.status = 'INSUFFICIENT_FUNDS';
    } else if (changeDue === totalCid) {
      result.status = 'CLOSED';
      result.change = cid;
    } else {
      result.status = 'OPEN';
      result.change = change;
    }
  }

  displayResult(result);
});

// Function to calculate the total cash in the drawer
function getTotalCid(cid) {
  return cid.reduce((total, [_, amount]) => total + amount, 0).toFixed(2);
}

// Function to calculate the change to be returned
function getChange(changeDue, cid) {
  let change = [];
  let remainingChange = changeDue;

  // Copy the cid array to avoid mutating the original array
  let cidCopy = cid.map(([name, amount]) => [name, amount]);

  const denominations = [
    ['ONE HUNDRED', 100],
    ['TWENTY', 20],
    ['TEN', 10],
    ['FIVE', 5],
    ['ONE', 1],
    ['QUARTER', 0.25],
    ['DIME', 0.1],
    ['NICKEL', 0.05],
    ['PENNY', 0.01]
  ];

  for (let [name, value] of denominations) {
    let amount = 0;
    while (remainingChange >= value && cidCopy.find(([denom]) => denom === name)[1] > 0) {
      remainingChange -= value;
      remainingChange = Math.round(remainingChange * 100) / 100; // Avoid floating point precision issues
      cidCopy.find(([denom]) => denom === name)[1] -= value;
      amount += value;
    }
    if (amount > 0) {
      change.push([name, amount]);
    }
  }

  // If we could not give the exact change
  if (remainingChange > 0) {
    return null;
  }

  // Check if the change matches exactly with the cid
  if (changeDue === getTotalCid(cid)) {
    return cid; // The drawer is exactly closed
  }

  return change;
}

// Function to display the result
function displayResult(result) {
  let changeDueElement = document.getElementById('change-due');
  if (result.status === 'INSUFFICIENT_FUNDS') {
    changeDueElement.innerText = 'Status: INSUFFICIENT_FUNDS';
  } else if (result.status === 'CLOSED') {
    changeDueElement.innerText = `Status: CLOSED ${result.change.map(([name, amount]) => `${name}: $${amount.toFixed(2)}`).join(' ')}`;
  } else {
    changeDueElement.innerText = `Status: OPEN ${result.change.map(([name, amount]) => `${name}: $${amount.toFixed(2)}`).join(' ')}`;
  }
}

/* file: styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 20px;
}

h1 {
  font-size: 24px;
}

label {
  display: block;
  margin-top: 10px;
}

input {
  margin-bottom: 10px;
}

button {
  margin-top: 10px;
  padding: 10px 20px;
  font-size: 16px;
}

#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/127.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

Are you getting the right results? How did you check that?

I’m experiencing the same issue while working on my cash register and accounts app for my store selling knee wraps weightlifting belts. The challenge seems to be with properly calculating the change due and handling the cash-in-drawer (cid) correctly. Specifically, I’m having trouble ensuring that the change calculation takes into account all available denominations and manages rounding errors accurately. If the change cannot be given exactly or if the drawer should be closed, it’s important to address these cases correctly. Double-checking the logic for handling edge cases and rounding issues is crucial to resolving these problems. I’ve found that logging values at different stages helps in pinpointing where things might be going wrong.
Thank you :blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush::blush: