age
<!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">
<style>
#calc-interface {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background:grey;
}
.calculator {
text-align: center;
max-width: 70%;
margin: auto;
background:blue;
color:#fff;
padding:10px;
border-radius:12px;
}
input, #calc-btn {
margin: 10px;
padding: 5px;
width:90%;
text-align:center;
}
#calc-btn {
cursor: pointer;
background:green;
color:#fff;
font-size:18px;
width:auto;
border:1px solid green;
border-radius:6px;
font-weight:800;
padding:10px;
}
label{
font-size:18px;
font-weight:800;
}
input {
border-radius:12px;
height:25px;
text-align:center;
}
</style>
</head>
<body id="calc-interface">
<div class="calculator">
<h3 style="background:green; padding:25px; text-align:center;color:white;border-radius:12px"><a style="text-decoration:none;color:white;font-size:25px;font-weight:800;" href="https://www.vseducations.in">VS EDUCATIONS BLOG</a></h3>
<h1>Age Calculator</h1>
<label for="dob">Enter your valid Date of Birth:</label>
<br>
<input type="date" id="dob" placeholder="DD/MM/YYYY"><br>
<button id="calc-btn" onclick="calculateAge()">Calculate Age</button>
<p style="font-size:18px;font-weight:800; background:green;padding:10px;border-radius:8px;">Your age is: <span id="result"></span></p>
</div>
<script>
function calculateAge() {
var dob = document.getElementById('dob').value;
var today = new Date();
var birthDate = new Date(dob);
var years = today.getFullYear() - birthDate.getFullYear();
var months = today.getMonth() - birthDate.getMonth();
var days = today.getDate() - birthDate.getDate();
if (days < 0) {
months--;
days += new Date(today.getFullYear(), today.getMonth(), 0).getDate();
}
if (months < 0) {
years--;
months += 12;
}
var ageString = years + " years, " + months + " months, " + days + " days";
document.getElementById('result').innerText = ageString;
}
</script>
</body>
</html>
Age
