<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Compound Interest & Monthly Static Table</title>
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
background-color: #f8f9fa;
color: #333;
padding: 2rem;
display: flex;
flex-direction: column;
align-items: center;
}
h1 {
color: #2c3e50;
margin-bottom: 0.5rem;
}
p {
color: #7f8c8d;
margin-bottom: 2rem;
}
table {
border-collapse: collapse;
width: 100%;
max-width: 800px;
background: white;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
border-radius: 8px;
overflow: hidden;
}
th, td {
padding: 12px 15px;
text-align: right;
}
th:first-child, td:first-child {
text-align: center;
}
th {
background-color: #2980b9;
color: white;
font-weight: 600;
text-transform: uppercase;
font-size: 0.85rem;
letter-spacing: 0.5px;
}
tr:nth-child(even) {
background-color: #f2f2f2;
}
tr:hover {
background-color: #e8f4f8;
}
.highlight {
font-weight: bold;
color: #2c3e50;
}
</style>
</head>
<body>
<h1>Financial Horizon Projection</h1>
<p>Initial Principal: 100,000 € | Annual Interest Rate: 3.35%</p>
<table>
<thead>
<tr>
<th>Year</th>
<th>Future Value (€)</th>
<th>Equivalent Monthly Payment (€/month)</th>
</tr>
</thead>
<tbody id="results-table-body">
</tbody>
</table>
<script>
// Constants
const principal = 100000;
const annualRate = 0.0335;
const monthlyRate = annualRate / 12;
const maxYears = 50;
const tableBody = document.getElementById('results-table-body');
for (let year = 1; year <= maxYears; year++) {
// 1. Calculate Compound Interest: FV = P * (1 + r)^t
const futureValue = principal * Math.pow(1 + annualRate, year);
// 2. Calculate equivalent monthly payment needed to reach that FV over 't' years
// Formula for Future Value of an Annuity: PMT = FV * r / ((1 + r)^n - 1)
const totalMonths = year * 12;
const monthlyPayment = (futureValue * monthlyRate) / (Math.pow(1 + monthlyRate, totalMonths) - 1);
// Format numbers to localized currency strings
const formattedFV = futureValue.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const formattedPMT = monthlyPayment.toLocaleString('de-DE', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
// Create row
const row = document.createElement('tr');
// Highlight milestone years visually (10, 20, 30, 40, 50)
if (year % 10 === 0 || year === 1) {
row.classList.add('highlight');
}
row.innerHTML = `
<td>${year}</td>
<td>${formattedFV} €</td>
<td>${formattedPMT} €</td>
`;
tableBody.appendChild(row);
}
</script>
</body>
</html>