Age Calculator
0
html
Age Calculator
css
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
h1 {
font-size: 36px;
margin-bottom: 50px;
}
form {
display: flex;
flex-direction: column;
align-items: center;
background-color: #f2f2f2;
padding: 20px;
border-radius: 10px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1);
}
label {
font-size: 18px;
margin-bottom: 10px;
}
input[type="date"] {
width: 200px;
height: 40px;
font-size: 18px;
margin-bottom: 20px;
padding-left: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
button[type="submit"] {
width: 100px;
height: 40px;
font-size: 18px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#result {
font-size: 18px;
margin-top: 20px;
}
java script
const form = document.querySelector('form');
const result = document.querySelector('#result');
form.addEventListener('submit', (event) => {
event.preventDefault();
const birthdate = new Date(document.querySelector('#birthdate').value);
const today = new Date();
const age = today.getFullYear() - birthdate.getFullYear();
const month = today.getMonth() - birthdate.getMonth();
if (month < 0 || (month === 0 && today.getDate() < birthdate.getDate())) {
age--;
}
result.textContent = `You are ${age} years old.`;
});
Tags
