Do you want to create a stylish age calculator? but you don’t know coding! Don’t worry; now you can create your own age calculator in just 5 minutes. Now I will teach you How Design an Age Calculator using HTML CSS and JavaScript.
An age calculator calculates years, months, days, hours, minutes, and seconds between two dates. To design a stylish age calculator, just follow my instructions, copy and paste the codes in the right place, and after that, you can have your own age calculator. You can also download age calculator script free.
Design an HTML Page
To design an age calculator, you have to create an HTML page to view the content of the calculator. Create an HTML page and name it “index.html” (you can change the name as you want), copy the complete HTML code from below, paste it to your HTML file, and save your file.
HTML Code (index.html)
<!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="tap-styles.css">
</head>
<body>
<div class="tap-container">
<h1>Age Calculator</h1>
<div>
<label for="tap-startDate">Date of Birth:</label>
<input type="date" id="tap-startDate">
<label for="tap-endDate">Age at the Date of:</label>
<input type="date" id="tap-endDate">
</div>
<button onclick="tapCalculateAge()">Calculate Age</button>
<div id="tap-result"></div>
</div>
<script src="tap-age-script.js"></script>
</body>
</html>Create a CSS file for a Stylish Page
To give your age calculator a stylish look, you have to make a CSS file. It’s so simple: Open Notepad or any text or code editor and create a new page. Copy the code from below and paste it into your file. Save the file name “tap-style.css.”
CSS Style (tap-style.css)
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #71b7e6, #9b59b6);
margin: 0;
color: #333;
}
.tap-container {
background-color: #fff;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
width: 100%;
}
h1 {
color: #9b59b6;
margin-bottom: 20px;
font-size: 2em;
}
label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
input[type="date"] {
padding: 10px;
width: calc(50% - 10px);
border: 2px solid #ddd;
border-radius: 5px;
margin: 5px;
font-size: 1em;
transition: border-color 0.3s;
}
input[type="date"]:focus {
border-color: #9b59b6;
outline: none;
}
button {
padding: 12px 25px;
background-color: #9b59b6;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
transition: background-color 0.3s, transform 0.3s;
margin-top: 20px;
}
button:hover {
background-color: #8e44ad;
transform: translateY(-2px);
}
.tap-age-item {
margin-top: 15px;
font-size: 1.1em;
}Create a JavaScript for Age Calculator
This age calculator is designed with HTML, CSS, and JavaScript, so we have to create a JavaScript file to function the calculator. Open any text or code editor, create a new file, copy the complete code below, and paste it into the file. Save the file with the name “tap-age-script.js“.
JavaScript (tap-age-script.js)
document.getElementById('tap-endDate').valueAsDate = new Date();
function tapCalculateAge() {
var startDate = new Date(document.getElementById('tap-startDate').value);
var endDate = new Date(document.getElementById('tap-endDate').value);
if (startDate > endDate) {
alert("Date of birth cannot be after end date.");
return;
}
var timeDiff = Math.abs(endDate.getTime() - startDate.getTime());
var years = Math.floor(timeDiff / (1000 * 60 * 60 * 24 * 365.25));
var remainingTime = timeDiff % (1000 * 60 * 60 * 24 * 365.25);
var months = Math.floor(remainingTime / (1000 * 60 * 60 * 24 * 30.4375));
remainingTime %= (1000 * 60 * 60 * 24 * 30.4375);
var days = Math.floor(remainingTime / (1000 * 60 * 60 * 24));
remainingTime %= (1000 * 60 * 60 * 24);
var hours = Math.floor(remainingTime / (1000 * 60 * 60));
remainingTime %= (1000 * 60 * 60);
var minutes = Math.floor(remainingTime / (1000 * 60));
var seconds = Math.floor(remainingTime % (1000 * 60) / 1000);
var totalMonths = years * 12 + months;
var totalDays = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
var totalHours = Math.floor(timeDiff / (1000 * 60 * 60));
var totalMinutes = Math.floor(timeDiff / (1000 * 60));
var totalSeconds = Math.floor(timeDiff / 1000);
var ageResult = "<div class='tap-age-item'>Your Age is " + years + " Years " + months + " Months</div>";
var result = "";
result += "<div class='tap-age-item'>" + years + " Years</div>";
result += "<div class='tap-age-item'>" + totalMonths + " Months</div>";
result += "<div class='tap-age-item'>" + totalDays + " Days</div>";
result += "<div class='tap-age-item'>" + totalHours + " Hours</div>";
result += "<div class='tap-age-item'>" + totalMinutes + " Minutes</div>";
result += "<div class='tap-age-item'>" + totalSeconds + " Seconds</div>";
document.getElementById('tap-result').innerHTML = ageResult + result;
}Now that all is set, put all files in one folder and run the HTML file. It’s time to see the output of this code.
Output
You can change the fonts and color schemes according to your requirements in your CSS file. Do not change anything in the JavaScript it can create a problem with calculation (if you don’t know coding). Try this code and leave your experience in the comment section.