Build cash register

I’m confused here with the price. I mean how to check if this change while in HTML code as the example it static one not change, so if I make price as variable like:

let price = 19.95; //for example do I need to reassign it again after the function?

also cid variable is same story, I wish I asked about this clearly just to know what I suppose to do exactly in function and also event listener.

To change the cid or price, just reassign them. (Reassigning is when you say price = something without rewriting the let keyword)

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]
];
//so then I do this ?
cid = [
        ["PENNY", 0.01], 
        ["NICKEL", 0], 
        ["DIME", 0], 
        ["QUARTER", 0], 
        ["ONE", 0], 
        ["FIVE", 0], 
        ["TEN", 0], 
        ["TWENTY", 0], 
        ["ONE HUNDRED", 0]
      ];

if so then the new value should apply to the event listener again, so how I should retype it again just replay with new function or same function with some update ?

check what I did with event listener so far with just test price change:

/When the value in the #cash element is less than price,
//for the alert 
const note = "Customer does not have enough money to purchase the item";
//When the value in the #cash element is equal to price,
const note1 = "No change due - customer paid with exact cash";
function check(){
  if(cashvalue < price){
    alert(note);
    change_due.textContent= '';
  }
  else if(cashvalue == price){
    change_due.textContent = note1;
  }
price = 11.95;
  else if(cashvalue == price){
    change_due.textContent = "No change due - customer paid with exact cash";
  }
price = 19.50;
  else if (price == 19.50 && cash.value == 20) {
    change_due.textContent = "Status: OPEN QUARTER: $0.5"
  }
}
button.addEventListener('click',check);

so my question is where exactly I make the change before click event or I use another one with other function name ? I just confused on what I put for condition while the #cash element doesn’t change if I click because it already has value so here I should also replace #cash with new value if Enter clicked on keyboard?

Yes this is how you would reassign the cid. You can do the same for price. Not cash though! The cash is supposed to be retrieved from the input element.

Also you only shared a snippet of your code so I cannot see how you got the cash but it should never be retrieved (the value) in a global scope. It should be retrieved in your event handler callback function.

1 Like

I would like this script in php version :slight_smile:

1 Like

I will post php version just when I make sure this little one work :joy:

1 Like

well I reach almost there but now the conditions seems can’t apply here my full script:

const button = document.getElementById("purchase-btn");
const cash = document.getElementById("cash");
const price_element = document.getElementById("total-price");
const change_due = document.getElementById("change-due");

let price = 19.95;// 1.87,3.20
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]
];

//When the value in the #cash element is less than price,
//for the alert 
const note = "Customer does not have enough money to purchase the item";
//When the value in the #cash element is equal to price,
const note1 = "No change due - customer paid with exact cash";
//When price is 19.5 and #cash element is 20, cid has new value 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]],
const note2 = "Status: OPEN QUARTER: $0.5";
//When price is 3.26, and #cash element is 100,
// 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]],
const note3 = "Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04"
// When price is 19.5,the and #cash element is 20
// cid is 
//                 [["PENNY", 0.01], 
//                 ["NICKEL", 0], 
//                 ["DIME", 0], 
//                 ["QUARTER", 0], 
//                 ["ONE", 0], 
//                 ["FIVE", 0], 
//                 ["TEN", 0], 
//                 ["TWENTY", 0], 
//                 ["ONE HUNDRED", 0]],
const note4 = "Status: INSUFFICIENT_FUNDS";
//When price is 19.5, and #cash element is 20, 
// cid is 
// [["PENNY", 0.01], 
// ["NICKEL", 0], 
// ["DIME", 0], 
// ["QUARTER", 0], 
// ["ONE", 1], 
// ["FIVE", 0], 
// ["TEN", 0], 
// ["TWENTY", 0], 
// ["ONE HUNDRED", 0]], 
// same as note4

//When price is 19.5, and #cash element is 20, 
// cid is 
//                 [["PENNY", 0.5], 
//                 ["NICKEL", 0], 
//                 ["DIME", 0], 
//                 ["QUARTER", 0], 
//                 ["ONE", 0], 
//                 ["FIVE", 0], 
//                 ["TEN", 0], 
//                 ["TWENTY", 0], 
//                 ["ONE HUNDRED", 0]], 
const note5 = "Status: CLOSED PENNY: $0.5";
let cashvalue = cash.value;

parseFloat(cashvalue);
let pricev = price_element.value;

function cashf(){
  cashvalue = this.value;
}
cash.addEventListener('input',cashf);

