Build a Cash Register Project - Build a Cash Register

santiago.reyes861 · February 6, 2025, 7:24pm

Tell us what’s happening:

hi, i would like you to check my code, please, all of the test are correct except 17, 18 and 19. It doesn’t make sense to me because test number 16 is correct which is the one related to test 17, also, I already tried some cases and it is still incorrect. The test 18 and 19 are similar, for these cases, i also tried some inputs, the answer is correct, but the test aren’t

the code is bellow

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>
    <main>
        <div id="content">
            <h1>Cash Register</h1>
            <div id="entry">
                <div id="change-due"></div>
                <div id="input">
                    <label for="cash">Enter cash from customer:</label>
                    <input type="number" id="cash" min="0">
                    <button id="purchase-btn">Purchase</button>
                </div>
            </div>
            <div id="cash-register">
                <div id="left-part">
                    <div id="price"></div>
                    <div id="cash-register-btns">
                        <div class="cash-register-btn">9</div>
                        <div class="cash-register-btn">8</div>
                        <div class="cash-register-btn">7</div>
                        <div class="cash-register-btn">6</div>
                        <div class="cash-register-btn">5</div>
                        <div class="cash-register-btn">4</div>
                        <div class="cash-register-btn">3</div>
                        <div class="cash-register-btn">2</div>
                        <div class="cash-register-btn">1</div>
                        <div class="cash-register-btn open"></div>
                        <div class="cash-register-btn cero">0</div>
                        <div class="cash-register-btn close"></div>
                    </div>
                    
                </div>
                <div id="cash-in-drawer">
                    <p>Change In Drawer</p><br>
                    <div>Total in Currency --- Units</div><br>
                    <div id="cid">
                        
                    </div>
                </div>
            </div>
        </div>
    </main>
    <script src="script.js"></script>
</body>
</html>

/* file: script.js */
// return change to the customer based on the price of the item, the amount of cash provided by the customer, and the amount of cash in the cash drawer
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]];
// 
// let price = 19.5;
// let cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]
// let cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]

const currencyValues = [0.01, 0.05, 0.1, 0.25, 1, 5, 10, 20, 100];
const changeText = document.getElementById('change-due');
const input = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const textPrice = document.getElementById('price');
textPrice.textContent = `Total: $${price}`;
const cidContainer = document.getElementById('cid');
let quantityCurrencies = [];
for (let i = 0; i < currencyValues.length; i++) {
  quantityCurrencies.push(Math.round(cid[i][1] / currencyValues[i]));
}



// Functions -------------------------------------------------------------------------
const verifyInput = () => {
  let sumCashInDrawer = parseFloat((cid.reduce((acc, el) => acc + el[1], 0)).toFixed(2))
  let inputValue = parseFloat((parseFloat(input.value)).toFixed(2));
  let change = parseFloat((parseFloat(inputValue - price)).toFixed(2));

  if (change === sumCashInDrawer){
    return true;
  } 
  if (!inputValue) {
    alert('Please, enter some money');
  } else if(inputValue < price) {
    alert('Customer does not have enough money to purchase the item');
  } else if (change > sumCashInDrawer) {
    displayStatus()
  } else {
    return true;
  }
}



// function that updates the visual screen on the HTML
const updateScreenCashInDrawer = (arr) => {
  cidContainer.innerHTML = '';
  for (let i = 0; i < cid.length; i++) {
    const quantity = cid[i][1] / currencyValues[i];
    cidContainer.innerHTML += `<div><span>${cid[i][0].charAt(0) + cid[i][0].slice(1).toLowerCase()}</span>: $${cid[i][1]} --- ${Math.round(quantity)} u</div>`
  } 
}
updateScreenCashInDrawer(cid); // call function to see the initial balance in the cash drawer




