Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

My code works as intended but i dont pass any of the tests from 7 to the last and also dont pass the 2 and 3, wich ask to have the global variables price and cid, and they clearly are there.

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" />
    <script type="module" src="script.js"></script>
    <link rel="stylesheet" href="styles.css" />
    <title>Cash register</title>
  </head>
  <body>
    <main>
      <h3>Enter cash from customer</h3>
      <input type="number" id="cash" />
      <p id="change-due"></p>
      <h3 id="price">Price:
      </h3>
      <button id="purchase-btn">Purchase</button>
      <h3>Change in drawer:</h3>
      <ul id="change-list"></ul>
    </body>
  </main>
</html>


/* file: styles.css */
body{
  background-color:#303030;
}

li{
  list-style:none;
}

ul{
  display: flex;
  flex-direction: column;
}

button{
  color:#303030;
}

input{
  color:#303030
}

*{
  color:white;
  margin: 0;
  padding: 0;
}

main{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  gap: 1rem;
}

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

let cash = document.querySelector("#cash");
let change = document.querySelector("#change-due");
let purchase = document.querySelector("#purchase-btn");
let priceElement = document.querySelector("#price");

priceElement.innerText += " " + price;

const updateChange = () => {
  let ul = document.querySelector("ul");
  ul.innerHTML = "";
  for (const currency of cid) {
    let li = document.createElement("li");
    li.textContent = `${currency[0]}: ${currency[1]}`;
    ul.appendChild(li);
  }
};

updateChange();

const calculateChange = (cash) => {
  const amounts = {
  PENNY: 0.01,
  NICKEL: 0.05,
  DIME: 0.1,
  QUARTER: 0.25,
  ONE: 1,
  FIVE: 5,
  TEN: 10,
  TWENTY: 20,
  "ONE HUNDRED": 100,
};
  let changeDue = parseFloat((cash - price).toFixed(2));
  let i = cid.length - 1;
  let message = "";
  let used = {};
  while (changeDue > 0 && i >= 0) {
    let coinValue = amounts[cid[i][0]];
    console.log(changeDue, coinValue, cid[i][1]);
    if (coinValue <= changeDue && cid[i][1] >= coinValue) {
      changeDue = parseFloat((changeDue - coinValue).toFixed(2));
      cid[i][1] = parseFloat((cid[i][1] - coinValue).toFixed(2));
      used[cid[i][0]] = parseFloat(
        ((used[cid[i][0]] || 0) + coinValue).toFixed(2)
      );
    }
    if (i === 0 && cid[i][1] < changeDue) {
      message = "Status: INSUFFICIENT_FUNDS";
      return message;
    }
    if (coinValue > changeDue || cid[i][1] < coinValue) {
      i--;
    }
  }
  let status='CLOSED'
  for(const elem of cid){
    if(elem[1]>0){
      status='OPEN'
      break
    }
  }
  message = `Status: ${status}`;
  for (const coin in used) {
    message += ` ${coin}: $${used[coin]}`;
  }
  return message;
};

purchase.addEventListener("click", () => {
  if (cash.value < price) {
    alert("Customer does not have enough money to purchase the item");
    return;
  }

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

  change.textContent = calculateChange(+cash.value);
  updateChange();
});

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 OPR/114.0.0.0 (Edition std-1)

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

The problem was in the way i linked the script in the html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Cash register</title>
  </head>
  <body>
    <main>
      <h3>Enter cash from customer</h3>
      <input type="number" id="cash" />
      <p id="change-due"></p>
      <h3 id="price">Price:
      </h3>
      <button id="purchase-btn">Purchase</button>
      <h3>Change in drawer:</h3>
      <ul id="change-list"></ul>
    </main>
  </body>
  <script src="script.js"></script>
</html>

here is it working, the script must be after or in the body i guess