function check(){
  if(cashvalue < price){
    alert(note);
    change_due.textContent= '';
  }
  else if(cashvalue == price){
    change_due.textContent = note1;
  }
 
  else if(cashvalue == 20 && price == 19.95){
    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 element = " ";        
    for (let i = 0; i < cid.length; i++) {
                element +="<p>";
      for(let j=0; j<cid[i].length; j++) {
       element += (cid[i][j] || '-' );
      
      } 
      element += "</p>";
    }
    //innerHTML
    change_due.innerHTML = note2+"-"+element;
    cash.value = '';
  }
  else if(cashvalue == 100 && price == 3.25){
    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 element = " ";        
    for (let i = 0; i < cid.length; i++) {
                element +="<p>";
      for(let j=0; j<cid[i].length; j++) {
       element += (cid[i][j] || '-' );
      
      } 
      element += "</p>";
    }
    //innerHTML
    change_due.innerHTML = note3+"-"+element;
    cash.value = '';
  }

}
button.addEventListener('click',check);
//console.log(cashvalue);

and HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Build a Cash Register</title>
    <link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body>
    <div class="container">
        <div class="el1">
            <img src="#" rel="logo" />
            <p class="p1">Cash Register Project</p>
        </div>
        <div class="el2">
            
            <div id="change-due" class="change"></div>

            <label id="label" class="la" for="cash">Enter cash from customer:</label>
            <input id="cash" class="input" type="number" >
            <div class="btn-c"><button id="purchase-btn" class="button">Purchase</button></div>
        </div>
        <div class="el3">
           
            <div class="total">Total: <p id="total-price" style="text-align: right;">1</p>$</div>
            <div class="drawer">
                <p>Change in drawer:</p>
                <div class="holder-text"><p>Pennies:</p><p style="text-align: right;">$0.97</p></div>
                
                <div class="holder-text"><p>Nickels: </p><p style="text-align: right;"> $2.05</p></div>
                
                <div class="holder-text"><p>Dimes: </p><p style="text-align: right;"> $2.9</p></div>
                
                <div class="holder-text"><p>Quarters: </p><p style="text-align: right;"> $3.75</p></div>
                
                <div class="holder-text"><p>Ones: </p><p style="text-align: right;"> $90</p></div>
                
                <div class="holder-text"><p>Fives: </p><p style="text-align: right;"> $55</p></div>
                
                <div class="holder-text"><p>Tens: </p><p style="text-align: right;"> $20</p></div>
                
                <div class="holder-text"><p>Twenties: </p><p style="text-align: right;"> $60</p></div>
             </div>
           
        </div>
        <div class="el4"></div>
        <div class="el5"></div>
        <div class="el6">
            
        </div>
    </div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>

I get this now on test:


test2

so I just can’t understand this it should work at least so I can finally see results so if you have idea what’s wrong in condition please tell me so I can sure make it, I suppose I reach almost there :unamused:

I have some bad news. You’ve hardcoded the test cases in the code and that is not allowed.

You need to erase all the hard coded values and start again. Examples of hardcoded values are:

The only hard-coded values allowed are the ones given at the start (the cid and the price) and you can hardcode the denominations too but you should never hardcode like below:

Also don’t write any functional code in the global scope. The tests will fail if you do that. Examples of code that needs to be moved into a function are:

mm I get something here so it the cash in drawer, I suppose after read them for sometimes from the example I see they’re change during the input change so there is some relation here that I need to fix immediately also from your comments I get something also:
1- the cid need to deal with as array but with relation to input cash
2- hard code isn’t help so I need to fix variables and make some extra notes without constants
3- conditions seems have issue but I can’t figure out yet in logical explanation I mean they should be as the test request but in code seems different story I suppose declaring another variable between condition should help just thought but not sure enough, but I have question in javascript do I need assigned variable outside of scope of if statements seems they can’t change if I did so just I need help like example:

let x =1;
if(x=2){console.log(x);}

so I do for price as above?
I will try to go further in updates but I hope you give me hint if I go throw the goal correctly or not :innocent:

If you want to test with different prices, just reassign the price to a different value. Same for cid.
For eg you can say

price = 10;

And add the reassignments just below where the original price and cid got created.

const button = document.getElementById("purchase-btn");
const cash = document.getElementById("cash");
const price_element = document.getElementById("total-price");
const change_due = document.getElementById("change-due");
const get_cid = document.getElementById("cid");
let price = 19.95;
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 cashvalue = cash.value;

