0
How can i do this ? Advance thank you men.
A script that that would accept an integer an output the smallest bills and coins that would accept add up to the amount and generate . Output results using input boxes
4 Answers
0
JavaScript:
document.addEventListener('DOMContentLoaded', function() {
var changeUnits = [100, 50, 20, 10, 5, 2, 1, 0.25, 0.10, 0.05, 0.01];
var inputElement = document.getElementById('input');
function calculateChange(total)
{
var result = [];
changeUnits.forEach(function(unitSize) {
if (unitSize <= total) {
var numRepeats = Math.floor(total / unitSize);
result.push({
'count': numRepeats,
'unitSize': unitSize
});
total -= numRepeats * unitSize;
}
});
return result;
}
function updateChangeResults()
{
var val = inputElement.value;
if (isNaN(val))
return;
else {
var changeResults = calculateChange(parseFloat(val));
var resultInputs = document.querySelectorAll('#results input');
resultInputs.forEach(function(input) {
input.value = 0;
});
changeResults.forEach(function(changeResult) {
var id = getIdFromUnitSize(changeResult.unitSize);
var e = document.getElementById(id);
e.value = changeResult.count;
});
}
}
function getIdFromUnitSize(unitSize)
{
return ('r-' + unitSize).replace('.', '-');
}
function addResultElements()
{
var resultsElement = document.getElementById('results');
changeUnits.forEach(function(unitSize) {
var group = document.createElement('div');
var label = document.createElement('label');
var input = document.createElement('input');
var id = getIdFromUnitSize(unitSize);
input.setAttribute('id', id);
input.readOnly = true;
label.innerText = 'Size ' + (unitSize);
group.appendChild(label);
group.appendChild(input);
resultsElement.appendChild(group);
});
}
addResultElements();
inputElement.addEventListener('input', updateChangeResults);
});
+ 1
Your question is tagged with PHP but you can more simply fill those input elements using browser-based JavaScript. Calling on PHP would involve AJAX calls or form submissions that aren't needed if you just implement the calculation client side.
I'll share a JavaScript-based solution but I have to split it up because it is over the rough 2KB limit for a single answer.
0
The HTML and CSS:
<html>
<head>
<script>
</script>
<style>
label {
width: 130px;
font-weight: bold;
}
#results > div, .input-group {
display: flex;
margin-top: 5px;
}
#results > div > label, .input-group label {
flex-grow: 0;
}
#results > div > input, .input-group input {
flex-grow: 1;
}
</style>
</head>
<body>
<div class="input-group">
<label for="input">Find Change for:</label><input id="input" type="number" min="0" step="0.01">
</div>
<div id="results">
</div>
</body>
</html>
0
Appreciate your answer