<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Investment Calculator</title>
</head>
<body>
    <input type="number" placeholder="Amount to Invest" id="invest_amount">
    <br>
    <input type="number" id="duration" placeholder="Duration">
    <br>
    <button onclick="doCalculate()">Calculate</button>

    <table id="output" border="1">
        <tr>
            <td>Year</td>
            <td>Amount</td>
            <td>Rate</td>
            <td>Profit</td>
            <td>Total</td>
        </tr>
    </table>

    <script>
        function doCalculate() {
            // read input data
            let invest_amount = document.getElementById('invest_amount').value;
            invest_amount = parseInt(invest_amount); // convert string to int
            let duration = document.getElementById('duration').value;
            duration = parseInt(duration);

            let year = 2024;
            let table = document.getElementById('output');
            for(i=0; i<duration; i++) {
                // generate dividend rate (5 - 10)
                let rate = Math.random() * 5 + 5;
                let profit = rate / 100 * invest_amount;
                let total = profit + invest_amount;

                let row_cell = document.createElement('tr');
                
                let col_cell = document.createElement('td');
                col_cell.textContent = year;
                row_cell.appendChild(col_cell);

                let col_cell2 = document.createElement('td');
                col_cell2.textContent = invest_amount.toLocaleString('en-us', {style: 'currency', currency:'USD'});
                row_cell.appendChild(col_cell2);

                let col_cell3 = document.createElement('td');
                col_cell3.textContent = rate.toLocaleString('en-us');
                row_cell.appendChild(col_cell3);

                let col_cell4 = document.createElement('td');
                col_cell4.textContent = profit.toLocaleString('en-us', {style: 'currency', currency:'USD'});
                row_cell.appendChild(col_cell4);

                let col_cell5 = document.createElement('td');
                col_cell5.textContent = total.toLocaleString('en-us', {style: 'currency', currency:'USD'});
                row_cell.appendChild(col_cell5);
                
                table.appendChild(row_cell);
                year++;
                invest_amount = invest_amount + profit;
            }
        }
    </script>
</body>
</html>