Compound Interest Calculator
This calculator helps you understand how your investments can grow over time with the power of compound interest. Compound interest is the interest calculated on the initial principal, which also includes all of the accumulated interest from previous periods. It's essentially 'interest on interest'.
.calculator-container {
font-family: sans-serif;
max-width: 600px;
margin: 20px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.calculator-container h2 {
text-align: center;
margin-bottom: 20px;
color: #333;
}
.calculator-container p {
line-height: 1.6;
color: #555;
margin-bottom: 20px;
}
.calculator-inputs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 20px;
}
.input-group {
display: flex;
flex-direction: column;
}
.input-group label {
margin-bottom: 5px;
font-weight: bold;
color: #444;
}
.input-group input, .input-group select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 1em;
}
.calculator-inputs button {
grid-column: 1 / -1;
padding: 12px 20px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
font-size: 1.1em;
cursor: pointer;
transition: background-color 0.3s ease;
}
.calculator-inputs button:hover {
background-color: #0056b3;
}
.calculator-result {
margin-top: 20px;
padding: 15px;
background-color: #e9ecef;
border: 1px solid #dee2e6;
border-radius: 4px;
}
.calculator-result h3 {
margin-bottom: 10px;
color: #333;
}
.calculator-result p {
margin-bottom: 5px;
color: #007bff;
font-weight: bold;
}
function calculateCompoundInterest() {
var principal = parseFloat(document.getElementById("principal").value);
var annualInterestRate = parseFloat(document.getElementById("annualInterestRate").value);
var timePeriod = parseFloat(document.getElementById("timePeriod").value);
var compoundingFrequency = parseFloat(document.getElementById("compoundingFrequency").value);
var resultDiv = document.getElementById("result");
var totalAmountElement = document.getElementById("totalAmount");
var totalInterestEarnedElement = document.getElementById("totalInterestEarned");
// Input validation
if (isNaN(principal) || principal <= 0) {
totalAmountElement.textContent = "Please enter a valid initial investment amount.";
totalInterestEarnedElement.textContent = "";
return;
}
if (isNaN(annualInterestRate) || annualInterestRate < 0) {
totalAmountElement.textContent = "Please enter a valid annual interest rate.";
totalInterestEarnedElement.textContent = "";
return;
}
if (isNaN(timePeriod) || timePeriod <= 0) {
totalAmountElement.textContent = "Please enter a valid investment period.";
totalInterestEarnedElement.textContent = "";
return;
}
if (isNaN(compoundingFrequency) || compoundingFrequency <= 0) {
totalAmountElement.textContent = "Please enter a valid compounding frequency.";
totalInterestEarnedElement.textContent = "";
return;
}
var rate = annualInterestRate / 100;
var n = compoundingFrequency;
var t = timePeriod;
var P = principal;
// Compound Interest Formula: A = P (1 + r/n)^(nt)
var amount = P * Math.pow((1 + rate / n), (n * t));
var totalInterest = amount – P;
totalAmountElement.textContent = "Total Amount after " + t + " years: $" + amount.toFixed(2);
totalInterestEarnedElement.textContent = "Total Interest Earned: $" + totalInterest.toFixed(2);
}