Please help me…
I enter the test case values and the output results looks fine, but for some reason the test of No.12, 13, 18, and 19 does not pass.
What is wrong with my code?
I can’t figure it out, no matter how many times I look back at it.
<!DOCTYYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
<title>Cash Register</title>
</head>
<body>
<main>
<img class="freecodecamp-logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" width="265">
<h1>Cash Register Project</h1>
<div id="change-due">
<p id="change-status"></p>
<p id="change-hundred"></p>
<p id="change-twenty"></p>
<p id="change-ten"></p>
<p id="change-five"></p>
<p id="change-one"></p>
<p id="change-quarter"></p>
<p id="change-dime"></p>
<p id="change-nickel"></p>
<p id="change-penny"></p>
</div>
<div id="input-div">
<label for="cash">Enter cash from customer:</label>
<input id="cash" type="number">
<button id="purchase-btn">Purchase</button>
</div>
<div id="drawer-top">
<p id="price"></p>
</div>
<div id="drawer-middle">
<div class="drawer-middle-pattern">
<span id="pattern1"><span>
<span id="pattern2"><span>
<span id="pattern3"><span>
<span id="pattern4"><span>
<span id="pattern5"><span>
<span id="pattern6"><span>
<span id="pattern7"><span>
<span id="pattern8"><span>
<span id="pattern9"><span>
</div>
<div class="drawer-middle-display">
<p id="drawer-title">Change in drawer:</p>
<span>
<p id="drawer-pennies"></p>
<p id="drawer-nickels"></p>
<p id="drawer-dimes"></p>
<p id="drawer-quarters"></p>
<p id="drawer-ones"></p>
<p id="drawer-fives"></p>
<p id="drawer-tens"></p>
<p id="drawer-twenties"></p>
<p id="drawer-hundreds"></p>
</span>
</div>
</div>
<div id="drawer-bottom">
<span id="drawer-bottom-pattern"></span>
</div>
</main>
</body>
<script src="script.js"></script>
</html>
let price = 19.5;
let cid = [
['PENNY', 0.05],
['NICKEL', 0],
['DIME', 0],
['QUARTER', 0],
['ONE', 0],
['FIVE', 0],
['TEN', 0],
['TWENTY', 0],
['ONE HUNDRED', 100]
];
let purchaseBtnCount = 0;
let cashStock;
let result;
// get HTMl elements
const changeStatus = document.getElementById('change-status');
const changeHundred = document.getElementById('change-hundred');
const changeTwenty = document.getElementById('change-twenty');
const changeTen = document.getElementById('change-ten');
const changeFive = document.getElementById('change-five');
const changeOne = document.getElementById('change-one');
const changeQuarter = document.getElementById('change-quarter');
const changeDime = document.getElementById('change-dime');
const changeNickel = document.getElementById('change-nickel');
const changePenny = document.getElementById('change-penny');
const cash = document.getElementById('cash');
const purchaseBtn = document.getElementById('purchase-btn');
const priceElement = document.getElementById('price');
const drawerPennies = document.getElementById('drawer-pennies');
const drawerNickels = document.getElementById('drawer-nickels');
const drawerDimes = document.getElementById('drawer-dimes');
const drawerQuarters = document.getElementById('drawer-quarters');
const drawerOnes = document.getElementById('drawer-ones');
const drawerFives = document.getElementById('drawer-fives');
const drawerTens = document.getElementById('drawer-tens');
const drawerTwenties = document.getElementById('drawer-twenties');
const drawerHundreds = document.getElementById('drawer-hundreds');
// Display price
priceElement.innerHTML = `<p>Price: $${price}</p>`;
// Display drawer
const penny = cid.find(coin => coin[0] === 'PENNY');
drawerPennies.innerHTML = `<p>Pennies: $${penny[1]}</p>`;
const nickel = cid.find(coin => coin[0] === 'NICKEL');
drawerNickels.innerHTML = `<p>Nickels: $${nickel[1]}</p>`;
const dime = cid.find(coin => coin[0] === 'QUARTER');
drawerDimes.innerHTML = `<p>Dimes: $${dime[1]}</p>`;
const quarter = cid.find(coin => coin[0] === 'QUARTER');
drawerQuarters.innerHTML = `<p>Quarters: $${quarter[1]}</p>`;
const one = cid.find(coin => coin[0] === 'ONE');
drawerOnes.innerHTML = `<p>Ones: $${one[1]}</p>`;
const five = cid.find(coin => coin[0] === 'FIVE');
drawerFives.innerHTML = `<p>Fives: $${five[1]}</p>`;
const ten = cid.find(coin => coin[0] === 'TEN');
drawerTens.innerHTML = `<p>Tens: $${ten[1]}</p>`;
const tenty = cid.find(coin => coin[0] === 'TWENTY');
drawerTwenties.innerHTML = `<p>Twenties: $${tenty[1]}</p>`;
const hundred = cid.find(coin => coin[0] === 'ONE HUNDRED');
drawerHundreds.innerHTML = `<p>Hundreds: $${hundred[1]}</p>`;
// Reset #change-due
const resetChangeDue = () => {
changeHundred.innerHTML = '';
changeTwenty.innerHTML = '';
changeTen.innerHTML = '';
changeFive.innerHTML = '';
changeOne.innerHTML = '';
changeQuarter.innerHTML = '';
changeDime.innerHTML = '';
changeNickel.innerHTML = '';
changePenny.innerHTML = '';
};
// Check register cash's count
const checkRegister = (availableCid, difference) => {
const hundredIndex = availableCid.findIndex(coin => coin[0] === 'ONE HUNDRED');
const twentyIndex = availableCid.findIndex(coin => coin[0] === 'TWENTY');
const tenIndex = availableCid.findIndex(coin => coin[0] === 'TEN');
const fiveIndex = availableCid.findIndex(coin => coin[0] === 'FIVE');
const oneIndex = availableCid.findIndex(coin => coin[0] === 'ONE');
const quarterIndex = availableCid.findIndex(coin => coin[0] === 'QUARTER');
const dimeIndex = availableCid.findIndex(coin => coin[0] === 'DIME');
const nickelIndex = availableCid.findIndex(coin => coin[0] === 'NICKEL');
const pennyIndex = availableCid.findIndex(coin => coin[0] === 'PENNY');
// Now you can access the coin name using index 0
const hundred = availableCid[hundredIndex][1];
const twenty = availableCid[twentyIndex][1];
const ten = availableCid[tenIndex][1];
const five = availableCid[fiveIndex][1];
const one = availableCid[oneIndex][1];
const quarter = availableCid[quarterIndex][1];
const dime = availableCid[dimeIndex][1];
const nickel = availableCid[nickelIndex][1];
const penny = availableCid[pennyIndex][1];
return cashStock = {
hundred,
twenty,
ten,
five,
one,
quarter,
dime,
nickel,
penny
};
};
// Check coin pattern
const checkCoinPattern = (availableCid, difference) => {
availableCid = cid.slice();
cashStock = checkRegister(availableCid, difference);
let numHundred = 0;
let numTwenty = 0;
let numTen = 0;
let numFive = 0;
let numOne = 0;
let numQuarter = 0;
let numDime = 0;
let numNickel = 0;
let numPenny = 0;
let leftHundred = 0;
let leftTwenty = 0;
let leftTen = 0;
let leftFive = 0;
let leftOne = 0;
let leftQuarter = 0;
let leftDime = 0;
let leftNickel = 0;
let leftPenny = 0;
let changeFlg = false;
// Calc cash
if (difference >= 100 && cashStock.hundred !== 0) {
if (difference <= cashStock.hundred) {
numHundred = Math.floor(difference / 100) * 100;
} else {
numHundred = cashStock.hundred;
}
difference = (difference - numHundred).toFixed(2);
leftHundred = cashStock.hundred - numHundred;
}
if (difference >= 20 && cashStock.twenty !== 0) {
if (difference <= cashStock.twenty) {
numTwenty = Math.floor(difference / 20) * 20;
} else {
numTwenty = cashStock.twenty;
}
difference = (difference - numTwenty).toFixed(2);
leftTwenty = cashStock.twenty - numTwenty;
}
if (difference >= 10 && cashStock.ten !== 0) {
if (difference <= cashStock.ten) {
numTen = Math.floor(difference / 10) * 10;
} else {
numTen = cashStock.ten;
}
difference = (difference - numTen).toFixed(2);
leftTen = cashStock.ten - numTen;
}
if (difference >= 5 && cashStock.five !== 0) {
if (difference <= cashStock.five) {
numFive = Math.floor(difference / 5) * 5;
} else {
numFive = cashStock.five;
}
difference = (difference - numFive).toFixed(2);
leftFive = cashStock.five - numFive;
}
if (difference >= 1 && cashStock.one !== 0) {
if (difference <= cashStock.one) {
numOne = Math.floor(difference);
} else {
numTen = cashStock.one;
}
difference = (difference - numOne).toFixed(2);
leftOne = cashStock.one - numOne;
}
if (difference >= 0.25 && cashStock.quarter !== 0) {
if (difference <= cashStock.quarter) {
numQuarter = Math.floor(difference / 0.25) * 0.25;
} else {
numQuarter = cashStock.quarter;
}
difference = (difference - numQuarter).toFixed(2);
leftQuarter = cashStock.quarter - numQuarter;
}
if (difference >= 0.1 && cashStock.dime !== 0) {
if (difference <= cashStock.dime) {
numDime = Math.floor(difference / 0.1) * 0.1;
} else {
numDime = cashStock.dime;
}
difference = (difference - numDime).toFixed(2);
leftDime = cashStock.dime - numDime;
}
if (difference >= 0.05 && cashStock.nickel !== 0) {
if (difference <= cashStock.nickel) {
numNickel = Math.floor(difference / 0.05) * 0.05;
} else {
numNickel = cashStock.nickel;
}
difference = (difference - numNickel).toFixed(2);
leftNickel = cashStock.nickel - numNickel;
}
if (difference >= 0.01) {
if (difference <= cashStock.penny) {
numPenny = Math.floor(difference / 0.01) * 0.01;
} else {
numPenny = cashStock.penny;
}
difference = (difference - numPenny).toFixed(2);
leftPenny = cashStock.penny - numPenny;
}
if (difference >= 0.001) {
changeFlg = false;
} else {
changeFlg = true;
}
return result =
{
numHundred,
numTwenty,
numTen,
numFive,
numOne,
numQuarter,
numDime,
numNickel,
numPenny,
leftHundred,
leftTwenty,
leftTen,
leftFive,
leftOne,
leftQuarter,
leftDime,
leftNickel,
leftPenny,
changeFlg
};
};
purchaseBtn.addEventListener('click', () => {
resetChangeDue();
// Check inputted cash
// Not enough cash
if (parseFloat(cash.value) < price) {
alert('Customer does not have enough money to purchase the item');
}
// No cash
if (parseFloat(cash.value) === price) {
changeStatus.innerHTML = '<p>No change due - customer paid with exact cash</p>';
}
// Calcurate cash
let availableCid = [];
if (parseFloat(cash.value) > price) {
purchaseBtnCount++;
if (purchaseBtnCount === 1) {
availableCid = cid.slice();
// Get left register cash
} else {
availableCid = [
['PENNY', parseFloat(drawerPennies.innerText.slice(11))],
['NICKEL', parseFloat(drawerNickels.innerText.slice(10))],
['DIME', parseFloat(drawerDimes.innerText.slice(8))],
['QUARTER', parseFloat(drawerQuarters.innerText.slice(11))],
['ONE', parseFloat(drawerOnes.innerText.slice(7))],
['FIVE', parseFloat(drawerFives.innerText.slice(8))],
['TEN', parseFloat(drawerTens.innerText.slice(7))],
['TWENTY', parseFloat(drawerTwenties.innerText.slice(11))],
['ONE HUNDRED', parseFloat(drawerHundreds.innerText.slice(11))]
];
}
// Calcurate register total
let totalCid = parseFloat(availableCid.reduce((total, coin) => total + coin[1], 0).toFixed(2));
// Calcurate register total
let difference = Number(cash.value) - price;
// Check lack of change
if (difference > totalCid) {
changeStatus.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>';
}
result = checkCoinPattern(availableCid, difference);
// Check coin pattern
if (!result.changeFlg) {
// Enable to return change
changeStatus.innerHTML = '<p>Status: INSUFFICIENT_FUNDS</p>';
// Return changes
} else {
// Display #change-due
result.numHundred !== 0 ?
changeHundred.innerHTML = `<p>ONE HUNDRED: $${result.numHundred}</p>` : '';
result.numTwenty !== 0 ?
changeTwenty.innerHTML = `<p>TWENTY: $${result.numTwenty}</p>` : '';
result.numTen !== 0 ?
changeTen.innerHTML = `<p>TEN: $${result.numTen}</p>` : '';
result.numFive !== 0 ?
changeFive.innerHTML = `<p>FIVE: $${result.numFive}</p>` : '';
result.numOne !== 0 ?
changeOne.innerHTML = `<p>ONE: $${result.numOne}</p>` : '';
result.numQuarter !== 0 ?
changeQuarter.innerHTML = `<p>QUARTER: $${result.numQuarter}</p>` : '';
result.numDime !== 0 ?
changeDime.innerHTML = `<p>DIME: $${result.numDime}</p>` : '';
result.numNickel !== 0 ?
changeNickel.innerHTML = `<p>NICKEL: $${result.numNickel}</p>` : '';
result.numPenny !== 0 ?
changePenny.innerHTML = `<p>PENNY: $${result.numPenny}</p>` : '';
// Update drawer
drawerPennies.innerHTML = `<p>Pennies: $${result.leftPenny}</p>`;
drawerNickels.innerHTML = `<p>Nickels: $${result.leftNickel}</p>`;
drawerDimes.innerHTML = `<p>Dimes: $${result.leftDime}</p>`;
drawerQuarters.innerHTML = `<p>Quarters: $${result.leftQuarter}</p>`;
drawerOnes.innerHTML = `<p>Ones: $${result.leftOne}</p>`;
drawerFives.innerHTML = `<p>Fives: $${result.leftFive}</p>`;
drawerTens.innerHTML = `<p>Tens: $${result.leftTen}</p>`;
drawerTwenties.innerHTML = `<p>Twenties: $${result.leftTwenty}</p>`;
drawerHundreds.innerHTML = `<p>Hundreds: $${result.leftHundred}</p>`;
// Change Status
if (price < parseFloat(cash.value) && difference.toFixed(2) < totalCid) {
changeStatus.innerHTML = '<p>Status: OPEN</p>';
} else {
changeStatus.innerHTML = '<p>Status: CLOSED</p>';
}
}
}
});