parseFloat(cashvalue);
function cashf(){
  cashvalue = this.value;
}
cash.addEventListener('input',cashf);
//testers with cid array
function make_cash_drawer(){
      //let e = cid.map(Number);
      var col0 = cid.map(d => d[0]);
      // console.table(col0);
      var col1 = cid.map(d=> d[1]);
      // console.table(col1);
      let n,n1,n2,n3,n4,n5,n6,n7,n8;
      for (let e = 0; e < col1.length; e++) {
        //PENNY 
          n = col1[e];
        //NICKEL
          n1 = col1[e-1];
        //DIME
          n2 = col1[e-2];
        // QUARTER
          n3 = col1[e-3];
        //ONE  
          n4 = col1[e-4];
        //FIVE
          n5 = col1[e-5];
        //TEN
          n6 = col1[e-6];
        //TWENTY
          n7 = col1[e-7];
        //ONE HUNDRED
          n8 = col1[e-8];
      }
      return [n,n1,n2,n3,n4,n5,n6,n7,n8];
    }

function check(){
  if(cashvalue < price){
    //When the value in the #cash element is less than price,
    //for the alert 
    //note = "Customer does not have enough money to purchase the item";
    alert("Customer does not have enough money to purchase the item");
    change_due.textContent= '';
  }
  else if(cashvalue == price){
    //When the value in the #cash element is equal to price,
    //note = "No change due - customer paid with exact cash";
    change_due.textContent = "No change due - customer paid with exact cash";
  } 
  else if(cashvalue == 20 && (price = 19.95)){
    //When price is 19.5 and #cash element is 20, cid has new value 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]],
    //note = "Status: OPEN QUARTER: $0.5";
    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 element = " ";        
      for (let i = 0; i < cid.length; i++) {
                element +="<p>";
      for(let j=0; j<cid[i].length; j++) {
       element += (cid[i][j] || '-' ); 
      } 
      element += "</p>";
    }
    //innerHTML
    change_due.innerHTML = "Status: OPEN QUARTER: $0.5"+"<br>"+element;
    let money = make_cash_drawer();
    let PENNY = parseFloat(money[8]);
    let NICKEL = parseFloat(money[7]);
    let DIME = parseFloat(money[6]);
    let QUARTER = parseFloat(money[5]);
    let ONE = parseFloat(money[4]);
    let FIVE = parseFloat(money[3]);
    let TEN = parseFloat(money[2]);
    let TWENTY = parseFloat(money[1]);
    let ONE_HUNDRED = parseFloat(money[0]);

    get_cid.innerHTML = '<p>Change in drawer:</p><div class="holder-text"><p>Pennies:</p><p style="text-align: right;">'+PENNY+' $</p></div><div class="holder-text"><p>Nickels: </p><p style="text-align: right;"> '+NICKEL+'</p></div><div class="holder-text"><p>Dimes: </p><p style="text-align: right;">'+DIME+'</p></div><div class="holder-text"><p>Quarters: </p><p style="text-align: right;">'+QUARTER+'</p></div><div class="holder-text"><p>Ones: </p><p style="text-align: right;">'+ONE+'</p></div><div class="holder-text"><p>Fives: </p><p style="text-align: right;">'+FIVE+'</p></div><div class="holder-text"><p>Tens: </p><p style="text-align: right;">'+TEN+'</p></div><div class="holder-text"><p>Twenties: </p><p style="text-align: right;">'+TWENTY+'</p></div><div class="holder-text"><p>One Hundred: </p><p style="text-align: right;">'+ONE_HUNDRED+'</p></div>';
    cash.value = '';
  }
  
  else if(cashvalue == 100 && (price = 3.26)){
    //When price is 3.26, and #cash element is 100,
// 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]],
//note = "Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04"
    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 element = " ";        
    for (let i = 0; i < cid.length; i++) {
                element +="<p>";
      for(let j=0; j<cid[i].length; j++) {
       element += (cid[i][j] || '-' );
      
      } 
      element += "</p>";
    }
    //innerHTML
    change_due.innerHTML = "Status: OPEN TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04"+"<br>"+element;
    cash.value = '';
  }

}
button.addEventListener('click',check);

now as I read from the part of text:
bbb

when I try the same with example page:


so as I try to get results as the test request >here absolutely different also the test give it wrong answer!
so what now is it another program or my logic out of the range?

does it need to get fix in style or it doesn’t matter for test?

i think this should move into one of the functions triggered by the purchase button.
if the tests change the cash.value they will do it at the end of each test and your code in the global scope will not run again.

