<html>

    <head>

        <meta charset="utf-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width,initial-scale=1">

        <meta name="description" content="The best, comprehensive and user-friendly retirement calculator. Plan your retirement with ease and confidence.">

        <meta name="keywords" content="best retirement calculator, best financial planning calculator, best superannuation retirement calculator, best retirement calculator australia">

        <title>Best Comprehensive Retirement Calculator</title>



        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"

                integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

        <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



        <script type="text/javascript">

            try {

                const calculateRetirementSavings = () => {

                    //Get input values

                    const inputs = {

                        currentAge: Number(document.getElementById('currentAge').value),

                        retirementAge: Number(document.getElementById('retirementAge').value),

                        lifeExpectancy: Number(document.getElementById('lifeExpectancy').value),

                        currentSavings: Number(document.getElementById('currentSavings').value),

                        monthlyContribution: Number(document.getElementById('monthlyContribution').value),

                        annualReturn: Number(document.getElementById('annualReturn').value) / 100,

                        inflationRate: Number(document.getElementById('inflationRate').value) / 100,

                        otherIncome: Number(document.getElementById('otherIncome').value),

                        lumpSum: Number(document.getElementById('lumpSum').value),

                        retirementExpenses: Number(document.getElementById('retirementExpenses').value),

                    };



                    // Calculate retirement savings

                    let savings = inputs.currentSavings;

                    for(let i = inputs.currentAge; i <= inputs.retirementAge; i++) {

                        savings = savings * (1 + inputs.annualReturn) + inputs.monthlyContribution * 12;

                    }



                    //Adjust for inflation and add other incomes

                    savings = savings / Math.pow(1 + inputs.inflationRate, inputs.retirementAge - inputs.currentAge);

                    savings += inputs.otherIncome + inputs.lumpSum;



                    //Calculate retirement expenses

                    let expenses = inputs.retirementExpenses * (inputs.lifeExpectancy - inputs.retirementAge);

                    expenses = expenses * Math.pow(1 + inputs.inflationRate, inputs.retirementAge - inputs.currentAge);



                    //Display results

                    document.getElementById('savingsResult').innerText = savings.toFixed(2);

                    document.getElementById('expensesResult').innerText = expenses.toFixed(2);

                    document.getElementById('balanceResult').innerText = (savings - expenses).toFixed(2);

                };



                document.addEventListener("DOMContentLoaded", function() {

                    document.getElementById('calculatorForm').addEventListener('submit', function(event) {

                        event.preventDefault();

                        calculateRetirementSavings();

                    });

                });



            } catch (error) {

                throw error;

            }

        </script>



        <style>

            body {

                background: linear-gradient(to right, #00c6ff, #0072ff);

                font-family: 'Montserrat', sans-serif;

                color: #333;

            }

            .container {

                margin-top: 50px;

            }

            .form-control {

                border-radius: 0;

            }

            .btn {

                border-radius: 0;

                font-size: 18px;

                padding: 10px 20px;

                background: #0072ff;

                color: #fff;

                transition: 0.2s;

            }

        </style>

    </head>

    <body>

        <div id="main-container" class="container">

            <h1 class="text-center mb-4">🎉 Best Comprehensive Retirement Calculator 🎉</h1>

            <form id="calculatorForm">

                <div class="form-group">

                    <label for="currentAge">Current Age:</label>

                    <input type="number" class="form-control" id="currentAge" required>

                </div>

                <div class="form-group">

                    <label for="retirementAge">Desired Retirement Age:</label>

                    <input type="number" class="form-control" id="retirementAge" required>

                </div>

                <!-- Rest of the fields here -->

                <button type="submit" class="btn btn-block mt-4">Calculate</button>

            </form>

            <div id="results" class="mt-5">

                <h2>Results:</h2>

                <p>Savings at retirement: $<span id="savingsResult">0.00</span></p>

                <p>Expenses during retirement: $<span id="expensesResult">0.00</span></p>

                <p>Balance at end of life: $<span id="balanceResult">0.00</span></p>

            </div>

        </div>

    </body>

</html>