Stuck with Cash Register Project

Tell us what’s happening:

I have tried so many different functions to get this to work, I’ve stripped it down the the bare bones but there is always some condition that isn’t being satisfied. I believe the problem is with formatting but any help would be GREATLY appreciated.

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

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]]


const cash = document.getElementById('cash')
const purchaseBtn = document.getElementById('purchase-btn')
const priceDisplay = document.getElementById('price-left')
const registerTotalDisplay = document.getElementById('change-title')
const displayCid = document.getElementById('change-in-drawer')
const status = document.getElementById('status-title')
const displayChangeDue = document.getElementById('change-due')



const formatResults = (status, change) => {
  displayChangeDue.innerHTML += `<p>Status: ${status}</p>`
  change.forEach(el => {
    displayChangeDue.innerHTML += `<p>${el[0]}: $${el[1]}</p>`
  })
}


const checkRegister = () => {
  let payment = Number(cash.value)
  
  if( payment < price ){
    alert('Customer does not have enough money to purchase the item')
  }
  if( payment === price ){
    console.log(Number(cash.value) === price)
    displayChangeDue.innerHTML += `<p>No change due - customer paid with exact cash</p>`
    return
  }

  let result = {
    status: 'OPEN',
    change: []
  }

  let changeDue = parseFloat((payment - price).toFixed(2))
  let regTotal = parseFloat(cid.map(el => el[1]).reduce((t,c) => t + c).toFixed(2))
  let denoms = [100, 20, 10, 5, 1, .25, .1, .05, .01]
  let revCid = [...cid].reverse()

  if( changeDue === regTotal ){
    result.status = 'CLOSED'
  }

  if( changeDue > regTotal ){
    result.status = 'INSUFFICIENT_FUNDS'
    return result
  }
  

  for( let i = 0; i < denoms.length; i++ ){
    if( denoms[i] <= changeDue && revCid[i][1] > 0 ){
      let total = 0
      let cashType = revCid[i][0]
      while( denoms[i] <= changeDue && revCid[i][1] > 0 ){
        total++
        changeDue = parseFloat((changeDue -= denoms[i]).toFixed(2))
      }
      result.change.push([cashType, total * denoms[i]])
    }
  }

  if( changeDue > 0 ){
    result.status = 'INSUFFICIENT_FUNDS'
  }

  return result
}

purchaseBtn.addEventListener('click', () => {
  const result = checkRegister()
  console.log(result)
  formatResults(result.status, result.change)
})

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

Could you share your HTML as well? It’s necessary to fully reproduce the current working state of code.

<!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>
    <div id='container'>
      <div id='price-container'>
        <div id='price-left'>
        </div>
        <div id='price-right'>
          <form id='cash-form'>
            <label for='cash'></label>
            <input id='cash' type='number' name='cash' placeholder='Enter payment amount'>
            <button form='cash-form' id='purchase-btn'>Purchase</button>
          </form>
        </div>
      </div>
      <div id='register-container'>
        <div id='register-left'>
          <div id='change-title'></div>
          <div id='change-in-drawer'></div>
        </div>
        <div id='register-right'>
          <div id='status-title'>Register Status: </div>
          <div id='change-due'></div>
        </div>
      </div>
    </div>
    <div id='change-due'></div>

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

I’ve looked at the #change-due element during the tests. This is what got printed after the last test run:

<p>Status: OPEN</p><p>No change due - customer paid with exact cash</p><p>Status: OPEN</p><p>QUARTER: $0.5</p><p>Status: OPEN</p><p>TWENTY: $80</p><p>TEN: $10</p><p>FIVE: $5</p><p>ONE: $1</p><p>QUARTER: $0.5</p><p>DIME: $0.2</p><p>PENNY: $0.04</p><p>Status: INSUFFICIENT_FUNDS</p><p>Status: OPEN</p><p>PENNY: $0.5</p><p>Status: CLOSED</p><p>PENNY: $0.5</p>

There’s two unknowns here:

  • Why statuses from previous tests are still printed with the last test?
  • <p>Status: OPEN</p><p>TWENTY: $80</p><p>TEN: $10</p><p>FIVE: $5</p><p>ONE: $1</p><p>QUARTER: $0.5</p><p>DIME: $0.2</p><p>PENNY: $0.04</p> - this is for case that should print: Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04, there’s no $80 in twenties in the cash drawer.

Any ideas what to do about this?

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