Build a Cash Register Project - Build a Cash Register

JavaScript
1

Tell us what’s happening:

My code works just fine as far as I can see but some of the tests fail even though the code does the job. When I’ve checked the cases in the Example Solution, the solution is actually wrong (giving nickels without float fixed to 2) so I can’t actually decide if my code is wrong or the system is. I don’t know what I should be doing in the situation and a help would be really appreciated :slight_smile:

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="./styles.css">
    <title>Cash Register Project</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <main>
      <canvas id="canv"
            width="600"
            height="250">
      </canvas>
      <div class="container">
        <div id="change-due" class="change-due">
        </div>
        <label for="user-input">Enter cash from customer:</label>
          <input
            type="number"
            id="cash"
            placeholder="Cash from Customer"
            required
          />
        <div>
            <button type="button" id="purchase-btn">
              Purchase
            </button>
        </div>

        <div id="register-content" class="cash-register-content">
          <div class="price-text">
            <h1>Total: $3.26</h1>
          </div>
          <div class="register-connector">
          </div>
          <div class="register-area">
            <div class="keys">
              <div class="square"></div>
              <div class="square"></div>
              <div class="square"></div>

              <div class="square1"></div>
              <div class="square1"></div>
              <div class="square1"></div>

              <div class="square2"></div>
              <div class="square2"></div>
              <div class="square2"></div>
            </div>
            <div class="register-text">
              <h2 id="change-title">Change in drawer:</h2>
              <p id="pennies">Pennies: $0.97</p>
              <p id="nickels">Nickels: $0.97</p>
              <p id="dimes">Dimes: $0.97</p>
              <p id="quarters">Quarters: $3.75</p>
              <p id="ones">Ones: $0.97</p>
              <p id="fives">Fives: $0.97</p>
              <p id="tens">Tens: $0.97</p>
              <p id="twenties">Twenties: $0.97</p>
              <p id="hundreds">Hundreds: $0.97</p>
            </div>
            <div class="register-bottom">
            </div>
          </div>
        </div>
        
      </div>
    </main>
    <script src="./script.js"></script>
  </body>
</html>

/* file: script.js */
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]
];
let dark_yellow = "#feac32";

/* Rotating the "Cash Register" string*/
window.onload = function () {
  let canvas = document
                .getElementById("canv");
  let context = canvas
                .getContext("2d");
  context.font = "50px Helvetica";
  context.fillStyle = dark_yellow;
  context.textAlign = "center";

  let string = "Cash Register ";

  let angle = Math.PI * 0.5; // in radians
  let radius = 285;

  context.translate(300, 440);
  context.rotate(-1 * angle / 2);

  for (let i = 0; i < string.length; i++) {
    context.rotate(angle / string.length);
    context.save();
    context.translate(0, -1 * radius);
    context.fillText(string[i], 0, 0);
    context.restore();
  }
};

const changeDue = document.getElementById("change-due");
const userInput = document.getElementById("cash");
const purchaseButton = document.getElementById("purchase-btn");

const pennies = document.getElementById("pennies");
const nickels = document.getElementById("nickels");
const dimes = document.getElementById("dimes");
const quarters = document.getElementById("quarters");
const ones = document.getElementById("ones");
const fives = document.getElementById("fives");
const tens = document.getElementById("tens");
const twenties = document.getElementById("twenties");
const hundreds = document.getElementById("hundreds");

let total, purchase, remaining;
let penny_n, nickel_n, dime_n, quarter_n, one_n, five_n, ten_n, twenty_n, hundred_n;

pennies.innerHTML = '<p id="pennies">Pennies: ' + cid[0][1] + '</p>';
nickels.innerHTML = '<p id="nickels">Nickels: ' + cid[1][1] + '</p>';
dimes.innerHTML = '<p id="dimes">Dimes: ' + cid[2][1] + '</p>';
quarters.innerHTML = '<p id="quarters">Quarters: ' + cid[3][1] + '</p>';
ones.innerHTML = '<p id="ones">Ones: ' + cid[4][1] + '</p>';
fives.innerHTML = '<p id="fives">Fives: ' + cid[5][1] + '</p>';
tens.innerHTML = '<p id="tens">Tens: ' + cid[6][1] + '</p>';
twenties.innerHTML = '<p id="twenties">Twenties: ' + cid[7][1] + '</p>';
hundreds.innerHTML = '<p id="hundreds">Hundreds: ' + cid[8][1] + '</p>';