const calculateChange = (customerMoney) => {
  let changeDue = parseFloat((customerMoney - price).toFixed(2));
  let possible = false;

// the flag possible was declared to verify if it is possible to return the change with the denominations available

  if (changeDue == 0) {
    possible = true;
  }

  for (let i = (cid.length) - 1; i >= 0; i--) {
    if (changeDue >= currencyValues[i]) {
      let sumToLeft = 0
      for (let j = i; j >= 0; j--) {
        sumToLeft += cid[j][1];
      }
      if (sumToLeft >= changeDue) {
        possible = true;
      }
    }  
  }

  if (possible) {
    for (let i = (cid.length) - 1; i >= 0; i--) {
      let coinsAvailable = quantityCurrencies[i];
      let coinsUsed = 0;
      
      if (changeDue >= currencyValues[i] && quantityCurrencies[i] != 0) { 
        console.log(cid[i][0])
        while (coinsAvailable > 0 && changeDue >= currencyValues[i]) {
          coinsAvailable -= 1;
          coinsUsed += 1;
  
          quantityCurrencies[i] = coinsAvailable;
          changeDue -= parseFloat(currencyValues[i].toFixed(2));
          changeDue = parseFloat(changeDue.toFixed(2));
        }
        cid[i][1] = parseFloat((quantityCurrencies[i] * currencyValues[i]).toFixed(2));
        
        console.log(changeDue)
        changeText.innerHTML += `<p>${cid[i][0]}: $${parseFloat(parseFloat(currencyValues[i] * coinsUsed).toFixed(2))}</p>`
        console.log(quantityCurrencies)
      } else {
        console.log(`${currencyValues[i]} no se uso`)
      }
    }
  } else {
    changeText.innerHTML = '';
    changeText.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
  }
  
}

// function that displays the status
const displayStatus = () => {
  changeText.innerHTML = ''
  const totalCashInDrawer = parseFloat(cid.reduce((acc, el) => acc + el[1], 0).toFixed(2));
  const change = parseFloat((input.value - price).toFixed(2));
  
  if (totalCashInDrawer < change) {
    changeText.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
  } else if (totalCashInDrawer === change) {
    changeText.innerHTML += `<p>Status: CLOSED</p>`;
  } else if (totalCashInDrawer > change) {
    changeText.innerHTML += `<p>Status: OPEN</p>`;
  } 
  if (input.value == price) {
    changeText.textContent = 'No change due - customer paid with exact cash';
  }
}


// Event Listeners -------------------------------------------------------------------------
purchaseBtn.addEventListener('click', () => {
  updateScreenCashInDrawer(cid);
  if (verifyInput()) {
    displayStatus()
    calculateChange(parseFloat((parseFloat(input.value)).toFixed(2)));
    updateScreenCashInDrawer(cid);  
  } else {
    console.log('invalid input')
  }
})
input.addEventListener('keydown', (e) => {
  if (e.key == 'Enter') {
    updateScreenCashInDrawer(cid);
    if (verifyInput()) {
      displayStatus()
      calculateChange(parseFloat((parseFloat(input.value)).toFixed(2)));
      updateScreenCashInDrawer(cid);
    }
    else {
      console.log('invalid input')
    }
  }
})

/* file: styles.css */
* {
    box-sizing: border-box;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    margin: 0;
    padding: 0;
}
body {
    background-color: rgb(30, 33, 41);
    color: white;
}
main {
    width: 100vw;
    height: 100vh;
    text-align: center;
    align-content: center;
}
#content {
    max-width: 700px;
    margin: auto;
}

h1 {
    font-size: 50px;
    margin-bottom: 30px;
}
#entry {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 30px;
}

#input {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}
#input > label {
    font-size: 20px;

}
#input > input {
    font-size: 20px;
    width: 40%;
    padding: 8px 5px;
}
#input > button {
    font-size: 20px;
    width: 20%;
    padding: 5px 3px;
    background-color: rgb(253, 226, 114);
    border: 4px solid rgb(251, 201, 0);
    cursor: pointer;
    transition-duration: .3s;
}

#input > button:hover {
    background-color: rgb(252, 175, 87);
    border: 4px solid rgb(255, 153, 0);
}

#cash-register {
    width: 100%;
    height: 450px;
    background-color: rgb(74, 74, 74);
    display: flex;
    border-radius: 15px;
}

#left-part {
    width: 40%;
    margin: 40px 20px 40px 40px;

}

#price {
    width: 100%;
    background-color: black;
    padding: 10px 20px;
    font-size: 20px;
    text-align: right;
    color: rgb(0, 255, 0);
    border-radius: 10px;
}

