Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

I wrote the code and it get failed in different tests at each time

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 App</title>
   <link rel="stylesheet" href="./styles.css">
</head>
<body>
  <div class="container">
    <h1>Cash Register</h1>
    <label for="cash">Enter Cash:</label>
    <input type="number" id="cash" step="0.01">
    <button id="purchase-btn">Purchase</button>
    <p id="change-due"></p>
  </div>


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

/* file: styles.css */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #0f0c29;
  background-image: linear-gradient(315deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
  color: #f1f1f1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}
.container {
  background-color: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 15px;
  box-shadow: 0 0 25px rgba(0,0,0,0.5);
  max-width: 400px;
  width: 90%;
  text-align: center;
  backdrop-filter: blur(8px);
}
h1 {
  margin-bottom: 1rem;
  color: #ffffff;
  font-weight: 600;
}
label {
  color: #d1d1d1;
  font-size: 0.9rem;
}
input, button {
  padding: 0.6rem;
  margin: 0.5rem 0;
  width: 100%;
  border: 1px solid #3e3e3e;
  border-radius: 6px;
  font-size: 1rem;
  background-color: #1c1c2b;
  color: #f1f1f1;
  transition: all 0.3s;
}
input:focus, button:focus {
  outline: none;
  border-color: #9f7aea;
}
#purchase-btn {
  background-color: #9f7aea;
  color: white;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}
#purchase-btn:hover {
  background-color: #805ad5;
}
#change-due {
  margin-top: 1rem;
  font-weight: bold;
  color: #e2e8f0;
}
/* file: script.js */
let price = 19.5;
let cid = [
  ['PENNY', 0],
  ['NICKEL', 0.5],
  ['DIME', 0],
  ['QUARTER', 0],
  ['ONE', 0],
  ['FIVE', 0],
  ['TEN', 0],
  ['TWENTY', 0],
  ['ONE HUNDRED', 0]
];




