Age Calculator Using HTML, CSS and JavaScript (Free Source Code)
Determining an exact age reliably is a valuable resource in site development, especially in services that differentiate between certain ages. I’m happy to give you a free source code for Age Calculator Using HTML, CSS, and JavaScript; it’s more efficient to use, and a simple yet effective way to calculate the age instantly. This code is very simple and can be modified to fit any project or construct.
GitHub Source: Age Calculator Source Code
Features
- Dynamic Dropdowns for Date Selection: Updates the day options depending on the selected month and year and also supports Leap year.
- Multiple Age Units: Shows the age in years, months, weeks, days, hours, minutes, and seconds.
- Automatic Default Dates: ‘Date of Birth’ and “Age-as-of” pre-fill with default and current age.
- Real-Time Input Validation and Calculation: Validates inputs for age and avoids the need to refresh the page in order to display the results.
- Responsive and User-Friendly Interface: Clean and simple to use with easy date picking and aesthetically pleasing styling.
- Easy to Customize: This application makes it easier to change the layout and style of the page and its functionality in order to suit the project.
- Compatibility: Integrated nicely with all current browsers as well as with the majority of Content Management Systems such as WordPress.
- Clean Code: The organized and well commented code permits the appropriate reading and feasible use.
Technologies Used
- HTML (Hypertext Markup Language)
- CSS (Cascading Style Sheets)
- JS (JavaScript)
Recommended for You
Video Tutorial
Steps to Build Age Calculator
- Create Project Folder: First of all, create the folder for the project files only.
- Create index.html with CSS and JS code: To use this in your project you have to write HTML, CSS, and JavaScript code in your project.
- Copy & Paste the Code Below: Use the code given below and modify it to your need.
Age Calculator Source Code
Here is the HTML code for your index.html file:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Age Calculator</title> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; background-color: #f4f4f9; color: #333; display: flex; justify-content: center; align-items: center; height: 100vh; font-weight: 600; } .panel { background: #fff; padding: 20px; border-radius: 10px; box-shadow: 4px 8px 50px rgba(0, 0, 0, 0.4); width: 100%; max-width: 600px; } h1 { text-align: center; margin-bottom: 20px; font-size: 24px; } form { display: grid; gap: 15px; } .form-group { display: flex; justify-content: space-between; align-items: center; } .form-group label { font-size: 14px; width: 30%; } .dob-fields, .age-at-fields { display: flex; justify-content: space-between; width: 100%; } .dob-fields select, .dob-fields input[type="number"], .age-at-fields select, .age-at-fields input[type="number"] { width: 28%; padding: 8px; font-size: 14px; border: 1px solid #ccc; border-radius: 5px; } input[type="submit"] { padding: 10px 20px; background: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-size: 18px; font-weight: 700; } input[type="submit"]:hover { background: #0056b3; } .result { margin-top: 20px; padding: 10px; background: #f1f4fd; border: 2px solid green; border-radius: 5px; color: green; width: 96%; height: 200px; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 16px; overflow-y: auto; } .result p { margin: 0; font-size: 16px; } .age-bold { font-weight: bold; color: #720340; } </style> <script> // Days in each month, index 0 is January, index 1 is February, etc. const daysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; // Function to update the number of days based on selected month and year function updateDays(selectId) { const selectElement = document.querySelector(`#${selectId}`); const month = parseInt(document.querySelector(`#${selectId.replace('-day', '-month')}`).value) - 1; // Get the selected month (0-indexed) const year = parseInt(document.querySelector(`#${selectId.replace('-day', '-year')}`).value); // Clear existing options selectElement.innerHTML = ''; // Get the correct number of days for the selected month let days = daysInMonth[month]; // February (index 1) in a leap year if (month === 1) { if ((year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)) { days = 29; // Leap year } } // Add day options dynamically for (let i = 1; i <= days; i++) { const option = document.createElement("option"); option.value = i; option.textContent = i; selectElement.appendChild(option); } } // Function to calculate the age and different time formats function calculateAge(event) { event.preventDefault(); // Get Date of Birth (DOB) and Age-at date values const dobMonth = parseInt(document.querySelector("#dob-month").value); const dobDay = parseInt(document.querySelector("#dob-day").value); const dobYear = parseInt(document.querySelector("#dob-year").value); const ageAtMonth = parseInt(document.querySelector("#ageAt-month").value); const ageAtDay = parseInt(document.querySelector("#ageAt-day").value); const ageAtYear = parseInt(document.querySelector("#ageAt-year").value); // Validate input if (isNaN(dobMonth) || isNaN(dobDay) || isNaN(dobYear) || isNaN(ageAtMonth) || isNaN(ageAtDay) || isNaN(ageAtYear)) { alert("Please enter valid dates."); return; } // Create Date objects for DOB and Age-at Date const dob = new Date(dobYear, dobMonth - 1, dobDay); // months are 0-indexed in JavaScript const ageAtDate = new Date(ageAtYear, ageAtMonth - 1, ageAtDay); // Calculate age let years = ageAtDate.getFullYear() - dob.getFullYear(); let months = ageAtDate.getMonth() - dob.getMonth(); let days = ageAtDate.getDate() - dob.getDate(); // Adjust if days or months are negative if (days < 0) { months--; days += new Date(ageAtDate.getFullYear(), ageAtDate.getMonth(), 0).getDate(); // Get last day of previous month } if (months < 0) { years--; months += 12; } // Calculate total months, weeks, and other units const totalDays = Math.floor((ageAtDate - dob) / (1000 * 60 * 60 * 24)); // Total days const totalMonths = Math.floor(totalDays / 30.44); // Average days per month const totalWeeks = Math.floor(totalDays / 7); // Total weeks const totalHours = totalDays * 24; // Total hours const totalMinutes = totalHours * 60; // Total minutes const totalSeconds = totalMinutes * 60; // Total seconds // Calculate age in months, weeks, and days separately const monthsAndDays = `${totalMonths} months, ${Math.floor((totalDays % 30.44) / 7)} week(s), and ${totalDays % 7} day(s)`; const weeksAndDays = `${totalWeeks} week(s) and ${totalDays % 7} day(s)`; // Display results document.querySelector("#result").innerHTML = ` <p class="age-bold">Age as of the selected date: ${years} years ${months} months ${days} days</p> <p><strong>Age in Months:</strong> ${monthsAndDays}</p> <p><strong>Age in Weeks:</strong> ${weeksAndDays}</p> <p><strong>Age in Days:</strong> ${totalDays} days</p> <p><strong>Age in Hours:</strong> ${totalHours} hours</p> <p><strong>Age in Minutes:</strong> ${totalMinutes} minutes</p> <p><strong>Age in Seconds:</strong> ${totalSeconds} seconds</p> `; } // Set default values for Date of Birth and current Age-at date window.onload = function() { // Set default Date of Birth (8 June 1981) document.querySelector("#dob-month").value = 6; document.querySelector("#dob-day").value = 8; document.querySelector("#dob-year").value = 1981; updateDays("dob-day"); // Update days for default month (June) // Set Age-as-of date to current date const currentDate = new Date(); document.querySelector("#ageAt-month").value = currentDate.getMonth() + 1; // 0-indexed month document.querySelector("#ageAt-day").value = currentDate.getDate(); document.querySelector("#ageAt-year").value = currentDate.getFullYear(); updateDays("ageAt-day"); // Update days for the current month }; </script> </head> <body> <div class="panel"> <h1>Age Calculator</h1> <form onsubmit="calculateAge(event)"> <div class="form-group"> <label for="dob-month">Date of Birth:</label> <div class="dob-fields"> <select id="dob-month" onchange="updateDays('dob-day')"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select id="dob-day"> <!-- Days will be populated here based on selected month --> </select> <input type="number" id="dob-year" placeholder="Year" min="1900" onchange="updateDays('dob-day')" /> </div> </div> <div class="form-group"> <label for="ageAt-month">Age as of:</label> <div class="age-at-fields"> <select id="ageAt-month" onchange="updateDays('ageAt-day')"> <option value="1">January</option> <option value="2">February</option> <option value="3">March</option> <option value="4">April</option> <option value="5">May</option> <option value="6">June</option> <option value="7">July</option> <option value="8">August</option> <option value="9">September</option> <option value="10">October</option> <option value="11">November</option> <option value="12">December</option> </select> <select id="ageAt-day"> <!-- Days will be populated here based on selected month --> </select> <input type="number" id="ageAt-year" placeholder="Year" min="1900" onchange="updateDays('ageAt-day')" /> </div> </div> <input type="submit" value="Calculate Age" /> </form> <div id="result" class="result"></div> </div> </body> </html>
Download Source Code
Get this fully working Age Calculator Using HTML CSS n JavaScript to use without any copyright issues. Follow the button below to download and use it in your projects.
Conclusion
We offer you this Age Calculator Using HTML, CSS, and JavaScript, an app that will be perfect for your website and applications. This source code helps save time or you direct your efforts to other features.
When using this code, it is kindly requested to link back to JV Source Codes website. Do not forget to subscribe to our recently created YouTube channel for more tutorials or leave a comment if you have any problems. I’ll be happy to help!