purchaseButton.addEventListener("click", () => {
  total = parseFloat(cid[8][1] + cid[7][1] + cid[6][1] + cid[5][1] + cid[4][1] + cid[3][1] + cid[2][1] + cid[1][1] + cid[0][1]).toFixed(2);
  purchase = userInput.value;
  if (purchase == price) {
    changeDue.innerHTML = '<change-due>No change due - customer paid with exact cash</change-due>';
    return;
  } else if (purchase === "") {
    changeDue.innerHTML = '';
    return;
  } else if  (purchase < price) {
    alert("Customer does not have enough money to purchase the item");
  } if ( purchase > total + price ) {
    changeDue.innerHTML = '<change-due>Status: INSUFFICIENT_FUNDS</change-due>';
  } else {
    remaining = parseFloat(purchase - price).toFixed(2);
    if ( total > remaining ) {
      changeDue.innerHTML = '<change-due>Status: OPEN</change-due>';
      total = parseFloat(total - remaining).toFixed(2); 
    } else {
      total = 0;
      changeDue.innerHTML = '<change-due>Status: CLOSED</change-due>';
    }
    if ( remaining >= 100 ) {
      hundred_n = parseInt(remaining / 100) * 100;
      if (cid[8][1] >= hundred_n) {
        remaining = parseFloat(remaining - hundred_n).toFixed(2);
        cid[8][1] = parseFloat(cid[8][1] - hundred_n).toFixed(2);
        changeDue.innerHTML += '<br><change-due>ONE HUNDRED: $' + hundred_n + '</change-due>';
        hundreds.innerHTML = '<p id="hundreds">Hundreds: ' + cid[8][1] + '</p>';
      } else if (cid[8][1] > 0) {
        remaining = parseFloat(remaining - cid[8][1]).toFixed(2);
        changeDue.innerHTML += '<br><change-due>ONE HUNDRED: $' + cid[8][1] + '</change-due>';
        cid[8][1] = 0;
        hundreds.innerHTML = '<p id="hundreds">Hundreds: ' + cid[8][1] + '</p>';
      }
    }
    if ( remaining >= 20 ) {
      twenty_n = parseInt(remaining / 20) * 20;
      if (cid[7][1] >= twenty_n) {
        remaining = parseFloat(remaining - twenty_n).toFixed(2);
        cid[7][1] = parseFloat(cid[7][1] - twenty_n).toFixed(2);
        changeDue.innerHTML += '<br><change-due>TWENTY: $' + twenty_n + '</change-due>';
        twenties.innerHTML = '<p id="twenties">Twenties: ' + cid[7][1] + '</p>';
      } else if (cid[7][1] > 0) {
        remaining = parseFloat(remaining - cid[7][1]).toFixed(2);
        changeDue.innerHTML += '<br><change-due>TWENTY: $' + cid[7][1] + '</change-due>';
        cid[7][1] = 0;
        twenties.innerHTML = '<p id="twenties">Twenties: ' + cid[7][1] + '</p>';
      }
    }
    if ( remaining >= 10 ) {
      ten_n = parseInt(remaining / 10) * 10;
      if (cid[6][1] >= ten_n) {
        remaining = parseFloat(remaining - ten_n).toFixed(2);
        cid[6][1] = parseFloat(cid[6][1] - ten_n).toFixed(2);
        changeDue.innerHTML += '<br><change-due>TEN: $' + ten_n + '</change-due>';
        tens.innerHTML = '<p id="tens">Tens: ' + cid[6][1] + '</p>';
      } else if (cid[6][1] > 0) {
        remaining = parseFloat(remaining - cid[6][1]).toFixed(2);
        changeDue.innerHTML += '<br><change-due>TEN: $' + cid[6][1] + '</change-due>';
        cid[6][1] = 0;
        tens.innerHTML = '<p id="tens">Tens: ' + cid[6][1] + '</p>';
      }
    }
    if ( remaining >= 5 ) {
      five_n = parseInt(remaining / 5) * 5;
      if (cid[5][1] >= ten_n) {
        remaining = parseFloat(remaining - five_n).toFixed(2);
        cid[5][1] = parseFloat(cid[5][1] - five_n).toFixed(2);
        changeDue.innerHTML += '<br><change-due>FIVE: $' + five_n + '</change-due>';
        fives.innerHTML = '<p id="fives">Fives: ' + cid[5][1] + '</p>';
      } else if (cid[5][1] > 0) {
        remaining = parseFloat(remaining - cid[5][1]).toFixed(2);
        changeDue.innerHTML += '<br><change-due>FIVE: $' + cid[5][1] + '</change-due>';
        cid[5][1] = 0;
        fives.innerHTML = '<p id="fives">Fives: ' + cid[5][1] + '</p>';
      }
    }
    if ( remaining >= 1 ) {
      one_n = parseInt(remaining);
      if (cid[4][1] >= one_n) {
        remaining = parseFloat(remaining - one_n).toFixed(2);
        cid[4][1] = parseFloat(cid[4][1] - one_n).toFixed(2);
        changeDue.innerHTML += '<br><change-due>ONE: $' + one_n + '</change-due>';
        ones.innerHTML = '<p id="ones">Ones: ' + cid[4][1] + '</p>';
      } else if (cid[4][1] > 0) {
        remaining = parseFloat(remaining - cid[4][1]).toFixed(2);
        changeDue.innerHTML += '<br><change-due>ONE: $' + cid[4][1] + '</change-due>';
        cid[4][1] = 0;
        ones.innerHTML = '<p id="ones">Ones: ' + cid[4][1] + '</p>';
      }
    }
    if ( remaining >= 0.25 ) {
      quarter_n = parseInt(remaining / 0.25) * 0.25;
      if (cid[3][1] >= quarter_n) {
        remaining = parseFloat(remaining - quarter_n).toFixed(2);
        cid[3][1] = parseFloat(cid[3][1] - quarter_n).toFixed(2);
        changeDue.innerHTML += '<br><change-due>QUARTER: $' + quarter_n + '</change-due>';
        quarters.innerHTML = '<p id="quarters">Quarters: ' + cid[3][1] + '</p>';
      } else if (cid[3][1] > 0) {
        remaining = parseFloat(remaining - cid[3][1]).toFixed(2);
        changeDue.innerHTML += '<br><change-due>QUARTER: $' + cid[3][1] + '</change-due>';
        cid[3][1] = 0;
        quarters.innerHTML = '<p id="quarters">Quarters: ' + cid[3][1] + '</p>';
      }
    }
    if ( remaining >= 0.1 ) {
      dime_n = parseInt(remaining / 0.1) * 0.1;
      if (cid[2][1] >= dime_n) {
        remaining = parseFloat(remaining - dime_n).toFixed(2);
        cid[2][1] = parseFloat(cid[2][1] - dime_n).toFixed(2);
        changeDue.innerHTML += '<br><change-due>DIME: $' + dime_n + '</change-due>';
        dimes.innerHTML = '<p id="dimes">Dimes: ' + cid[2][1] + '</p>';
      } else if (cid[2][1] > 0) {
        remaining = parseFloat(remaining - cid[2][1]).toFixed(2);
        changeDue.innerHTML += '<br><change-due>DIME: $' + cid[2][1] + '</change-due>';
        cid[2][1] = 0;
        dimes.innerHTML = '<p id="dimes">Dimes: ' + cid[2][1] + '</p>';
      }
    }
    if ( remaining >= 0.05 ) {
      nickel_n = parseInt(remaining / 0.05) * 0.05;
      if (cid[1][1] >= nickel_n) {
        remaining = parseFloat(remaining - nickel_n).toFixed(2);
        cid[1][1] = parseFloat(cid[1][1] - nickel_n).toFixed(2);
        changeDue.innerHTML += '<br><change-due>NICKEL: $' + nickel_n + '</change-due>';
        nickels.innerHTML = '<p id="nickels">Nickels: ' + cid[1][1] + '</p>';
      } else if (cid[1][1] > 0) {
        remaining = parseFloat(remaining - cid[1][1]).toFixed(2);
        changeDue.innerHTML += '<br><change-due>NICKEL: $' + cid[1][1] + '</change-due>';
        cid[1][1] = 0;
        nickels.innerHTML = '<p id="nickels">Nickels: ' + cid[1][1] + '</p>';
      }
    }
    if ( remaining >= 0.01 ) {
      penny_n = parseInt(remaining / 0.01) * 0.01;
      if (cid[0][1] >= penny_n) {
        remaining = parseFloat(remaining - penny_n).toFixed(2);
        cid[0][1] = parseFloat(cid[0][1] - penny_n).toFixed(2);
        changeDue.innerHTML += '<br><change-due>PENNY: $' + penny_n + '</change-due>';
        pennies.innerHTML = '<p id="pennies">Pennies: ' + cid[0][1] + '</p>';
      } else if (cid[0][1] > 0) {
        changeDue.innerHTML = '<change-due>Status: INSUFFICIENT_FUNDS</change-due>';
      }
    }
  }
});

