Build an Age Calculator with JavaScript: Calculate Your Age in Years, Months, Days, Hours, Minutes, and Seconds With Source Code
In the world of web development, creating practical and useful applications is a rewarding way to hone your skills. In this tutorial, we’ll guide you through the process of building an Age Calculator App using HTML, CSS, and JavaScript. This interactive tool allows users to input their birthdate and instantly get their age in various units, including years, months, days, hours, minutes, and seconds. Whether you’re a beginner or an experienced developer, this project offers a fantastic opportunity to learn about working with dates and performing calculations in JavaScript.
Table of Contents
Age Calculator Demo
Age Calculator
Click Here to see it live off this page
What you Need to build Age Calculator With JavaScript
- Basic understanding of HTML, CSS, and JavaScript
- A code editor (such as Visual Studio Code)
Step 1: Setting Up the HTML Structure:
We’ll begin by creating the basic structure of our app. Open a new HTML file and set up the necessary elements, including input fields and a button for users to interact with.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<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">
<h1>Age Calculator</h1>
<label for="birthdate">Enter Your Birthdate</label>
<input type="date" id="birthdate">
<button id="calculateBtn">Calculate Age</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>Step 2: Styling Your App with CSS:
Apply some simple styling to make your app visually appealing and user-friendly. We’ll create a clean and modern design that ensures a pleasant user experience.
CSS Code
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: #fff;
padding: 20px;
border-radius: 5px;
box-shadow: 0 2px 10px rgb(0, 0, 0.1);
text-align: center;
}
h1{
margin-bottom: 20px;
}
input, button {
padding: 10px;
margin: 5px;
}
button {
background-color: #007bff;
color: #fff;
border: none;
cursor: pointer;
}Step 3: Adding JavaScript Logic:
The heart of our Age Calculator App lies in the JavaScript code. We’ll explain how to capture the user’s input, calculate their age, and display the results in a user-friendly format.
Using JavaScript’s Date object, we’ll calculate the user’s age in years, months, days, hours, minutes, and seconds. Our script will perform the necessary calculations and provide accurate results.
We’ll use JavaScript to insert the calculated age into the DOM, making it instantly accessible to the user.
JavaScript Code
document.addEventListener("DOMContentLoaded", function(){
const calculateBtn = document.getElementById("calculateBtn");
const resultDiv = document.getElementById("result");
calculateBtn.addEventListener("click", function() {
const birthdate = new Date(document.getElementById("birthdate").value);
const currentDate = new Date();
const ageInMilliseconds = currentDate - birthdate;
const ageInSeconds = Math.floor(ageInMilliseconds / 1000);
const years = Math.floor(ageInSeconds / (365 * 24 * 60 * 60));
const months = Math.floor((ageInSeconds % (365 * 24 * 60 * 60)) / (30 * 24 * 60 * 60));
const days = Math.floor((ageInSeconds % (30 * 24 * 60 * 60)) / 24 * 60 * 60);
const hours = Math.floor((ageInSeconds % (24 * 60 * 60)) / (60 * 60));
const minutes = Math.floor((ageInSeconds % (60 * 60)) / 60);
const seconds = ageInSeconds % 60;
const result = `
<h2>Your Age Is:</h2>
<p>${years} years, ${months} months, ${days} days </p>
<p>${hours} hours, ${minutes} minutes, ${seconds} seconds old</p>
<h1> Please Subscribe</h1>
`;
resultDiv.innerHTML = result;
})
});Conclusion:
By following this tutorial, you’ve successfully built an Age Calculator App using HTML, CSS, and JavaScript. This project offers valuable insights into working with dates, performing calculations, and enhancing user interactions on the web. You’ve taken a step closer to becoming a proficient web developer, capable of creating practical and engaging applications that serve a real purpose.
Next Steps:
As you continue your coding journey, consider exploring additional features for your Age Calculator App. You could implement a feature to compare ages between two individuals, incorporate more styling options, or even expand the app to include different time units. The possibilities are endless, and this project serves as a solid foundation for your future web development endeavors. Happy coding!
Please subscribe to my YouTube Channel for more.
