Interest Calculator
body { background: #fff; font-family: Arial, sans-serif; margin: 0; padding: 0; color: #222; }
h1 { color: #18447e; text-align: center; margin-top: 18px; margin-bottom: 12px; font-size: 2em; font-weight: bold; letter-spacing: .5px; }
.main-flex { display: flex; gap: 32px; justify-content: center; align-items: flex-start; margin-bottom: 0; }
.panel { background: #fff; border: 2px solid #bdbdbd; border-radius: 6px; box-shadow: 0 2px 7px #0001; padding: 18px 22px 12px 22px; min-width: 340px; margin-top: 0; }
.panel table { width: 100%; border-collapse: collapse; }
.panel td { padding: 7px 4px; font-size: 1em; vertical-align: middle; }
.dollar-input { position: relative; display: flex; align-items: center; }
.dollar-input input { padding-left: 22px !important; font-family: Arial, sans-serif; box-sizing: border-box; width: 120px; }
.dollar-input .dollar-sign { position: absolute; left: 7px; color: #18447e; font-size: 1em; font-family: Arial, sans-serif; pointer-events: none; }
.panel input[type="number"], .panel input[type="text"], .panel select { width: 120px; font-size: 1em; padding: 3px 7px; border: 1px solid #bdbdbd; border-radius: 4px; background: #fff; color: #222; font-family: Arial, sans-serif; }
.panel input[type="number"]::-webkit-inner-spin-button, .panel input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.panel input[type="radio"] { margin-right: 2px; accent-color: #18447e; }
.panel label { margin-right: 10px; font-weight: normal; font-size: .98em; }
.panel .radio-row { text-align: left; padding-top: 0; padding-bottom: 0; font-size: .96em; color: #222; }
.panel .btn-row { text-align: center; padding-top: 13px; padding-bottom: 0; }
.panel button { font-size: 1em; padding: 6px 22px; border-radius: 4px; border: none; cursor: pointer; font-weight: bold; transition: background .2s; }
.panel .calc-btn { background: #4d7c2b; color: #fff; border: 1.5px solid #4d7c2b; }
.panel .calc-btn:hover { background: #3a5e1f; }
.panel .clear-btn { background: #bdbdbd; color: #222; border: 1.5px solid #bdbdbd; margin-left: 8px; }
.panel .clear-btn:hover { background: #999; color: #fff; }
.results-panel { background: #fff; border: 2px solid #bdbdbd; border-radius: 6px; min-width: 330px; margin-top: 0; box-shadow: 0 2px 7px #0001; padding: 0 0 18px 0; }
.results-header { background: #7a9a44; color: #fff; font-size: 1.2em; font-weight: bold; padding: 8px 0 8px 16px; border-radius: 6px 6px 0 0; margin-bottom: 0; letter-spacing: .5px; }
.results-table { width: 95%; margin: 10px auto 0 auto; border-collapse: collapse; }
.results-table td { padding: 4px 2px; font-size: 1em; color: #222; }
.results-table b { color: #18447e; font-size: 1.08em; }
.results-table tr td:first-child { font-size: .97em; }
.results-table tr td:last-child { text-align: right; font-family: Arial, sans-serif; letter-spacing: .5px; }
.charts-flex { display: flex; gap: 12px; justify-content: center; align-items: flex-start; margin-top: 14px; margin-bottom: 0; }
.chart-container { background: #fff; border-radius: 8px; padding: 0; min-width: 180px; min-height: 140px; display: flex; flex-direction: column; align-items: center; box-shadow: 0 1px 4px #0001; }
.pie-legend { display: flex; justify-content: center; gap: 18px; margin-top: 0; font-size: .97em; }
.pie-legend span { display: flex; align-items: center; gap: 4px; }
.pie-legend .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 3px; margin-right: 3px; }
.bar-legend { text-align: center; font-size: .97em; margin-top: 0; margin-bottom: 0; }
.bar-legend .swatch { width: 14px; height: 10px; border-radius: 2px; display: inline-block; margin-right: 2px; vertical-align: middle; }
.schedule-section { margin: 0 auto 0 auto; max-width: 900px; background: #fff; border-radius: 6px; border: 2px solid #bdbdbd; box-shadow: 0 2px 7px #0001; padding: 12px 18px 22px 18px; }
.schedule-title { color: #18447e; font-size: 1.3em; font-weight: bold; padding-bottom: 10px; margin-top: 18px; margin-bottom: 0; text-align: left; }
.schedule-tabs { margin-bottom: 8px; margin-left: 6px; }
.tab-btn { padding: 6px 12px; border: none; background: none; color: #18447e; font-weight: bold; font-size: 1em; border-radius: 0; margin-right: 12px; cursor: pointer; border-bottom: 2px solid transparent; text-decoration: underline; transition: border-bottom .2s; }
.tab-btn.active { border-bottom: 2.5px solid #18447e; text-decoration: none; color: #18447e; background: none; }
.schedule-table { width: 100%; border-collapse: collapse; font-size: .99em; margin-top: 0; }
.schedule-table th, .schedule-table td { border: 1px solid #bdbdbd; padding: 5px 8px; text-align: right; font-family: Arial, sans-serif; }
.schedule-table th { background: #2b7ddb; color: #fff; font-weight: bold; font-size: 1em; text-align: center; }
.schedule-table td:first-child, .schedule-table th:first-child { text-align: left; }
@media (max-width: 900px) { .main-flex, .charts-flex { flex-direction: column; align-items: stretch; } .panel, .results-panel { min-width: 0; width: 100%; } .schedule-section { padding: 10px 4px 14px 4px; } }
Interest Calculator
| Initial investment |
$
|
| Annual contribution |
$
|
| Monthly contribution |
$
|
|
Contribute at the
of each compounding period
|
| Interest rate |
%
|
| Compound |
annually
semiannually
quarterly
monthly
weekly
daily
|
| Investment length |
years
months
|
| Tax rate |
%
|
| Inflation rate |
%
|
|
|
| Ending balance | $0.00 |
| Total principal | $0.00 |
| Total contributions | $0.00 |
| Total interest | $0.00 |
| Interest of initial investment | $0.00 |
| Interest of the contributions | $0.00 |
Buying power of the end balance
after inflation adjustment | $0.00 |
Initial investment
Contributions
Interest
Initial investment
Contributions
Interest
Accumulation Schedule
function formatCurrency(val) {
return '$' + Number(val).toLocaleString(undefined, {minimumFractionDigits:2, maximumFractionDigits:2});
}
function clearForm() {
document.getElementById('calcForm').reset();
document.getElementById('endingBalance').textContent = '$0.00';
document.getElementById('totalPrincipal').textContent = '$0.00';
document.getElementById('totalContributions').textContent = '$0.00';
document.getElementById('totalInterest').textContent = '$0.00';
document.getElementById('interestInitial').textContent = '$0.00';
document.getElementById('interestContributions').textContent = '$0.00';
document.getElementById('buyingPower').textContent = '$0.00';
pieChart.data.datasets[0].data = [0,0,0];
pieChart.update();
barChart.data.labels = [];
barChart.data.datasets.forEach(ds => ds.data = []);
barChart.update();
document.getElementById('schedule').innerHTML = '';
}
let pieChart, barChart;
document.addEventListener('DOMContentLoaded', function() {
pieChart = new Chart(document.getElementById('pieChart'), {
type: 'doughnut',
data: {
labels: ['Initial investment', 'Contributions', 'Interest'],
datasets: [{
data: [0,0,0],
backgroundColor: ['#2b7ddb', '#8bbc21', '#910000'],
borderWidth: 0
}]
},
options: {
responsive: false,
cutout: '60%',
plugins: {
legend: { display: false },
datalabels: {
color: '#222',
font: { weight: 'bold', family: 'Arial', size: 13 },
formatter: (value, ctx) => {
let sum = ctx.chart.data.datasets[0].data.reduce((a,b) => a+b, 0);
if (!sum) return '';
let pct = Math.round(value/sum*100);
return pct ? pct+'%' : '';
}
}
}
},
plugins: [ChartDataLabels]
});
barChart = new Chart(document.getElementById('barChart'), {
type: 'bar',
data: {
labels: [],
datasets: [
{ label: 'Initial investment', backgroundColor: '#2b7ddb', data: [] },
{ label: 'Contributions', backgroundColor: '#8bbc21', data: [] },
{ label: 'Interest', backgroundColor: '#910000', data: [] }
]
},
options: {
responsive: false,
plugins: { legend: { display: false } },
scales: {
x: { stacked: true, grid: { display: false } },
y: { stacked: true, grid: { color: '#bdbdbd' }, beginAtZero: true, ticks: { callback: v => '$'+(v/1000)+'K' } }
}
}
});
document.getElementById('calcForm').addEventListener('submit', function(e) {
e.preventDefault();
calculate();
});
calculate();
});
function calculate() {
// Get inputs
const initial = Number(document.getElementById('initial').value) || 0;
const annual = Number(document.getElementById('annual').value) || 0;
const years = Number(document.getElementById('years').value) || 0;
const months = Number(document.getElementById('months').value) || 0;
const rate = Number(document.getElementById('rate').value) || 0;
const inflation = Number(document.getElementById('inflation').value) || 0;
// Monthly schedule (for all months)
let scheduleMonthly = [];
let balance = initial + annual;
for(let m=1; m<=years*12; m++) {
let deposit = (m === 1) ? (initial + annual) : ((m-1)%12 === 0 ? annual : 0);
if(m !== 1 && (m-1)%12 === 0) balance += annual;
let interest = balance * (rate / 100 / 12);
balance += interest;
scheduleMonthly.push({
month: m,
deposit: deposit,
interest: interest,
ending: balance
});
}
// Annual schedule (sum up months for each year)
let scheduleAnnual = [];
let bal = initial + annual;
let yearStart = 0;
for(let y=1; y<=years; y++) {
let yearDeposit = (y === 1) ? (initial + annual) : annual;
let yearInterest = 0;
let yearEnd = bal;
for(let m=1; m<=12; m++) {
if(!(y === 1 && m === 1) && m === 1) bal += annual;
let interest = bal * (rate / 100 / 12);
bal += interest;
yearInterest += interest;
yearEnd = bal;
}
scheduleAnnual.push({
year: y,
deposit: y === 1 ? (initial + annual) : annual,
interest: yearInterest,
ending: yearEnd
});
}
// Results
let endingBalance = bal;
let totalPrincipal = initial + annual * years;
let totalContributions = annual * years;
let totalInterest = endingBalance - totalPrincipal;
let FV_initial = initial * Math.pow(1 + rate/100, years);
let interestOfInitial = FV_initial - initial;
let interestOfContributions = totalInterest - interestOfInitial;
let buyingPower = endingBalance / Math.pow(1 + inflation/100, years);
document.getElementById('endingBalance').textContent = formatCurrency(endingBalance);
document.getElementById('totalPrincipal').textContent = formatCurrency(totalPrincipal);
document.getElementById('totalContributions').textContent = formatCurrency(totalContributions);
document.getElementById('totalInterest').textContent = formatCurrency(totalInterest);
document.getElementById('interestInitial').textContent = formatCurrency(interestOfInitial);
document.getElementById('interestContributions').textContent = formatCurrency(interestOfContributions);
document.getElementById('buyingPower').textContent = formatCurrency(buyingPower);
// Pie chart
pieChart.data.datasets[0].data = [initial, totalContributions, totalInterest];
pieChart.update();
// Bar chart (yearly summary)
let barLabels = [], barInitialArr = [], barContribArr = [], barInterestArr = [];
for (let y = 0; y btn.classList.remove('active'));
if(type === 'annual') document.querySelectorAll('.tab-btn')[0].classList.add('active');
else document.querySelectorAll('.tab-btn')[1].classList.add('active');
let html = '';
if(type === 'annual') {
html += `
| Year | Deposit | Interest | Ending balance |
|---|
`;
(window.scheduleAnnual||[]).forEach(row => {
html += `| ${row.year} | ${formatCurrency(row.deposit)} | ${formatCurrency(row.interest)} | ${formatCurrency(row.ending)} |
`;
});
html += `
`;
} else {
html += `
| Month | Deposit | Interest | Ending balance |
|---|
`;
(window.scheduleMonthly||[]).forEach(row => {
html += `| ${row.month} | ${formatCurrency(row.deposit)} | ${formatCurrency(row.interest)} | ${formatCurrency(row.ending)} |
`;
});
html += `
`;
}
document.getElementById('schedule').innerHTML = html;
}
