index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<!DOCTYPE html> <html> <head> <title>Fixed Deposit Calculator</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" /> </head> <body> <div class="container"> <h1 class="mt-4">Fixed Deposit Calculator</h1> <form id="fdCalculatorForm"> <div class="form-group"> <label for="principal">Principal Amount (INR):</label> <input type="number" class="form-control" id="principal" required /> </div> <div class="form-group"> <label for="interestRate">Interest Rate (%):</label> <input type="text" class="form-control" id="interestRate" required /> </div> <div class="form-group"> <label for="duration">Duration (Years):</label> <input type="number" class="form-control" id="duration" required /> </div> <button type="submit" class="btn btn-primary">Calculate</button> </form> <div id="result" class="mt-4"></div> </div> <script> document .getElementById("fdCalculatorForm") .addEventListener("submit", function (event) { event.preventDefault(); // Get user inputs const principal = parseFloat( document.getElementById("principal").value ); const interestRate = parseFloat( document.getElementById("interestRate").value ); const duration = parseFloat( document.getElementById("duration").value ); // Calculate interest const interest = (principal * interestRate * duration) / 100; // Calculate total amount const totalAmount = principal + interest; // Display result document.getElementById("result").innerHTML = ` <div class="alert alert-success"> Interest: ${interest.toFixed(2)} INR<br> Total Amount: ${totalAmount.toFixed(2)} INR </div> `; }); </script> </body> </html> |
As you can see we have three fields
where the user can enter the amount and time
in years and also we can enter the interest rate and then it will show the interest
amount you will get and the total amount.