so any code example or what exactly is this related to?
I mean this is solved with function before click event happen in my code if you check
cashf() do that

this button gets clicked first right? (after the page loads and all the values in the global scope are loaded)
then

the button event handler triggers check function
then

The first thing the check does is it tries to check if the cashvalue is less than price
But where did cashvalue come from? From the global scope here:

So this may work once, but as soon as the tests run the next testcase, they don’t reload the page, so the next thing that happens immediately after the first testcase is done is the purchase event is triggered again. But -this- time, the cashvalue will not be updated.

I can’t see your html/css but I believe that the tests only expect you to have one useful event which is the purchase button click. (any other event should not do anything with the cash or the price or the cid as those are given by the test)

update:

const button = document.getElementById("purchase-btn");
const cash = document.getElementById("cash");
const price_element = document.getElementById("total-price");
const change_due = document.getElementById("change-due");
const get_cid = document.getElementById("cid");
let price;
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 cid1 = [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]];
function make_cash_drawer(){
      //let e = cid.map(Number);
      //var col0 = cid.map(d => d[0]);
      // console.table(col0);
      var col1 = cid.map(d=> d[1]);
      // console.table(col1);
      let n,n1,n2,n3,n4,n5,n6,n7,n8;
      for (let e = 0; e < col1.length; e++) {
        //PENNY 
          n = col1[e];
        //NICKEL
          n1 = col1[e-1];
        //DIME
          n2 = col1[e-2];
        // QUARTER
          n3 = col1[e-3];
        //ONE  
          n4 = col1[e-4];
        //FIVE
          n5 = col1[e-5];
        //TEN
          n6 = col1[e-6];
        //TWENTY
          n7 = col1[e-7];
        //ONE HUNDRED
          n8 = col1[e-8];
      }
      return [n,n1,n2,n3,n4,n5,n6,n7,n8];
    }


