Build a Cash Register Project - Build a Cash Register

Tell us what’s happening:

If i manually change the cid and price to the prompt amounts, everything functions exactly as requested, with the returns that are requested, but no matter what i do it will not accept it. please if anyone can tell me what I’m doing wrong here?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Cash Register</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <link rel="stylesheet" href="./styles.css"/>
  </head>
  <body>
    <h1>Cash Register</h1>
    <div id="input-box">
      <input type="number" id="cash" class="user-inputs" value="" step="0.01"/>
      <button id="purchase-btn">Purchase</button>
    </div>
    <div id="register-div">
      <div id="register-screen">
        <div id="price-screen"></div>
        <div id="cash-screen"></div>
      </div>
      <div id="register">
        <div id="numpad">
          <button class="btn" id="btn-1" value="1">1</button>
          <button class="btn" id="btn-2" value="2">2</button>
          <button class="btn" id="btn-3" value="3">3</button>
          <button class="btn" id="btn-4" value="4">4</button>
          <button class="btn" id="btn-5" value="5">5</button>
          <button class="btn" id="btn-6" value="6">6</button>
          <button class="btn" id="btn-7" value="7">7</button>
          <button class="btn" id="btn-8" value="8">8</button>
          <button class="btn" id="btn-9" value="9">9</button>
          <button class="btn" id="zero-btn" value="0">0</button>
          <button class="btn" id="clr-btn" value="">C</button>
        </div>
        <div id="drawer-contents"></div>
        <div id="change-due">

    </div>
      </div>
      <div id="drawer">
        <div id="left-indent"></div>
        <div id="circle"></div>
        <div id="right-indent"></div>
      </div>
    </div>
  </body>
  <script src="./script.js"></script>
</html>
/* file: script.js */
let price = 1.87;
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 cash = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const priceScreen = document.getElementById('price-screen');
const cashScreen = document.getElementById('cash-screen');
const numBtns = document.querySelectorAll('.btn');
const clrBtn = document.querySelector('#clr-btn');
const changeDue = document.getElementById('change-due');
const drawerContents = document.getElementById('drawer-contents');

const format = (status, change) => {
  changeDue.innerHTML = `<p>Status: ${status}</p>`;
  changeDue.innerHTML += change
  .map(([currName, amount]) => `<p>${currName} $${amount}</p>`).join('');
};

/*const changeDueWindow = () => {
  changeDue.style.display = 'block';
  setTimeout(() => {
    changeDue.style.display = 'none'
  }, 5000)
}*/

const cashRegister = () => {
  const curr = [10000, 2000, 1000, 500, 100, 25, 10, 5, 1];
  const cashInCents = Math.round(Number(cash.value) * 100);
  const priceInCents = Math.round(price * 100);
  const reverseCid = [...cid].reverse().map(([currName, amount]) => [currName, Math.round(amount * 100)]);
  const totalCid = reverseCid.reduce((prev, [_, amount]) => prev + amount, 0);
  const results = {
    status: 'OPEN',
    change: []
  };
  let custChange = cashInCents - priceInCents;
  if (priceInCents > cashInCents) {
    alert('Customer does not have enough money to purchase the item');
    cash.value = "";
    return;
  };
  console.log(totalCid)
  console.log(custChange)
  if (priceInCents === cashInCents) {
    //changeDueWindow();
    changeDue.innerHTML = '<p>No change due - customer paid with exact cash</p>';
    cash.value = "";
    return;
  };

  if (totalCid < custChange) {
    //changeDueWindow();
    changeDue.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>';
    return;
  };
  if (totalCid === custChange) {
    //changeDueWindow();
    results.status = 'CLOSED'
  };

  for (let i = 0; i <= reverseCid.length; i++) {
    if (custChange >= curr[i] && custChange > 0) {
      const [currName, total] = reverseCid[i];
      const possible = Math.min(total, custChange);
      const count = Math.floor(possible / curr[i]);
      const changeBack = count * curr[i];
      custChange -= changeBack;

      if (count > 0) {
        results.change.push([currName, changeBack / 100])
      };
    };
  };


  if (custChange > 0) {
    //changeDueWindow();
    changeDue.innerHTML = `<p>Status: INSUFFICIENT_FUNDS</p>`;
    return;
  };
  format(results.status, results.change);
  update(results.change);
};


const checkResults = () => {
  if (!cash.value) {
    return
  }
  cashRegister()
};

const update = change => {
  const currNameMap = {
    PENNY: 'Pennies',
    NICKEL: 'Nickels',
    DIME: 'Dimes',
    QUARTER: 'Quarters',
    ONE: 'Ones',
    FIVE: 'Fives',
    TEN: 'Tens',
    TWENTY: 'Twenties',
    "ONE HUNDRED": 'Hundreds'
  };

  if (change) {
    change.forEach(([changeCurr, changeAmount]) => {
      const arr = cid.find(([currName]) => currName === changeCurr);
      arr[1] = (Math.round(arr[1] * 100) - Math.round(changeAmount * 100)) / 100;
    }
    )};
  cash.value = "";
  priceScreen.textContent = `Total: $${price}`;
  drawerContents.innerHTML = `<h5>Change in drawer:</h5>
    ${cid.map(([currName, amount]) => 
    `<p>${currNameMap[currName]}: $${amount}</p>`).join('')}`
};