#cash-in-drawer {
    width: 60%;
    margin: 40px 40px 40px 20px;
    background-color: aliceblue;
    background-color: black;
    color: rgb(0, 255, 0);
    border-radius: 10px;
    text-align: right;
    padding: 30px 30px;
    font-size: 17px;
}
.cash-register-btn {
    height: 50px;
    width: 50px;
    background-color: rgb(101, 101, 101);
    border: 3px solid rgb(43, 43, 43);
    color: rgb(255, 255, 255);
    align-content: center;
    cursor: pointer;
}

#cash-register-btns {
    margin: 40px auto;
    display: grid;
    position: relative;
    left: -10px;
    grid-template-columns: repeat(3, 1fr);
    width: 70%;
    justify-items: center;
    gap: 1rem 1rem;
}

.open {
    background-color: rgb(0, 255, 0);
}

.close {
    background-color: red;
}

#change-due {
    font-size: 21px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

JeremyLT · February 6, 2025, 7:25pm

Your code did not copy over. Please update your post to include your code. Thanks

santiago.reyes861 · February 6, 2025, 7:32pm

Thaks, i already updated the post

JeremyLT · February 6, 2025, 7:36pm

This should not be out in the global space.

santiago.reyes861 · February 7, 2025, 5:30am

Hi, thanks for your reply. I tried to implement the changes, but it keeps failing. While debugging, I noticed that the behavior of the operations is correct, but I am having difficulties with the tests

pkdvalis · February 7, 2025, 11:49am

Please post your updated code so we can see what you tried.

santiago.reyes861 · February 7, 2025, 4:46pm

i think that i cant edit the code above, but the next code is my script.js, the other files still the same. I hope you could check it. With the changes made in the quantityCurrencies array the tests 18 and 19 are already correct but 17 is still failing. As i commented before, 16 is correct and it is related with 17. If you could explain me why moving the for loop from the global space helped me to pass the 18 and 19 tests, I would appreciate it.

santiago.reyes861 · February 7, 2025, 4:47pm

// return change to the customer based on the price of the item, the amount of cash provided by the customer, and the amount of cash in the cash drawer
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]];
// 
// let price = 19.5;
// let cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]
// let cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]

const currencyValues = [0.01, 0.05, 0.1, 0.25, 1, 5, 10, 20, 100];
const changeText = document.getElementById('change-due');
const input = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const textPrice = document.getElementById('price');
textPrice.textContent = `Total: $${price}`;
const cidContainer = document.getElementById('cid');
let quantityCurrencies = [];
// for (let i = 0; i < currencyValues.length; i++) {
//   quantityCurrencies.push(Math.round(cid[i][1] / currencyValues[i]));
// }



// Functions -------------------------------------------------------------------------
const verifyInput = () => {
  let sumCashInDrawer = parseFloat((cid.reduce((acc, el) => acc + el[1], 0)).toFixed(2))
  let inputValue = parseFloat((parseFloat(input.value)).toFixed(2));
  let change = parseFloat((parseFloat(inputValue - price)).toFixed(2));

  if (change === sumCashInDrawer){
    return true;
  } 
  if (!inputValue) {
    alert('Please, enter some money');
  } else if(inputValue < price) {
    alert('Customer does not have enough money to purchase the item');
  } else if (change > sumCashInDrawer) {
    displayStatus()
  } else {
    return true;
  }
}



// function that updates the visual screen on the HTML
const updateScreenCashInDrawer = (arr) => {
  cidContainer.innerHTML = '';
  for (let i = 0; i < cid.length; i++) {
    const quantity = cid[i][1] / currencyValues[i];
    cidContainer.innerHTML += `<div><span>${cid[i][0].charAt(0) + cid[i][0].slice(1).toLowerCase()}</span>: $${cid[i][1]} --- ${Math.round(quantity)} u</div>`
  } 
}
updateScreenCashInDrawer(cid); // call function to see the initial balance in the cash drawer




