Retirement Calculator

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Retirement Calculator</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div class="calculator">
        <h1>Retirement Calculator</h1>
        <p>Ah, the golden years. House by the beach. Golf every day. Lots of time with family. Retirement dreams are fun to think about—and save for. Want an idea of how much your investments could be worth when it’s time to retire? Put your numbers in our retirement calculator and see.</p>
        
        <form id="retirementForm">
            <div class="form-group">
                <label for="currentAge">Enter your current age.</label>
                <input type="number" id="currentAge" required>
            </div>
            <div class="form-group">
                <label for="retirementAge">Enter the age you plan to retire.</label>
                <input type="number" id="retirementAge" required>
                <small>If you were born in 1960 or later, 67 years old is the age at which you can retire with full benefits.</small>
            </div>
            <div class="form-group">
                <label for="currentSavings">About how much money do you currently have in investments?</label>
                <input type="number" id="currentSavings" required>
                <small>This should be the total of all your investment accounts including 401(k)s, IRAs, mutual funds, etc.</small>
            </div>
            <div class="form-group">
                <label for="monthlyContribution">How much will you contribute monthly?</label>
                <input type="number" id="monthlyContribution" required>
                <small>This is the amount you invest each month. We recommend investing 15% of your paycheck.</small>
            </div>
            <div class="form-group">
                <label for="annualReturn">What do you think your annual return will be?</label>
                <input type="number" id="annualReturn" required>
                <small>This is the return your investment will generate over time. Historically, the 30-year return of the S&P 500 has been roughly 10-12%.</small>
            </div>
            <button type="submit">Calculate</button>
        </form>

<div id="resultsSection" class="results-section">
            <h2>Your Results</h2>
            <p>ESTIMATED RETIREMENT SAVINGS</p>
            <h3 id="estimatedSavings">$0</h3>

<div class="breakdown">
                <p><strong>Initial Balance:</strong> <span id="initialBalance">$0</span> (<span id="initialBalancePercent">0%</span> of Total)</p>
                <p><strong>Contributions:</strong> <span id="contributions">$0</span> (<span id="contributionsPercent">0%</span> of Total)</p>
                <p><strong>Growth:</strong> <span id="growth">$0</span> (<span id="growthPercent">0%</span> of Total)</p>
            </div>

<div id="whatIfSection" class="what-if-section">
            <h2>What if I...</h2>
            <div class="what-if-option">
                <p>Saved an extra $100 per month.</p>
                <p><strong>Adds $100 a month in contributions, but creates</strong></p>
                <p id="extra100">$0 in additional growth</p>
            </div>
            <div class="what-if-option">
                <p>Gave up daily coffee purchases.</p>
                <p><strong>Adds $128 a month in contributions, but creates</strong></p>
                <p id="noCoffee">$0 in additional growth</p>
            </div>
            <div class="what-if-option">
                <p>Gave up weekly restaurant visits.</p>
                <p><strong>Adds $200 a month in contributions, but creates</strong></p>
                <p id="noRestaurants">$0 in additional growth</p>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 20px;
}

.calculator {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 800px;
}

h1, h2, h3 {
    text-align: center;
}

.form-group {
    margin-bottom: 15px;
}

label {
    display: block;
    margin-bottom: 5px;
}

input {
    width: 100%;
    padding: 8px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
}

small {
    display: block;
    color: #666;
    margin-top: 5px;
}

button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

.results-section, .what-if-section {
    margin-top: 30px;
}

.breakdown {
    margin-bottom: 20px;
}

.what-if-option {
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
}

canvas {
    max-width: 100%;
    margin-top: 20px;
}

