Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

I keep getting a no pass even after I have entered the cash and price inputs and getting the requested outputs. I checked all my outputs in playcode and VS code. My html is poo poo but i’m trying to get the javascript before i get the rest. I’m not getting any errors in the console so I’m not sure where else to go form here.

I did copy and paste the code provided from the example into the tutorial and it didnt even pass all the requirements.

Your code so far

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

/* file: script.js */
const cash = document.getElementById("cash")
const changeDue = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const priceOfItem = document.getElementById("price");


let price = 3.26;
//Cash in Drawer
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 denomValues = [
['PENNY', .01],
['NICKEL', .05],
['DIME', 0.1],
['QUARTER', .25],
['ONE', 1],
['FIVE', 5],
['TEN', 10],
['TWENTY', 20],
['ONE-HUNDRED', 100]
];


//Listen for Purchase Click Event Listener//
purchaseBtn.addEventListener("click", () => {
  const cashRecieved = cash.value
  const change =( Math.round(cashRecieved * 100) - Math.round(price*100))/100;
  console.log("YOU CLICKED THE PURCHASE BUTTON");
  //CALL FUNCTION to Determine if Calculation is Necessary
 processTransaction(cashRecieved, change);
 
});///End of Event Listener Button Function


//FUNCTION to Determine if Valid Tranasaction can Occur
const processTransaction = (cashRecieved, change) => {
  //If Cash Recieved is Less than Price
  if(cashRecieved < price) {
   alert("Customer does not have enough money to purchase the item");
   resetForNextTransaction();
   return;
  }  
console.log(cashRecieved - price)
  if(cashRecieved - price === 0) {
   cashRegisterDisplay()
   resetForNextTransaction();
   return;
  } 
  //If Cash Recieved is Greater than Price
   console.log("Cash Recieved is Greater than Price");
   if(drawerTotal(cid)===0) {
     insufficientFundsDisplay();
     return;            
  }
  //If Cash Recieved is Greater than Price
  //Call Function to Reformat Variables
  const [cidDenomMult, changeMult] = reformatVariables(cid, denomValues, change);
  
  //Call Function to Calculate Change
  const [modOfChange, denomAmts, currDrawer] = drawerCalc(cidDenomMult, changeMult);
   console.log(currDrawer);
  //BOOKMARK///////////////////////////
  //Check if Change can be Made With Denominations in Drawer

  

  cashRegisterDisplay(modOfChange, denomAmts, currDrawer);

};
//////////////End of nonCalcTransaction Function
                                         
   
//FUNCTION reformatVariables to Reformat cid Array for Easier Appication of Functions
const reformatVariables = (cid, denomValues, change) => {
  //Create Array from cid that Includes Unit Values;
  let addDenomValues = cid.map((item) => {
    const [denomination, totalAmount] = item;
    const update = denomValues.find(([updateDenom]) => updateDenom === denomination);
    if (update) {
      const [,unitValue] = update; // Destructure the unit value from denomValues
      return [denomination, Math.round(totalAmount*100), Math.round(unitValue*100)]; // Add the new value
    } 
    
  }).reverse()//Put array In descending Order

  //Multiply Change by 100 for Easier Function Applications
  let tempChange = change*100;
   
   return [addDenomValues, tempChange];
  }; 
  //End of reformatCid Function 
 
//// FUNCTION calcChange to Calculate Bills and Coins to Withdraw for Change
const drawerCalc = (tempCidDenomValues, tempChange) => {
  let amountDenom = 0;
  let denomAmtsArr = [];
  let workingChange = tempChange
  let counter = 0;
  //Determine If you have the Denoms To Make Change Tender Needed to make Change
  const requiredDrawer = tempCidDenomValues.map(([denomination, totalAmount, unitValue], index) => {
    if(unitValue < workingChange && totalAmount >= unitValue){
      while(workingChange >= unitValue && totalAmount >= unitValue) {
          counter++
          workingChange -= unitValue;
          totalAmount -= unitValue;
      }
      return[denomination, totalAmount, ]
    } 
    return[denomination, totalAmount]
   }) ///End of Map method Produced an array with updated drawer amounts after change
 

  //Return Check if change can be made with denominations in drawer if so update DrawerCount
    workingChange = Math.round(workingChange*100)/100;//workingChange goes to zero if drawer has required denominations

  
  ///////Determine Amount in Change for Each Denom
  tempCidDenomValues.forEach(([denomination, totalAmount, unitValue]) => {
    let counter = 0;
    if(unitValue < tempChange && totalAmount >= unitValue){
      while(tempChange >= unitValue && totalAmount >= unitValue) {
          counter++
          tempChange -= unitValue;
          totalAmount -= unitValue;
          
      }
      amountDenom = counter*unitValue; 
      denomAmtsArr.push([denomination, amountDenom])
    }  
  }) 
///End of forEach method Produced an array with amount for each denom in change
   console.log(workingChange)
   return [workingChange, denomAmtsArr,  requiredDrawer] ;
}; 
//////End of Calc Function//////////////////////


