Design a Retirement Age Calculator in Tailwind CSS
The Retirement Age Calculator is a web application designed to help users determine the number of years, months, and days until their desired retirement date.
Prerequisites
Approach
- Users can input their date of birth and desired retirement date.
- Upon clicking the “Calculate Retirement Age” button, the application calculates the number of years, months, and days until retirement.
- If any of the input fields are empty or contain invalid dates an error message is displayed prompting the user to fill in the all fields correctly.
Example: This example shows the implementation of the above-explained approach.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta name = "viewport" content=" width = device -width, initial-scale = 1 .0"> < title >The Retirement Age 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" > < div class = "flex justify-center items-center h-screen" > < 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">Retirement Age Calculator</ h1 > < div class = "mb-4" > < label for = "dob" class = "block text-gray-700" > Date of Birth:</ label > < input type = "date" id = "dob" name = "dob" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"> </ div > < div class = "mb-4" > < label for = "retirementDate" class = "block text-gray-700" > Desired Retirement Date:</ label > < input type = "date" id = "retirementDate" name = "retirementDate" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:border-blue-500"> </ div > < div class = "mb-8" > < button id = "calculateButton" class="w-full bg-blue-500 text-white rounded-md py-2 px-4 hover:bg-blue-600 focus:outline-none"> Calculate Retirement Age </ button > </ div > < div id = "retirementResult" class="text-lg font-semibold text-center"></ div > < div id = "errorMessage" class="text-red-500 text-sm mt-4 hidden">Please fill in all fields.</ div > </ div > </ div > < script > const calculateButton = document.getElementById('calculateButton'); calculateButton.addEventListener('click', () => { const dob = new Date(document.getElementById('dob').value); const retirementDate = new Date(document .getElementById('retirementDate').value); if (!dob || !retirementDate || isNaN(dob.getTime()) || isNaN(retirementDate.getTime())) { document.getElementById('errorMessage') .classList.remove('hidden'); return; } const yearsToRetirement = retirementDate.getFullYear() - dob.getFullYear(); const monthsToRetirement = retirementDate.getMonth() - dob.getMonth(); const daysToRetirement = retirementDate.getDate() - dob.getDate(); document.getElementById('retirementResult').innerHTML = `You have ${yearsToRetirement} years, ${monthsToRetirement} months, and ${daysToRetirement} days until retirement.`; document.getElementById('errorMessage') .classList.add('hidden'); }); </ script > </ body > </ html > |
Output:
Contact Us