numBtns.forEach(btn => {
  btn.addEventListener('click', (e) => {
    console.log(e.target.value);
    cash.value = cash.value + e.target.value;
  })
})

purchaseBtn.addEventListener('click', checkResults);
clrBtn.addEventListener('click', () => cash.value="");

cash.addEventListener('keydown', e => {
  if (e.key === 'Enter') {
    checkResults;
  }
})

update();
/* file: styles.css */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --main-color1:  #2e2536;
  --main-color2:  #cccccc;
  --accent-color1:  #131313;
  --accent-color1-1:  #292828;
  --accent-color2:  #b80000;
  --accent-color2-2:  #9f0000;
  --accent-color3: #b9b9b9;
  --accent-color3-2: #acacac;
  --type-color1: white;
  --type-color2: #33ff33;
}

body {
  background-color: var(--main-color1);
  color: var(--type-color1);
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

h1 {
  padding-top: 2rem;
}

#change-due {
  background-color: var(--accent-color1);
  height: calc((8rem * .3333) + 8rem);
  width: 6rem;
  position: absolute;
  z-index: 1;
  right: 2rem;
  top: 3rem;
  border: 3px solid var(--type-color2);
  font-size: 14px;
  //display: none;
  text-align: center;
  color: var(--type-color2)
}

#purchase-btn {
  background-color: var(--accent-color2);
  border: 3px solid var(--accent-color2-2);
  color: var(--type-color1);
  z-index: 1;
  position: absolute;
  bottom: 12rem;
  height: 2.5rem;
  left: calc(50% - 9rem);
  top: calc(50% + 5.5rem);
  width: 8rem;
}

.btn {
  background-color: var(--accent-color1-1);
  border: 3px solid var(--accent-color1);
  color: var(--type-color1);

}

#register {
  background-color: var(--main-color2);
  height: 18rem;
  width: 20rem;
  position: absolute;
  left: calc(50% - 10rem);
  top: calc(50% - 7rem);
}

#drawer {
  background-color: var(--accent-color3);
  height: 4rem;
  width: 20rem;
  border: 3px solid var(--main-color2);
  position: absolute;
  left: calc(50% - 10rem);
  top: calc(50% + 9rem);
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

#numpad {
  width: 8rem;
  height: 8rem;
  display: grid;
  grid-template-rows: 33.33% 33.33% 33.33%;
  grid-template-columns: 33.33% 33.33% 33.33%;
  position: absolute;
  left: calc(50% - 9rem);
  top: calc(50% - 7rem);
}

#zero-btn {
  position: absolute;
  height: 33%;
  width: 5.375rem;
  bottom: -32%;
}

#clr-btn {
  position: absolute;
  width: 33.33%;
  height: 33%;
  right: 0;
  bottom: -32%;
  background-color: var(--accent-color1-1);
  border: 3px solid var(--accent-color1);
  color: var(--type-color1);
}

#register-screen {
  height: 5rem;
  width: 10rem;
  position: absolute;
  background-color: var(--main-color2);
  left: calc(50% - 10rem);
  top: calc(50% - 12rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  border-bottom: 2px solid var(--accent-color3-2);
}

#price-screen {
  background-color: var(--accent-color1);
  height: 2rem;
  width: 9rem;
  text-align: right;
  font-size: 1.8rem;
}

#cash-screen {
  background-color: var(--accent-color1);
  height: 2rem;
  width: 9rem;
  text-align: right;
  font-size: 1.8rem;
}

#cash {
  height: 2rem;
  width: 9rem;
  position: absolute;
  left: calc(50% - 9.5rem);
  top: calc(50% - 9.4rem);
  z-index: 1;
  background-color: transparent;
  color: var(--type-color2);
  text-align: right;
  font-size: 1.8rem;
}

#drawer-contents {
  height: calc((8rem * .3333) + 10.5rem);
  width: 8rem;
  position: absolute;
  background-color: var(--accent-color1);
  right: 1rem;
  top: 2rem;
  color: var(--type-color2);
  border: 3px solid var(--type-color2); 
}

#drawer-contents p {
  font-size: 12px;
  text-align: center
}

h5 {
  padding: 2px;
  font-size: 14px;
  text-align: center;
}

#left-indent {
  height: 1rem;
  width: 6rem;
  border: 5px solid var(--accent-color3-2);
  border-radius: 10px;
}

#circle {
  height: 2rem;
  width: 2rem;
  border: 5px solid var(--accent-color3-2);
  border-radius: 100%;
  align-items: center;
}

#right-indent {
  height: 1rem;
  width: 6rem;
  border: 5px solid var(--accent-color3-2);
  border-radius: 10px
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type=number] {
  -moz-appearance: textfield;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:133.0) Gecko/20100101 Firefox/133.0

Challenge Information:

Build a Cash Register Project - Build a Cash Register

I would sort here in the order you want instead of hoping reverse is the right order

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.