Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

Your code so far

WARNING

The challenge seed code and/or your solution exceeded the maximum length we can port over from the challenge.

You will need to take an additional step here so the code you wrote presents in an easy to read format.

Please copy/paste all the editor code showing in the challenge from where you just linked.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="./styles.css" type="text/css" rel="stylesheet">
    <title>Cash Register</title>
  </head>
  <body>
    <div id="page-container">
      <div id="register-background">
        <div id="register-screen"></div>
        <div id="register-side"></div>
        <div id="register-front">
          <div class="decor-btn"></div>
          <div class="decor-btn"></div>
          <div class="decor-btn"></div>
        </div>
      </div>
      <div id="enter-hide-change">
        <button type="button" id="enter-hide-btn">
          Open Register Buttons
        </button>
        <button type="button" id="purchase-btn">
          Purchase
        </button>
      </div>
      <label for="cash">Input Change Here:
        <input id="cash" type="text">
      </label>
      <div id="change-in-drawer"></div>
      <div id="change-due"></div>
      <div id="buttons-array">
        <div class="register-btns">1</div>
        <div class="register-btns">2</div>
        <div class="register-btns">3</div>
        <div class="register-btns">4</div>
        <div class="register-btns">5</div>
        <div class="register-btns">6</div>
        <div class="register-btns">7</div>
        <div class="register-btns">8</div>
        <div class="register-btns">9</div>
        <div class="register-btns" id="point">.</div>
        <div class="register-btns" id="dollar">$</div>
        <div class="register-btns" id="clear">CLR</div>
        <div class="register-btns" id="enter">Enter</div>
      </div>
    </div>
  </body>
  <script src="./script.js"></script>
</html>

function inputValidation(input) {
  if(input.match(/^[\$?\d+]\d*?(\.\d{1,2})?$/)) {
    registerScreen.textContent = input;
    output.textContent = "";
    validated = true;
  } 
  else {
    output.textContent = "Please Enter a valid number";
    validated = false;
  }
}
const registerFunds = () => {
  cidDisplay.innerHTML = "<h1>Current change in drawer:</h1>"
  cid.map((el) => numberFormatter(el[0], el[1], cidDisplay));
}
const numberFormatter = (el, va, out) => {
    let stringifiedVa = String(va);
    
    out.innerHTML += (stringifiedVa.length > 2 ? ` ${el}: $${stringifiedVa.slice(0, stringifiedVa.length - 2)}.${stringifiedVa.slice(stringifiedVa.length - 2, stringifiedVa.length)}` : ` ${el}: $0.${stringifiedVa.length == 1 ? "0" + stringifiedVa : stringifiedVa[0]}`)
}
const numberCleanup = (el) => {
  let stringifiedEl = String(el);
  if(Number.isInteger(el)) {
    el *= 100 
  }
  else {
    el = stringifiedEl.match(/^\d+.\d$/) ? Number(stringifiedEl.replace(".", "")) * 10 : Number(stringifiedEl.replace(".", ""));
  }
  return el;
}

let price = 3.26;
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 ca = [1, 5, 10, 25, 100, 500, 1000, 2000, 10000];
const cash = document.getElementById("cash");
const displayBtns = document.querySelectorAll(".decor-btn");
const registerBtns = document.querySelectorAll(".register-btns");
const registerScreen = document.getElementById("register-screen");
const btnParent = document.getElementById("buttons-array");
const registerToggle = document.getElementById("enter-hide-btn");
const output = document.getElementById("change-due");
const clear = document.getElementById("clear");
const purchaseBtn = document.getElementById("purchase-btn");
const cidDisplay = document.getElementById("change-in-drawer");
let counter = 1;
let pointToggle = false;
let pointString = "";
let validated = false;
let toggle = [false, false];

cid.forEach((el) => el[1] = numberCleanup(el[1]));
price = numberCleanup(price);

for(let i=0; i<3; i++) {
  displayBtns[i].style.left = `min(${10*i + 5}vw, ${70 + i*120}px)`;
  displayBtns[i].style.top = `calc((min(4vw, 40px) / -2) * (${2*i + 1}))`;
}

