āļ§āļīāļāļĩāļāļĩāđāļāļąāļāļāļąāļāļāļēāđāļāđāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāđāļāđāļ§āđāļāđāļāļāļāļĨāļīāđāļāļāļąāļ: āļāļđāđāļĄāļ·āļāļāļĩāđāļŠāļĄāļāļđāļĢāļāđāđāļĨāļ°āļāļēāļĢāđāļāđāļāļēāļ

Anh QuÃĒn
Creator

āļŠāļēāļĢāļāļąāļ
- āļāļģāļāļ§āļēāļĄāđāļāđāļēāđāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ: āļāļ·āđāļāļāļēāļ
- āļŠāļđāļāļĢāļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļāļŦāļĨāļąāļāļŠāļģāļŦāļĢāļąāļāļāļąāļāļāļąāļāļāļē
- āļāļēāļĢāđāļāđāđāļāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāđāļāđāļāļēāļāļāđāļēāļĒāđāļ§āđāļāđāļāļāļāļĨāļīāđāļāļāļąāļ
- āļāļļāļāļĨāļąāļāļĐāļāļ°āđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļąāđāļāļŠāļđāļāļŠāļģāļŦāļĢāļąāļāļāļąāļāļāļąāļāļāļē
- āđāļāļ§āļāļēāļāļāļāļīāļāļąāļāļīāļāļĩāđāļāļĩāļāļĩāđāļŠāļļāļāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāđāļāđāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ
- āļāļēāļĢāļĢāļ§āļĄāđāļĨāļāļĢāļēāļĢāļĩāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļāļāļāļļāļāļāļĨāļāļĩāđāļŠāļēāļĄ
- āļāļāļŠāļāļāļāļēāļĢāđāļāđāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļāļāļāļļāļ
- āļāļąāļ§āļāļĒāđāļēāļāļāļēāļĢāđāļāđāđāļāļĢāļ·āđāļāļāļāļģāļāļ§āļāļāļēāļĒāļļāļāļĢāļīāļ
- āļŠāļĢāļļāļ: āļāļēāļĢāļŠāļĢāđāļēāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāļāļĩāļāļĩāđāļŠāļļāļāļŠāļģāļŦāļĢāļąāļāđāļāļāļāļĨāļīāđāļāļāļąāļāļāļāļāļāļļāļ
- āļāļĢāļąāļāļĒāļēāļāļĢāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļąāļāļāļēāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ
āđāļāļ āļđāļĄāļīāļāļąāļĻāļāđāļāļąāļāļāļ§āđāļēāļāđāļŦāļāđāļāļāļāđāļ§āđāļāđāļāļāļāļĨāļīāđāļāļāļąāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāđāļāđāļāđāļāļĢāļ·āđāļāļāļĄāļ·āļāļŠāļģāļāļąāļāļāļĩāđāđāļāļ·āđāļāļĄāđāļĒāļāļāļĢāļ°āļŠāļāļāļēāļĢāļāđāļāļđāđāđāļāđāļāđāļ§āļĒāļāļąāļāļāđāļāļąāđāļāļāļēāļĢāđāļāđāļāļēāļāļāļĢāļīāļāđāļĄāđāļ§āđāļēāļāļļāļāļāļ°āļāļąāļāļāļēāđāļāļāļāļĨāļīāđāļāļāļąāļāļāļēāļĢāļāļđāđāļĨāļŠāļļāļāļ āļēāļāđāļāļāļāļāļĢāđāļĄāļāļēāļĢāļĨāļāļāļ°āđāļāļĩāļĒāļāļŦāļĢāļ·āļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļ§āļąāļāđāļāļīāļāļāļĩāđāļāļģāļŦāļāļāđāļāļāļāļēāļĢāļāļģāļāļ§āļēāļĄāđāļāđāļēāđāļāļ§āļīāļāļĩāļāļēāļĢāđāļāđāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāļĄāļĩāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļāđāļāđāļāļāļąāļāļĐāļ°āļāļĩāđāļĄāļĩāļāđāļēāļŠāļģāļŦāļĢāļąāļāļāļąāļāļāļąāļāļāļēāļāļļāļāļāļāļāļđāđāļĄāļ·āļāļāļĩāđāļāļĢāļāļāļāļĨāļļāļĄāļāļĩāđāļŠāļģāļĢāļ§āļāļāļļāļāļāļĒāđāļēāļāļāļąāđāļāđāļāđāļŠāļđāļāļĢāļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļāļāļąāđāļāļāļ·āđāļāļāļēāļāđāļāļāļāļāļķāļāđāļāļāļāļīāļāļāļēāļĢāđāļāđāļāļēāļāļāļąāđāļāļŠāļđāļāđāļāļ·āđāļāđāļŦāđāļāļļāļāļĄāļĩāļāļ§āļēāļĄāļĢāļđāđāđāļāļāļēāļĢāļŠāļĢāđāļēāļāđāļ§āđāļāđāļāļāļāļĨāļīāđāļāļāļąāļāļāļēāļĒāļļāļāļĩāđāļāļģāļŦāļāļāđāļāļāļāļāļāļāļļāļāđāļāļ
āļāļģāļāļ§āļēāļĄāđāļāđāļēāđāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ: āļāļ·āđāļāļāļēāļ
āđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāđāļāđāļāđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāļīāļāļīāļāļāļĨāļāļĩāđāļāļģāļāļ§āļāļāļēāļĒāļļāļāļĩāđāđāļāđāļāļāļāļāļāļāļāļļāļāļāļĨāļŦāļĢāļ·āļāđāļ§āļĨāļēāļāļĩāđāļāđāļēāļāđāļāļĢāļ°āļŦāļ§āđāļēāļāļŠāļāļāļ§āļąāļāđāļāļāļāļ°āļāļĩāđāđāļāļ§āļāļīāļāļāļđāđāļŦāļĄāļ·āļāļāļāļĢāļāđāļāļāļĢāļāļĄāļē - āļāļģāļāļ§āļāļāļ§āļēāļĄāđāļāļāļāđāļēāļāļĢāļ°āļŦāļ§āđāļēāļāļ§āļąāļāļāļĩāđāđāļāļ§āļąāļāļāļĩāđāđāļĨāļ°āļ§āļąāļāđāļāļ·āļāļāļāļĩāđāļāļīāļ - āļāļēāļĢāđāļāđāļāļēāļāļāļđāđāļāļąāļāļāļĩāđāļāđāļāļāđāļŦāđāļāļ§āļēāļĄāļŠāļāđāļāļāļąāļāļĢāļēāļĒāļĨāļ°āđāļāļĩāļĒāļāļĄāļēāļāļĄāļēāļĒāđāļāļ·āđāļāđāļŦāđāđāļāđāđāļāļ§āđāļēāļĄāļĩāļāļ§āļēāļĄāđāļĄāđāļāļĒāļģāđāļĨāļ°āļāļ§āļēāļĄāļāļķāļāļāļāđāļāļāļāļāļāļđāđāđāļāđ
āļāļģāđāļĄāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļķāļāļĄāļĩāļāļ§āļēāļĄāļŠāļģāļāļąāļāđāļāđāļ§āđāļāđāļāļāļāļĨāļīāđāļāļāļąāļāļāļĩāđāļāļąāļāļŠāļĄāļąāļĒ
āđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļĄāļĩāļāļļāļāļāļĢāļ°āļŠāļāļāđāđāļāļāļēāļāļāļāļīāļāļąāļāļīāļĄāļēāļāļĄāļēāļĒāđāļāļŦāļĨāļēāļĒ āđ āđāļāđāļĄāļ:
- āļĢāļ°āļāļāļāļēāļĢāļĨāļāļāļ°āđāļāļĩāļĒāļāļāļđāđāđāļāđ: āļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļŠāļīāļāļāļīāđāļāļēāļĒāļļāļŠāļģāļŦāļĢāļąāļāļāļĢāļīāļāļēāļĢ
- āđāļāļāļāļĨāļīāđāļāļāļąāļāļāļēāļĢāļāļđāđāļĨāļŠāļļāļāļ āļēāļ: āļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļāļāļĩāđāđāļĄāđāļāļĒāļģāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļĢāļ°āđāļĄāļīāļāļāļēāļāļāļēāļĢāđāļāļāļĒāđ
- āđāļāļĨāļāļāļāļĢāđāļĄāļāļĢāļąāļāļĒāļēāļāļĢāļĄāļāļļāļĐāļĒāđ: āļāļēāļĢāļāļģāļāļ§āļāļĢāļ°āļĒāļ°āđāļ§āļĨāļēāļāļēāļĢāļāđāļēāļāļāļēāļāļŦāļĢāļ·āļāļāļļāļāļŠāļĄāļāļąāļāļīāļāļēāļĢāđāļāļĐāļĩāļĒāļāļāļēāļĒāļļ
- āđāļ§āđāļāđāļāļāđāļāļēāļĢāļĻāļķāļāļĐāļē: āļāļēāļĢāļāļģāļŦāļāļāļāļļāļāļŠāļĄāļāļąāļāļīāļāļēāļĢāļĢāļąāļāđāļāđāļēāđāļĢāļĩāļĒāļāļāļāļāđāļĢāļāđāļĢāļĩāļĒāļ
- āđāļāļāļāļĨāļīāđāļāļāļąāđāļāļāļ§āļēāļĄāļāļąāļāđāļāļīāļ: āļāļēāļĢāļāļĢāļāļāđāļāļ·āđāļāļŦāļēāļāļĩāđāđāļŦāļĄāļēāļ°āļŠāļĄāļāļąāļāļāļēāļĒāļļ
- āļāļĢāļīāļāļēāļĢāļāļēāļāļāļēāļĢāđāļāļīāļ: āļāļēāļĢāļ§āļēāļāđāļāļāļāļēāļāļāļēāļĢāđāļāļīāļāļāļēāļĄāļāļēāļĒāļļāđāļĨāļ°āļāļēāļĢāļāļģāļāļ§āļāļāļēāļĢāļāļĢāļ°āļāļąāļāļ āļąāļĒ
āļāļāļāđāļŦāļāļ·āļāļāļēāļāļāļēāļĢāđāļāđāļāļēāļāļāļĩāđāđāļāļāļēāļ°āđāļāļēāļ°āļāļāđāļŦāļĨāđāļēāļāļĩāđāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļāļāđāļĨāļāđāļāļĩāđāđāļāđāļĢāļąāļāļāļēāļĢāļāļĢāļąāļāļāļĢāļļāļāļāļĒāđāļēāļāļāļĩāļāđāļ§āļĒāđāļāļīāđāļĄāļāļĢāļ°āļŠāļāļāļēāļĢāļāđāļāļđāđāđāļāđāđāļāļĒāļāļēāļĢāļāļģāļāļąāļāļāļēāļĢāļāļģāļāļ§āļāļāđāļ§āļĒāļāļāđāļāļāđāļĨāļ°āļĨāļāļĢāļ°āļĒāļ°āļāļāļāļāđāļāļāļīāļāļāļĨāļēāļāđāļ§āđāļāđāļāļāļāļĨāļīāđāļāļāļąāļāļāļĩāđāļāļąāļāļŠāļĄāļąāļĒāļāļąāļāļĨāļģāļāļąāļāļāļ§āļēāļĄāļŠāļģāļāļąāļāļāļāļāļāļļāļāļŠāļĄāļāļąāļāļīāļāļ§āļēāļĄāļŠāļ°āļāļ§āļāļŠāļāļēāļĒāļāļąāļāļāļĨāđāļēāļ§āļĄāļēāļāļāļķāđāļāđāļāļ·āđāļāļĢāļąāļāļĐāļēāļāļ§āļēāļĄāđāļāđāđāļāļĢāļĩāļĒāļāđāļāļāļēāļĢāđāļāđāļāļāļąāļ
āļāļĢāļ°āđāļ āļāļāļāļāđāļāļĢāļ·āđāļāļāļāļģāļāļ§āļāļāļēāļĒāļļāļāļąāļāļāļąāļāļāļēāļŠāļēāļĄāļēāļĢāļāļāļģāđāļāđāļāđāđāļāđ
āđāļāļāļāļĨāļīāđāļāļāļąāļāļāļĩāđāđāļāļāļāđāļēāļāļāļąāļāļāđāļāļāļāļēāļĢāļ§āļīāļāļĩāļāļēāļĢāļāļĩāđāđāļāļāļāđāļēāļāļāļąāļāđāļāļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļ:
- āđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļĄāļēāļāļĢāļāļēāļ: āļāļģāļāļ§āļāļāļĩāđāļāļ·āļāļāđāļĨāļ°āļ§āļąāļāļāļąāļāļāļąāđāļāđāļāđāļ§āļąāļāđāļāļ·āļāļāļāļĩāđāļāļīāļāļāļāļāļķāļāļ§āļąāļāļāļĩāđāļāļąāļāļāļļāļāļąāļ
- āđāļāļĢāļ·āđāļāļāļāļģāļāļ§āļāļāļ§āļēāļĄāđāļāļāļāđāļēāļāļāļāļāļāļēāļĒāļļ: āļ§āļąāļāđāļ§āļĨāļēāļāļĩāđāļāđāļēāļāđāļāļĢāļ°āļŦāļ§āđāļēāļāļŠāļāļāļ§āļąāļāđāļ āđ
- āļ§āļąāļāđāļāļīāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļ: āļāļģāļāļēāļāļĒāđāļāļāļŦāļĨāļąāļāļāļēāļāļāļēāļĒāļļāđāļāļ·āđāļāļāļģāļŦāļāļāļāļĩāđāļāļīāļ
- āđāļāļĢāļ·āđāļāļāļāļģāļāļ§āļāļāļēāļĒāļļāļ§āļąāļāļāļĩāđāđāļāļāļāļēāļāļ: āđāļāļĢāļāļāļēāļĢāļāļēāļĒāļļāđāļāļ§āļąāļāļāļĩāđāđāļāļāļāļēāļāļāļāļĩāđāđāļāļāļēāļ°āđāļāļēāļ°āļāļ
- āđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĻāļāļīāļĒāļĄ: āđāļŠāļāļāļāļēāļĒāļļāđāļāđāļāļāļģāļāļ§āļāļāļĻāļāļīāļĒāļĄāļĄāļēāļāļāļ§āđāļēāļāļĩ/āđāļāļ·āļāļ/āļ§āļąāļ
- āđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāđāļāđāļāļāļ: āļāļąāļāļāļĩāļŠāļģāļŦāļĢāļąāļāļāļĩāļāļĢāļ°āđāļāļāđāļĨāļ°āļāļ§āļēāļĄāļĒāļēāļ§āđāļāļ·āļāļāļāļĩāđāđāļāļāļāđāļēāļāļāļąāļāļŠāļģāļŦāļĢāļąāļāļāļ§āļēāļĄāđāļĄāđāļāļĒāļģ
āļŠāļđāļāļĢāļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļāļŦāļĨāļąāļāļŠāļģāļŦāļĢāļąāļāļāļąāļāļāļąāļāļāļē
āļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļāļāļąāđāļāļāļ·āđāļāļāļēāļāđāļ JavaScript
āļ§āļīāļāļĩāļāļēāļĢāļāļ·āđāļāļāļēāļāđāļāļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļāđāļāļĩāđāļĒāļ§āļāđāļāļāļāļąāļāļāļēāļĢāļāļģāļŦāļāļāļāļ§āļēāļĄāđāļāļāļāđāļēāļāļĢāļ°āļŦāļ§āđāļēāļāļŠāļāļāļ§āļąāļāļāļĩāđāļāļ·āļāļāļēāļĢāđāļāđāđāļāļĢāļ·āđāļāļāļāļģāļāļ§āļāļāļēāļĒāļļ JavaScript āļāļĒāđāļēāļāļāđāļēāļĒ:
function calculateAge(birthDate) {
const today = new Date();
const birth = new Date(birthDate);
let yearsDiff = today.getFullYear() - birth.getFullYear();
let monthsDiff = today.getMonth() - birth.getMonth();
let daysDiff = today.getDate() - birth.getDate();
// Adjust for negative months or days
if (daysDiff < 0) {
monthsDiff--;
// Get days in previous month
const previousMonth = new Date(today.getFullYear(), today.getMonth(), 0);
daysDiff += previousMonth.getDate();
}
if (monthsDiff < 0) {
yearsDiff--;
monthsDiff += 12;
}
return {
years: yearsDiff,
months: monthsDiff,
days: daysDiff
};
}
āļāļąāļāļāđāļāļąāđāļāļāļĩāđāļāļąāļāļāļēāļĢāļāļąāļāļāļēāļĢāļāļģāļāļ§āļāļāļąāđāļāļāļ·āđāļāļāļēāļāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļŠāļ·āļāļāđāļ "āļāļąāļāļāļēāļĒāļļāđāļāđāļēāđāļŦāļĢāđ" āđāļāđāļāļąāļāļāļąāļāļāļēāļāļ§āļĢāļāļĢāļēāļāļ§āđāļēāļāļĢāļāļĩāļāļāļ - āđāļāđāļāļāļēāļĢāļāđāļēāļ§āļāļĢāļ°āđāļāļāļāļĩāđāļĨāļ°āļāļ§āļēāļĄāļĒāļēāļ§āđāļāļ·āļāļāļāļĩāđāđāļāļāļāđāļēāļāļāļąāļ - āļāđāļāļāļāļēāļĢāļāļēāļĢāļāļīāļāļēāļĢāļāļēāđāļāļīāđāļĄāđāļāļīāļĄāļŠāļģāļŦāļĢāļąāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāđāļāđāļāļāļ
āļāļēāļĢāļāļąāļāļāļĩāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļĢāļ°āđāļāļāļāļĩāđāļĨāļ°āđāļāļ·āļāļāļāļĩāđāļŦāļĨāļēāļāļŦāļĨāļēāļĒ
āļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļāļāļĩāđāđāļĄāđāļāļĒāļģāđāļāļĒāđāļāļāļēāļ°āļāļĒāđāļēāļāļĒāļīāđāļāđāļāđāļāļāļāļĨāļīāđāļāļāļąāļāļāļĩāđāļĄāļĩāļāļ§āļēāļĄāđāļĄāđāļāļĒāļģ (āđāļāđāļāļāļēāļĢāļāļđāđāļĨāļŠāļļāļāļ āļēāļāļŦāļĢāļ·āļāļāļāļāļāđāđāļ§āļĢāđāļāļēāļāļāļāļŦāļĄāļēāļĒ) āļāļēāļĢāļāļąāļāļāļĩāļŠāļģāļŦāļĢāļąāļāļāļĩāļāļĩāđāļāđāļēāļ§āļāļĢāļ°āđāļāļāđāļāđāļāļŠāļīāđāļāļŠāļģāļāļąāļ:
function isLeapYear(year) {
return (year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0);
}
function getDaysInMonth(year, month) {
// Month is 0-indexed in JavaScript Date
return new Date(year, month + 1, 0).getDate();
}
āļāļ§āļēāļĄāđāļāļāļāđāļēāļāļāļāļāļāļēāļĒāļļāļĢāļ°āļŦāļ§āđāļēāļāļŠāļāļāļ§āļąāļāļāļĩāđāđāļāļāļēāļ°āđāļāļēāļ°āļāļ
āļŠāļģāļŦāļĢāļąāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļĩāđāđāļāļāļāđāļēāļāļāļēāļĒāļļāļāļĩāđāļāļģāļāļēāļāļāļąāļāļŠāļāļāļ§āļąāļāđāļ āđ :
function calculateDateDifference(startDate, endDate) {
const start = new Date(startDate);
const end = new Date(endDate);
if (end < start) {
// Swap dates if end is before start
[start, end] = [end, start];
}
let years = end.getFullYear() - start.getFullYear();
let months = end.getMonth() - start.getMonth();
let days = end.getDate() - start.getDate();
// Adjust for negative values
if (days < 0) {
months--;
days += getDaysInMonth(end.getFullYear(), end.getMonth() - 1);
}
if (months < 0) {
years--;
months += 12;
}
return { years, months, days };
}
āļāļēāļĢāđāļāđāđāļāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāđāļāđāļāļēāļāļāđāļēāļĒāđāļ§āđāļāđāļāļāļāļĨāļīāđāļāļāļąāļ