const calculateChange = (customerMoney) => {
  let changeDue = parseFloat((customerMoney - price).toFixed(2));
  let possible = false;

// the flag possible was declared to verify if it is possible to return the change with the denominations available

  if (changeDue == 0) {
    possible = true;
  }

  for (let i = (cid.length) - 1; i >= 0; i--) {
    if (changeDue >= currencyValues[i]) {
      let sumToLeft = 0
      for (let j = i; j >= 0; j--) {
        sumToLeft += cid[j][1];
      }
      if (sumToLeft >= changeDue) {
        possible = true;
      }
    }  
  }

  if (possible) {
    for (let i = (cid.length) - 1; i >= 0; i--) {
      let coinsAvailable = quantityCurrencies[i];
      let coinsUsed = 0;
      
      if (changeDue >= currencyValues[i] && quantityCurrencies[i] != 0) { 
        console.log(cid[i][0])
        while (coinsAvailable > 0 && changeDue >= currencyValues[i]) {
          coinsAvailable -= 1;
          coinsUsed += 1;
  
          quantityCurrencies[i] = coinsAvailable;
          changeDue -= parseFloat(currencyValues[i].toFixed(2));
          changeDue = parseFloat(changeDue.toFixed(2));
        }
        cid[i][1] = parseFloat((quantityCurrencies[i] * currencyValues[i]).toFixed(2));
        
        console.log(changeDue)
        changeText.innerHTML += `<p>${cid[i][0]}: $${parseFloat(parseFloat(currencyValues[i] * coinsUsed).toFixed(2))}</p>`
        console.log(quantityCurrencies)
      } else {
        console.log(`${currencyValues[i]} no se uso`)
      }
    }
  } else {
    changeText.innerHTML = '';
    changeText.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
  }
  
}

// function that displays the status
const displayStatus = () => {
  changeText.innerHTML = ''
  const totalCashInDrawer = parseFloat(cid.reduce((acc, el) => acc + el[1], 0).toFixed(2));
  const change = parseFloat((input.value - price).toFixed(2));
  
  if (totalCashInDrawer < change) {
    changeText.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
  } else if (totalCashInDrawer === change) {
    changeText.innerHTML += `<p>Status: CLOSED</p>`;
  } else if (totalCashInDrawer > change) {
    changeText.innerHTML += `<p>Status: OPEN</p>`;
  } 
  if (input.value == price) {
    changeText.textContent = 'No change due - customer paid with exact cash';
  }
}


const updateQuantityCurrArr = () => {
  quantityCurrencies = []
  for (let i = 0; i < currencyValues.length; i++) {
    quantityCurrencies.push(Math.round(cid[i][1] / currencyValues[i]));
  }
}


// Event Listeners -------------------------------------------------------------------------
purchaseBtn.addEventListener('click', () => {
  updateScreenCashInDrawer(cid);
  if (verifyInput()) {
    updateQuantityCurrArr();
    displayStatus()
    calculateChange(parseFloat((parseFloat(input.value)).toFixed(2)));
    updateScreenCashInDrawer(cid);
  } else {
    console.log('invalid input')
  }
})
input.addEventListener('keydown', (e) => {
  if (e.key == 'Enter') {
    updateScreenCashInDrawer(cid);
    if (verifyInput()) {
      updateQuantityCurrArr();
      displayStatus()
      calculateChange(parseFloat((parseFloat(input.value)).toFixed(2)));
      updateScreenCashInDrawer(cid);
    }
    else {
      console.log('invalid input')
    }
  }
})

hasanzaib1389 · February 7, 2025, 6:08pm

Hi there. Don’t add variables in global scope if that you will change it’s values using in function/block scope, except the cid and price

santiago.reyes861 · February 7, 2025, 6:34pm

Thanks, I understand now.
I already moved the variable as you can see in my code above. Do you know what could be the reason why test 17 failed?

JeremyLT · February 7, 2025, 6:35pm

After each function call completes, subsequent function calls start with the previous global variable’s value. To fix this, make sure your function doesn’t change any global variables, and declare/assign variables within the function if they need to be changed.

Example:

var myGlobal = [1];
function returnGlobal(arg) {
  myGlobal.push(arg);
  return myGlobal;
} // unreliable - array gets longer each time the function is run

function returnLocal(arg) {
  var myLocal = [1];
  myLocal.push(arg);
  return myLocal;
} // reliable - always returns an array of length 2

