.age-calculator {
max-width: 500px;
margin: 40px auto;
padding: 30px;
background: #fefefe;
border-radius: 20px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
font-family: 'Segoe UI', sans-serif;
}
.age-calculator h2 {
text-align: center;
color: #222;
margin-bottom: 25px;
font-size: 24px;
}
.age-calculator label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #444;
font-size: 16px;
}
.age-calculator input[type="date"] {
width: 100%;
padding: 12px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 10px;
margin-bottom: 20px;
box-sizing: border-box;
}
.age-calculator button {
width: 100%;
padding: 14px;
background: #4CAF50;
color: white;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 10px;
cursor: pointer;
transition: background 0.3s ease;
}
.age-calculator button:hover {
background: #45a049;
}
.age-calculator #result {
margin-top: 20px;
text-align: center;
font-size: 18px;
font-weight: 500;
color: #333;
word-wrap: break-word;
}
@media (max-width: 600px) {
.age-calculator {
padding: 20px;
}
.age-calculator h2 {
font-size: 20px;
}
.age-calculator input,
.age-calculator button {
font-size: 15px;
}
}
Age Calculator
function calculateAge() {
const dob = document.getElementById("dob").value;
const resultDiv = document.getElementById("result");
if (!dob) {
resultDiv.innerHTML = "🚫 Please select your date of birth.";
return;
}
const dobDate = new Date(dob);
const today = new Date();
let ageYears = today.getFullYear() - dobDate.getFullYear();
let ageMonths = today.getMonth() - dobDate.getMonth();
let ageDays = today.getDate() - dobDate.getDate();
if (ageDays < 0) {
ageMonths--;
const prevMonth = new Date(today.getFullYear(), today.getMonth(), 0);
ageDays += prevMonth.getDate();
}
if (ageMonths < 0) {
ageYears--;
ageMonths += 12;
}
resultDiv.innerHTML = `🎉 You are ${ageYears} years, ${ageMonths} months, and ${ageDays} days old.`;
}
Age Calculator
About the Author
