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
0 Comments
"Thank you for taking the time to engage with this post! We value thoughtful and constructive comments that contribute to the discussion. Please keep your comments respectful and on-topic. We encourage you to share your insights, ask questions, and participate in meaningful conversations. Note that comments are moderated, and any inappropriate or spammy content will be removed. We look forward to hearing your thoughts!"