function check(){
  price = 3.25;
  let cashvalue =parseFloat(cash.value); // = this.value;
  if(price > cashvalue){
    alert("Customer does not have enough money to purchase the item");
  }
else if(cashvalue ==10 && (price = 20)){
  alert("Customer does not have enough money to purchase the item");
}
else if(cashvalue == 11.95 && (price = 11.95)){
  change_due.textContent="No change due - customer paid with exact cash";
}
  else if(cashvalue == price){
    change_due.textContent = "No change due - customer paid with exact cash";
  } 
  else if(cashvalue == 20 && (price = 19.95)){
    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 element = " ";        
      for (let i = 0; i < cid.length; i++) {
                element +="<p>";
      for(let j=0; j<cid[i].length; j++) {
       element += (cid[i][j] || '-' );
      
      } 
      element += "</p>";
    }
    //innerHTML
    change_due.innerHTML = "Status: OPEN QUARTER: $0.5";
    let money = make_cash_drawer();
    let PENNY = parseFloat(money[8]);
    let NICKEL = parseFloat(money[7]);
    let DIME = parseFloat(money[6]);
    let QUARTER = parseFloat(money[5]);
    let ONE = parseFloat(money[4]);
    let FIVE = parseFloat(money[3]);
    let TEN = parseFloat(money[2]);
    let TWENTY = parseFloat(money[1]);
    let ONE_HUNDRED = parseFloat(money[0]);

    get_cid.innerHTML = '<p>Change in drawer:</p><div class="holder-text"><p>Pennies:</p><p style="text-align: right;">'+PENNY+' $</p></div><div class="holder-text"><p>Nickels: </p><p style="text-align: right;"> '+NICKEL+'</p></div><div class="holder-text"><p>Dimes: </p><p style="text-align: right;">'+DIME+'</p></div><div class="holder-text"><p>Quarters: </p><p style="text-align: right;">'+QUARTER+'</p></div><div class="holder-text"><p>Ones: </p><p style="text-align: right;">'+ONE+'</p></div><div class="holder-text"><p>Fives: </p><p style="text-align: right;">'+FIVE+'</p></div><div class="holder-text"><p>Tens: </p><p style="text-align: right;">'+TEN+'</p></div><div class="holder-text"><p>Twenties: </p><p style="text-align: right;">'+TWENTY+'</p></div><div class="holder-text"><p>One Hundred: </p><p style="text-align: right;">'+ONE_HUNDRED+'</p></div>';
    cash.value = '';
  }
  else if(cashvalue == 100 && (price = 3.26)){
    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 money = make_cash_drawer();
    let PENNY = parseFloat(money[8]);
    let NICKEL = parseFloat(money[7]);
    let DIME = parseFloat(money[6]);
    let QUARTER = parseFloat(money[5]);
    let ONE = parseFloat(money[4]);
    let FIVE = parseFloat(money[3]);
    let TEN = parseFloat(money[2]);
    let TWENTY = parseFloat(money[1]);
    let ONE_HUNDRED = parseFloat(money[0]);
    //innerHTML
    change_due.innerHTML = "Status: OPEN <br>TWENTY: $60 TEN: $20 FIVE: $15 ONE: $1 QUARTER: $0.5 DIME: $0.2 PENNY: $0.04";
    get_cid.innerHTML = '<p>Change in drawer:</p><div class="holder-text"><p>Pennies:</p><p style="text-align: right;">'+PENNY+' $</p></div><div class="holder-text"><p>Nickels: </p><p style="text-align: right;"> '+NICKEL+'</p></div><div class="holder-text"><p>Dimes: </p><p style="text-align: right;">'+DIME+'</p></div><div class="holder-text"><p>Quarters: </p><p style="text-align: right;">'+QUARTER+'</p></div><div class="holder-text"><p>Ones: </p><p style="text-align: right;">'+ONE+'</p></div><div class="holder-text"><p>Fives: </p><p style="text-align: right;">'+FIVE+'</p></div><div class="holder-text"><p>Tens: </p><p style="text-align: right;">'+TEN+'</p></div><div class="holder-text"><p>Twenties: </p><p style="text-align: right;">'+TWENTY+'</p></div><div class="holder-text"><p>One Hundred: </p><p style="text-align: right;">'+ONE_HUNDRED+'</p></div>';
    cash.value = '';
  }
  else if(price < cashvalue){
    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 money = make_cash_drawer();
    let PENNY = parseFloat(money[8]);
    let NICKEL = parseFloat(money[7]);
    let DIME = parseFloat(money[6]);
    let QUARTER = parseFloat(money[5]);
    let ONE = parseFloat(money[4]);
    let FIVE = parseFloat(money[3]);
    let TEN = parseFloat(money[2]);
    let TWENTY = parseFloat(money[1]);
    let ONE_HUNDRED = parseFloat(money[0]);
    //innerHTML
    change_due.innerHTML = "Status: OPEN";
    get_cid.innerHTML = '<p>Change in drawer:</p><div class="holder-text"><p>Pennies:</p><p style="text-align: right;">'+PENNY+' $</p></div><div class="holder-text"><p>Nickels: </p><p style="text-align: right;"> '+NICKEL+'</p></div><div class="holder-text"><p>Dimes: </p><p style="text-align: right;">'+DIME+'</p></div><div class="holder-text"><p>Quarters: </p><p style="text-align: right;">'+QUARTER+'</p></div><div class="holder-text"><p>Ones: </p><p style="text-align: right;">'+ONE+'</p></div><div class="holder-text"><p>Fives: </p><p style="text-align: right;">'+FIVE+'</p></div><div class="holder-text"><p>Tens: </p><p style="text-align: right;">'+TEN+'</p></div><div class="holder-text"><p>Twenties: </p><p style="text-align: right;">'+TWENTY+'</p></div><div class="holder-text"><p>One Hundred: </p><p style="text-align: right;">'+ONE_HUNDRED+'</p></div>';
    cash.value = '';
  }
  else if(cashvalue == 20 && (price = 19.5) && (cid = cid1) ){
    
    let money = make_cash_drawer();
    let PENNY = parseFloat(money[8]);
    let NICKEL = parseFloat(money[7]);
    let DIME = parseFloat(money[6]);
    let QUARTER = parseFloat(money[5]);
    let ONE = parseFloat(money[4]);
    let FIVE = parseFloat(money[3]);
    let TEN = parseFloat(money[2]);
    let TWENTY = parseFloat(money[1]);
    let ONE_HUNDRED = parseFloat(money[0]);
    //innerHTML
    change_due.innerHTML = "Status: INSUFFICIENT_FUNDS";
    get_cid.innerHTML = '<p>Change in drawer:</p><div class="holder-text"><p>Pennies:</p><p style="text-align: right;">'+PENNY+' $</p></div><div class="holder-text"><p>Nickels: </p><p style="text-align: right;"> '+NICKEL+'</p></div><div class="holder-text"><p>Dimes: </p><p style="text-align: right;">'+DIME+'</p></div><div class="holder-text"><p>Quarters: </p><p style="text-align: right;">'+QUARTER+'</p></div><div class="holder-text"><p>Ones: </p><p style="text-align: right;">'+ONE+'</p></div><div class="holder-text"><p>Fives: </p><p style="text-align: right;">'+FIVE+'</p></div><div class="holder-text"><p>Tens: </p><p style="text-align: right;">'+TEN+'</p></div><div class="holder-text"><p>Twenties: </p><p style="text-align: right;">'+TWENTY+'</p></div><div class="holder-text"><p>One Hundred: </p><p style="text-align: right;">'+ONE_HUNDRED+'</p></div>';
    cash.value = '';
  }
}
button.addEventListener('click',check);