JeremyLT · February 7, 2025, 6:39pm

You’re only setting this message when the amount in the drawer is insufficient to make change, not when the contents of the drawer is higher that the change needed but not in correct denominations to make that change.

santiago.reyes861 · February 7, 2025, 7:03pm

hi, at the end of the function calculateChange i set changeText.innerHTML value like this:

else {
    changeText.innerHTML = '';
    changeText.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
  }

is this incorrect? this case is chosen if the variable possible is false

JeremyLT · February 7, 2025, 7:09pm

Like I said when I quoted exactly that part of your code, you only set that when the total in the drawer is less than the change needed. But you also need that message when the contents of the drawer add up to more than the change needed but the denominations do not add up correctly to the exact change needed.

ILM · February 7, 2025, 7:13pm

Here a situation where your code fails:

price = 79.93;
document.querySelector('#cash').value = 100;
cid =    [ [ 'PENNY', 0 ],
     [ 'NICKEL', 0 ],
     [ 'DIME', 0.2 ],
     [ 'QUARTER', 0.5 ],
     [ 'ONE', 10 ],
     [ 'FIVE', 20 ],
     [ 'TEN', 70 ],
     [ 'TWENTY', 0 ],
     [ 'ONE HUNDRED', 1400 ] ];

it says the output is

Status: OPEN

TEN: $20

santiago.reyes861 · February 7, 2025, 7:35pm

oh i see, i’m gonna try to fix it

santiago.reyes861 · February 7, 2025, 8:44pm

the tests are correct now, could you check the code please and give me some advice to improve?

// return change to the customer based on the price of the item, the amount of cash provided by the customer, and the amount of cash in the cash drawer
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]];

// examples for tests --------------------------------------------------------------------
// let price = 79.93;
// cid = [[ 'PENNY', 0 ], [ 'NICKEL', 0 ], [ 'DIME', 0.2 ], [ 'QUARTER', 0.5 ], [ 'ONE', 10 ], [ 'FIVE', 20 ], [ 'TEN', 70 ], [ 'TWENTY', 0 ], [ 'ONE HUNDRED', 1400 ] ];
// let price = 19.5;
// let cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]
// let cid = [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]
// ---------------------------------------------------------------------------------------

const currencyValues = [0.01, 0.05, 0.1, 0.25, 1, 5, 10, 20, 100];
const changeText = document.getElementById('change-due');
const input = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const textPrice = document.getElementById('price');
textPrice.textContent = `Total: $${price}`;
const cidContainer = document.getElementById('cid');
let quantityCurrencies = [];


// Functions -------------------------------------------------------------------------
const verifyInput = () => {
  let sumCashInDrawer = parseFloat((cid.reduce((acc, el) => acc + el[1], 0)).toFixed(2))
  let inputValue = parseFloat((parseFloat(input.value)).toFixed(2));
  let change = parseFloat((parseFloat(inputValue - price)).toFixed(2));

  if (change === sumCashInDrawer){
    return true;
  } 
  if (!inputValue) {
    alert('Please, enter some money');
  } else if(inputValue < price) {
    alert('Customer does not have enough money to purchase the item');
  } else if (change > sumCashInDrawer) {
    displayStatus()
  } else {
    return true;
  }
}



// function that updates the visual screen on the HTML
const updateScreenCashInDrawer = (arr) => {
  cidContainer.innerHTML = '';
  for (let i = 0; i < cid.length; i++) {
    const quantity = cid[i][1] / currencyValues[i];
    cidContainer.innerHTML += `<div><span>${cid[i][0].charAt(0) + cid[i][0].slice(1).toLowerCase()}</span>: $${cid[i][1]} --- ${Math.round(quantity)} u</div>`
  } 
}
updateScreenCashInDrawer(cid); // call function to see the initial balance in the cash drawer




