Design a Age Calculator in Tailwind CSS

Last Updated : 29 Feb, 2024

This project implements an Age Calculator web application using HTML, CSS (Tailwind CSS), and JavaScript. Users can input their date of birth and current date and the application calculates their age in years, months, and days.

abbbbbbbbbbbbbbbbbbbbb

Prerequisites / Technologies Used

Approach / Functionalities

Users input their date of birth and current date.
Upon clicking the “Calculate” button the application calculates the age based on input dates.
If either the date of birth or current date input is empty an alert message pops up.
The application displays the calculated age in years, months and days.
The “Clear” button clears the input fields and calculated age.

Example: The HTML document creates an Age Calculator web app using Tailwind CSS. Users can input their Date of Birth and the current date to calculate their age.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
                                   initial-scale=1.0">
    <title>The 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 flex items-center 
             justify-center h-screen">
    <div class="border border-green-500 p-8 
                rounded-lg shadow-md" 
         style="border-color: green; background-color: white;">
        <h1 class="text-3xl font-semibold 
                   text-center mb-8 text-green-700">
              Age Calculator
          </h1>
        <div class="flex flex-col mb-4">
            <label for="inputDob" class="text-gray-700">
                  Enter your Date of Birth
              </label>
            <input id="inputDob" type="date"
                class="border border-gray-300 
                       rounded-md px-4 py-2 
                       focus:outline-none 
                       focus:border-blue-500">
        </div>
        <div class="flex flex-col mb-4">
            <label for="cdate" class="text-gray-700">
                  Current Date
              </label>
            <input id="cdate" type="date"
                class="border border-gray-300 
                       rounded-md px-4 py-2 focus:outline-none 
                       focus:border-blue-500">
        </div>
        <div class="flex justify-between">
            <button type="button" onclick="getDOB()"
                class="bg-blue-500 text-white 
                       font-semibold px-4 py-2 rounded">
                  Calculate
              </button>
            <button type="button" onclick="clearDates()"
                class="bg-gray-500 text-white 
                       font-semibold px-4 py-2 rounded">
                  Clear
              </button>
        </div>
        <div id="currentAge" class="text-center mt-4"></div>
    </div>
    <script>
        function getDOB() {
            let inputDob = 
                document.getElementById("inputDob").value;
            let currentDate = 
                document.getElementById("cdate").value;
            if (!inputDob || !currentDate) {
                alert("Please fill in both Date of Birth and Current Date.");
                return;
            }
            let dob = new Date(inputDob);
            let day = dob.getDate();
            let month = dob.getMonth();
            let year = dob.getFullYear();
            let now = new Date(currentDate);
            let yearDiff = now.getFullYear() - year;
            let monthDiff = now.getMonth() - month;
            let dateDiff = now.getDate() - day;
            if (yearDiff < 0) {
                document.getElementById("currentAge").innerHTML = 
                      "Invalid Date";
            } else {
                if (monthDiff <= 0 && dateDiff < 0) {
                    yearDiff--;
                    monthDiff = 12 + monthDiff;
                }
                if (dateDiff < 0) {
                    dateDiff = 30 + dateDiff;
                    monthDiff--;
                }
                document.getElementById("currentAge")
                    .innerHTML = 
                      `Your current Age is ${yearDiff} 
                        years ${monthDiff} months ${dateDiff} days`;
            }
        }
        function clearDates() {
            document.getElementById("inputDob").value = "";
            document.getElementById("cdate").value = "";
            document.getElementById("currentAge").innerHTML = "";
        }
    </script>
</body>
 
</html>