index.html

<!DOCTYPE html>
<html>

<head>
    <title>Web App-Simple Interest Calculator</title>
    <link rel="stylesheet" href="style.css">


</head>

<body>

    <div class="maindiv">
        <h1>Simple Interest Calculator</h1>

        Amount<input type="number" id="principal"> <br />
        Interest Rate <input type="range" id="rate" min="1" max="20" step="0.25" value="10.25">
        <span id="rate_val">10.25%</span> <br />
        No of Years
        <select id="years">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
            <option value="9">9</option>
            <option value="10">10</option>
        </select><br />

        <button onclick="compute()">Compute Interest</button><span id="result"></span>
        <footer>
            &#169; This Calculator belongs to Hari
        </footer>
    </div>

    <script>
        function updateRate() {
            var rateval = document.getElementById("rate").value;
            document.getElementById("rate_val").innerText = rateval;
        }

    </script>

</body>

</html>