How to make Age Calculator with javascript
In this instructional exercise, we will figure out how to make an age mini-computer utilizing JavaScript. The age mini-computer will take a birthdate as info and work out the quantity of years, months, and days between the birthdate and the ongoing date. We will stroll through the code bit by bit, making sense of each capability and its motivation. Toward the finish of this instructional exercise, you will have a utilitarian age mini-computer that can be coordinated into your web projects.
Video Tutorial of Age Calculator
Age Calculator [Source Codes]
To Create Age Calculator follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then download the source code.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Age Calculator</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="container">
- <div class="input-wrapper">
- <input type="date" id="date-input">
- <button id="calc-age-btn">Calculate</button>
- </div>
- <div class="output-wrapper">
- <div>
- <span id="years">-</span>
- <p>Years</p>
- </div>
- <div>
- <span id="months">-</span>
- <p>Months</p>
- </div>
- <div>
- <span id="days">-</span>
- <p>Days</p>
- </div>
- </div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- * {
- padding: 0;
- margin: 0;
- box-sizing: border-box;
- font-family: Arial, sans-serif;
- }
- body {
- background-color: #e5e5e5;
- }
- .container {
- background-color: #fff;
- border-radius: 10px;
- box-shadow: 0 0.93em 1.25em rgba(0, 0, 0, 0.6);
- width: min(65%, 30em);
- height:320px ;
- position: absolute;
- transform: translate(-50%, -50%);
- top: 50%;
- left: 50%;
- }
- .container * {
- border: none;
- outline: none;
- }
- .input-wrapper {
- background-color: #ffffff;
- padding: 1.87em 1.5em;
- border-radius: 0.5em;
- box-shadow: 0 0.93em 1.35em rgba(0, 0, 0, 0.2);
- margin-bottom: 3.12em;
- display: grid;
- grid-template-columns: 9fr 3fr;
- gap: 1em;
- }
- input,
- button {
- font-weight: 500;
- border-radius: 0.31em;
- }
- input {
- background-color: #d9d9d9;
- color: #000000;
- padding: 1.2em 1.25em;
- font-size: 0.97em;
- }
- button {
- color: #ffffff;
- background-color: #1DAAEF;
- transition: background-color 0.3s ease;
- }
-
- button:hover {
- background-color: #0f7ec4;
- }
-
- .output-wrapper {
- width: 100%;
- display: flex;
- justify-content: space-between;
- }
- .output-wrapper div {
- height: 6.25em;
- width: 6.25em;
- background-color: #ffffff;
- border-radius: 0.41em;
- color: #080808;
- display: grid;
- place-items: center;
- padding: 1.25em 0;
- box-shadow: 0 0.93em 1.25em rgba(0, 0, 0, 0.3);
- }
- span {
- font-size: 2em;
- font-weight: 500;
- }
- p {
- font-size: 1em;
- color: #707070;
- font-weight: 400;
- }
-
Now paste the following codes into your script.js file
- const ageCalculate = () => {
- const today = new Date();
- const inputDate = new Date(document.getElementById("date-input").value);
-
- const birthDetails = {
- date: inputDate.getDate(),
- month: inputDate.getMonth() + 1,
- year: inputDate.getFullYear(),
- };
-
- const currentYear = today.getFullYear();
- const currentMonth = today.getMonth() + 1;
- const currentDate = today.getDate();
-
- if (isFutureDate(birthDetails, currentYear, currentMonth, currentDate)) {
- alert("Not Born Yet");
- displayResult("-", "-", "-");
- return;
- }
-
- const { years, months, days } = calculateAge(
- birthDetails,
- currentYear,
- currentMonth,
- currentDate
- );
-
- displayResult(days, months, years);
- };
-
- const isFutureDate = (birthDetails, currentYear, currentMonth, currentDate) => {
- return (
- birthDetails.year > currentYear ||
- (birthDetails.year === currentYear &&
- (birthDetails.month > currentMonth ||
- (birthDetails.month === currentMonth &&
- birthDetails.date > currentDate)))
- );
- };
- const calculateAge = (birthDetails, currentYear, currentMonth, currentDate) => {
- let years = currentYear - birthDetails.year;
- let months, days;
-
- if (currentMonth < birthDetails.month) {
- years--;
- months = 12 - (birthDetails.month - currentMonth);
- } else {
- months = currentMonth - birthDetails.month;
- }
- if (currentDate < birthDetails.date) {
- months--;
- const lastMonth = currentMonth === 1 ? 12 : currentMonth - 1;
- const daysInLastMonth = getDaysInMonth(lastMonth, currentYear);
- days = daysInLastMonth - (birthDetails.date - currentDate);
- } else {
- days = currentDate - birthDetails.date;
- }
- return { years, months, days };
- };
-
- const getDaysInMonth = (month, year) => {
- const isLeapYear = year % 4 === 0 && (year % 100 != 0 || year % 400 === 0);
- const getDaysInMonth = [
- 31,
- isLeapYear ? 29 : 28,
- 31,
- 30,
- 31,
- 30,
- 31,
- 31,
- 30,
- 31,
- 30,
- 31,
- ];
- return getDaysInMonth[month - 1];
- };
-
- const displayResult = (bdate, bMonth, bYear) => {
- document.getElementById("years").textContent = bYear;
- document.getElementById("months").textContent = bMonth;
- document.getElementById("days").textContent = bdate;
- };
-
- document.getElementById("calc-age-btn").addEventListener("click", ageCalculate);
-
If you face any difficulties while creating Age Calculator with JavaScript or your code is not working as expected, you can download the source code files by clicking download button.