<!DOCTYPE html>
<html>
<head>
<title>Age Calculator</title>
<style>
.container {
width: 300px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h2>Age Calculator</h2>
<label for="birthdate">Enter your birthdate:</label>
<input type="date" id="birthdate">
<button onclick="calculateAge()">Calculate</button>
<p id="result"></p>
</div>
<script>
function calculateAge() {
var birthdate = document.getElementById("birthdate").value;
var today = new Date();
var birthdate = new Date(birthdate);
var age = today.getFullYear() - birthdate.getFullYear();
var month = today.getMonth() - birthdate.getMonth();
if (month < 0 || (month === 0 && today.getDate() < birthdate.getDate())) {
age--;
}
document.getElementById("result").innerHTML = "Your age is: " + age;
}
</script>
</body>
</html>