<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>The Compound Interest Calculator</title>
<link href=
rel="stylesheet">
</head>
<body class="bg-gray-100 min-h-screen flex
justify-center items-center">
<div class="max-w-md w-full bg-white
p-8 rounded-lg shadow-lg border-2 border-green-500">
<h1 class="text-3xl font-bold text-center
mb-8">Compound Interest Calculator</h1>
<div class="mb-4">
<label for="principal" class="block text-gray-700">
Principal Amount:</label>
<input type="number" id="principal"
class="w-full border border-gray-300
rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500"
placeholder="Enter principal amount">
</div>
<div class="mb-4">
<label for="rate" class="block text-gray-700">
Annual Interest Rate (%):</label>
<input type="number" id="rate"
class="w-full border border-gray-300 rounded-md
py-2 px-3 focus:outline-none focus:border-blue-500"
placeholder="Enter annual interest rate">
</div>
<div class="mb-4">
<label for="time" class="block text-gray-700">
Time Period (Years):</label>
<input type="number" id="time"
class="w-full border border-gray-300
rounded-md py-2 px-3
focus:outline-none focus:border-blue-500"
placeholder="Enter time period in years">
</div>
<button id="calculateBtn"
class="w-full bg-blue-500 text-white
rounded-md py-2 px-4
hover:bg-blue-600
focus:outline-none mb-4">
Calculate
</button>
<div id="result"
class="text-lg font-semibold text-center">
</div>
</div>
<script>
document.getElementById('calculateBtn').addEventListener('click',
function () {
const principal = parseFloat(document
.getElementById('principal').value);
const rate =
parseFloat(document.getElementById('rate').value);
const time =
parseFloat(document.getElementById('time').value);
if (!principal || !rate || !time) {
alert('Please fill in all fields.');
return;
}
const amount = principal * Math.pow((1 + rate / 100), time);
const interest = amount - principal;
const resultElement = document.getElementById('result');
resultElement.textContent =
`After ${time} years, your investment
will be worth ₹${amount.toFixed(2)} with a total interest of
₹${interest.toFixed(2)}.`;
});
</script>
</body>
</html>