Now, you have seen the video tutorial, lets, move on to the code explanation and we will cover the following –
HTML Code and Explanation
In the HTML File.
I create a <div> with an id called placeholder.
Try the code for yourself here: CodePen
In the JS File
First I define a variable called DOB to store a persons Date of Birth.
Definition and Usage
The Date.parse() method parses a date string and returns the number of milliseconds between the date string and midnight of January 1, 1970.
Using these functions as base.
I create 2 new variables millisecondsBetweenDOBAnd1970 and millisecondsBetweenNowAnd1970 to store number of milliseconds between DOB/NOW and January 1, 1970 respectively.
Then to get the age of a person in Milliseconds subtract DOB from NOW.
Now, when I have a persons age in Milliseconds, we just need to write basic logic to convert it into Years, Months, Days, Hours, Minutes, Seconds
As we know this as facts:
1 year = 365 day (except leap year), 1 Month = 30 days (approx.), 1 Day = 24 Hours, 1 Hour = 60 Minutes, 1 Minute = 60 Seconds, 1 Second = 1000 Milliseconds
Disclaimer: Leap Year hasn’t been taken into consideration in this example. The days in a month has also been generalised to 30 days in a months (whereas depending on a year a month can have 31, 30, 29 or 28 days in it)
Please do not use this article for your college projects unless the above disclaimer is not a concern and don’t forget to reference this page.
Lets, get back into explanation, then I convert these facts into code.
Then, I write a function called printResults to print our results on the page using document.getElementById and leveraging the placeholder id we set for the div in HTML we set the message using innerHTML.
Output / Result
In the results you can see all the conversions, improve or try the code for yourself on CodePen.
Please don’t forget to leave a comment or questions, you can easily signup/login to the website using Email, Facebook, Twitter or Google Account.