registerBtns.forEach((el) => {
  el.style.gridArea = `button${counter}`;
  if(counter < 12) {
    el.addEventListener("click", () => {
      toggle[1] = true;
      if(toggle.every(el => el)) {
        toggle[0] = false;
        registerScreen.textContent = "";
        cash.value = "";
      }
      if(el.textContent == "." && !registerScreen.textContent.includes(".") && !pointString.includes(".")) {
        pointToggle = true;
      }
        pointToggle ? pointString += el.textContent : inputValidation(registerScreen.textContent + el.textContent);
      if(pointString.length == 3) {
         inputValidation(registerScreen.textContent + pointString);
         pointToggle = false;
         pointString = ""; 
      }
    })
  } else if (counter == 12) {
    el.addEventListener("click", () => {
      output.textContent = "";
      registerScreen.textContent = "";
      cash.value = "";
    })
  }
  counter++;
})
btnParent.style.display = "none";
registerToggle.addEventListener("click", () => {
  if(btnParent.style.display == "none") {  
    btnParent.style.display = "grid";
    registerToggle.textContent = "Hide Register Buttons";
  }  
  else {
    btnParent.style.display = "none";
    registerToggle.textContent = "Open Register Buttons";
  }
})
cash.addEventListener("keyup", () => {
  toggle[0] = true;
  if(toggle.every(el => el)) {
    toggle[1] = false;
    registerScreen.textContent = "";
  }
  inputValidation(cash.value);
  registerScreen.textContent = cash.value;
})
purchaseBtn.addEventListener("click", () => {
  if(validated) {
    output.innerHTML = "";
    let cleanedCash = numberCleanup(Number(registerScreen.textContent.replace("$", "")));
    let changeDue = cleanedCash - price;
    let registerCash = 0;
    cid.forEach(el => registerCash += el[1]);
    if(cleanedCash == price) {
      output.textContent = "No change due - customer paid with exact cash";
      return;
    }
    if(cleanedCash < price) {
      alert("Customer does not have enough money to purchase the item");
      return;
    }
    if(registerCash < changeDue) {
      output.textContent = "Status: INSUFFICIENT_FUNDS";
      registerFunds();
    }
    else {
      registerCash == changeDue ? output.textContent = "Status: CLOSED" : output.textContent = "Status: OPEN";
      for(let iterator = cid.length - 1; iterator >= 0; iterator--) {
        let changeForRound = changeDue <= cid[iterator][1] ? Math.floor(changeDue / ca[iterator]) * ca[iterator]: cid[iterator][1];
        if(changeForRound <= changeDue) {
          cid[iterator][1] -= changeForRound;
          changeDue -= changeForRound;
          changeForRound != 0 ? numberFormatter(cid[iterator][0], changeForRound, output) : null;
        }
      }
    }
    registerFunds();
  }
})

Hello, I’m currently working on the Build a Cash Register Project and am completely lost as to why the tests after the third are not passing - the output is exactly as requested and there is no indication as to what I need to change in order for them to pass. I have a built-in input validation to make sure it’s a valid floating point number of at least one decimal place, with an optional dollar sign ($) in front of it (for context). The user would be able to input their cash amount either through the text box or through a HTML GUI. All values for displaying and/or calculating are then converted into their integer cent amounts (To avoid rounding error) and then the subsequent processing on the numbers are done as necessary to display the proper output. It seems the editor is having trouble connecting the cash input to the output somehow, not sure why. Does it have to do with using its value in another variable (cleanedCash), thus the tests cannot link them?

Please let me know what to do here. I’ve been stuck on this project for over a week, working on it for 4-5 hours a day and am starting to feel very stupid. I’m at my wits’ end here, any pointers towards what the hell I’m doing wrong would help a lot. I know I already made another post about this, but my code has changed significantly over the past day or so.

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:122.0) Gecko/20100101 Firefox/122.0

Challenge Information:

Build a Cash Register Project - Build a Cash Register

idk
idk680×550 75.5 KB

2

You have a bunch of variables out in the global scope, which means your code can only be correct once. You should limit the scope of your variables as much as possible

3

I tried to refactor my code to include as little global variables as possible, and am still having the same issues. I also took out any unnecessary code to remove any confounding problems. Not sure what’s wrong here, still getting the same problems. The HTML is the exact same.

/*
let counter = 1;
let validated = false;
let toggle = [false, false];
const registerToggle = document.getElementById("enter-hide-btn");
const btnParent = document.getElementById("buttons-array");
const clear = document.getElementById("clear");
const registerBtns = document.querySelectorAll(".register-btns");
*/

