Calculator for Age and Date
Date & Age Calculator
Custom code for this Date and Age Calculator
If you want to add this Date and Age calculator on your WordPress Website watch this video help you to How to add Custom code in WordPress Website.
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date & Age Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<h2>Date & Age Calculator</h2>
<div>
<label for="start-date">Start Date / Date of Birth:</label>
<input type="date" id="start-date">
</div>
<div>
<label for="end-date">End Date / Current Date:</label>
<input type="date" id="end-date">
</div>
<button onclick="calculateDifference()">Calculate Date Difference</button>
<button onclick="calculateAge()">Calculate Age</button>
<button onclick="resetFields()">Reset</button>
<div id="difference-container">
<div id="result"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS Code
.container {
max-width: 400px;
margin: 50px auto;
padding: 20px;
background: linear-gradient(45deg, #00c3ff, #ffff1c);
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
h2 {
text-align: center;
font-size: 28px;
color: #333;
text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
div {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
font-size: 16px;
}
input[type="date"] {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
text-align: center;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-bottom: 10px;
}
button:hover {
background-color: #0056b3;
}
#result {
font-weight: bold;
text-align: center;
font-size: 18px;
color: #333;
}
#difference-container {
background: linear-gradient(45deg, #00c3ff, #ffff1c);
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}JavaScript Code
function calculateDifference() {
var startDate = new Date(document.getElementById("start-date").value);
var endDate = new Date(document.getElementById("end-date").value);
if (!startDate || !endDate || startDate > endDate) {
document.getElementById("result").innerHTML = "Please enter valid dates";
} else {
var difference = endDate.getTime() - startDate.getTime();
var daysDifference = Math.floor(difference / (1000 * 60 * 60 * 24));
var yearsDifference = endDate.getFullYear() - startDate.getFullYear();
var monthsDifference = endDate.getMonth() - startDate.getMonth();
if (monthsDifference < 0 || (monthsDifference === 0 && endDate.getDate() < startDate.getDate())) {
yearsDifference--;
monthsDifference += 12;
}
document.getElementById("result").innerHTML = "Difference: " + yearsDifference + " years, " + monthsDifference + " months, " + (endDate.getDate() - startDate.getDate()) + " days";
}
}
function calculateAge() {
var birthDate = new Date(document.getElementById("start-date").value);
var currentDate = new Date(document.getElementById("end-date").value);
if (!birthDate || !currentDate || birthDate > currentDate) {
document.getElementById("result").innerHTML = "Please enter valid dates";
} else {
var age = currentDate.getFullYear() - birthDate.getFullYear();
var m = currentDate.getMonth() - birthDate.getMonth();
if (m < 0 || (m === 0 && currentDate.getDate() < birthDate.getDate())) {
age--;
}
document.getElementById("result").innerHTML = "Age: " + age + " years";
}
}
function resetFields() {
document.getElementById("start-date").value = "";
document.getElementById("end-date").value = "";
document.getElementById("result").innerHTML = "";
}Read also, How to add style on contact form 7 / Automatic Table of Contents in WordPress Website without plugin.
Fell free to customize given HTML, CSS and JavaScript code. And don’t forget to give us feedback.
Leave a Reply