Design a Retirement Age Calculator in Tailwind CSS

Last Updated : 04 Mar, 2024

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.

af1

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>