āđāļāļĢāļāļŠāļĢāđāļēāļ HTML āļŠāļģāļŦāļĢāļąāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ
āļĢāļēāļāļāļēāļāļāļāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļāļāđāļĨāļāđāđāļ āđ āđāļĢāļīāđāļĄāļāđāļāļāđāļ§āļĒāđāļāļĢāļāļŠāļĢāđāļēāļ HTML āļāļĩāđāđāļāđāļēāļāļķāļāđāļāđāļāđāļēāļĒāđāļĨāļ°āđāļāđāļāļēāļāļāđāļēāļĒ:
<div class="age-calculator-container">
<h2>Age Calculator</h2>
<div class="input-section">
<div class="date-input">
<label for="birth-date">Date of Birth:</label>
<input type="date" id="birth-date" name="birth-date">
</div>
<div class="date-input optional">
<label for="calculation-date">Calculate Age on Date (optional):</label>
<input type="date" id="calculation-date" name="calculation-date">
</div>
<button id="calculate-btn">Calculate Age</button>
</div>
<div class="results-section">
<div id="age-result"></div>
<div id="next-birthday"></div>
</div>
</div>
āđāļāļĢāļāļŠāļĢāđāļēāļāļāļĩāđāđāļŦāđāļĢāļēāļāļāļēāļāļŠāļģāļŦāļĢāļąāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļ§āļąāļāđāļāļīāļāļāļĩāđāļāđāļ§āļĒāđāļŦāđāļāļđāđāđāļāđāļŠāļēāļĄāļēāļĢāļāļāđāļāļāļ§āļąāļāđāļāļ·āļāļāļāļĩāđāļāļīāļāđāļĨāļ°āļĢāļ°āļāļļāļ§āļąāļāļāļĩāđāļāđāļēāļāļāļīāļāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļ
āļāļąāļāđāļāđāļāđāļāļĢāļ·āđāļāļāļāļģāļāļ§āļāļāļēāļĒāļļāļāļāļāļāļļāļāđāļāļ·āđāļāļāļĢāļ°āļŠāļāļāļēāļĢāļāđāļāļēāļĢāđāļāđāļāļēāļāļāļĩāđāļāļĩāļāļķāđāļ
āļāļēāļĢāļŠāļĢāđāļēāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļāļāļŠāļāļāļāļāđāļāļāđāļāđāļāļēāļĢāđāļāđāļāļēāļ CSS āļāļĩāđāļĢāļāļāļāļāļ:
.age-calculator-container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.input-section {
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.date-input {
display: flex;
flex-direction: column;
gap: 8px;
}
input[type="date"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
button#calculate-btn {
padding: 12px 16px;
background-color: #4285f4;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.2s;
}
button#calculate-btn:hover {
background-color: #3367d6;
}
.results-section {
margin-top: 24px;
padding: 16px;
background-color: #f9f9f9;
border-radius: 4px;
}
/* Responsive adjustments */
@media (max-width: 480px) {
.age-calculator-container {
padding: 15px;
}
input[type="date"] {
padding: 8px;
}
}
āļĢāļđāļāđāļāļāđāļŦāļĨāđāļēāļāļĩāđāļāļģāđāļŦāđāļĄāļąāđāļāđāļāđāļāđāļ§āđāļēāđāļāļāļāļĨāļīāđāļāļāļąāļāđāļ§āđāļāļāļēāļĒāļļāļāļāļāļāļļāļāļĒāļąāļāļāļāđāļāđāļāļēāļāļāđāļēāļĒāđāļĨāļ°āđāļāđāļēāļāļķāļāđāļāđāđāļāļāļāļēāļāļāļļāļāļāļĢāļāđāļāļĩāđāđāļāļāļāđāļēāļāļāļąāļāļāļķāđāļāļāļāļāļŠāļāļāļāļāļ§āļēāļĄāļāđāļāļāļāļēāļĢāļāļāļāļāļđāđāđāļāđāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļĄāļ·āļāļāļ·āļ
āļāļēāļĢāđāļāđāļāļēāļ JavaScript āļŠāļģāļŦāļĢāļąāļāļāļąāļāļāđāļāļąāđāļāđāļāđāļĄāļĢāļđāļāđāļāļ

