Savings Calculator - Mark Densmore, CAWC

<!DOCTYPE html>
<html>
<head>
	<title>Savings Calculator</title>
	<style>
		#calculator {
			margin: 20px auto;
			padding: 20px;
			border: 2px solid #ccc;
			max-width: 500px;
			text-align: center;
		}
		label {
			display: inline-block;
			width: 150px;
			margin-bottom: 10px;
			text-align: left;
		}
		input[type="number"], input[type="range"] {
			width: 200px;
		}
		.output {
			margin-top: 20px;
			font-size: 20px;
			font-weight: bold;
		}
	</style>
</head>
<body>
	<div id="calculator">
		<h1>Savings Calculator</h1>
		<label for="initial-amount">Initial Amount:</label>
		<input type="number" id="initial-amount" min="0" value="1000">
		<br>
		<label for="monthly-savings">Monthly Savings:</label>
		<input type="number" id="monthly-savings" min="0" value="100">
		<br>
		<label for="interest-rate">Annual Interest Rate:</label>
		<input type="range" id="interest-rate" min="0" max="10" value="5" step="0.25">
		<br>
		<div class="output">Total Savings: $<span id="total-savings"></span></div>
	</div>
	<script>
		const initialAmountInput = document.getElementById('initial-amount');
		const monthlySavingsInput = document.getElementById('monthly-savings');
		const interestRateInput = document.getElementById('interest-rate');
		const totalSavingsOutput = document.getElementById('total-savings');
		
		function calculateSavings() {
			const initialAmount = parseFloat(initialAmountInput.value);
			const monthlySavings = parseFloat(monthlySavingsInput.value);
			const interestRate = parseFloat(interestRateInput.value) / 100;
			const years = 10; // Change this to adjust the calculation period
			
			let total = initialAmount;
			for (let i = 1; i <= years * 12; i++) {
				total += monthlySavings;
				total *= 1 + interestRate / 12;
			}
			
			totalSavingsOutput.innerText = total.toFixed(2);
		}
		
		initialAmountInput.addEventListener('input', calculateSavings);
		monthlySavingsInput.addEventListener('input', calculateSavings);
		interestRateInput.addEventListener('input', calculateSavings);
		
		calculateSavings(); // Calculate savings initially
	</script>
</body>
</html>