Calculator Tools Calculator Tools
Create

Cash Count Calculator

Nov 22, 2023

About this app

A simple and colorful app to calculate total cash count.

Cash Count Calculator Cash Count Calculator 🧮💵 $100: $50: $20: $10: $5: $1: Coins: $0.00

Related apps

Put this on your site

Source

                    <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cash Count Calculator</title>
<meta name="description" content="A simple and colorful app to calculate total cash count.">
<meta name="keywords" content="cash, count, calculator, money, total">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
<style>
body {
font-family: 'Fredoka One', cursive;
background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
color: #333;
text-align: center;
padding: 2rem;
}
.currency-row {
margin-bottom: 1rem;
}
.currency-label {
margin-right: 1rem;
}
.currency-input {
width: 60px;
text-align: right;
}
.total-amount {
margin-top: 2rem;
font-size: 1.5rem;
padding: 0.5rem 0;
border-top: 3px solid #fff;
border-bottom: 3px solid #fff;
}
button {
margin-top: 1rem;
padding: 0.5rem 1rem;
font-size: 1rem;
background-color: #4CAF50;
border: none;
border-radius: 5px;
cursor: pointer;
color: white;
}
button:hover {
background-color: #45a049;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Selector for the total amount display
var totalDisplay = document.getElementById('total-amount');

function calculateTotal() {
var inputs = document.querySelectorAll('.currency-input');
var total = 0;
inputs.forEach(function(input) {
var value = parseFloat(input.value) || 0;
var multiplier = parseFloat(input.getAttribute('data-multiplier')) || 0;
total += value * multiplier;
});
totalDisplay.textContent = '$' + total.toFixed(2);
}

// Event listener for input changes
var currencyInputs = document.querySelectorAll('.currency-input');
currencyInputs.forEach(function(input) {
input.addEventListener('input', calculateTotal);
});

// Calculate initial total
calculateTotal();
});
</script>
</head>
<body>
<h1>Cash Count Calculator 🧮💵</h1>
<div id="currency-fields">
<div class="currency-row">
<label class="currency-label">$100:</label>
<input type="number" class="currency-input" data-multiplier="100" min="0" value="0">
</div>
<div class="currency-row">
<label class="currency-label">$50:</label>
<input type="number" class="currency-input" data-multiplier="50" min="0" value="0">
</div>
<div class="currency-row">
<label class="currency-label">$20:</label>
<input type="number" class="currency-input" data-multiplier="20" min="0" value="0">
</div>
<div class="currency-row">
<label class="currency-label">$10:</label>
<input type="number" class="currency-input" data-multiplier="10" min="0" value="0">
</div>
<div class="currency-row">
<label class="currency-label">$5:</label>
<input type="number" class="currency-input" data-multiplier="5" min="0" value="0">
</div>
<div class="currency-row">
<label class="currency-label">$1:</label>
<input type="number" class="currency-input" data-multiplier="1" min="0" value="0">
</div>
<div class="currency-row">
<label class="currency-label">Coins:</label>
<input type="number" class="currency-input" data-multiplier="0.01" min="0" step="0.01" value="0">
</div>
</div>
<div class="total-amount" id="total-amount">$0.00</div>
</body>
</html>