Hey There!
Let's create a simple Age Calculator project using HTML, CSS, and JavaScript. I'll explain everything step-by-step in a friendly way so you can understand and build it easily.
What is the Age Calculator?
The Age Calculator is a fun little tool where you can input your birthdate, and it will calculate your age in years, months, and days. It’s a great way to practice your web development skills!
Step 1: Set Up the HTML Structure
HTML is like the skeleton of our project. It defines the structure of the page.
<!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="styles.css">
</head>
<body>
<div class="container">
<h1>Age Calculator</h1>
<label for="birthdate">Enter your birthdate:</label>
<input type="date" id="birthdate" name="birthdate">
<button onclick="calculateAge()">Calculate Age</button>
<div id="result" class="result">
<p id="years"></p>
<p id="months"></p>
<p id="days"></p>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Explanation:
<input type="date">: This creates a date picker where users can select their birthdate.<button>: When clicked, it triggers thecalculateAge()function.<p id="result">: This is where the calculated age will be displayed.
Step 2: Style the Page with CSS
CSS is like the makeup of our project. It makes everything look pretty!
<style>
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #6a11cb, #2575fc);
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #fff;
}
.container {
background: rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 15px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(10px);
text-align: center;
max-width: 400px;
width: 100%;
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
}
label {
font-size: 1.2rem;
display: block;
margin-bottom: 10px;
}
input[type="date"] {
width: 100%;
padding: 10px;
margin: 10px 0;
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 5px;
font-size: 1rem;
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
button {
width: 100%;
padding: 12px;
background: #ff6f61;
color: white;
border: none;
border-radius: 5px;
font-size: 1.2rem;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #ff3b2f;
}
.result {
margin-top: 20px;
font-size: 1.2rem;
text-align: left;
}
.result p {
margin: 10px 0;
padding: 10px;
background: rgba(255, 255, 255, 0.1);
border-radius: 5px;
}
/* Mobile-friendly adjustments */
@media (max-width: 480px) {
h1 {
font-size: 2rem;
}
.container {
padding: 20px;
}
input[type="date"], button {
font-size: 1rem;
}
}
</style>
Explanation:
- Centering the content: We use
flexboxto center the calculator on the page. - Styling the button: It changes color when you hover over it.
- Responsive design: The page looks good on all screen sizes.
Step 3: Add JavaScript for Functionality
JavaScript is the brain of our project. It does the calculations and updates the result.
<script>
function calculateAge() {
const birthdate = document.getElementById('birthdate').value;
if (!birthdate) {
alert("Please enter your birthdate!");
return;
}
const today = new Date();
const birthDate = new Date(birthdate);
let years = today.getFullYear() - birthDate.getFullYear();
let months = today.getMonth() - birthDate.getMonth();
let days = today.getDate() - birthDate.getDate();
// Adjust for negative months or days
if (months < 0 || (months === 0 && days < 0)) {
years--;
months += 12;
}
if (days < 0) {
const lastMonth = new Date(today.getFullYear(), today.getMonth() - 1, 0);
days += lastMonth.getDate();
months--;
}
// Display the result
document.getElementById('years').textContent = `Years: ${years}`;
document.getElementById('months').textContent = `Months: ${months}`;
document.getElementById('days').textContent = `Days: ${days}`;
}
</script>
Explanation:
- Get the birthdate: We retrieve the date selected by the user.
- Calculate the age:
- Subtract the birth year from the current year.
- Adjust the age if the user hasn’t had their birthday yet this year.
- Display the result: Update the
<p>element with the calculated age.
How It Works:
- The user selects their birthdate using the date picker.
- When they click the "Calculate Age" button, the
calculateAge()function runs. - The function calculates the age and displays it on the page.
Try It Out!
- Copy the HTML, CSS, and JavaScript code into their respective files (
index.html,styles.css,script.js). - Open the
index.htmlfile in your browser. - Enter your birthdate and see your age magically appear!