//FUNCTION for Display Change to Register
const cashRegisterDisplay = (requireDenomMet=0, denomOfChange=0 , currentDrawer=1) => {
  if(requireDenomMet > 0) {
    insufficientFundsDisplay();
    return;
  }
  if(denomOfChange === 0) {
    changeDue.textContent = "No change due - customer paid with exact cash";
  }
  const drawerOp = drawerTotal(currentDrawer) > 0 ? "OPEN" : "CLOSED" 
     console.log(denomOfChange)
  //For Each Method to Display the Change Due
  changeDue.textContent = `Status: ${drawerOp} `
      denomOfChange.forEach(([denom, amount], index) => {
      changeDue.textContent += `${denom}: $${Math.round(amount)/100} `;
  })
  
};
///End of cashRegisterDisplay Function//////////

//FUNCTION for Reset
const resetForNextTransaction = (cid = []) =>{

};

//FUNCTION to Call Insufficient Funds
const insufficientFundsDisplay = () => {
  changeDue.textContent = "Status: INSUFFICIENT_FUNDS";
  resetForNextTransaction();
}

///FUNCTION to determine total in Drawer
const drawerTotal = (workingDrawer) => {
  return workingDrawer.reduce((acc, item) => { 
    return acc + item[1];
  }, 0)
};
/* 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/131.0.0.0 Safari/537.36

Challenge Information:

Build a Cash Register Project - Build a Cash Register

Hi @jackratat

Don’t copy the example code. This is a certification project, so you need to write all the code yourself. Part of that will include frustration, no progress, and no idea of what to do next.

Try placing the cid array out of the global scope. Otherwise, each time the function runs, the currency amounts may reset.

Happy coding

I have provided my code. I wnated to see if the tutorial check was working. Its not passing the example code.

To test your code, please also post the html

Tell us what’s happening:

I wasnt able to edit my original post. My code appear to display everything required but still is not passing

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, scale=1.0">
    <link rel="stylesheet" href="./styles.css"> 
  </head>
  <body>
    <main>
      <h1>Cash Register</h1>
      <div class="cash-register-display-container">
        <div class="status-container">
          <div id="price" class="price">Price of Item</div> 
          <div id="change-due" class="change-due">Change Due</div> 
        </div>
        <div class="digits">
          <div class="digit"><span class="scroll-text">1</span></div>
          <div class="digit"><span class="scroll-text">2</span></div>
          <div class="digit"><span class="scroll-text">3</span></div>
          <div class="digit"><span class="scroll-text">4</span></div>
          <div class="digit"><span class="scroll-text">5</span></div>
          <div class="decimal">.</div>
          <div class="digit"><span class="scroll-text">6</span></div>
          <div class="digit"><span class="scroll-text">7</span></div>
      </div>
    <h2>Money From Customer</h2>
    <div id="user-container" class="user-container">    
      
      <div id="bill-container" class="bill-container">
        <button  id="$100-bill" class="bill">$100</button>
        <button id="$50-bill" class="bill">$50</button>
        <button id="$20-bill" class="bill">$20</button>
        <button id="$10-bill" class="bill">$10</button>
        <button id="$5-bill" class="bill">$5</button>
        <button id="$1-bill" class="bill">$1</button>
    </div>
    <div id="coin-container" class="coin-container"> 
      <button id="quarter" class="coin">Quarter</button>
      <button id="dime" class="coin">Dime</button>
      <button id="nickle" class="coin">Nickle</button>
      <button id="penny" class="coin">Penny</button>
    </div>
    <label for="cash">Cash Received</ label>
    <input type="number" id="cash" class="cash" value="cash">
    <button id="purchase-btn" class="purchase-btn">Purchase</button>
  </div>
  <h2>Drawer</h2>
    <div class="status-container">
      <div id="drawer-total" class="drawer-total">Total in drawer 100</div>
      <div id="open-what" class="open-what">Total in drawer100</div>
    </div>
    <div id="drawer-container" class="drawer-container">
      <div id="drawer-bill-container" class="bill-container drawer">
        <button id="$100-bill" class="bill drawer">$100 <br
          <span id="100-bill-amount" class="bill amount">(1)</span></button>
        <button id="$50-bill" class="bill drawer">$50<br
        <span id="50-bill-amount" class="50-bill amount">(1)</span></button>
        <button id="$20-bill" class="bill drawer">$20<br
        <span id="20-bill-amount" class="20-bill amount">(1)</span></button>
        <button id="$10-bill" class="bill drawer">$10<br
        <span id="10-bill-amount" class="10-bill amount">(1)</span></button>
        <button id="$5-bill" class="bill drawer">$5<br
        <span id="5-bill-amount" class="5-bill amount">(1)</span></button>
        <button id="$1-bill" class="bill drawer">$1<br
        <span id="1-bill-amount" class="1-bill amount">(1)</span></button>
      </div>
    </div>
    <div id="drawer-coin-container" class="coin-container drawer"> 
      <button id="quarter" class="coin">Quarter <br
        <span id="quarter-amount" class="quarter-bill amount">(1)</span></button>
      <button id="dime" class="coin">Dime <br
        <span id="dime-amount" class="dime-bill amount">(1)</span></button></button>
      <button id="nickle" class="coin">Nickle <br
        <span id="nickle-amount" class="nickle-bill amount">(1)</span></button></button>
      <button id="penny" class="coin">Penny <br
        <span id="penny-amount" class="penny-bill amount">(1)</span></button></button>
    </div>
  </div>
 
     
      
    </main>
    <script src="./script.js"></script>
  </body>
  
</html>
/* file: script.js */
const cash = document.getElementById("cash")
const changeDue = document.getElementById("change-due");
const purchaseBtn = document.getElementById("purchase-btn");
const priceOfItem = document.getElementById("price");


