Dynamic Age Calculator
Your age is 0 years, 0 months, 0 weeks, 0 days, 0 hours, 0 minutes, 0 seconds.
Sure, you can add individual boxes for each unit of time (years, months, weeks, days, hours, minutes, seconds). Here's the updated code with individual boxes:
html<!DOCTYPE html>
<html>
<head>
<title>Dynamic Age Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
text-align: center;
margin-top: 50px;
}
h1 {
color: #333;
}
label {
font-size: 18px;
color: #333;
}
input[type="date"] {
padding: 10px;
border: 2px solid #333;
border-radius: 5px;
font-size: 16px;
}
.result-box {
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
margin-top: 20px;
}
.result {
font-size: 24px;
color: #333;
margin-top: 10px;
}
.unit-box {
background-color: #6a64f1;
color: #fff;
padding: 10px;
border-radius: 5px;
margin: 5px;
display: inline-block;
}
</style>
<script>
function calculateAge() {
var birthdate = new Date(document.getElementById('birthdate').value);
function updateDisplay() {
var today = new Date();
var ageInMilliseconds = today - birthdate;
// Calculate age in years, months, weeks, days, hours, minutes, seconds
var ageInSeconds = Math.floor(ageInMilliseconds / 1000); // 1000 milliseconds in a second
var ageInMinutes = Math.floor(ageInSeconds / 60); // 60 seconds in a minute
var ageInHours = Math.floor(ageInMinutes / 60); // 60 minutes in an hour
var ageInDays = Math.floor(ageInHours / 24); // 24 hours in a day
var ageInWeeks = Math.floor(ageInDays / 7); // 7 days in a week
var ageInMonths = Math.floor(ageInDays / 30.44); // Average number of days in a month
var ageInYears = Math.floor(ageInDays / 365.25); // Average number of days in a year
// Display the result
document.getElementById('years').innerHTML = ageInYears;
document.getElementById('months').innerHTML = ageInMonths;
document.getElementById('weeks').innerHTML = ageInWeeks;
document.getElementById('days').innerHTML = ageInDays;
document.getElementById('hours').innerHTML = ageInHours;
document.getElementById('minutes').innerHTML = ageInMinutes;
document.getElementById('seconds').innerHTML = ageInSeconds;
}
// Initial calculation
updateDisplay();
// Update the age display every second
setInterval(updateDisplay, 1000);
}
</script>
</head>
<body>
<h1>Dynamic Age Calculator</h1>
<label for="birthdate">Enter your birthdate:</label>
<input type="date" id="birthdate">
<br>
<button onclick="calculateAge()">Calculate Age</button>
<div class="result-box">
<p class="result">
Your age is
<span class="unit-box" id="years">0</span> years,
<span class="unit-box" id="months">0</span> months,
<span class="unit-box" id="weeks">0</span> weeks,
<span class="unit-box" id="days">0</span> days,
<span class="unit-box" id="hours">0</span> hours,
<span class="unit-box" id="minutes">0</span> minutes,
<span class="unit-box" id="seconds">0</span> seconds.
</p>
</div>
</body>
</html>
Now, each unit of time (years, months, weeks, days, hours, minutes, seconds) is displayed in a separate box within a beautiful result box.
Thank you
ReplyDelete