```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compound Interest Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin: 20px;
}
input {
padding: 8px;
margin: 5px;
}
button {
padding: 10px;
margin: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Compound Interest Calculator</h2>
<label for="principal">Principal amount:</label>
<input type="number" id="principal" placeholder="Enter principal">
<label for="rate">Annual interest rate (%):</label>
<input type="number" id="rate" placeholder="Enter interest rate">
<label for="time">Number of years:</label>
<input type="number" id="time" placeholder="Enter number of years">
<button onclick="calculateCompoundInterest()">Calculate</button>
<h3 id="result">Compound Interest: $0.00</h3>
<script>
function calculateCompoundInterest() {
const principal = parseFloat(document.getElementById('principal').value);
const rate = parseFloat(document.getElementById('rate').value) / 100;
const time = parseFloat(document.getElementById('time').value);
const compoundInterest = principal * Math.pow(1 + rate, time) - principal;
document.getElementById('result').textContent = `Compound Interest: $${compoundInterest.toFixed(2)}`;
}
</script>
</body>
</html>
```
No comments:
Post a Comment