Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

I’ve passed the first few tests.

But i’m stuck on the tests when the CID changes, for example:

When price is 19.5, the value in the #cash element is 20, cid is [[“PENNY”, 1.01], [“NICKEL”, 2.05], [“DIME”, 3.1], [“QUARTER”, 4.25], [“ONE”, 90], [“FIVE”, 55], [“TEN”, 20], [“TWENTY”, 60], [“ONE HUNDRED”, 100]], and the #purchase-btn element is clicked, the value in the #change-due element should be “Status: OPEN QUARTER: $0.5”.

I know that the CID needs to be re-assigned, but i’m just not sure how/when to do that.

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>
    <input id="cash"></input>
    <div id="change-due"></div>
    <button id="purchase-btn">Purchase</button>
    <script src="./script.js"></script>
    </body>
</html>


/* file: styles.css */


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

const cash = document.getElementById('cash');
const changeDue = document.getElementById('change-due');
const purchaseBtn = document.getElementById('purchase-btn');

purchaseBtn.addEventListener("click", () => {
    if (price == 20 && cash == 10) {
    alert("Customer does not have enough money to purchase the item")
    } 
    else if (cash.value < price) {
      alert("Customer does not have enough money to purchase the item")
    }
    else if (price == 11.95 && cash.value == 11.95) {
      changeDue.innerText = "No change due - customer paid with exact cash"
    }
    else if (cash.value === price) {
      changeDue.innerText = "No change due - customer paid with exact cash"
    }

});

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

You can imitate how test will do it, by changing cid and price at the end of javascript code.

3 

    else if (price == 19.5 && cash.value == 20) {
      changeDue.innerText = "Status: INSUFFICIENT_FUNDS"
    }

});

let cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];

when i changed the cid at the bottom, the test still doesnt pass. All the previous tests are are now also not passing

4

let is not needed here, nor desired. cid is already declared at the top of file, it just needs to be reassigned later.

5

it’s still not passing.

i changed it to this:

else if (price == 19.5 && cash.value == 20) {
      changeDue.innerText = "Status: INSUFFICIENT_FUNDS"
    }

});

cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];

do i need to add something else to to the ELSE statement? otherwise how does it know to refer to the 2nd cid?

6

There’s single cid, which is later reassigned. Callback function will be used when button is clicked, that’s after cid is reassigned. So if callback function would be using cid, it would use that value.

7

im not sure i understand what you are saying.

but either way, this one is passing:

else if (price == 19.5 && cash.value == 20) {
      changeDue.innerText = "Status: OPEN QUARTER: $0.5"
    }

image

and this one isn’t:

else if (price == 19.5 && cash.value == 20) {
      changeDue.innerText = "Status: INSUFFICIENT_FUNDS"
    }

image

8

Could you share the updated code?

9

sure, here it is:

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

const cash = document.getElementById('cash');
const changeDue = document.getElementById('change-due');
const purchaseBtn = document.getElementById('purchase-btn');

purchaseBtn.addEventListener("click", () => {
    if (price == 20 && cash == 10) {
    alert("Customer does not have enough money to purchase the item")
    } 
    else if (cash.value < price) {
      alert("Customer does not have enough money to purchase the item")
    }
    else if (price == 11.95 && cash.value == 11.95) {
      changeDue.innerText = "No change due - customer paid with exact cash"
    }
    else if (cash.value === price) {
      changeDue.innerText = "No change due - customer paid with exact cash"
    }
    else if (price == 19.5 && cash.value == 20) {
      changeDue.innerText = "Status: OPEN QUARTER: $0.5"
    }
    else if (price == 3.26 && cash.value == 100) {
      changeDue.innerText = "Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04"
    }
    else if (price == 19.5 && cash.value == 20) {
      changeDue.innerText = "Status: INSUFFICIENT_FUNDS"
    }

});

cid = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
10 
else if (price == 19.5 && cash.value == 20) {
      changeDue.innerText = "Status: OPEN QUARTER: $0.5"
    }
else if (price == 19.5 && cash.value == 20) {
      changeDue.innerText = "Status: INSUFFICIENT_FUNDS"
    }

These conditions are the same, because of that code in the first one will always execute.

11

so what do i do to differentiate between the two - so both tests will pass?

12

That’s one of the goals of this project. Having solution that’s able to determine what the result should be, based on price, #cash element, and cid. Doing that by hand, how do you decide, which case is it?

13

maybe i need to add cid to the if statement:

else if (price == 19.5 && cash.value == 20 && cid...............

but not sure what i need to add exactly

14

What cases are there to consider?

15

i’m sorry, i don’t understand what you mean by “cases”

16

you should not be hardcoding the test cases in your code.
You need to write flexible code that can deal with any price and any amount of cash.

17

Thanks for the advice.

But how do I do that exactly?

18

you have to do some problem solving.
Think back for example to the project where you had to create a decimal to binary converter. They didn’t hardcode the values, they used some creative division and modulo operations to do that conversion.

If you are trying to teach someone to solve this problem, say a real world cashier, would you be teaching them some maths? Or maybe how to logically figure out if the money they have will cover the change needed? etc? Of course you would. You certainly wouldn’t give them a list of every conceivable price and every conceivable amount of money that ever existed, that list would be way too long for efficient service.

You need to teach the computer what to do with the numbers and values it has.
What should it add, subtract, multiply or divide. What logic statement should it be going through.
This is the whole idea behind learning to code. We find solutions and tell the computer these solutions with the code.

I hope this sets you on a different path of thinking to restart this project.

19

That has certainly set me on a different path and i’ll definitely have to restart this project. But it’s also made me realise that i’m not going as well with learning to code as i thought. I’m actually questioning now if i know much at all.

i understand the theory of what you are saying, but turning that into code by myself is another matter. I did go back to the decimal to binary converter as you said.

20

I understand that the task may seem daunting. But it is no different than what you have done in your life before.

Just break the task down into small, hopefully manageable parts.

I usually start for example by making sure all my inputs are being read correctly.
Maybe after that I look at the requirements or test cases and try to find one category that might be easy to code and do that. Maybe that is for example what happens if I have insufficient funds?

Well first: how will I know that I have insufficient funds? Well the instructions say: > if cash-in-drawer is less than the change due, or if you cannot return the exact change.

So there are two subtasks right here. 1- when the cash-in-drawer is less than the change due 2- if the cash-in-drawer is enough but the types of coins and bills are not.
Let’s pick one of these to focus in on.
For scenario 1, how will I know if this is happening? Well first I should figure out how much change I need. So maybe that is task 1a. And maybe here I realize that figuring out how much change I need is actually useful in all test cases. So I should definitely do that correctly.

What about figuring out if I have enough cash in the drawer? How would I do that? Etc etc. just keep solving one small problem at a time.