const calculateChange = (customerMoney) => {
  let changeDue = parseFloat((customerMoney - price).toFixed(2));
  let possible = false; // declared to verify if it is possible to return the change
  let changeDueString = changeDue.toString().replace('.', '');

  // block that checks if the customer paid with exact cash
  if (changeDue == 0) {
    possible = true;
  }

  // block that verifies if there is enough money in the cash register
  for (let i = (cid.length) - 1; i >= 0; i--) {
    if (changeDue >= currencyValues[i] && quantityCurrencies[i] > 0) {
      let sumToLeft = 0
      for (let j = i; j >= 0; j--) {
        sumToLeft += cid[j][1];
      }
      if (sumToLeft >= changeDue) {
        possible = true;
      }
    }  
  }

  // block that checks if it is possible to return the exact change with the denominations available
  let count = 0
  let possibleCount = 0
  for (let i = (changeDueString.length) - 1; i >= 0; i--) {
    if (parseInt(changeDueString.charAt(i)) <= quantityCurrencies[count]) {
      possibleCount += 1;
    }
    count += 1;
  }
  if (possibleCount == changeDueString.length) {
    possible = true;
  } else {
    possible = false;
  }

  // if it's possible to return the exact change, this block executes to calculate and display the change
  if (possible) {
    for (let i = (cid.length) - 1; i >= 0; i--) {
      let coinsAvailable = quantityCurrencies[i];
      let coinsUsed = 0;
      
      if (changeDue >= currencyValues[i] && quantityCurrencies[i] != 0) { 
        console.log(cid[i][0])
        while (coinsAvailable > 0 && changeDue >= currencyValues[i]) {
          coinsAvailable -= 1;
          coinsUsed += 1;
  
          quantityCurrencies[i] = coinsAvailable;
          changeDue -= parseFloat(currencyValues[i].toFixed(2));
          changeDue = parseFloat(changeDue.toFixed(2));
        }
        cid[i][1] = parseFloat((quantityCurrencies[i] * currencyValues[i]).toFixed(2));
        
        console.log(changeDue)
        changeText.innerHTML += `<p>${cid[i][0]}: $${parseFloat(parseFloat(currencyValues[i] * coinsUsed).toFixed(2))}</p>`
        console.log(quantityCurrencies)
      } else {
        console.log(`${currencyValues[i]} no se uso`)
      }
    }
  } else {
    changeText.innerHTML = '';
    changeText.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
  }
  
}

// function that displays the status
const displayStatus = () => {
  changeText.innerHTML = ''
  const totalCashInDrawer = parseFloat(cid.reduce((acc, el) => acc + el[1], 0).toFixed(2));
  const change = parseFloat((input.value - price).toFixed(2));
  
  if (totalCashInDrawer < change) {
    changeText.innerHTML += `<p>Status: INSUFFICIENT_FUNDS</p>`;
  } else if (totalCashInDrawer === change) {
    changeText.innerHTML += `<p>Status: CLOSED</p>`;
  } else if (totalCashInDrawer > change) {
    changeText.innerHTML += `<p>Status: OPEN</p>`;
  } 
  if (input.value == price) {
    changeText.textContent = 'No change due - customer paid with exact cash';
  }
}


const updateQuantityCurrArr = () => {
  quantityCurrencies = []
  for (let i = 0; i < currencyValues.length; i++) {
    quantityCurrencies.push(Math.round(cid[i][1] / currencyValues[i]));
  }
}


// Event Listeners -------------------------------------------------------------------------
purchaseBtn.addEventListener('click', () => {
  updateScreenCashInDrawer(cid);
  if (verifyInput()) {
    updateQuantityCurrArr();
    displayStatus()
    calculateChange(parseFloat((parseFloat(input.value)).toFixed(2)));
    updateScreenCashInDrawer(cid);
  } else {
    console.log('invalid input')
  }
})
input.addEventListener('keydown', (e) => {
  if (e.key == 'Enter') {
    updateScreenCashInDrawer(cid);
    if (verifyInput()) {
      updateQuantityCurrArr();
      displayStatus()
      calculateChange(parseFloat((parseFloat(input.value)).toFixed(2)));
      updateScreenCashInDrawer(cid);
    }
    else {
      console.log('invalid input')
    }
  }
})

Topic		Replies	Views
Build a Cash Register Project - Build a Cash Register JavaScript	1	20	January 23, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	4	23	March 2, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	2	24	January 16, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	2	31	March 26, 2025
Build a Cash Register Project - Build a Cash Register JavaScript	3	33	January 8, 2025

Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Related topics