Age Calculator Design using HTML CSS and JavaScript

Last Updated : 23 May, 2025

In the Age Calculator, the user enters their date of birth using a date input field. The tool calculates and displays the exact age in years, months, and days from the current date (or a specified date). We'll design the layout using HTML and CSS, and add functionality using JavaScript. It will also show what percentage of the current year has passed since the user's last birthday — for example, 40% of the year completed.

Project Preview:

Note: If you want to create more Web Development Project, you can check out - Top 30+ Web Development Project.

Step-By-Step Guide to Create a Age Calculator

Create a calculator using HTML with a date input and a submit button.
Use CSS to style the calculator using classes and element selectors.
Use JavaScript to get the entered birth date and today’s date.
Calculate the age in years, months, and days.
Show the calculated age or an "Invalid Date" message on the screen.
Set the input field’s default value to today’s date.
Format the date to YYYY-MM-DD and add leading zeros if needed.

Example: This example describes the basic implementation of the Age Calculator using HTML, CSS, and JavaScript.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Age Calculator</title>
    <link rel="stylesheet" 
          href="style.css" />
</head>
<body>
    <div class="card">
        <header>
            <h1>AGE CALCULATOR</h1>
        </header>
        <div>
            <label>Enter your Date of Birth</label><br>
            <input id="inputDob" 
                   type="date" 
                   value="2000-01-01" />
        </div>
        <br />
        <!-- Take the date from which age is to be calculated -->
        <div>
            <label>Current Date</label><br>
            <input id="cdate"
                   type="date" 
                   value="" />
        </div>
        <br />
        <button type="button" 
                onclick="getDOB()">
            Calculate
        </button>
        <br />
        <div id="currentAge"></div>
        <script src="script.js"></script>
    </div>
</body>
</html>

style.css

/* Basic styling for the body */
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
/* Card styling */
.card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}
header h1 {
    margin-bottom: 20px;
    color: #333;
}
label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
}

input[type="date"] {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
}
button {
    background-color: #007bff;
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
}
#currentAge {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}

script.js

function getDOB() {
    // Get the values from the input fields
    const dobInput = document.getElementById('inputDob').value;
    const currentDateInput = document.getElementById('cdate').value;
    // Validate if both dates are provided
    if (!dobInput || !currentDateInput) {
        alert('Please enter both Date of Birth and Current Date.');
        return;
    }
    // Convert input values to Date objects
    const dob = new Date(dobInput);
    const currentDate = new Date(currentDateInput);
    // Calculate age
    let age = currentDate.getFullYear() - dob.getFullYear();
    const monthDifference = currentDate.getMonth() - dob.getMonth();
    // Adjust age if the birthday hasn't occurred yet this year
    if (monthDifference < 0 || (monthDifference === 0 && currentDate.getDate() < dob.getDate())) {
        age--;
    }
    // Display the result
    document.getElementById('currentAge').textContent = `Your age is ${age} years.`;
}

Output:

Age Calculator Design using HTML CSS and JavaScript

Design a Tip Calculator using HTML, CSS and JavaScript

jatinsharmatu54

Improve

Article Tags :

Age Calculator Design using HTML CSS and JavaScript

Project Preview:

Step-By-Step Guide to Create a Age Calculator

Similar Reads

Thank You!

What kind of Experience do you want to share?