Age Calculator
Age Calculator
```
*CSS (in style.css file):*
```
body {
font-family: Arial, sans-serif;
}
form {
width: 300px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
label {
display: block;
margin-bottom: 10px;
}
input[type="date"] {
width: 100%;
height: 30px;
margin-bottom: 20px;
padding: 10px;
border: 1px solid #ccc;
}
button {
width: 100%;
height: 30px;
background-color: #4CAF50;
color: #fff;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #3e8e41;
}
#result {
font-size: 24px;
font-weight: bold;
margin-top: 20px;
}
```
*JavaScript (in script.js file):*
```
const birthDateInput = document.getElementById('birth-date');
const calculateBtn = document.getElementById('calculate-btn');
const resultElement = document.getElementById('result');
calculateBtn.addEventListener('click', (e) => {
e.preventDefault();
const birthDate = new Date(birthDateInput.value);
const today = new Date();
const age = calculateAge(birthDate, today);
resultElement.innerText = `You are ${age.years} years, ${age.months} months, and ${age.days} days old.`;
});
function calculateAge(birthDate, today) {
const years = today.getFullYear() - birthDate.getFullYear();
const months = today.getMonth() - birthDate.getMonth();
const days = today.getDate() - birthDate.getDate();
if (months < 0) {
years--;
months += 12;
}
if (days < 0) {
months--;
days += new Date(today.getFullYear(), today.getMonth(), 0).getDate();
}
return { years, months, days };
}
0 टिप्पणियाँ