JavaScript āļāļĩāđāļŠāļĄāļāļđāļĢāļāđāļŠāļģāļŦāļĢāļąāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāļāļģāļŦāļāļāđāļāļāļĢāļ§āļĄāļāļąāļāļāđāļāļąāđāļāļāļēāļĢāļāļģāļāļ§āļāļāđāļāļāļŦāļāđāļēāļāļāļāđāļĢāļēāļāļąāļāļāļąāļ§āļāļąāļāļāļēāļĢāđāļŦāļāļļāļāļēāļĢāļāđ:
document.addEventListener('DOMContentLoaded', () => {
const birthDateInput = document.getElementById('birth-date');
const calculationDateInput = document.getElementById('calculation-date');
const calculateBtn = document.getElementById('calculate-btn');
const ageResult = document.getElementById('age-result');
const nextBirthdayResult = document.getElementById('next-birthday');
// Set default max date to today
birthDateInput.max = new Date().toISOString().split('T')[0];
calculateBtn.addEventListener('click', () => {
if (!birthDateInput.value) {
ageResult.innerHTML = '<p class="error">Please enter a date of birth.</p>';
return;
}
const birthDate = new Date(birthDateInput.value);
let referenceDate = new Date();
if (calculationDateInput.value) {
referenceDate = new Date(calculationDateInput.value);
}
// Calculate age
const age = calculatePreciseAge(birthDate, referenceDate);
// Display result
ageResult.innerHTML = `
<h3>Age Result:</h3>
<p class="age-display">${age.years} years, ${age.months} months, and ${age.days} days</p>
<p class="age-in-days">Total: ${age.totalDays} days</p>
`;
// Calculate and display next birthday
const nextBirthday = calculateNextBirthday(birthDate, referenceDate);
nextBirthdayResult.innerHTML = `
<h3>Next Birthday:</h3>
<p>Your next birthday is in ${nextBirthday.months} months and ${nextBirthday.days} days.</p>
`;
});
function calculatePreciseAge(birthDate, currentDate) {
let years = currentDate.getFullYear() - birthDate.getFullYear();
let months = currentDate.getMonth() - birthDate.getMonth();
let days = currentDate.getDate() - birthDate.getDate();
let totalDays = Math.floor((currentDate - birthDate) / (1000 * 60 * 60 * 24));
// Adjust for negative days
if (days < 0) {
months--;
// Get days in the previous month
const prevMonthDate = new Date(currentDate.getFullYear(), currentDate.getMonth(), 0);
days += prevMonthDate.getDate();
}
// Adjust for negative months
if (months < 0) {
years--;
months += 12;
}
return { years, months, days, totalDays };
}
function calculateNextBirthday(birthDate, currentDate) {
const nextBirthday = new Date(currentDate.getFullYear(), birthDate.getMonth(), birthDate.getDate());
// If birthday has passed this year, calculate for next year
if (nextBirthday < currentDate) {
nextBirthday.setFullYear(nextBirthday.getFullYear() + 1);
}
const diffTime = nextBirthday - currentDate;
const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
const months = Math.floor(diffDays / 30);
const days = diffDays % 30;
return { months, days };
}
});
āļāļēāļĢāđāļāđāļāļēāļāļāļĩāđāļŠāļĢāđāļēāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāļāļĢāļāļāļāļĨāļļāļĄāļāļķāđāļāđāļĄāđāđāļāļĩāļĒāļ āđāļāđāļāļāļāļāļđāđāđāļāđāļ§āđāļē "āļāļąāļāļāļēāļĒāļļāđāļāđāļēāđāļŦāļĢāđ" āđāļāđāļĒāļąāļāđāļŦāđāļāđāļāļĄāļđāļĨāđāļāļīāđāļĄāđāļāļīāļĄāđāļāļĩāđāļĒāļ§āļāļąāļāļ§āļąāļāđāļāļīāļāļāļĢāļąāđāļāļāđāļāđāļāļāļāļāļāļ§āļāđāļāļē
āļāļļāļāļĨāļąāļāļĐāļāļ°āđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļąāđāļāļŠāļđāļāļŠāļģāļŦāļĢāļąāļāļāļąāļāļāļąāļāļāļē
āļāļēāļĢāđāļāđāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļāļēāļĒāļļāđāļāļĢāļđāļāđāļāļ

