Build a Cash Register Project

JavaScript
1

I double checked all test cases in Instructions sections, however, it seems like I could not pass some of the test cases.

Please help me.
Best regards,

Here is my code:

//HTML index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <title>Cash Register Project</title>
  </head>
  <body>
  <h1>Cash Register Project</h1>
  
  <div class="input">
    <label name="input" id="input" for="cash">Enter cash from customer:</label>
    <input type="number" id="cash">
    <button type="button" id="purchase-btn">Purchase</button>
    <div class="change-due" id="change-due"></div>
  </div>
  <div class="cash-machine-container">
    <div class="screen">
      <div class="inner-screen">
        <span id="price"></span>
      </div>
    </div>
    <div class="neck"></div>
    <div class="machine-body-container">
      <div class="keyboard">
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
        <div class="key"></div>
      </div>
      <div class="information" id="drawer-information">
        <p style="margin: 7px auto"><b>Change in drawer:</b></p>
        <p>Hundreds: $ <span class="cid"></span></p>
        <p>Twenties: $ <span class="cid"></span></p>
        <p>Tens: $ <span class="cid"></span></p>
        <p>Fives: $ <span class="cid"></span></p>
        <p>Ones: $ <span class="cid"></span></p>
        <p>Quarters: $ <span class="cid"></span></p>
        <p>Dimes: $ <span class="cid"></span></p>
        <p>Nickels: $ <span class="cid"></span></p>
        <p>Pennies: $ <span class="cid"></span></p>        
      </div>
    </div>
    <div class="machine-foot">
      <div class="handle"></div>
    </div>
  </div>
  <script src="script.js"></script>
  </body>
</html>

//CSS styles.css

*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

:root {
  --color-machine: #2b6987;
  --color-background: #423534;
}

body {
  margin: 0 auto 0 auto;
  text-align: center;
  background-color: var(--color-background);
  color: white;
  display: flex;
  flex-direction: column;
}

.input {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.input > input,
.input > button {
  font-size: 18px;
}

input {
  text-align: center;
}

button {
  padding: 5px 10px;
  border-radius: 5px;
}

.cash-machine-container {
  width: 400px;
  height: 450px;
  display: flex;
  flex-direction: column;
  margin: 20px auto;
}

.screen {
  width: 200px;
  height: 40px;
  border: 6px solid var(--color-machine);
  margin-left: 20px;
  background-color: var(--color-machine);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.inner-screen {
  background-color: black;
  width: 95%;
  height: 30px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.neck {
  width: 50px;
  height: 40px;
  margin-left: 50px;
  background-color: var(--color-machine);
}

.machine-body-container {
  width: 100%;
  height: 300px;
  border-radius: 25px 25px 0px 0px;
  background-color: var(--color-machine);
  display: flex;
  gap: 25px;
  justify-content: center;
  padding-top: 25px;
}

.keyboard{
  width: 70px;
  height: 70px;
  background-color: var(--color-machine);
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto auto;
  align-items: center;
  justify-content: space-evenly;
}

.key {
  width: 20px;
  height: 20px;
  background-color:black;
  border-radius: 2px;

}

.information {
  width: 250px;
  height: 250px;
  background-color: white;
  color: black;
  font-size: 18px;
}

.machine-foot {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
  background-color: var(--color-machine);
}

.handle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: black;
}

//Javascript script.js

// let price = 3.26;
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 cid = [
  ["PENNY", 0.5],
  ["NICKEL", 0],
  ["DIME", 0],
  ["QUARTER", 0],
  ["ONE", 0],
  ["FIVE", 0],
  ["TEN", 0],
  ["TWENTY", 0],
  ["ONE HUNDRED", 0]
];

const resultDiv = document.getElementById("change-due");
const priceSpan = document.getElementById("price");
const cashInput = document.getElementById("cash");
const drawerInfo = document.getElementById("drawer-information");
const listOfCids = document.querySelectorAll(".cid");
const purchaseBtn = document.getElementById("purchase-btn");

let reverseCid = [...cid].reverse();
let denom = [100, 20, 10, 5, 1, 0.25, 0.1, 0.05, 0.01]
let change = [ ];
let result = {
  "status":"",
  "change":change
}


priceSpan.textContent = `Total: $${price}`;

//This function updates results to UI, include: status and change
const updateUI = () => {
  //update drawerInfo
  for (let i = 0; i<reverseCid.length; i++)
    {
      listOfCids[i].textContent = reverseCid[i][1]
    } 
  //update status and change
  resultDiv.textContent = `Status: ${result.status}`;
  for (let i = 0; i<reverseCid.length; i++)
    {
      if (change[i])
      {
      resultDiv.innerHTML += `
      <p>${reverseCid[i][0]}: $${result.change[i]}</p>
      `;
      }
    } 
 }


window.addEventListener("onload",updateUI());

purchaseBtn.addEventListener("click",()=>{

  if (Number(cashInput.value) < price){
    cashInput.value = "";
    alert("Customer does not have enough money to purchase the item.")
    return
  } 
  
  if (Number(cashInput.value)===price){
    resultDiv.textContent = "No change due - customer paid with exact cash"
    cashInput.value = "";
    return
  } 

    //Calculate the changeDue and totalCid
    let totalCid = parseFloat(
  cid
    .map(total=>total[1])
    .reduce((curr,prev)=>curr+prev)
    .toFixed(2)
    );
    let changeDue = Math.round((Number(cashInput.value)-price)*100)/100;

    console.log(totalCid, changeDue)

    // This time changeDue always greater than 0
   
    if (totalCid < changeDue){
      result.status = "INSUFFICIENT_FUNDS";
      updateUI();
    }
     
      if (totalCid >= changeDue){
        //Main function
        for (let i = 0; i<reverseCid.length; i++){
          let count = 0;
          while (changeDue >= denom[i] && reverseCid[i][1] >= denom[i])
            {
            changeDue -= denom[i];
            reverseCid[i][1] -= denom[i];
            totalCid -= denom[i];
            changeDue = strip(changeDue);
            totalCid = strip(totalCid);
            reverseCid[i][1] = strip(reverseCid[i][1]);
            count++
            }
          change.push(count*denom[i]);
          console.log(change)
          console.log(totalCid, changeDue)
         };
      };

      if (changeDue > 0){
        result.status = "INSUFFICIENT_FUNDS";
        change = [];
        updateUI();
        return
      }
      
      if (totalCid === 0 && changeDue === 0){
        result.status = "CLOSED";
        updateUI();
        return
      }
  
      if (totalCid > 0){
        result.status = "OPEN";
        updateUI();
        return
      }
    
    console.log(`totalCid: ${totalCid}`,`changeDue: ${changeDue}`)
    
    console.log(`status: ${result.status}`)
})

function strip(num) {
  return Number((parseFloat(num).toPrecision(12)));
}
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 (').

1 Like
3

Don’t forget to talk about how you’re stuck instead of just the fact that you are stuck!

These global variables will be a problem. You should not use any global variables like these.

4

Thank you very much JeremyLT. I’ll note that for future post.

1 Like
5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.