Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

my cash register project works fine but when i run the test it shows that some criteria is not fulfilled i tested it by the failed criteria too but it passes so i don’t know what do does any one have any idea

Your code so far

<!-- file: index.html -->


/* file: script.js */


/* file: styles.css */

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3 
<!DOCKTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <main>
    <img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freecodecamp -logo">
    <h1>Cash Register Project</h1>
    <div id="change-due"></div>
    <label for="cash">Enter cash from customer:</label>
    <input id="cash" type="number">
    <button id="purchase-btn" onclick="purchase()">Purchase</button>
    <div class="price"><p>Total:</p></div>
    <div class=" box"></div>
    <div id="cont">
      <div class="container">
         <table>
            <tr>
              <td></td><td></td><td></td>
            </tr>
            <tr>
              <td></td><td></td><td></td>
            </tr>
          <tr>
              <td></td><td></td><td></td>
            </tr>
      </table>
      <div id="cid-states">
        <ul>
          <li><b>Cash in drawer:</b></li>
          <li>Pennies:</li>
          <li>Nickels:</li>
          <li>Dimes:</li>
          <li>Quarters:</li>
          <li>Ones:</li>
          <li>Fives:</li>
          <li>Tens:</li>
          <li>Twenties:</li>
          <li>Hundreds:</li>
          </ul>
         </div>
        </div>
      <div class="divider"><div class="circ"></div></div>
      </div>
      </main>
    <script src="script.js"></script>
  </body>
</html>



body{
 display: flex;
 justify-content: center;
 background-color: black;
 color: white;
}
button{
  width: 100px;
  height: 30px;
  background-color: yellow;
  margin: 10px;
}
input{
  width: 200px;
  height: 35px;
  display: block;
  margin: 10px;
}
#change-due{
  display: inline-block;
  font-size: 20px;
}
img{
  width: 300px;
}
td{
  width: 30px;
  height: 30px;
  background-color: black;
  border: 5px solid rgb(145,170,240); 
}
#cont{
background-color: rgb(145,170,240);
border-radius: 30px;
width: 400px;
padding: 10px;
color: black;
}
.container{
  display: flex;
}
ul{
  list-style: none;
  font-size: 20px;
}
table{
  display: inline-block;
}
.price{
  width: 200px;
  height: 40px;
  background-color: rgb(145,170,240);
  margin-left: 30px;
  padding: 10px;
}
.box{
  background-color: rgb(145,170,240);
  width: 50px;
  height: 40px;
  margin-left: 60px;
}
p{
  background-color: black;
  width: 190px;
  height: 30px;
  text-align: center;
  margin: 4px;
  padding-top: 7px;
}
.divider{
  display: flex;
  align-items:center; 
justify-content:center;
  margin-top: 10px;
  width: 400px;
  height: 50px;
  border-top: 10px solid black;
}
.circ{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: black;
  
}
label{
  display: block;
}
h5{
  margin: 2px;
}



let price = 3.26;
//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]
];
/*let cid = [
  ["PENNY", 0.5],
  ["NICKEL", 0],
  ["DIME", 0],
  ["QUARTER", 0],
  ["ONE", 5],
  ["FIVE", 0],
  ["TEN", 10],
  ["TWENTY", 20],
  ["ONE HUNDRED", 0]
];*/
const weight = [0.01,0.05,0.1,0.25,1,5,10,20,100];
const nweight=[];
let cidcop=[];
let cidcopy=[];
for(let i=0;i<9;i++){
 nweight[i] = parseInt(Math.round(weight[i]*100));
 cidcop[i] = parseInt(Math.round((cid[i][1]*100)));
 cidcopy[i]=parseInt(Math.round((cid[i][1]*100)));
 }
console.log(nweight);
console.log(cidcop);
const cash = document.getElementById("cash");
const purchaseBtn = document.getElementById("purchase-btn");
const cidStates = document.querySelectorAll('li');
const changeDue = document.getElementById("change-due");
const para = document.querySelector('.price p');
const spanpa = document.createElement('span');
spanpa.textContent = `$${price}`;
para.appendChild(spanpa);


const purchase = ()=>{
   states();
   test();
}

const changeFun=()=>{
  return parseInt(Math.round((parseFloat(cash.value) - price)*100));
}

const sum = ()=>{
        let result=0;
        for(let i=0;i<cid.length;i++){
            result+=parseFloat(cid[i][1]);
        }
        return parseInt(Math.round(result*100));
}


let insufficentFundFlag=0;
const states = ()=>{
        if(sum()<changeFun()){
           insufficentFundFlag=1;
        }
        else if(sum()==changeFun()){
          changeDue.innerHTML = `<h5>Status: CLOSED</h5>`;
        }
        else if(changeFun()==0){
          changeDue.innerHTML = `No change due - customer paid with exact cash`;
        }
        else if(changeFun()<0){
          alert('Customer does not have enough money to purchase the item');
        }
        else{
          changeDue.innerHTML = `<h5>Status: OPEN</h5>`;
        }
}


const test = ()=> {
let change = changeFun() //100
let result1 = [0,0,0,0,0,0,0,0,0];
for(let i=9;i>=0;i--){
    if(sum() < change ){
        break;
    }
if (change >= nweight[i]){
    while(change >= nweight[i] && cidcop[i]>=nweight[i]){
result1[i] +=nweight[i];
change-=nweight[i];
cidcop[i]-=nweight[i] ;
}
}
}
let result = [0,0,0,0,0,0,0,0,0];
if(change === 0){
    for(let i=0;i<9;i++){
    cidcopy[i]=cidcop[i];
    result[i]=result1[i];
    }
}
else{
  changeDue.innerHTML = `<h5>Status: INSUFFICIENT_FUNDS</h5>`;   
}
for(let i=8;i>=0;i--){
    if(result[i] > 0){
      changeDue.innerHTML += `<h5>${cid[i][0]}: $${result[i]/100}</h5>`  ;
    }
}

for(let i=0;i<9;i++){
        if((cidStates[i+1].querySelector('span') !== null)){
         cidStates[i+1].querySelector('span').textContent =` $${cidcopy[i]/100}`; 
        }
        else{
        const span = document.createElement('span');
        span.textContent =` $${cidcopy[i]/100}`;
        cidStates[i+1].appendChild(span);
        }
}
}


for(let i=0;i<9;i++){
        if((cidStates[i+1].querySelector('span') !== null)){
         cidStates[i+1].querySelector('span').textContent =` $${cidcopy[i]/100}`; 
        }
        else{
        const span = document.createElement('span');
        span.textContent =` $${cidcopy[i]/100}`;
        cidStates[i+1].appendChild(span);
        }
}
` ` `
4

I’ve edited your code for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

1 Like
5

do not do calculations in the global space, everything needs to happen inside functions called when the button is clicked for the app to be reusable