The code which works perfectly in VS Code is not working when copied and pasted to freeCodeCamp to test. I have also changed the name of linked stylesheet to ‘styles.css’ and the javascript code to ‘script.js’ which was different in VS Code.
I also uploaded the same code to Codepen and it works perfectly there too.
Do you want to show us the code?
I have converted dollars into cents to escape from the decimal calculation errors in javascript
Look at the error on the left side where price is 19.5, then the code and then the output
// JS Code
let price = 19.5;
let cid = [
['PENNY', 0.01],
['NICKEL', 0],
['DIME', 0],
['QUARTER', 0],
['ONE', 0],
['FIVE', 0],
['TEN', 0],
['TWENTY', 0],
['ONE HUNDRED', 0]
];
let cidCopy = [];
for (let i = 0; i < cid.length; i++) {
cidCopy.push(cid[i][1] * 100);
}
let amount = [];
let currency = [1, 5, 10, 25, 100, 500, 1000, 2000, 10000];
const priceDisplay = document.getElementById("inner-top-rect");
priceDisplay.textContent = `Total: $${price}`;
const amountOfMoney = document.getElementsByClassName("amount");
const changeDue = document.getElementById("change-due");
const purchase = document.getElementById("purchase-btn");
const updateAmount = () => {
amount = [];
for (let i = 0; i < cidCopy.length; i++) {
amount.push(Math.ceil(cidCopy[i] / currency[i]));
}
}
updateAmount();
const findSum = (arr) => {
let sum = 0;
arr.forEach(el => {
sum += el;
})
return sum;
}
const updateSpan = () => {
let i = 0;
Array.from(amountOfMoney).forEach(span => {
span.textContent = (cidCopy[i] / 100);
i++;
})
}
updateSpan();
const fetch = () => document.getElementById("cash").value
const calculateChange = () => {
changeDue.innerHTML = "";
changeDue.textContent = "";
if (fetch() === "") {
return;
}
let input = ((Number(fetch()) * 100) - (price * 100));
if (input < 0) {
alert("Customer does not have enough money to purchase the item");
return;
}
else if (input === 0) {
changeDue.textContent = "No change due - customer paid with exact cash";
return;
}
else if (input === findSum(cidCopy)) {
changeDue.innerHTML += "<p>Status: CLOSED</p>";
cid.forEach(arr => {
let i = 0;
if (arr[1] !== 0) {
changeDue.innerHTML += `<p>${arr[0]}: $${arr[1]}`;
}
arr[1] = 0;
cidCopy[i] = 0;
i++;
})
updateSpan();
return;
}
else if (input > findSum(cidCopy)) {
changeDue.textContent = "Status: INSUFFICIENT_FUNDS";
return;
}
else {
for (let i = cidCopy.length - 1; i >= 0; i--) {
if (input === 0) {
break;
}
let number = Math.floor(input / currency[i]);
if (number > 0) {
if (number >= (amount[i])) {
input -= cidCopy[i];
if(cid[i][1] !== 0) {
changeDue.innerHTML += `<p>${cid[i][0]}: $${cid[i][1]}`;
}
cid[i][1] = 0;
cidCopy[i] = 0;
}
else {
input -= number * currency[i];
cid[i][1] -= (number * currency[i]) / 100;
cidCopy[i] -= number * currency[i];
if(number * currency[i] !== 0) {
changeDue.innerHTML += `<p>${cid[i][0]}: $${(number * currency[i]) / 100}`;
}
}
}
}
if (input > 0) {
changeDue.textContent = "Status: INSUFFICIENT_FUNDS";
return;
}
changeDue.insertAdjacentHTML('afterbegin', "<p>Status: OPEN</p>");
updateAmount();
updateSpan();
}
}
purchase.addEventListener("click", calculateChange);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cash Register</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
*{
font-family: 'Montserrat Alternates', sans-serif;
}
</style>
</head>
<body>
<main>
<h1>Cash Register Project</h1>
<div id="change-due"></div>
<label for="cash">Enter cash from customer:</label>
<input type="number" id="cash">
<button id="purchase-btn">Purchase</button>
<div id="top-rect" class="blue">
<div id="inner-top-rect" class="black"></div>
</div>
<div id="connect" class="blue"></div>
<div id="big-box" class="blue">
<div id="button-box" class="blue">
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
</div>
<div id="change-box">
<h4>Change in drawer:</h4>
<p>Pennies: $<span class="amount"></span></p>
<p>Nickels: $<span class="amount"></span></p>
<p>Dimes: $<span class="amount"></span></p>
<p>Quarters: $<span class="amount"></span></p>
<p>Ones: $<span class="amount"></span></p>
<p>Fives: $<span class="amount"></span></p>
<p>Tens: $<span class="amount"></span></p>
<p>Twenties: $<span class="amount"></span></p>
<p>Hundreds: $<span class="amount"></span></p>
</div>
</div>
<div id="bottom" class="blue">
<div id="circle" class="black"></div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
Try moving this line of code into a function that is triggered when we click the purchase button.
The tests only load the code once so if this function call stays in the global scope it will only run once and after that never run again for any other tests.
Also this line of code should also move to a function that is triggered when we purchase.
If I am moving it inside a function, the code stops working.
please post all the code, html, css and js and I’ll help you debug.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cash Register</title>
<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
@import url('https://fonts.googleapis.com/css2?family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap');
*{
font-family: 'Montserrat Alternates', sans-serif;
}
</style>
</head>
<body>
<main>
<h1>Cash Register Project</h1>
<div id="change-due"></div>
<label for="cash">Enter cash from customer:</label>
<input type="number" id="cash">
<button id="purchase-btn">Purchase</button>
<div id="top-rect" class="blue">
<div id="inner-top-rect" class="black"></div>
</div>
<div id="connect" class="blue"></div>
<div id="big-box" class="blue">
<div id="button-box" class="blue">
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
<div class="elements"></div>
</div>
<div id="change-box">
<h4>Change in drawer:</h4>
<p>Pennies: $<span class="amount"></span></p>
<p>Nickels: $<span class="amount"></span></p>
<p>Dimes: $<span class="amount"></span></p>
<p>Quarters: $<span class="amount"></span></p>
<p>Ones: $<span class="amount"></span></p>
<p>Fives: $<span class="amount"></span></p>
<p>Tens: $<span class="amount"></span></p>
<p>Twenties: $<span class="amount"></span></p>
<p>Hundreds: $<span class="amount"></span></p>
</div>
</div>
<div id="bottom" class="blue">
<div id="circle" class="black"></div>
</div>
</main>
<script src="script.js"></script>
</body>
</html>
* {
box-sizing: border-box;
margin: 0;
}
body {
background-color: #0a0a23;
color: white;
text-align: center;
padding-top: 24px;
}
label, input, button {
display: block;
margin: 10px auto;
}
main {
width: 400px;
margin: auto;
}
#change-due {
margin-top: 18px;
margin-bottom: 18px;
line-height: 20px;
}
#cash {
height: 26px;
width: 60%;
padding-left: 10px;
font-weight: 600;
}
#cash:focus {
outline-color: #0a0a23;
}
#purchase-btn {
font-size: large;
font-weight: bolder;
border-width: 3px;
border-style: solid;
border-color: #feac32 #aa7321 #aa7321 #feac32;
background: linear-gradient(#fecc4c, #feac33);
}
#purchase-btn:active {
border-color: #aa7321 #feac32 #feac32 #aa7321;
background: linear-gradient(#feac33, #fecc4c);
}
div {
border: none;
}
#big-box {
width: 325px;
min-height: 275px;
margin: auto;
border-top-left-radius: 36px;
border-top-right-radius: 36px;
display: flex;
}
#connect {
width: 40px;
height: 40px;
margin-left: 120px;
}
.blue {
background-color: #99c9ff;
}
.black {
background-color: black;
}
#top-rect {
width: 200px;
height: 50px;
margin: auto;
padding: 10px;
margin-top: 36px;
}
#inner-top-rect {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#bottom {
width: 325px;
height: 50px;
margin: auto;
margin-top: 12px;
display: flex;
justify-content: center;
align-items: center;
}
#circle {
width: 20px;
height: 20px;
border-radius: 50%;
}
#button-box {
width: 72px;
height: 72px;
margin: 24px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
gap: 3px;
}
#change-box {
width: 55%;
margin-top: 22px;
height: 225px;
color: black;
background-color: white;
padding: 6px;
}
#change-box p {
font-weight: 500;
}
.elements {
background-color: black;
}
let price = 20;
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 cidCopy = [];
for(let i = 0; i < cid.length; i++) {
cidCopy.push(cid[i][1] * 100);
}
let amount = [];
let currency = [0.01, 0.05, 0.1, 0.25, 1, 5, 10, 20, 100];
const priceDisplay = document.getElementById("inner-top-rect");
priceDisplay.textContent = `Total: $${price}`;
const amountOfMoney = document.getElementsByClassName("amount");
const changeDue = document.getElementById("change-due");
const purchase = document.getElementById("purchase-btn");
const updateAmount = () => {
amount = [];
for (let i = 0; i < cid.length; i++) {
amount.push(Math.ceil(cid[i][1] / currency[i]));
}
}
updateAmount();
const findSum = (arr) => {
let sum = 0;
arr.forEach(el => {
sum += el[1];
})
return sum;
}
const updateSpan = () => {
let i = 0;
Array.from(amountOfMoney).forEach(span => {
span.textContent = cid[i][1].toFixed(2);
i++;
})
}
updateSpan();
const fetch = () => document.getElementById("cash").value
const calculateChange = () => {
changeDue.innerHTML = "";
changeDue.textContent = "";
if (fetch() === "") {
return;
}
let input = Number(fetch()) - price;
if (input < 0) {
alert("Customer does not have enough money to purchase the item");
return;
}
else if (input === 0) {
changeDue.textContent = "No change due - customer paid with exact cash";
return;
}
else if (input === findSum(cid)) {
changeDue.innerHTML += "<p>Status: CLOSED</p>";
cid.forEach(arr => {
changeDue.innerHTML += `<p>${arr[0]}: $${arr[1]}`;
arr[1] = 0;
})
updateSpan();
return;
}
else if (input > findSum(cid)) {
changeDue.textContent = "Status: INSUFFICIENT_FUNDS";
return;
}
else {
for(let i = cid.length - 1; i >= 0; i--) {
if(input === 0) {
break;
}
let number = Math.floor(input / currency[i]);
if(number > 0) {
if(number >= (amount[i])) {
input -= cid[i][1];
changeDue.innerHTML += `<p>${cid[i][0]}: $${cid[i][1]}`;
cid[i][1] = 0;
}
else {
input -= number * currency[i];
cid[i][1] -= number * currency[i];
changeDue.innerHTML += `<p>${cid[i][0]}: $${number * currency[i]}`;
}
}
}
changeDue.insertAdjacentHTML('afterbegin', "<p>Status: OPEN</p>");
updateAmount();
updateSpan();
}
}
purchase.addEventListener("click", calculateChange);
i see the code is still in the global scope though.
Can you show me the code without these lines:
in the global scope?
(the one where these lines will run only when I click purchase)
Thank you @hbar1st . Putting this inside the function worked. It wasn’t working earlier because some other code also needed to be put inside the function along with this code. Can you please tell me why wasn’t it working while in the global scope?
Code in the global scope only runs once when the page is first loaded or refreshed. The test cases run one after another without reloading your code.