Building a Age Calculator Website
Introduction
Hello, fellow developers! Today, I'm excited to share a project I recently completed: an Age Calculator. This project allows users to calculate their exact age based on their date of birth, providing the result in a clear and user-friendly interface. It's a great way to practice working with JavaScript, particularly with date and time functions, while building something practical.
Project Overview
The Age Calculator is designed to give users an easy way to find out their current age in years, months, and days. Users simply enter their date of birth, and with the click of a button, their age is displayed. This project is perfect for developers who want to improve their skills in handling dates and building interactive web applications.
Features
- Date Input: Users can enter their date of birth using a date picker for accurate input.
- Age Calculation: The application calculates the user's exact age, down to the number of days.
- Responsive Design: The tool is designed to be responsive, ensuring it works smoothly on different devices and screen sizes.
Technologies Used
- HTML: Used for structuring the content on the webpage.
- CSS: Applied for styling the webpage and ensuring it is responsive across various devices.
- JavaScript: Implemented for handling the age calculation logic and updating the DOM.
Project Structure
Here's a quick look at the project structure:
Age-Calculator/ ├── index.html ├── style.css └── script.js
- index.html: Contains the HTML structure of the webpage.
- style.css: Holds the CSS styles, including responsive design rules.
- script.js: Manages the dynamic aspects of the page using JavaScript.
Installation
To get started with the project, follow these steps:
-
Clone the repository:
git clone https://github.com/abhishekgurjar-in/Age-Calculator.git
Copy after login -
Open the project directory:
cd Age-Calculator
Copy after login -
Run the project:
- You can either run it on a local server or simply open the index.html file in a web browser.
Usage
- Open the website in a web browser.
- Enter your date of birth using the date picker input.
- Click the "Calculate Age" button to see your exact age displayed on the screen.
Code Explanation
HTML
The index.html file contains the structure of the webpage, including the input form and the section where the calculated age is displayed. Below is a snippet of the 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 href="https://fonts.googleapis.com/css?family=Manrope:200,300,regular,500,600,700,800" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="./script.js" defer></script>
</head>
<body>
<div class="header">
<h1>Age Calculator</h1>
</div>
<div class="container">
<div class="form">
<p id="birth">Enter your date of birth</p>
<input type="date" id="birthday" name="birthday">
<button id="btn">Calculate Age</button>
<p id="result">Your age is 21 years old</p>
</div>
</div>
<div class="footer">
<p>Made with ❤️ by Abhishek Gurjar</p>
</div>
</body>
</html>
CSS
The style.css file contains styles that ensure the webpage is visually appealing and responsive. Here are some key styles:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Manrope", sans-serif;
width: 100%;
height: 100vh;
background: #2962ff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
}
.header {
margin-bottom: 80px;
text-align: center;
}
.container {
background: black;
color: white;
width: 600px;
height: 300px;
border-radius: 5px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.form {
display: flex;
flex-direction: column;
align-items: center;
}
p {
font-weight: bold;
margin: 20px;
}
input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
width: 100%;
max-width: 300px;
}
button {
background-color: #007bff;
color: white;
border: none;
margin: 20px;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}
button:hover {
background-color: #0062cc;
}
#result {
margin-top: 20px;
font-size: 24px;
font-weight: bold;
}
.footer {
margin: 70px;
text-align: center;
}
.footer p{
font-size: 14px;
font-weight: 400;
}
JavaScript
The script.js file manages the age calculation logic and updates the result on the webpage. Below is a snippet of the JavaScript code:
const btnE1 = document.getElementById("btn");
const birthE1 = document.getElementById("birthday");
const resultE1 = document.getElementById("result");
function calculateAge() {
const birthdayValue = birthE1.value;
if (birthdayValue === "") {
alert("Please enter your birthday");
} else {
const age = getAge(birthdayValue);
resultE1.innerText = `Your age is ${age} ${age > 1 ? "years" : "year"} old.`;
}
}
function getAge(birthdayValue) {
const birthdayDate = new Date(birthdayValue);
const currentDate = new Date();
let age = currentDate.getFullYear() - birthdayDate.getFullYear();
const month = currentDate.getMonth() - birthdayDate.getMonth();
if (
month < 0 ||
(month === 0 && currentDate.getDate() < birthdayDate.getDate())
) {
age--;
}
return age;
}
btnE1.addEventListener("click", calculateAge);
Live Demo
You can check out the live demo of the Age Calculator here.
Conclusion
Building this Age Calculator was a rewarding experience that allowed me to deepen my understanding of working with dates and building interactive web applications. I hope you find this project useful and insightful for your own learning journey. Feel free to explore the code and adapt it to your needs. Happy coding!
Credits
This project was inspired by the need for a simple and effective age calculation tool.
Author
-
Abhishek Gurjar
- GitHub Profile
The above is the detailed content of Building a Age Calculator Website. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1664
14
1421
52
1315
25
1266
29
1239
24
Google Fonts Variable Fonts
Apr 09, 2025 am 10:42 AM
I see Google Fonts rolled out a new design (Tweet). Compared to the last big redesign, this feels much more iterative. I can barely tell the difference
How to Create an Animated Countdown Timer With HTML, CSS and JavaScript
Apr 11, 2025 am 11:29 AM
Have you ever needed a countdown timer on a project? For something like that, it might be natural to reach for a plugin, but it’s actually a lot more
HTML Data Attributes Guide
Apr 11, 2025 am 11:50 AM
Everything you ever wanted to know about data attributes in HTML, CSS, and JavaScript.
A Proof of Concept for Making Sass Faster
Apr 16, 2025 am 10:38 AM
At the start of a new project, Sass compilation happens in the blink of an eye. This feels great, especially when it’s paired with Browsersync, which reloads
How We Created a Static Site That Generates Tartan Patterns in SVG
Apr 09, 2025 am 11:29 AM
Tartan is a patterned cloth that’s typically associated with Scotland, particularly their fashionable kilts. On tartanify.com, we gathered over 5,000 tartan
How to Build Vue Components in a WordPress Theme
Apr 11, 2025 am 11:03 AM
The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.
PHP is A-OK for Templating
Apr 11, 2025 am 11:04 AM
PHP templating often gets a bad rap for facilitating subpar code — but that doesn't have to be the case. Let’s look at how PHP projects can enforce a basic
A Comparison of Static Form Providers
Apr 16, 2025 am 11:20 AM
Let’s attempt to coin a term here: "Static Form Provider." You bring your HTML