document.getElementById('retirementForm').addEventListener('submit', function(event) {
    event.preventDefault();

// Get input values
    const currentAge = parseInt(document.getElementById('currentAge').value);
    const retirementAge = parseInt(document.getElementById('retirementAge').value);
    const currentSavings = parseFloat(document.getElementById('currentSavings').value);
    const monthlyContribution = parseFloat(document.getElementById('monthlyContribution').value);
    const annualReturn = parseFloat(document.getElementById('annualReturn').value) / 100;

// Calculate years until retirement
    const yearsUntilRetirement = retirementAge - currentAge;

// Calculate future value of current savings (compounded annually)
    const futureValueOfSavings = currentSavings * Math.pow(1 + annualReturn, yearsUntilRetirement);

// Calculate future value of monthly contributions (compounded monthly)
    const monthlyReturn = annualReturn / 12;
    const numberOfMonths = yearsUntilRetirement * 12;
    const futureValueOfContributions = monthlyContribution * ((Math.pow(1 + monthlyReturn, numberOfMonths) - 1) / monthlyReturn);

// Total retirement savings
    const totalRetirementSavings = futureValueOfSavings + futureValueOfContributions;

// Calculate total contributions (without growth)
    const totalContributions = monthlyContribution * 12 * yearsUntilRetirement;

// Calculate growth (total savings - initial savings - total contributions)
    const growth = totalRetirementSavings - currentSavings - totalContributions;

// Display results
    document.getElementById('estimatedSavings').textContent = `$${totalRetirementSavings.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;

// Breakdown
    const initialBalancePercent = ((currentSavings / totalRetirementSavings) * 100).toFixed(2);
    const contributionsPercent = ((totalContributions / totalRetirementSavings) * 100).toFixed(2);
    const growthPercent = ((growth / totalRetirementSavings) * 100).toFixed(2);

// Chart
    const ctx = document.getElementById('retirementChart').getContext('2d');
    const retirementChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: Array.from({ length: yearsUntilRetirement + 1 }, (_, i) => currentAge + i),
            datasets: [
                {
                    label: 'Contributions',
                    data: calculateContributionsOverTime(monthlyContribution, yearsUntilRetirement),
                    borderColor: '#007bff',
                    fill: false
                },
                {
                    label: 'Growth',
                    data: calculateGrowthOverTime(currentSavings, monthlyContribution, annualReturn, yearsUntilRetirement),
                    borderColor: '#28a745',
                    fill: false
                },
                {
                    label: 'Total Savings',
                    data: calculateSavingsOverTime(currentSavings, monthlyContribution, annualReturn, yearsUntilRetirement),
                    borderColor: '#ffc107',
                    fill: false
                }
            ]
        },
        options: {
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return `$${value.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
                        }
                    }
                }
            }
        }
    });

// What if scenarios
    const extra100 = calculateAdditionalGrowth(monthlyContribution + 100, annualReturn, yearsUntilRetirement) - futureValueOfContributions;
    const noCoffee = calculateAdditionalGrowth(monthlyContribution + 128, annualReturn, yearsUntilRetirement) - futureValueOfContributions;
    const noRestaurants = calculateAdditionalGrowth(monthlyContribution + 200, annualReturn, yearsUntilRetirement) - futureValueOfContributions;

function calculateSavingsOverTime(initial, monthly, rate, years) {
    const data = [];
    let savings = initial;
    const monthlyRate = rate / 12;
    const numberOfMonths = years * 12;

for (let i = 0; i <= numberOfMonths; i++) {
        if (i > 0) {
            savings = savings * (1 + monthlyRate) + monthly;
        }
        if (i % 12 === 0) {
            data.push(savings);
        }
    }
    return data;
}

function calculateContributionsOverTime(monthly, years) {
    const data = [];
    let totalContributions = 0;
    const numberOfMonths = years * 12;

for (let i = 0; i <= numberOfMonths; i++) {
        if (i > 0) {
            totalContributions += monthly;
        }
        if (i % 12 === 0) {
            data.push(totalContributions);
        }
    }
    return data;
}

function calculateGrowthOverTime(initial, monthly, rate, years) {
    const savingsData = calculateSavingsOverTime(initial, monthly, rate, years);
    const contributionsData = calculateContributionsOverTime(monthly, years);
    const growthData = savingsData.map((savings, index) => savings - initial - contributionsData[index]);
    return growthData;
}

function calculateAdditionalGrowth(monthly, rate, years) {
    const monthlyRate = rate / 12;
    const numberOfMonths = years * 12;
    return monthly * ((Math.pow(1 + monthlyRate, numberOfMonths) - 1) / monthlyRate);
}

Check out our Python playground!