/* file: styles.css */
:root {
  --light-grey: #2b2b40;
  --soft-white: #d0d0d0;

  --dark-blue: #0a0a23;
  --fcc-blue: #1b1b32;
  --light-yellow: #fecc4c;
  --dark-yellow: #feac32;
  --light-pink: #ffadad;
  --dark-red: #850000;
  --light-green: #acd157;
  --light-blue: #aaccfa;
}

body {
  font-family: "Lato", Helvetica, Arial, sans-serif;
  font-size: 25px;
  background-color: var(--light-grey);
  color: var(--soft-white);
  text-align: center;
}

main {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -65%);
}

.change-due {
  font-size: 15px;
  color: var(--soft-white);
  display: inline-block;
}

label {
  display: block;
  font-size: 25px;
}

input {
  margin: 5px 5px;
  font-size: 20px;
}

button {
  cursor: pointer;
  color: #0a0a23;
  background-color: #feac32;
  background-image: linear-gradient(#fecc4c, #ffac33);
  border: 3px solid #feac32;
  border-radius: 12px;
  margin-top: 10px;
  margin-left: 5px;
  margin-right: 5px;
  width: 20%;
  padding: 7px;
  transition-duration: 0.2s;
}
button:hover {
  color: #850000;
  background-image: linear-gradient(#ffac33, #fecc4c);
  border: 3px solid #feac32;
}

.price-text {
  position: relative;
  top: 10px;
  width: 27%;
  height: 30px;
  margin: auto;
  text-align: center;
  font-size: 9px;
  line-height: 12px;
  background-color: var(--dark-blue);
  border: 10px solid var(--light-blue);
}
.register-connector {
  position: relative;
  top: 10px;
  height: 50px;
  width: 45px;
  left: 220px;
  border: none;
  background-color: var(--light-blue);
}
.register-area {
  position: relative;
  height: 250px;
  width: 35%;
  margin: auto;
  border: 1px solid black;
  border-radius: 25px 25px 0px 0px;
  background-color: var(--light-blue);
}

.square {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: var(--dark-blue);
  border-radius: 3px;
  margin: 10px -3px 0px 0px;
  position: relative;
  top: 5px;
  left: -15px;
}

.square1 {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: var(--dark-blue);
  border-radius: 3px;
  margin: 10px -3px 0px 0px;
  position: relative;
  top: 25px;
  left: -70px;
}

.square2 {
  width: 15px;
  height: 15px;
  display: inline-block;
  background: var(--dark-blue);
  border-radius: 3px;
  margin: 10px -3px 0px 0px;
  position: relative;
  top: 45px;
  left: -125px;
}

.register-text {
  position: relative;
  top: -27px;
  width: 60%;
  height: 91%;
  margin: 5px 75px;
  text-align: center;
  font-size: 7px;
  background-color: var(--soft-white);
}

h2 {
  color: var(--dark-blue);
  font-weight: 900;
  font-size: 15px;
  line-height: 25px;
}

p {
  color: var(--dark-blue);
  font-weight: 800;
  font-size: 13px;
  line-height: 5px;
}

.register-bottom {
  width: 210px;
  height: 43px;
  border: 1px solid black;
  display: inline-block;
  background:radial-gradient(circle at center,var(--dark-blue) 7px,var(--light-blue) 9px);
  margin: -15px -10px;
}

Challenge Information:

Build a Cash Register Project - Build a Cash Register

2

i see you have some global variables that are defined and that your solution may rely on to give the answer.
The problem with global variables like these is that they retain whatever the last value that you gave them the last time the testcase ran. So though that may not matter for purchase since your code resets it when someone clicks the purchase button, it may affect the results depending on what you’re doing with total and remaining.
So try to move these variables inside the callback function that runs when purchase is clicked and see if anything improves after that.

ps. I haven’t seen how the example solution you mentioned works but maybe the reason they are using cents instead of dollars in their calculations which would mean that you never need to fix any floats. (you’d just convert everything to cents in your code, do whatever additions/subtractions/etc are needed, then convert back to dollars before displaying the change due)

3

Nah, the problem was solved when I’ve put parseFloat(cid[1]).toFixed(2) to every single part of the code + I’ve seen some other unrelated problems :slight_smile:
If there is a better option then adding parseFloat I would like to hear (without parseFloat my cid[1]+cid[y][1] taken as concatenation rather than summation)

4

glad you found a fix.
The only other option I know is the one I mentioned (use cents instead of dollars in your internal calculations and comparisons)