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 =
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:
Recommended Articles