let price = 19.5;
//Cash in Drawer
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 denomValues = [
['PENNY', .01],
['NICKEL', .05],
['DIME', 0.1],
['QUARTER', .25],
['ONE', 1],
['FIVE', 5],
['TEN', 10],
['TWENTY', 20],
['ONE-HUNDRED', 100]
];


//Listen for Purchase Click Event Listener//
purchaseBtn.addEventListener("click", () => {
  const cashRecieved = cash.value
  const change =( Math.round(cashRecieved * 100) - Math.round(price*100))/100;
  console.log("YOU CLICKED THE PURCHASE BUTTON");
  //CALL FUNCTION to Determine if Calculation is Necessary
 processTransaction(cashRecieved, change);
 
});///End of Event Listener Button Function


//FUNCTION to Determine if Valid Tranasaction can Occur
const processTransaction = (cashRecieved, change) => {
  //If Cash Recieved is Less than Price
  if(cashRecieved < price) {
   alert("Customer does not have enough money to purchase the item");
   resetForNextTransaction();
   return;
  }  
console.log(cashRecieved - price)
  if(cashRecieved - price === 0) {
   cashRegisterDisplay()
   resetForNextTransaction();
   return;
  } 
  //If Cash Recieved is Greater than Price
   console.log("Cash Recieved is Greater than Price");
   if(drawerTotal(cid)===0) {
     insufficientFundsDisplay();
     return;            
  }
  //If Cash Recieved is Greater than Price
  //Call Function to Reformat Variables
  const [cidDenomMult, changeMult] = reformatVariables(cid, denomValues, change);
  
  //Call Function to Calculate Change
  const [modOfChange, denomAmts, currDrawer] = drawerCalc(cidDenomMult, changeMult);
   console.log(currDrawer);
  //BOOKMARK///////////////////////////
  //Check if Change can be Made With Denominations in Drawer

  

  cashRegisterDisplay(modOfChange, denomAmts, currDrawer);

};
//////////////End of nonCalcTransaction Function
                                         
   
//FUNCTION reformatVariables to Reformat cid Array for Easier Appication of Functions
const reformatVariables = (cid, denomValues, change) => {
  //Create Array from cid that Includes Unit Values;
  let addDenomValues = cid.map((item) => {
    const [denomination, totalAmount] = item;
    const update = denomValues.find(([updateDenom]) => updateDenom === denomination);
    if (update) {
      const [,unitValue] = update; // Destructure the unit value from denomValues
      return [denomination, Math.round(totalAmount*100), Math.round(unitValue*100)]; // Add the new value
    } 
    
  }).reverse()//Put array In descending Order

  //Multiply Change by 100 for Easier Function Applications
  let tempChange = change*100;
   
   return [addDenomValues, tempChange];
  }; 
  //End of reformatCid Function 
 
