Age Calculator

An app that calculates how old you are to the day. Built using native JavaScript dates objects. I did this in part because I didn't know what my options were, but I do think there is value in understanding the underlying pain points of a technology before getting comfortable with a tool that papers over it. This app was designed by Frontend Mentor.

Stack

  • Vanilla JavaScript
  • DateTime Library

Key features

  • Animated number output

Links

Age calculator app showing the age of someone born April 7, 2015

Project overview

This calculator is deceptive in its simplicity. Subtract birth year from this year. Subtract birth month from this month. Subtract birth date from today's date. And you're done, right? But that only works if the user has already celebrated a birthday this year AND that birthday happened before the current month started AND their date of birth is a smaller number than today's date. And don't even get me started on leap years.

Once the basic logic was up and running, there were several fiddly little details to work through. Like custom error states if any single input was invalid, but also if their combined value created an invalid date (like April 31st or a date in the future). Or making sure the words ‘years, months, days’ update to the singular form if their respective output number is 1.

Helpful resources

Challenges and lessons learned

I'm someone who values organization and legibility, and that absolutely extends to my code. This project was a bit of a trial in that regard and gave me a real appreciation for refactoring. I found myself going back over my code again and again to name or rename variables, to collect repetitive logic into reusable functions, and to leave clear comments when I felt my naming wasn't quite enough info.

When I built this app, I was flummoxed by the concept of epoch time and UTC and just kind of ignored it in favor of date formats that made more sense to me. In hindsight, I think I could have simplified things had a taken advantage of UTC. It's something I might attempt in the future.

My biggest challenge by far was figuring out the leap year math. The issues kept popping up like a game of whack-a-mole. It wasn't too difficult to get things working for 2023, but it was obvious that come March 2024, my calculations were going to be off by a day. When I finally took to pen and paper to sketch out the problem, I was able to find solutions that, as of this writing, I haven't been able break. 🤞🏽

Age calculator app showing an error for a date that doesn't existAge calculator mobile view showing the age of someone born February 29, 1996Animated age calculator showing the age of someone born December 25, 1982Age calculator showing an age including single digits
Check out another project