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…
