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>
0 Comments
"Thank you for taking the time to engage with this post! We value thoughtful and constructive comments that contribute to the discussion. Please keep your comments respectful and on-topic. We encourage you to share your insights, ask questions, and participate in meaningful conversations. Note that comments are moderated, and any inappropriate or spammy content will be removed. We look forward to hearing your thoughts!"