Build a Cash Register Project - Build a Cash Register

JavaScript
1

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

2

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

3

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