Age Calculator Design using HTML CSS and JavaScript (original) (raw)

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:

Age Calculator

**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 `

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