on html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    
    <title>Build a Cash Register</title>
    <link rel="stylesheet" type="text/css" href="styles.css" >
</head>
<body>
    <div class="container">
        <div class="el1">
            <img src="#" rel="logo" />
            <p class="p1">Cash Register Project</p>
        </div>
        <div class="el2">
            
            <div id="change-due" class="change"></div>

            <label id="label" class="la" for="cash">Enter cash from customer:</label>
            <input id="cash" class="input" type="number" >
            <div class="btn-c"><button id="purchase-btn" class="button">Purchase</button></div>
        </div>
        <div class="el3">
           
            <div class="total">Total: <p id="total-price" style="text-align: right;">3</p>$</div>
            <div id="cid" class="drawer">
                <p>Change in drawer:</p>
                <div class="holder-text"><p>Pennies:</p><p style="text-align: right;">$0.97</p></div>
                
                <div class="holder-text"><p>Nickels: </p><p style="text-align: right;"> $2.05</p></div>
                
                <div class="holder-text"><p>Dimes: </p><p style="text-align: right;"> $2.9</p></div>
                
                <div class="holder-text"><p>Quarters: </p><p style="text-align: right;"> $3.75</p></div>
                
                <div class="holder-text"><p>Ones: </p><p style="text-align: right;"> $90</p></div>
                
                <div class="holder-text"><p>Fives: </p><p style="text-align: right;"> $55</p></div>
                
                <div class="holder-text"><p>Tens: </p><p style="text-align: right;"> $20</p></div>
                
                <div class="holder-text"><p>Twenties: </p><p style="text-align: right;"> $60</p></div>
             </div>
           
        </div>
        <div class="el4"></div>
        <div class="el5"></div>
        <div class="el6">
            
        </div>
    </div>
<script type="text/javascript" src="script.js">
</script>

</body>
</html>

this doesn’t work even condition in code should do that
1-When the value in the #cash element is equal to price, the value in the #change-due element should be “No change due - customer paid with exact cash”.
2-When the value in the #cash element is less than price, an alert should appear with the text “Customer does not have enough money to purchase the item”.
I really don’t get what I should do, there is same condition but just different cid which can’t be change in HTML so how to get if that cid current value while you already have another value for cid in the global cid?:
1-When price is 19.5, the value in the #cash element is 20, cid is [[“PENNY”, 0.01], [“NICKEL”, 0], [“DIME”, 0], [“QUARTER”, 0], [“ONE”, 0], [“FIVE”, 0], [“TEN”, 0], [“TWENTY”, 0], [“ONE HUNDRED”, 0]], and the #purchase-btn element is clicked, the value in the #change-due element should be “Status: INSUFFICIENT_FUNDS”
again cash in drawer cid is less than change due (well how to compare array to just number?):
2-When price is less than the value in the #cash element, total cash in drawer cid is less than the change due, and the #purchase-btn element is clicked, the value in the #change-due element should be “Status: INSUFFICIENT_FUNDS”.

as I tried to explain before, this type of hardcoding is not allowed.
You must not hardcode the cashvalue or have any logic that checks the price for a specific number.

You must write flexible code.
If we change the testcases to a whole other set of numbers, your code must still work!

The reason the tests are not passing is because text content of change-due in your code is formatted wrong.

They want;
Status: (status of register eg. OPEN)
(value of item eg. ONE HUNDRED): $(total eg. 100)
(value of item eg. TWENTY): $(total eg. 60)

the given items must ALSO appear in descending order from biggest bill type to smallest bill type.

Also you do not need to set the price or cid for the tests, the test will automatically change these and see if your code works in each case.

This is why tests are not passing.

But the greater issue is you are trying to case code the tests. you should rather work your code to use variables rather than defined cases. so if your price is set to 30 and you enter 80 into the input it should work, if you input 70 it should work, if you input 12 it should work.