Casey Wong's Blog
My Birthday is coming...

My Birthday is coming...

Simple Age Calculator

Casey Wong's photo
Casey Wong
·

3 min read

I am getting old. My birthday was more than half a century ago. It is no longer possible to count my age with just my fingers.

So, after googling for some age calculator source codes, I've written my own.
It's simple HTML and JavaScript, something I can still manage quite well these days.

I can see many calculations are based on the 'number of days elapsed since birth.' I find that puzzling. How am I going to calculate all the different days of the month, leap years that have passed in the past half-century?

So, I've decided it's okay to forget the 'x years old/y months old/z days old', and simply calculate my age this year, and how many days before/after my birthday. That's good enough. Keeping it simple and stupid.

So, here it is. Wish me a happy birthday!

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Age Calculator</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css" />
    <style>
      span {
        color: coral;
      }
    </style>
  </head>

  <body>
    <h1>Simple Age Calculator</h1>
    <label>Birthday</label>
    <input type="date" onchange="handler(event);" />
    <hr />
    <div>Today is <span id="today_is"></span></div>
    <hr />
    <div>Your birthday is on <span id="birth_is"></span></div>
    <div>Your age this year is <span id="age_is"></span></div>
    <div>Your birthday is <span id="day_is"></span></div>

    <script>
      function handler(e) {
        const birthIs = document.getElementById("birth_is");
        let bDay = e.target.value;
        birthIs.textContent = bDay;
        // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        const yearThen = parseInt(bDay.substring(0, 4), 10);
        const monthThen = parseInt(bDay.substring(5, 7), 10);
        const dayThen = parseInt(bDay.substring(8, 10), 10);
        // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        const realBirth = new Date(yearThen, monthThen - 1, dayThen);
        const realBirthDate = realBirth.toLocaleString("en-CA").slice(0, 10);
        // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        const today = new Date();
        const todayDate = today.toLocaleString("en-CA").slice(0, 10);
        const thisYear = today.getFullYear();
        // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        const todayIs = document.getElementById("today_is");
        todayIs.textContent = todayDate;
        // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        const thisYearBirth = new Date(thisYear, monthThen - 1, dayThen);
        const thisYearBirthDate = thisYearBirth.toLocaleString("en-CA").slice(0, 10);
        // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        countYear = today.getYear() - realBirth.getYear();
        const ageIs = document.getElementById("age_is");
        ageIs.textContent = countYear;
        // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
        const dayIs = document.getElementById("day_is");
        if (today.valueOf() < thisYearBirth.valueOf()) {
          const differenceInMilisecond = thisYearBirth.valueOf() - today.valueOf();
          const day_age = Math.floor((differenceInMilisecond % 31536000000) / 86400000) + 1;
          dayIs.textContent = `in ${day_age} days`;
        } else {
          const differenceInMilisecond = today.valueOf() - thisYearBirth.valueOf();
          const day_age = Math.floor((differenceInMilisecond % 31536000000) / 86400000);
          dayIs.textContent = `${day_age} days ago`;
        }
      }
    </script>
  </body>
</html>
JavaScript