CompoundInterestCalc.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="author" content="Brandon Monroe">
    <title>Compound Interest</title>
    <script src="compoundInterest.js">
    </script>
    <style>
        .table{
            display: table;
        }
        .row{
            display: table-row;
        }
        .row > *{
            display: table-cell;
        }
        .table{
            border-spacing: 0 3px;
        }
        .row>first-child{
            text-align: right;
            padding-right: 10px;
        }
        table{
            text-align: center;
        }
        table,th,td{
            border: none;
        }
        th{
            background-color: midnightblue;
            color: white;
            padding: 10px;
        }
        td{
            background-color: mistyrose;
        }


    </style>
</head>
<body>
    <h3>Compound Interest Calculator</h3>
    <form class="table" id="input">
    <div class="row">
        <label for="deposit">Initial Deposit:</label>
        <input type="number" id="deposit" min="1" max="9999" step="1" required>
    </div>    
    <div class="row">
        <label for="rate">Annual Interest Rate:</label>
        <input type="number" id="rate" min="0" max="100" step=".1" required>
    </div>
    <div class="row">
        <label for="years">Years to Grow:</label>
        <input type="number" id="years" min="1" max="20" step="1" required>
    </div>
    
    </form>
    <br>

    <input type="button" form="input" value="Generate Compound Interest" onclick="generateTable(this.form);">
    <br><br>
    <div id="result"></div>
</body>
</html>