Introduction

.

.

.

Practical LearningPractical Learning: Creating the Application

  1. Start a text editor, such as Nodepad
  2. Type the following code in the document: 
    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Compound Interest</title>
    </head>
    <body>
        <h1>Compound Interest</h1>

        <form name="CompoundInterest" method="post">
            <table>
                <tr>
                    <td><label for="principal" style="font-weight: 600;">Principal:</label></td>
                    <td><input type="text" id="principal"
                               class="principal" style="width: 80px" /></td>
                </tr>
                <tr>
                    <td><label for="interestRate" style="font-weight: 600;">Interest Rate:</label></td>
                    <td><input type="text" id="interestRate" class="interestRate"
                               style="width: 60px" />%</td>
                </tr>
                <tr>
                    <td><label for="periods" style="font-weight: 600;">Periods:</label></td>
                    <td><input type="text" id="periods" class="periods" style="width: 80px" />
                        <select  class="frequency">
                            <option>Years</option>
                            <option>Months</option>
                            <option>Days</option>
                        </select></td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td><input type="button" value="Calculate"
                               class="calculate" style="width: 80px" /></td>
                </tr>
                <tr>
                    <td><label for="interestAmount" style="font-weight: 600;">Interest Amount:</label></td>
                    <td><input type="text" class="interestAmount"
                               style="width: 80px" />
                    </td>
                </tr>
                <tr>
                    <td><label for="futureValue" style="font-weight: 600;">Future Value:</label></td>
                    <td><input type="text" class="futureValue"
                               style="width: 80px" />
                    </td>
                </tr>
            </table>
        </form>

        <script>
            var princ     = document.querySelector('.principal');
            var iRate     = document.querySelector('.interestRate');
            var per       = document.querySelector('.periods');
            var iAmount   = document.querySelector('.interestAmount');
            var future    = document.querySelector('.futureValue');
            var frequency = document.querySelector('.frequency');
            var selected  = document.querySelector('select');
            var btnCalc   = document.querySelector('.calculate');

            var para = document.querySelector('p');
            btnCalc.addEventListener('click', function () {
                
                if (selected.value == 'Years') {
                    interest = princ.value * iRate.value * per.value / 100.00;
                }
                if (selected.value == 'Months') {
                    interest = princ.value * (iRate.value / 100.00) * (per.value / 12);
                }
                if (selected.value == 'Days') {
                    interest = princ.value * (iRate.value / 100.00) * (per.value / 360);
                }

                var total = Number(princ.value) + interest;
                
                future.value = total.toFixed(2);
                iAmount.value = interest.toFixed(2);
            });
        </script>
    </body>
</html>
  3. Save the file as ICompoundInterest.html in a folder (or directory) of your choice
  4. To execute, in the folder (or directory) where you saved the file, double-click the CompoundInterest.html

    Compound Interest

  5. Type the following values:
    Principal: 8650
    Interest Rate: 8.725
    Periods: 4

    Compound Interest

  6. Click the Calculate button:

    Compound Interest

  7. Change the values as follows:
    Principal: 18745  
    Interest Rate: 6.825 %
    Periods: 52 Months
  8. Click the Calculate button:

    Compound Interest

  9. Press T to close the window and return to your programming environment
Home Copyright © 2001-2026, FunctionX Monday 30 March 2026, 10:51 Home