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