const purchase = () => {
let changeDue = document.getElementById("change-due")
let order = cid.reverse();
let change = cash.value - price;
let cidTotal = cid[0][1] + cid[1][1] + cid[2][1] + cid [3][1] + cid [4][1] + cid [5][1] + cid [6][1] + cid[7][1] + cid[8][1]

	console.log("cid:" + cid);
  console.log("cash:" + cash.value);
  console.log("change:" + change);
  console.log("order" + order);
  console.log("total" + cidTotal);

  if (cash.value < price) {alert("Customer does not have enough money to purchase the item")}
	if (change === 0) {changeDue.innerText = "No change due - customer paid with exact cash"}
    else if (cidTotal === change) {changeDue.innerText = "Status: CLOSED"}
    else {changeDue.innerText = "Status: OPEN "};

  if (change > 100 && order[0][1] > 0){
	let coinsAvailable = order[0][1] / 100;
	console.log("Remaining change: " + change);
	console.log("Coins available: " + coinsAvailable);
    let coins = Math.floor(change / 100);
	if (coins <= coinsAvailable) {
		cid[0][1] -= coins * 100;
		changeDue.innerText += ` ONE HUNDRED: $${coins * 100} `;
		change -= coins * 100;
	} else {
		cid[0][1] -= coinsAvailable * 100;
		changeDue.innerText += ` ONE HUNDRED: $${coinsAvailable * 100} `;
		change -= coinsAvailable * 100;
	}
  };

  if (change > 20 && order[1][1] > 0){
	let coinsAvailable = order[1][1] / 20;
	console.log("Remaining change: " + change);
	console.log("Coins available: " + coinsAvailable);
    let coins = Math.floor(change / 20);
	if (coins <= coinsAvailable) {
		cid[1][1] -= coins * 20;
		changeDue.innerText += ` TWENTY: $${coins * 20} `;
		change -= coins * 20;
		change = change.toFixed(2);
		console.log(change);
	} else {
		cid[1][1] -= coinsAvailable * 20;
		changeDue.innerText += ` TWENTY: $${coinsAvailable * 20} `;
		change -= coinsAvailable * 20;
		change = change.toFixed(2);
		console.log(change);
	}
  };

  if (change > 10 && order[2][1] > 0){
	let coinsAvailable = order[2][1] / 10;
	console.log("Remaining change: " + change);
	console.log("Coins available: " + coinsAvailable);
    let coins = Math.floor(change / 10);
	if (coins <= coinsAvailable) {
		cid[2][1] -= coins * 10;
		changeDue.innerText += ` TEN: $${coins * 10} `;
		change -= coins * 10;
		change = change.toFixed(2);
	} else {
		cid[2][1] -= coinsAvailable * 10;
		changeDue.innerText += ` TEN: $${coinsAvailable * 10} `;
		change -= coinsAvailable * 10;
		change = change.toFixed(2);
	}
  };

  if (change > 5 && order[3][1] > 0){
	let coinsAvailable = order[3][1] / 5;
	console.log("Remaining change: " + change);
	console.log("Coins available: " + coinsAvailable);
    let coins = Math.floor(change / 5);
	if (coins <= coinsAvailable) {
		cid[3][1] -= coins * 5;
		changeDue.innerText += ` FIVE: $${coins * 5} `;
		change -= coins * 5;
		change = change.toFixed(2);
	} else {
		cid[3][1] -= coinsAvailable * 5;
		changeDue.innerText += ` FIVE: $${coinsAvailable * 5} `;
		change -= coinsAvailable * 5;
		change = change.toFixed(2);
	}
  };

  if (change > 1 && order[4][1] > 0){
	let coinsAvailable = order[4][1] / 1;
	console.log("Remaining change: " + change);
	console.log("Coins available: " + coinsAvailable);
    let coins = Math.floor(change / 1);
	if (coins <= coinsAvailable) {
		cid[4][1] -= coins * 1;
		changeDue.innerText += ` ONE: $${coins * 1} `;
		change -= coins * 1;
		change = change.toFixed(2);
	} else {
		cid[4][1] -= coinsAvailable * 1;
		changeDue.innerText += ` ONE: $${coinsAvailable * 1} `;
		change -= coinsAvailable * 1;
		change = change.toFixed(2);
	}
  };

  if (change > 0.25 && order[5][1] > 0){
	let coinsAvailable = order[5][1] / 0.25;
	console.log("Remaining change: " + change);
	console.log("Coins available: " + coinsAvailable);
    let coins = Math.floor(change / 0.25);
	if (coins <= coinsAvailable) {
		cid[5][1] -= coins * 0.25;
		changeDue.innerText += ` QUARTER: $${coins * 0.25} `;
		change -= coins * 0.25;
		change = change.toFixed(2);
	} else {
		cid[5][1] -= coinsAvailable * 0.25;
		changeDue.innerText += ` QUARTER: $${coinsAvailable * 0.25} `;
		change -= coinsAvailable * 0.25;
		change = change.toFixed(2);
	}
  };

  if (change > 0.1 && order[6][1] > 0){
	let coinsAvailable = order[6][1] / 0.1;
	console.log("Remaining change: " + change);
	console.log("Coins available: " + coinsAvailable);
    let coins = Math.floor(change / 0.1);
	if (coins <= coinsAvailable) {
		cid[6][1] -= coins * 0.1;
		changeDue.innerText += ` DIME: $${coins * 0.1} `;
		change -= coins * 0.1;
		change = change.toFixed(2);
	} else {
		cid[6][1] -= coinsAvailable * 0.1;
		changeDue.innerText += ` DIME: $${coinsAvailable * 0.1} `;
		change -= coinsAvailable * 0.1;
		change = change.toFixed(2);
	}
  };

  if (change > 0.05 && order[7][1] > 0){
	let coinsAvailable = order[7][1] / 0.05;
	console.log("Remaining change: " + change);
	console.log("Coins available: " + coinsAvailable);
    let coins = Math.floor(change / 0.05);
	if (coins <= coinsAvailable) {
		cid[7][1] -= coins * 0.05;
		changeDue.innerText += ` NICKEL: $${coins * 0.05} `;
		change -= coins * 0.05;
		change = change.toFixed(2);
	} else {
		cid[7][1] -= coinsAvailable * 0.05;
		changeDue.innerText += ` NICKEL: $${coinsAvailable * 0.05} `;
		change -= coinsAvailable * 0.05;
		change = change.toFixed(2);
	}
  };

  if (change > 0.01 && order[8][1] > 0){
	let coinsAvailable = order[8][1] / 0.01;
	console.log("Remaining change: " + change);
	console.log("Coins available: " + coinsAvailable);
    let coins = Math.floor(change / 0.01);
	if (coins <= coinsAvailable) {
		cid[8][1] -= coins * 0.01;
		changeDue.innerText += ` PENNY: $${coins * 0.01} `;
		change -= coins * 0.01;
		change = change.toFixed(2);
	} else {
		cid[8][1] -= coinsAvailable * 0.01;
		changeDue.innerText += ` PENNY: $${coinsAvailable * 0.01} `;
		change -= coinsAvailable * 0.01;
		change = change.toFixed(2);
	}
  };

  console.log("end change:" + change);
  console.log("end cid:" + cid);

  if (change > 0.01 && order[8][1] <= 0.01) {changeDue.innerText = 'Status: INSUFFICIENT_FUNDS'};
}

document.getElementById("purchase-btn").addEventListener("click", purchase);

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

if you add this code below yours in the JS file you can investigate how your code react for each test