//// FUNCTION calcChange to Calculate Bills and Coins to Withdraw for Change
const drawerCalc = (tempCidDenomValues, tempChange) => {
  let amountDenom = 0;
  let denomAmtsArr = [];
  let workingChange = tempChange
  
  //Determine If you have the Denoms To Make Change Tender Needed to make Change
  const requiredDrawer = tempCidDenomValues.map(([denomination, totalAmount, unitValue], index) => {
    if(unitValue < workingChange && totalAmount >= unitValue){
      let counter = 0;
      while(workingChange >= unitValue && totalAmount >= unitValue) {
        
          workingChange = workingChange.toFixed(2) - unitValue;
          totalAmount -= unitValue;
          counter++
      }
      return[denomination, totalAmount, ]
    } 
    return[denomination, totalAmount]
   }) ///End of Map method Produced an array with updated drawer amounts after change
 

  //Return Check if change can be made with denominations in drawer if so update DrawerCount
    workingChange = Math.round(workingChange/100);//workingChange goes to zero if drawer has required denominations

  
  ///////Determine Amount in Change for Each Denom
  tempCidDenomValues.forEach(([denomination, totalAmount, unitValue]) => {
    let counter = 0;
    if(unitValue < tempChange && totalAmount >= unitValue){
      while(tempChange >= unitValue && totalAmount >= unitValue) {
          counter++
          tempChange = tempChange.toFixed(2) - unitValue;
          totalAmount -= unitValue;
          
      }
      amountDenom = counter*unitValue; 
      denomAmtsArr.push([denomination, amountDenom])
    }  
  }) 
///End of forEach method Produced an array with amount for each denom in change
   console.log(workingChange)
   return [workingChange, denomAmtsArr,  requiredDrawer];
}; 
//////End of Calc Function//////////////////////


//FUNCTION for Display Change to Register
const cashRegisterDisplay = (requireDenomMet=0, denomOfChange=0 , currentDrawer=1) => {
  if(requireDenomMet > 0) {
    insufficientFundsDisplay();
    return;
  }
  if(denomOfChange === 0) {
    changeDue.textContent = "No change due - customer paid with exact cash";
  }
  const drawerOp = drawerTotal(currentDrawer) > 0 ? "OPEN" : "CLOSED" 
     console.log(denomOfChange)
  //For Each Method to Display the Change Due
      let changeDisplay =[];
      denomOfChange.forEach(([denom, amount]) => {
      changeDisplay.push(` ${denom}: $${Math.round(amount)/100}`);
      console.log(changeDisplay)
      changeDue.textContent = `Status:  ${drawerOp}  
      ${changeDisplay}`;
     
      
  })
  
};
///End of cashRegisterDisplay Function//////////

//FUNCTION for Reset
const resetForNextTransaction = (cid = []) =>{

};

//FUNCTION to Call Insufficient Funds
const insufficientFundsDisplay = () => {
  changeDue.textContent = "Status: INSUFFICIENT_FUNDS";
  resetForNextTransaction();
}

///FUNCTION to determine total in Drawer
const drawerTotal = (workingDrawer) => {
  return workingDrawer.reduce((acc, item) => { 
    return acc + item[1];
  }, 0)
};
/* file: styles.css */
html {
background-color: #e59500;
margin: 0; 
padding: 0;
overflow: hidden;
}

.status-container {
  display:flex;
  box-sizing: border-box;
  background-color: #e5dada;
  text-align: center;
  justify-content: space-around;
}

.digits{
  display: flex;
  box-sizing: border-box;  
  justify-content: center;
  background-color: #2e86ab;
  height:  auto;
  width: auto;
  border: 1px dashed black;
  margin-bottom: 2vw;
}

.digit {
  font-size: 8vw;
  background-color: #e5dada;
  border: 1px solid black;
  box-sizing: border-box;
  margin-left: 1vw;
  padding: 2vw 2vw 0vw 2vw;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.decimal{
  font-size: 10vw;
  }

.user-container {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;  
  height:  auto;
  width: auto;
  border: 1px dashed black;
}

.cash {
  height: 5vw;
  background-color: #e5dada;
  margin-bottom: 2vw;
}

.purchase-btn {
  box-sizing: border-box;
  background-color: gold;
  text-align: center;
  margin-left: 30vw;
  height: 7vw;
  width: 30vw;
  border-radius: 20%
}

.bill{
  background-color: #264653;
  color: white;
  text-align: center;
  margin-bottom: 2vw;
  height: 10vw;
  line-height: 10vw;
  width: 30vw;
  border-radius: 20%
}
.coin-container {
  display:flex;
  justify-content: space-around;
}
.coin {
  background-color: gray;
  color: white;
  text-align: center;
  margin-bottom: 2vw;
  height: 10vw;
  width: auto;
  border-radius: 70%
}
h1, h2 {
  text-align:center;
  border: 2px solid black;
  margin-bottom: 0;
}

.drawer-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: auto;
  width: auto;
}

.bill.drawer {
  background-color: #264653;
  color: white;
  margin-left: 2vw;
  margin-right: 2vw;
  height: 30vw;
  width: 10vw;
  border-radius: 10%
}

Your browser information:

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

Challenge Information:

Build a Cash Register Project - Build a Cash Register

Hi @jackratat

You need to take the cid array out of the global scope, otherwise the values will reset each time you run the script.

Happy coding