The Compound Interest Calculator is a web application designed to calculate the future value of an investment based on principal amount, annual interest rate, and period. It provides users with a simple interface to input their investment details and receive an accurate calculation of their future investment value including the total interest earned.
Prerequisites
Approach
- The user inputs the principal amount, annual interest rate, and period in years.
- Upon clicking the “Calculate” button the application calculates the future value of the investment and the total interest earned.
- If any input field is empty a message pops up prompting the user to fill in all fields.
- The result is displayed with investment amount and total interest earned in rupees.
Example: This example shows the implementation of the above-explained appraoch.
HTML
<!DOCTYPE html> < html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=" width = device -width,
initial-scale = 1 .0">
< title >The Compound Interest Calculator</ title >
< link href =
rel = "stylesheet" >
</ head >
< body class="bg-gray-100 min-h-screen flex
justify-center items-center"> < div class="max-w-md w-full bg-white
p-8 rounded-lg shadow-lg border-2 border-green-500">
< h1 class="text-3xl font-bold text-center
mb-8">Compound Interest Calculator</ h1 >
< div class = "mb-4" >
< label for = "principal" class = "block text-gray-700" >
Principal Amount:</ label >
< input type = "number" id = "principal"
class="w-full border border-gray-300
rounded-md py-2 px-3 focus:outline-none
focus:border-blue-500"
placeholder = "Enter principal amount" >
</ div >
< div class = "mb-4" >
< label for = "rate" class = "block text-gray-700" >
Annual Interest Rate (%):</ label >
< input type = "number" id = "rate"
class="w-full border border-gray-300 rounded-md
py-2 px-3 focus:outline-none focus:border-blue-500"
placeholder = "Enter annual interest rate" >
</ div >
< div class = "mb-4" >
< label for = "time" class = "block text-gray-700" >
Time Period (Years):</ label >
< input type = "number" id = "time"
class="w-full border border-gray-300
rounded-md py-2 px-3
focus:outline-none focus:border-blue-500"
placeholder = "Enter time period in years" >
</ div >
< button id = "calculateBtn"
class="w-full bg-blue-500 text-white
rounded-md py-2 px-4
hover:bg-blue-600
focus:outline-none mb-4">
Calculate
</ button >
< div id = "result"
class = "text-lg font-semibold text-center" >
</ div >
</ div >
< script >
document.getElementById('calculateBtn').addEventListener('click',
function () {
const principal = parseFloat(document
.getElementById('principal').value);
const rate =
parseFloat(document.getElementById('rate').value);
const time =
parseFloat(document.getElementById('time').value);
if (!principal || !rate || !time) {
alert('Please fill in all fields.');
return;
}
const amount = principal * Math.pow((1 + rate / 100), time);
const interest = amount - principal;
const resultElement = document.getElementById('result');
resultElement.textContent =
`After ${time} years, your investment
will be worth ₹${amount.toFixed(2)} with a total interest of
₹${interest.toFixed(2)}.`;
});
</ script >
</ body >
</ html >
|
Output:
Recommended Articles