Age Calculator Design using HTML CSS and JavaScript
Last Updated :
29 Jul, 2024
Improve
In Age Calculator, we will take the date of birth as the date input and it prints the age from the current date (or specified date). We will create the structure of the Age Calculator using HTML and CSS, and JavaScript will add the functionality to calculate the age in years, months, and days.
Approach
- Create the Calculator structure using an HTML input tag for date input and a submit button.
- Style the structure with CSS using classes and elements.
- In JavaScript,
- Input Retrieval and Conversion:
- The
getDOBfunction retrieves the input Date of Birth (DOB) from an HTML input element, converts it to a usable format, and also retrieves the current date.
- The
- Age Calculation:
- The code calculates the age difference in years, months, and days by comparing the input DOB with the current date. It handles cases where the input date is invalid and adjusts the age calculation accordingly.
- Output Display:
- The calculated age is displayed as output on the HTML page. If input date is invalid, an “Invalid Date” message is display.
- Default Date Setting:
- The
currentDatefunction sets the default date value for the current date in a specified format using theformattedfunction.
- The
- Date Formatting Utility:
- The
formattedfunction takes a date object (defaulting to the current date) and formats it as YYYY-MM-DD. Theshortfunction ensures that the month and day components are zero-padded to two digits.
- The
- Input Retrieval and Conversion:
Example: This example describes the basic implementation of the Age Calculator using HTML, CSS, and JavaScript.
<!DOCTYPE html>
<html>
<head>
<title>Age Calculator</title>
<link rel="stylesheet"
href="style.css" />
</head>
<body>
<div class="card">
<header>
<h1>AGE CALCULATOR</h1>
</header>
<div>
<label>Enter your Date of Birth</label><br>
<input id="inputDob"
type="date"
value="2000-01-01" />
</div>
<br />
<!-- Take the date from which age is to be calculated -->
<div>
<label>Current Date</label><br>
<input id="cdate"
type="date"
value="" />
</div>
<br />
<button type="button"
onclick="getDOB()">
Calculate
</button>
<br />
<div id="currentAge"></div>
<script src="script.js"></script>
</div>
</body>
</html>
/* Basic styling for the body */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
/* Card styling */
.card {
background: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
}
header h1 {
margin-bottom: 20px;
color: #333;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input[type="date"] {
border: 1px solid #ddd;
border-radius: 4px;
padding: 8px;
width: 100%;
box-sizing: border-box;
margin-bottom: 20px;
}
button {
background-color: #007bff;
border: none;
color: white;
padding: 10px 20px;
border-radius: 4px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
#currentAge {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
function getDOB() {
// Get the values from the input fields
const dobInput = document.getElementById('inputDob').value;
const currentDateInput = document.getElementById('cdate').value;
// Validate if both dates are provided
if (!dobInput || !currentDateInput) {
alert('Please enter both Date of Birth and Current Date.');
return;
}
// Convert input values to Date objects
const dob = new Date(dobInput);
const currentDate = new Date(currentDateInput);
// Calculate age
let age = currentDate.getFullYear() - dob.getFullYear();
const monthDifference = currentDate.getMonth() - dob.getMonth();
// Adjust age if the birthday hasn't occurred yet this year
if (monthDifference < 0 || (monthDifference === 0 && currentDate.getDate() < dob.getDate())) {
age--;
}
// Display the result
document.getElementById('currentAge').textContent = `Your age is ${age} years.`;
}
Output:
