To create Compound Interest Calculator, we will use HTML, CSS and JavaScript. Here is the simplified form of the code. Following is the live preview of Compound interest calculator.
Compound Interest Calculator
Below is the source code of the above calculator.
<!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;
}
#calc-CI {
background:teal;
color:#fff;
padding:5px;
font-size:15px;
font-weight:800;
margin:10px auto;
max-width:70%;
border:1px solid teal;
border-radius:4px;
}
#calc-CI:hover {
background:blue;
font-size:18px;
padding:6px;
cursor:pointer;
}
</style>
</head>
<body>
<div style="display:block;text-align:center;border:3px solid blue; border-radius:8px;padding:15px; margin:30px;box-shadow:0 0 10px gray;">
<h2>Compound Interest Calculator</h2>
<form>
<label for="principal">Principal Amount:</label>
<input type="number" id="principal" required><br><br>
<label for="rate">Annual Interest Rate (%):</label>
<input type="number" id="rate" required><br><br>
<label for="time">Number of Years:</label>
<input type="number" id="time" required><br><br>
<button type="button" id="calc-CI" onclick="calculateCompoundInterest()">Calculate</button>
</form>
<p id="result"></p></div>
<script>
function calculateCompoundInterest() {
var principal = parseFloat(document.getElementById('principal').value);
var rate = parseFloat(document.getElementById('rate').value);
var time = parseFloat(document.getElementById('time').value);
var compoundInterest = principal * Math.pow((1 + rate / 100), time) - principal;
document.getElementById('result').innerHTML = "Compound Interest: ₹" + compoundInterest.toFixed(2);
}
</script>
</body>
</html>