/*
function inputValidation(inp, out, scrn) {
  if(inp.match(/^[\$?\d+]\d*?(\.\d{1,2})?$/)) {
    scrn.textContent = inp;
    out.textContent = "";
    validated = true;
  } 
  else {
    out.textContent = "Please Enter a valid number";
    validated = false;
  }
}
*/
const registerFunds = (display, funds) => {
  display.innerHTML = "<h1>Current change in drawer:</h1>"
  funds.map((el) => numberFormatter(el[0], el[1], display));
}
const numberFormatter = (el, va, out) => {
    let stringifiedVa = String(va);
    
    let temp = (stringifiedVa.length > 2 ? ` ${el}: $${stringifiedVa.slice(0, stringifiedVa.length - 2)}.${stringifiedVa.slice(stringifiedVa.length - 2, stringifiedVa.length)}` : ` ${el}: $0.${stringifiedVa.length == 1 ? "0" + stringifiedVa : stringifiedVa}`)
    temp = temp.replace(/\d+\.00/, temp.slice(temp.indexOf("$") + 1, temp.length - 3)).replace(/\d+\.\d0/, temp.slice(temp.indexOf("$") + 1, temp.length - 1));
    
    out.innerHTML += temp;
}
const numberCleanup = (el) => {
  let stringifiedEl = String(el);
  if(Number.isInteger(el)) {
    el *= 100 
  }
  else {
    el = stringifiedEl.match(/^\d+.\d$/) ? Number(stringifiedEl.replace(".", "")) * 10 : Number(stringifiedEl.replace(".", ""));
  }
  return el;
}
const cashInit = (csh, rgscrn) => {
    csh.addEventListener("keyup", () => {
    /*
    toggle[0] = true;
    if(toggle.every(el => el)) {
      toggle[1] = false;
      registerScreen.textContent = "";
    }
    inputValidation(cash.value, output, registerScreen);*/
    rgscrn.textContent = csh.value;
  })
}
const purchaseInit = (purchBtn, out, rgScrn, cidArr, prc, cArr, cidDisp) => {
  purchBtn.addEventListener("click", () => {
    out.innerHTML = "";
    let cleanedCash = numberCleanup(Number(rgScrn.textContent.replace("$", "")));
    let changeDue = cleanedCash - prc;
    let registerCash = 0;
    let changeForRound = null;
    let accum = 0;
    let billArray = [];

    cidArr.forEach(el => registerCash += el[1]);

    if(cleanedCash < prc) {
      alert("Customer does not have enough money to purchase the item");
      return;
    }
    if(cleanedCash == prc) {
      out.textContent = "No change due - customer paid with exact cash";
      return;
    }
    if(registerCash < changeDue) {
      out.textContent = "Status: INSUFFICIENT_FUNDS";
    }
    else {
      registerCash == changeDue ? out.textContent = "Status: CLOSED" : out.textContent = "Status: OPEN";
      for(let iterator = cidArr.length - 1; iterator >= 0;iterator--) {
        changeForRound = changeDue <= cidArr[iterator][1] ? Math.floor(changeDue / cArr[iterator]) * cArr[iterator]: cidArr[iterator][1];
        if(changeForRound <= changeDue) {
          cidArr[iterator][1] -= changeForRound;
          changeDue -= changeForRound;
          accum += changeForRound;
          changeForRound != 0 ? numberFormatter(cidArr[iterator][0], changeForRound, out) : null;
        }
      }
    }
    accum < (cleanedCash - prc) ? out.textContent = "Status: INSUFFICIENT_FUNDS" : registerFunds(cidDisp, cidArr);
  })
}
const init = () => {
  const displayBtns = document.querySelectorAll(".decor-btn");
  const purchaseBtn = document.getElementById("purchase-btn");
  let price = 3.26;
  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 ca = [1, 5, 10, 25, 100, 500, 1000, 2000, 10000];
  const cidDisplay = document.getElementById("change-in-drawer");
  const cash = document.getElementById("cash");
  const output = document.getElementById("change-due");
  const registerScreen = document.getElementById("register-screen");
  cid.forEach((el) => el[1] = numberCleanup(el[1]));
  price = numberCleanup(price);

  for(let i=0; i<3; i++) {
    displayBtns[i].style.left = `min(${10*i + 5}vw, ${70 + i*120}px)`;
    displayBtns[i].style.top = `calc((min(4vw, 40px) / -2) * (${2*i + 1}))`;
  }

  cashInit(cash, registerScreen);
  purchaseInit(purchaseBtn, output, registerScreen, cid, price, ca, cidDisplay);
}
init();
/*
registerBtns.forEach((el) => {
  el.style.gridArea = `button${counter}`;
  if(counter < 12) {
    el.addEventListener("click", () => {
      toggle[1] = true;
      if(toggle.every(el => el)) {
        toggle[0] = false;
        registerScreen.textContent = "";
        cash.value = "";
      }
      if(el.textContent == "." && !registerScreen.textContent.includes(".") && !pointString.includes(".")) {
        pointToggle = true;
      }
        pointToggle ? pointString += el.textContent : inputValidation(registerScreen.textContent + el.textContent, output);
      if(pointString.length == 3) {
        inputValidation(registerScreen.textContent + pointStringm, output, registerScreen);
        pointToggle = false;
        pointString = ""; 
      }
    })
  } else if (counter == 12) {
    el.addEventListener("click", () => {
      output.textContent = "";
      registerScreen.textContent = "";
      cash.value = "";
    })
  }
  counter++;
})
btnParent.style.display = "none";
registerToggle.addEventListener("click", () => {
  if(btnParent.style.display == "none") {  
    btnParent.style.display = "grid";
    registerToggle.textContent = "Hide Register Buttons";
  }  
  else {
    btnParent.style.display = "none";
    registerToggle.textContent = "Open Register Buttons";
  }
})
*/
4

Did you solve the problem? What was it if you did.

6

Please use your own topic. Thanks

1 Like