āļāļĢāļāļĩāļāļēāļĢāđāļāđāļāļēāļāļāļąāđāļ§āđāļāļŦāļāļķāđāļāļāļĢāļāļĩāļŠāļģāļŦāļĢāļąāļāļāļąāļāļāđāļāļąāđāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļ·āļāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļāļēāļĒāļļāļāļđāđāđāļāđāđāļāļĢāļđāļāđāļāļāļāļēāļĢāļĨāļāļāļ°āđāļāļĩāļĒāļ:
function validateMinimumAge(birthDateString, minimumAge) {
const birthDate = new Date(birthDateString);
const today = new Date();
// Calculate age
let age = today.getFullYear() - birthDate.getFullYear();
const monthDifference = today.getMonth() - birthDate.getMonth();
// Adjust age if birthday hasn't occurred yet this year
if (monthDifference < 0 || (monthDifference === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
return age >= minimumAge;
}
// Example usage in a form
const registrationForm = document.getElementById('registration-form');
registrationForm.addEventListener('submit', (e) => {
const birthDate = document.getElementById('birth-date').value;
if (!validateMinimumAge(birthDate, 18)) {
e.preventDefault();
alert('You must be at least 18 years old to register.');
}
});
āļāļēāļĢāļŠāļĢāđāļēāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāļĢāļąāļāļĢāļđāđāļāļķāļāđāļ§āļĨāļēāđāļāļ
āļŠāļģāļŦāļĢāļąāļāđāļāļāļāļĨāļīāđāļāļāļąāļāļāļĩāđāļĄāļĩāļāļđāđāđāļāđāļāļąāđāļ§āđāļĨāļāļāļēāļĢāļāļąāļāļāļĩāļŠāļģāļŦāļĢāļąāļāđāļāļāđāļ§āļĨāļēāđāļāđāļāļŠāļīāđāļāļŠāļģāļāļąāļ:
function calculateAgeWithTimeZone(birthDateString, timeZone) {
// Get current date in specified time zone
const options = { timeZone, year: 'numeric', month: 'numeric', day: 'numeric' };
const formatter = new Intl.DateTimeFormat('en-US', options);
const currentDateParts = formatter.formatToParts(new Date());
// Extract year, month, day from formatted parts
const currentDateObj = currentDateParts.reduce((acc, part) => {
if (part.type === 'year' || part.type === 'month' || part.type === 'day') {
acc[part.type] = parseInt(part.value);
}
return acc;
}, {});
// Adjust month (JavaScript months are 0-indexed)
currentDateObj.month -= 1;
const currentDate = new Date(currentDateObj.year, currentDateObj.month, currentDateObj.day);
const birthDate = new Date(birthDateString);
// Calculate age using the time-zone adjusted current date
return calculatePreciseAge(birthDate, currentDate);
}
āļŠāļĢāđāļēāļ API āđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ
āļŠāļģāļŦāļĢāļąāļāļāļąāļāļāļąāļāļāļēāļāļĩāđāļāđāļāļāļāļēāļĢāđāļŦāđāļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļāđāļāđāļāļāļĢāļīāļāļēāļĢāļāļēāļĢāļŠāļĢāđāļēāļ API āđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāđāļāļĒāđāļāđ node.js āļāļąāđāļāļāļĢāļāđāļāļāļĢāļāļĄāļē:
// Using Express.js
const express = require('express');
const app = express();
app.use(express.json());
app.post('/api/calculate-age', (req, res) => {
try {
const { birthDate, referenceDate } = req.body;
if (!birthDate) {
return res.status(400).json({ error: 'Birth date is required' });
}
const birthDateObj = new Date(birthDate);
const referenceDateObj = referenceDate ? new Date(referenceDate) : new Date();
// Validate dates
if (isNaN(birthDateObj.getTime())) {
return res.status(400).json({ error: 'Invalid birth date format' });
}
if (isNaN(referenceDateObj.getTime())) {
return res.status(400).json({ error: 'Invalid reference date format' });
}
// Calculate age
const age = calculatePreciseAge(birthDateObj, referenceDateObj);
res.json({ age });
} catch (error) {
res.status(500).json({ error: 'Server error calculating age' });
}
});
app.listen(3000, () => {
console.log('Age calculator API running on port 3000');
});
API āļāļĩāđāđāļāđāļāļĢāļēāļāļāļēāļāļŠāļģāļŦāļĢāļąāļāļāļĢāļīāļāļēāļĢāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļąāļāļāļąāļāļāļēāļāļĩāđāļŠāļēāļĄāļēāļĢāļāļĢāļ§āļĄāđāļāđāļēāļāļąāļāļŦāļĨāļēāļĒāđāļāļāļāļĨāļīāđāļāļāļąāļ
āđāļāļ§āļāļēāļāļāļāļīāļāļąāļāļīāļāļĩāđāļāļĩāļāļĩāđāļŠāļļāļāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāđāļāđāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ
āļŠāļĢāđāļēāļāļāļ§āļēāļĄāļĄāļąāđāļāđāļāđāļāļāļēāļĢāđāļāđāļēāļāļķāļāđāļāļĢāļ·āđāļāļāļĄāļ·āļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ
āđāļĄāļ·āđāļāļāļąāļāļāļēāđāļ§āđāļāđāļāļāđāļŦāļĢāļ·āļāđāļāļĢāļ·āđāļāļāļĄāļ·āļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļēāļĢāđāļāđāļēāļāļķāļāļāļ§āļĢāļĄāļĩāļāļ§āļēāļĄāļŠāļģāļāļąāļ:
- āļāļēāļĢāļāļģāļāļēāļāđāļāđāļāļāļīāļĄāļāđ: āļāļĢāļ§āļāļŠāļāļāđāļŦāđāđāļāđāđāļāļ§āđāļēāļāļīāļāļāļļāļāđāļĨāļ°āļāļļāđāļĄāļāļąāđāļāļŦāļĄāļāļŠāļēāļĄāļēāļĢāļāđāļāđāļēāļāļķāļāđāļāđāļāđāļēāļāđāļāđāļāļāļīāļĄāļāđ
- āļāļ§āļēāļĄāđāļāđāļēāļāļąāļāđāļāđāļāļāļāļāļąāļ§āļāđāļēāļāļŦāļāđāļēāļāļ: āđāļāđāļāļĨāļēāļ ARIA āļāļĩāđāđāļŦāļĄāļēāļ°āļŠāļĄāđāļĨāļ°āļāļ§āļēāļĄāļŦāļĄāļēāļĒ HTML
- āļāļąāļ§āđāļĨāļ·āļāļāļāļ§āļēāļĄāļāļĄāļāļąāļāļŠāļđāļ: āđāļŦāđāļāļ§āļēāļĄāļāļĄāļāļąāļāļŠāļĩāļāļĩāđāđāļāļĩāļĒāļāļāļāđāļāļ·āđāļāļāļēāļĢāļāđāļēāļāļāļĩāđāļāļĩāļāļķāđāļ
- āļĨāđāļēāļāļāđāļāļāļ§āļēāļĄāđāļŠāļāļāļāđāļāļāļīāļāļāļĨāļēāļ: āļĢāļ°āļāļļāļāđāļāļāļīāļāļāļĨāļēāļāđāļāļāļēāļĢāļāđāļāļāļāđāļāļĄāļđāļĨāļāļĒāđāļēāļāļāļąāļāđāļāļ
- āļŦāļĨāļēāļĒāļĢāļđāļāđāļāļāļāļīāļāļāļļāļ: āļāļāļļāļāļēāļāļĢāļđāļāđāļāļāļāļīāļāļāļļāļāļ§āļąāļāļāļĩāđāļāļĩāđāđāļāļāļāđāļēāļāļāļąāļāđāļĄāļ·āđāļāđāļāđāļāđāļāđāļāđ
<!-- Accessible date input example -->
<div class="date-input">
<label for="birth-date" id="birth-date-label">Date of Birth:</label>
<input
type="date"
id="birth-date"
name="birth-date"
aria-labelledby="birth-date-label"
aria-describedby="birth-date-format"
>
<span id="birth-date-format" class="visually-hidden">
Please enter date in format MM/DD/YYYY
</span>
</div>
āļāļēāļĢāđāļāļīāđāļĄāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļāļŠāļģāļŦāļĢāļąāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ
āđāļĄāđāđāļāđāđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāđāļēāļĒ āđ āđāļāđāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāđāļāļ§āļĢāđāļāđāļĢāļąāļāļāļēāļĢāļāļĢāļąāļāđāļŦāđāđāļŦāļĄāļēāļ°āļŠāļĄāļŠāļģāļŦāļĢāļąāļāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļ:
- āļĨāļāļāļēāļĢāļāļąāļāļāļēāļĢ DOM āđāļŦāđāļāđāļāļĒāļāļĩāđāļŠāļļāļ: āđāļāļāļāļāļāđāļāļĢāļ°āļāļāļ DOM āđāļĨāļ°āļāļąāļāđāļāļāđāļāđāļāļĒāđāļēāļāļĄāļĩāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļ
- āļāļēāļĢāļāļģāļāļ§āļ debounce: āļŠāļģāļŦāļĢāļąāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāđāļĢāļĩāļĒāļĨāđāļāļĄāđāđāļāđ debouncing
- āđāļāđāđāļĨāļāļĢāļēāļĢāļĩāļ§āļąāļāļāļĩāđāļāļĩāđāļĄāļĩāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļ: āļāļīāļāļēāļĢāļāļēāđāļĨāļāļĢāļēāļĢāļĩāļāļēāļĢāļāļąāļāļāļēāļĢāļ§āļąāļāļāļĩāđāļĄāļĩāļāđāļģāļŦāļāļąāļāđāļāļēāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļģāļāļ§āļāļāļĩāđāļāļąāļāļāđāļāļ
- āđāļāļāļāļēāļĢāļāļģāļāļ§āļāļāđāļāļāļŦāļāđāļēāļāļĩāđ: āļāļąāļāđāļāđāļāļāļĨāļĨāļąāļāļāđāļĨāđāļēāļŠāļļāļāđāļāļ·āđāļāļŦāļĨāļĩāļāđāļĨāļĩāđāļĒāļāļāļēāļĢāļāļģāļāļ§āļāđāļŦāļĄāđ
// Implementing debounce for real-time age calculation
function debounce(func, wait) {
let timeout;
return function() {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
const debouncedCalculate = debounce(() => {
// Age calculation logic
calculateAndDisplayAge();
}, 300);
birthDateInput.addEventListener('input', debouncedCalculate);
āļāđāļāļāļ§āļĢāļāļīāļāļēāļĢāļāļēāļāđāļēāļāļāļ§āļēāļĄāļāļĨāļāļāļ āļąāļĒāļŠāļģāļŦāļĢāļąāļāđāļāļĢāļ·āđāļāļāļāļģāļāļ§āļāļāļēāļĒāļļ
āđāļāļāļāļ°āļāļĩāđāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļēāļāļāļđāđāļŦāļĄāļ·āļāļāđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāđāļēāļĒ āđ āļāļ§āļēāļĄāļāļĨāļāļāļ āļąāļĒāļĒāļąāļāļāļāļĄāļĩāļāļ§āļēāļĄāļŠāļģāļāļąāļ:
- āļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļāļ§āļēāļĄāļāļđāļāļāđāļāļāļāļāļāļāļīāļāļāļļāļ: āļāđāļēāđāļāļ·āđāļāļ§āļąāļāļāļĩāđāđāļāļ§āļąāļāļāļĩāđāđāļāļ·āđāļāļāđāļāļāļāļąāļāļāļēāļĢāđāļāļĄāļāļĩāļāļāļ XSS
- āļŦāļĨāļĩāļāđāļĨāļĩāđāļĒāļāļāļēāļĢāđāļāļīāļāđāļāļĒāļāđāļāļĄāļđāļĨāļāļĩāđāļĨāļ°āđāļāļĩāļĒāļāļāđāļāļ: āļĢāļ°āļĄāļąāļāļĢāļ°āļ§āļąāļāđāļāļĩāđāļĒāļ§āļāļąāļāļāđāļāļĄāļđāļĨāļāļĩāđāļŠāđāļāļāļ·āļ
- āļāļēāļĢ āļāļģāļāļąāļ āļāļąāļāļĢāļē: āļāļēāļĢ āļāļģāļāļąāļ āļāļąāļāļĢāļēāļāļēāļĢ āļāļģāļāļąāļ āļŠāļģāļŦāļĢāļąāļ APIs āđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ
- āļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļāļąāđāļāđāļāļĨāđāļāđāļāļāđāđāļāļĩāļĒāļāļāļąāļāļāļąāđāļāđāļāļīāļĢāđāļāđāļ§āļāļĢāđ: āđāļāđāļāļąāđāļāļŠāļāļāļāļĒāđāļēāļāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļĢāļ§āļāļŠāļāļāļāļēāļĒāļļāļāļĩāđāļŠāļģāļāļąāļ
āļāļēāļĢāļĢāļ§āļĄāđāļĨāļāļĢāļēāļĢāļĩāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļāļāļāļļāļāļāļĨāļāļĩāđāļŠāļēāļĄ
āđāļĨāļāļĢāļēāļĢāļĩ JavaScript āļĒāļāļāļāļīāļĒāļĄāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļ
āļŦāđāļāļāļŠāļĄāļļāļāļŦāļĨāļēāļĒāđāļŦāđāļāļŠāļēāļĄāļēāļĢāļāļāļģāđāļŦāđāļāļēāļĢāđāļāđāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāđāļēāļĒāļāļķāđāļ:
- moment.js: āļŦāđāļāļāļŠāļĄāļļāļāļāļēāļĢāļāļąāļāļāļēāļĢāļ§āļąāļāļāļĩāđāļāļĢāļāļāļāļĨāļļāļĄ
const moment = require('moment');
function calculateAge(birthdate) {
const today = moment();
const birthDate = moment(birthdate);
const years = today.diff(birthDate, 'years');
birthDate.add(years, 'years');
const months = today.diff(birthDate, 'months');
birthDate.add(months, 'months');
const days = today.diff(birthDate, 'days');
return { years, months, days };
}
- Date-FNS: āļāļēāļāđāļĨāļ·āļāļāļāļĩāđāļāļąāļāļŠāļĄāļąāļĒāļāļĢāđāļāļĄāļāļēāļĢāļŠāļāļąāļāļŠāļāļļāļāļāļēāļĢāđāļāļĒāđāļēāļāđāļāđāļĄāđ
import { differenceInYears, differenceInMonths, differenceInDays } from 'date-fns';
function calculateAge(birthdate) {
const today = new Date();
const birthDate = new Date(birthdate);
const years = differenceInYears(today, birthDate);
const months = differenceInMonths(today, birthDate) % 12;
const days = differenceInDays(today, birthDate) % 30; // Approximation
return { years, months, days };
}
- Luxon: āļŦāđāļāļāļŠāļĄāļļāļāļāļĩāđāļāļĢāļāļāļĨāļąāļāļĄāļļāđāļāđāļāđāļāđāļāļāļĩāđāļāļ§āļēāļĄāđāļĄāđāļŠāļēāļĄāļēāļĢāļāđāļāļĨāļĩāđāļĒāļāđāļāļĨāļāđāļāđ
const { DateTime } = require('luxon');
function calculateAge(birthdate) {
const today = DateTime.local();
const birthDate = DateTime.fromISO(birthdate);
const diff = today.diff(birthDate, ['years', 'months', 'days']).toObject();
return {
years: Math.floor(diff.years),
months: Math.floor(diff.months),
days: Math.floor(diff.days)
};
}
āđāļĄāļ·āđāļāđāļāļāļ§āļĢāđāļāđāđāļĨāļāļĢāļēāļĢāļĩāļāļāļāļāļļāļāļāļĨāļāļĩāđāļŠāļēāļĄāđāļāļĩāļĒāļāļāļąāļāļāļēāļĢāđāļāđāļāļēāļāļāļĩāđāļāļģāļŦāļāļāđāļāļ
āļāļīāļāļēāļĢāļāļēāļāļąāļāļāļąāļĒāđāļŦāļĨāđāļēāļāļĩāđāđāļĄāļ·āđāļāļāļąāļāļŠāļīāļāđāļāļĢāļ°āļŦāļ§āđāļēāļāļĢāļŦāļąāļŠāļāļĩāđāļāļģāļŦāļāļāđāļāļāđāļĨāļ°āļŦāđāļāļāļŠāļĄāļļāļ:
āļāļąāļāļāļąāļĒ | āļāļēāļĢāđāļāđāļāļēāļāļāļĩāđāļāļģāļŦāļāļāđāļāļ | āļŦāđāļāļāļŠāļĄāļļāļāļāļļāļāļāļĨāļāļĩāđāļŠāļēāļĄ |
---|---|---|
āļāļāļēāļāļĄāļąāļ | āđāļĨāđāļāļĨāļāļāđāļēāļāļēāļĢāđāļāđāļāļēāļāļāđāļēāļĒ | āđāļŦāļāđāļāļķāđāļāđāļāļĒāđāļāļāļēāļ°āļāļĒāđāļēāļāļĒāļīāđāļāļŠāļģāļŦāļĢāļąāļāļŦāđāļāļāļŠāļĄāļļāļāđāļāđāļĄāļĢāļđāļāđāļāļ |
āļāļēāļĢāļāđāļāļĄāļāļģāļĢāļļāļ | āļŠāļđāļāļāļ§āđāļē (āļāļļāļāļĢāļąāļāļĐāļēāļĢāļŦāļąāļŠ) | āļāđāļģāļāļ§āđāļē (āļāļđāđāļĨāđāļāļĒāļāļļāļĄāļāļ) |
āļāļēāļĢāļāļĢāļąāļāđāļāđāļ | āļāļēāļĢāļāļ§āļāļāļļāļĄāļāļĒāđāļēāļāđāļāđāļĄāļāļĩāđ | āļāļģāļāļąāļ āđāļāļĒ Library API |
āļāļēāļĢāļāļąāļāļāļēāļĢāđāļāļŠāļāļāļ | āļāđāļāļāļĄāļĩāļāļēāļĢāļāļģāđāļāļīāļāļāļēāļĢāļāļĒāđāļēāļāļĢāļāļāļāļāļ | āļĄāļąāļāļāļ°āļāđāļēāļāļāļēāļĢāļāļāļŠāļāļāļāļĒāđāļēāļāļāļĩ |
āđāļŠāđāļāđāļāđāļāļāļēāļĢāđāļĢāļĩāļĒāļāļĢāļđāđ | āđāļāđāļāļļāļāļŠāļĄāļāļąāļāļīāļ āļēāļĐāļēāļāļĩāđāļāļļāđāļāđāļāļĒ | āļāđāļāļāđāļāđ API āļŦāđāļāļāļŠāļĄāļļāļāļāļēāļĢāđāļĢāļĩāļĒāļāļĢāļđāđ |
āļāļāļŠāļāļāļāļēāļĢāđāļāđāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļāļāļāļļāļ
āļāļąāļāļāđāļāļąāđāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļēāļĢāļāļāļŠāļāļāļŦāļāđāļ§āļĒ
āļāļēāļĢāļāļāļŠāļāļāļāļĒāđāļēāļāļĨāļ°āđāļāļĩāļĒāļāļāđāļ§āļĒāđāļŦāđāļĄāļąāđāļāđāļāđāļāđāļāļķāļāļāļ§āļēāļĄāđāļĄāđāļāļĒāļģāļāļāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ:
// Using Jest for testing
describe('Age Calculator Functions', () => {
test('Basic age calculation with birthdate in the past', () => {
// Mock current date to 2023-05-15
const mockDate = new Date(2023, 4, 15);
global.Date = jest.fn(() => mockDate);
const birthDate = new Date(1990, 2, 10); // March 10, 1990
const age = calculateAge(birthDate);
expect(age.years).toBe(33);
expect(age.months).toBe(2);
expect(age.days).toBe(5);
});
test('Age calculation with future reference date', () => {
const birthDate = new Date(2000, 0, 1); // January 1, 2000
const referenceDate = new Date(2030, 6, 15); // July 15, 2030
const age = calculateAgeBetweenDates(birthDate, referenceDate);
expect(age.years).toBe(30);
expect(age.months).toBe(6);
expect(age.days).toBe(14);
});
test('Edge case: Birth date is February 29 on leap year', () => {
const birthDate = new Date(2000, 1, 29); // February 29, 2000
const referenceDate = new Date(2023, 2, 1); // March 1, 2023
const age = calculateAgeBetweenDates(birthDate, referenceDate);
expect(age.years).toBe(23);
expect(age.months).toBe(0);
expect(age.days).toBe(1);
});
});
āļāļēāļĢāļāļāļŠāļāļāļāļ§āļēāļĄāđāļāđāļēāļāļąāļāđāļāđāļāļāļāđāļāļĢāļēāļ§āđāđāļāļāļĢāđ
āļāļĢāļ§āļāļŠāļāļāđāļŦāđāđāļāđāđāļāļ§āđāļēāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļāļāļāļļāļāļāļģāļāļēāļāđāļāđāđāļāđāļāļĢāļēāļ§āđāđāļāļāļĢāđāļāļĩāđāļŠāļģāļāļąāļāļāļąāđāļāļŦāļĄāļ:
- āļāļēāļĢāļāļĢāļ§āļāļāļąāļāļāļļāļāļŠāļĄāļāļąāļāļī: āđāļāđāļāļēāļĢāļāļĢāļ§āļāļāļąāļāļāļļāļāļŠāļĄāļāļąāļāļīāđāļāļāļāļēāļĢāļāļĢāļ§āļāļāļąāļāđāļāļĢāļēāļ§āđāđāļāļāļĢāđ
- Input type fallbacks: Provide fallbacks for browsers that don't support
input[type="date"]
- Polyfills: āļĢāļ§āļĄāđāļāļĨāļĩāļāļīāļĨāļāđāļāļĩāđāļāļģāđāļāđāļāļŠāļģāļŦāļĢāļąāļāđāļāļĢāļēāļ§āđāđāļāļāļĢāđāļĢāļļāđāļāđāļāđāļē
- āđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāļāļŠāļāļāļāđāļēāļĄāđāļāļĢāļēāļ§āđāđāļāļāļĢāđ: āđāļāđāđāļāļĢāļ·āđāļāļāļĄāļ·āļāđāļāđāļ BrowserStack āļŦāļĢāļ·āļ Sauce Labs āļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļāļŠāļāļ
āļāļąāļ§āļāļĒāđāļēāļāļāļēāļĢāđāļāđāđāļāļĢāļ·āđāļāļāļāļģāļāļ§āļāļāļēāļĒāļļāļāļĢāļīāļ

āļāļĢāļāļĩāļĻāļķāļāļĐāļē: āļĢāļ°āļāļāļāļēāļĢāļĨāļāļāļ°āđāļāļĩāļĒāļāļāļēāļĢāļāļđāđāļĨāļŠāļļāļāļ āļēāļ
āđāļāļāļāļĨāļīāđāļāļāļąāļāļāļēāļĢāļāļđāđāļĨāļŠāļļāļāļ āļēāļāļāļēāļāđāļāđāļāļēāļĢāļāļģāļāļ§āļāļāļēāļĒāļļāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļĨāļāļāļ°āđāļāļĩāļĒāļāļāļđāđāļāđāļ§āļĒ:
function calculatePatientAgeDetails(dateOfBirth) {
const age = calculatePreciseAge(new Date(dateOfBirth), new Date());
// Determine age category for medical protocols
let ageCategory;
if (age.years < 2) {
ageCategory = 'infant';
} else if (age.years < 13) {
ageCategory = 'child';
} else if (age.years < 18) {
ageCategory = 'adolescent';
} else if (age.years < 65) {
ageCategory = 'adult';
} else {
ageCategory = 'senior';
}
// Calculate age in months for young children
const totalMonths = age.years * 12 + age.months;
return {
...age,
ageCategory,
totalMonths,
// Include whether special protocols apply
requiresPediatricProtocol: age.years < 18,
requiresGeriatricProtocol: age.years >= 65
};
}
āļāļĢāļāļĩāļĻāļķāļāļĐāļē: āđāļ§āđāļāđāļāļāđāļāļĩāļāļāļĄāđāļĄāļīāļĢāđāļāļāļĩāđ āļāļģāļāļąāļ āļāļēāļĒāļļ
āđāļ§āđāļāđāļāļāđāļāļĩāļāļāļĄāđāļĄāļīāļĢāđāļāļāļĩāđāļāļēāļĒāļāļĨāļīāļāļ āļąāļāļāđāļāļĩāđ āļāļģāļāļąāļ āļāļēāļĒāļļāļāļēāļāļāļģāđāļāđāļāđ:
function verifyPurchaseEligibility(dateOfBirth, productMinimumAge) {
const today = new Date();
const birthDate = new Date(dateOfBirth);
// Calculate age as of today
let age = today.getFullYear() - birthDate.getFullYear();
// Adjust age if birthday hasn't occurred yet this year
if (
today.getMonth() < birthDate.getMonth() ||
(today.getMonth() === birthDate.getMonth() && today.getDate() < birthDate.getDate())
) {
age--;
}
return {
eligible: age >= productMinimumAge,
currentAge: age,
minimumAge: productMinimumAge,
// Calculate days until eligibility if not eligible
daysUntilEligible: age < productMinimumAge ?
calculateDaysUntilEligible(birthDate, productMinimumAge) : 0
};
}
function calculateDaysUntilEligible(birthDate, requiredAge) {
const today = new Date();
const eligibilityDate = new Date(birthDate);
eligibilityDate.setFullYear(birthDate.getFullYear() + requiredAge);
// If eligibility date has passed this year, calculate for next year
if (eligibilityDate < today) {
return 0;
}
const diffTime = Math.abs(eligibilityDate - today);
return Math.ceil(diffTime / (1000 * 60 * 60 * 24));
}
āļŠāļĢāļļāļ: āļāļēāļĢāļŠāļĢāđāļēāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāļāļĩāļāļĩāđāļŠāļļāļāļŠāļģāļŦāļĢāļąāļāđāļāļāļāļĨāļīāđāļāļāļąāļāļāļāļāļāļļāļ
āļāļēāļĢāļŠāļĢāđāļēāļāđāļ§āđāļāđāļāļāļāļĨāļīāđāļāļāļąāļāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāļĄāļĩāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļāļāđāļāļāļāļīāļāļēāļĢāļāļēāļāļ§āļēāļĄāļāđāļāļāļāļēāļĢāļāļāļāļāļđāđāđāļāđāļāļĒāđāļēāļāļĢāļāļāļāļāļāļāļ§āļēāļĄāđāļĄāđāļāļĒāļģāđāļāļāļēāļĢāļāļģāļāļ§āļāđāļĨāļ°āļāļēāļĢāļĢāļ§āļĄāđāļāđāļēāļāļąāļāđāļāđāļēāļŦāļĄāļēāļĒāđāļāļāļāļĨāļīāđāļāļāļąāļāļāļĩāđāļāļ§āđāļēāļāļāļķāđāļāļāļāļāļāļļāļāđāļāļĒāļĄāļļāđāļāđāļāđāļāļāļĩāđ:
- āļŠāļđāļāļĢāļāļēāļĢāļāļģāļāļ§āļāļāļĩāđāđāļĄāđāļāļĒāļģāļāļķāđāļāļāļąāļāļāļĩāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāđāļēāļ§āļāļĢāļ°āđāļāļāļāļĩāđāļĨāļ°āļāļ§āļēāļĄāļĒāļēāļ§āđāļāļ·āļāļāļāļĩāđāđāļāļāļāđāļēāļāļāļąāļ
- āļāļīāļāđāļāļāļĢāđāđāļāļāļāļĩāđāđāļāđāļāļēāļāļāđāļēāļĒāļāļĩāđāđāļāđāļāļēāļāđāļāđāļāļąāļāļāļļāļāļāļĢāļāđ
- āļāļļāļāļŠāļĄāļāļąāļāļīāļāļēāļĢāđāļāđāļēāļāļķāļāļāļĩāđāļāļģāđāļŦāđāđāļāļĢāļ·āđāļāļāļĄāļ·āļāļāļāļāļāļļāļāđāļāđāļāļēāļāđāļāđāđāļāļĒāļāļļāļāļāļ
- āļāļēāļĢāđāļāļīāđāļĄāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļģāļāļēāļāļāļĩāđāļĢāļēāļāļĢāļ·āđāļ
- āļāļēāļĢāļāļāļŠāļāļāļāļĒāđāļēāļāļĨāļ°āđāļāļĩāļĒāļāđāļāļ·āđāļāļāļąāļāđāļāļŠāļāļāļ
āļāļļāļāļŠāļēāļĄāļēāļĢāļāđāļāđāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāđāļāļāđāļāđāļāđāļāđāļāļāļāļāđāļāļĢāļ°āļāļāļāļāļĩāđāļĄāļĩāļāđāļēāļāļāļāđāļ§āđāļāđāļāļāļāļĨāļīāđāļāļāļąāļāļāļāļāļāļļāļ
āđāļāļĢāļāļāļģāđāļ§āđāļ§āđāļēāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļāļāļĩāđāļāļĩāļāļĩāđāļŠāļļāļāđāļāđāļāļŠāļīāđāļāļāļĩāđāđāļŦāđāļāļĢāļīāļāļēāļĢāļāļĢāļāļĩāļāļēāļĢāđāļāđāļāļēāļāđāļāļāļēāļ°āļāļāļāļāļļāļāđāļāļāļāļ°āļāļĩāđāđāļŦāđāļāļĨāļĨāļąāļāļāđāļāļĩāđāđāļĄāđāļāļĒāļģāđāļĨāļ°āļāļĢāļ°āļŠāļāļāļēāļĢāļāđāļāļēāļĢāđāļāđāļāļēāļāļāļĩāđāļĒāļāļāđāļĒāļĩāđāļĒāļĄāđāļĄāđāļ§āđāļēāļāļļāļāļāļ°āđāļĨāļ·āļāļāđāļāđāļāļēāļāļāļĩāđāļāļģāļŦāļāļāđāļāļāļŦāļĢāļ·āļāđāļāđāļāļĢāļ°āđāļĒāļāļāđāļāļēāļāļŦāđāļāļāļŠāļĄāļļāļāļāļĩāđāļĄāļĩāļāļĒāļđāđāļŦāļĨāļąāļāļāļēāļĢāļāļĩāđāļāļĢāļāļāļāļĨāļļāļĄāđāļāļāļđāđāļĄāļ·āļāļāļĩāđāļāļ°āļāđāļ§āļĒāđāļŦāđāļāļļāļāļŠāļĢāđāļēāļāđāļāļĨāļđāļāļąāļāļāļĩāđāļĄāļĩāļāļĢāļ°āļŠāļīāļāļāļīāļ āļēāļāļāļĩāđāļāļĢāļāļāļąāļāļāļ§āļēāļĄāļāđāļāļāļāļēāļĢāđāļāļāļēāļĢāļāļąāļāļāļēāļāļāļāļāļļāļ
āļāļĢāļąāļāļĒāļēāļāļĢāļŠāļģāļŦāļĢāļąāļāļāļēāļĢāļāļąāļāļāļēāđāļāļĢāļ·āđāļāļāļāļīāļāđāļĨāļāļāļēāļĒāļļ
- MDN Web Docs: Date Object
- intl.datetimeformat api
- āđāļāļ§āļāļēāļāļāļēāļĢāđāļāđāļēāļāļķāļ WCAG
- GitHub Repository: āļāļļāļāđāļāļĢāļ·āđāļāļāļāļģāļāļ§āļāļāļēāļĒāļļ
- NPM: āđāļāđāļāđāļāļāļ§āļąāļāļāļĩāđ FNS
- āđāļāļāļŠāļēāļĢ Luxon
- Moment.js āđāļāļāļŠāļēāļĢ
- āļāļĢāļāļāļāļēāļĢāļāļāļŠāļāļāļāļĨāļ