Money Counter Calculator
About this app
A money counter calculator app that helps you count and calculate the total amount of money based on different denominations.
Money Counter Calculator Select Location: DCC Date and Time: Money Counter Calculator $100 Bills: $50 Bills: Save as PDF
Related apps
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Money Counter Calculator</title>
<meta name="description" content="A money counter calculator app that helps you count and calculate the total amount of money based on different denominations.">
<meta name="keywords" content="money, counter, calculator, currency, bills, denominations">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.4.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.3.2/html2canvas.min.js"></script>
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
function updateDateTime() {
const dateTimeElement = document.getElementById('current-date-time');
const currentDate = new Date();
const formattedDate = currentDate.toLocaleDateString();
const formattedTime = currentDate.toLocaleTimeString();
dateTimeElement.innerHTML = `Date: ${formattedDate}, Time: ${formattedTime}`;
}
// Function to calculate and update the total when any input changes
function updateTotal() {
const denominations = [
'hundred', 'fifty', 'twenty', 'ten', 'seven', 'five', 'two', 'one', 'halfdollar', 'twodime', 'dime', 'nickel',
'petty-cash-branch', 'petty-cash-ho', 'eftpos-anz', 'eftpos-wbc', 'eftpos-bsp', 'western-union-branch', 'western-union-ho',
'e-value', 'm-paisa', 'credit-sales', 'add-machine-float'
];
let total = 0;
denominations.forEach((denomination) => {
const value = parseFloat(document.getElementById(denomination).value) || 0;
total += value;
});
const lessMachineFloat = parseFloat(document.getElementById('less-machine-float').value) || 0;
total -= lessMachineFloat;
displayTotal(total);
}
// Add event listeners to all input fields to trigger updateTotal() on input changes
const inputFields = document.querySelectorAll('input');
inputFields.forEach((inputField) => {
inputField.addEventListener('input', updateTotal);
});
function displayTotal(total) {
const resultDiv = document.getElementById('result');
resultDiv.innerHTML = `<h2>Total: $${total.toFixed(2)}</h2>`;
}
// Update the date and time continuously
setInterval(updateDateTime, 1000); // Update every 1 second
updateDateTime(); // Initial update
// Save as PDF button functionality
document.getElementById('save-pdf-button').addEventListener('click', () => {
const calculator = document.getElementById('calculator');
html2canvas(calculator).then(canvas => {
const pdf = new jsPDF();
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, 210, 297);
pdf.save('money_counter_calculator.pdf');
});
});
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
/* App CSS Goes Here */
body {
background-color: #f5f5f5;
font-family: 'Roboto', sans-serif;
}
#main-container {
max-width: 300px;
margin: 0 auto;
padding: 20px;
background-color: #f0f0f0;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 5px;
text-align: center;
}
h1 {
font-size: 24px;
margin: 10px 0;
}
label {
display: block;
margin: 10px 0;
font-size: 16px;
text-align: center;
}
input[type="number"] {
width: 100px;
padding: 10px;
margin: 5px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
background-color: #fff;
color: #333;
text-align: center;
display: block;
margin: 0 auto;
}
#location-dropdown {
margin-bottom: 20px;
}
#result {
margin: 20px 0;
font-size: 24px;
}
#result {
text-align: center;
}
#save-pdf-button {
width: 100%;
padding: 10px;
margin: 20px 0;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<div id="calculator">
<div id="location-dropdown">
<label for="locations">Select Location:</label>
<select id="locations">
<option value="DCC">DCC</option>
<!-- Add more store options here -->
</select>
</div>
<div id="date-time">
<label for="current-date-time">Date and Time:</label>
<span id="current-date-time"></span>
</div>
<h1>Money Counter Calculator</h1>
<label for="hundred">$100 Bills:</label>
<input type="number" id="hundred" min="0" placeholder="0">
<label for="fifty">$50 Bills:</label>
<input type="number" id="fifty" min="0" placeholder="0">
<!-- Add more input fields here -->
<div id="result"></div>
<button id="save-pdf-button">Save as PDF</button>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!