Design a Compound Interest Calculator in Tailwind CSS
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 = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" 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:
Contact Us