Age calculator tools are online or offline applications designed to calculate a person's age based on their date of birth and current date. These tools are commonly used for various purposes, such as determining someone's age for legal reasons, social interaction, or just curiosity. They are especially useful when you don't want to calculate ages by hand or need a quick answer.
Most age calculator tools require you to input the date of birth (DOB) of the person you want to calculate and then display their current age in years, months, and days. Some advanced calculators can also provide additional information, such as what day of the week the person was born or their zodiac sign.
Many age calculator tools are available online for free, and they are often easy to use. You can find them on various websites or mobile apps, and some can even be integrated into search engines, such as when typing "age calculator" into a search engine's search box. Note that an age calculator can only provide an accurate result if you enter the correct date of birth and use the current date.
Also, remember that age is calculated differently in different cultures (for example, some cultures consider you to be one year old at birth), so be sure to understand the age calculation method of the tool you're using.
You Can See the demo link at [Demo Age Calculator Tool].
So begin,
How to Add the Age Calculator Tool to Blogger.com
Step 1: At first, go to blogger.com, then login.
Step 2: Then go to Blogger Pages.
Step 3: After creating A New page,
Step 4: Choose your page name (Your name) Or Age calculator.
Now Page in two options
1.HTML View
2.Compose View
Step 5: Switch to HTML mode.
Step 6: Copy the entire code and paste it on the HTML Views page.
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Age Calculator</title>
<style>
body {
font-family:
}
#container {
text-align: center;
padding: 20px;
}
#form{
margin-top: 20px;
}
input[type='text'] {
padding: 5px 10px;
border: 1px solid #bdc3c7;
outline: 0;
color: #2980b9;
font-weight: bold;
}
#calbtn {
border: 0;
padding: 10px 20px;
cursor: pointer;
background: #482dff;
color: #f1c40f;
font-size: 20px;
outline: 0;
}
#calbtn:hover, #calbtn:active {
background-color: #c0392b;
outline: 0;
}
</style>
</head>
<body>
<div id="container">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEiJ34kCgzvUZT6nAT9bpW466HTDYEdCxctIcbxAmFRM91mfCnXk4qZUuE2cFsnXO0JxlXhp6CXl_4KSf3qOf6QE8moQmRUcY0jlDBZhumCcvJX_iOapkFXteuyQOi1KRvjUlT2Z11ooyQeGXvDm0UAKfYBMgFMjPrCFW_0FLhMMtv9Bz1hVvW2zo-YhwtFK=s150" alt="" />
<form id="form" autocomplete="off">
<h5>All must be filled in with numbers, otherwise we won't be able to calculate.</h5>
<label for="date">
Date Of Birth:
<input type="text" maxlength="2" size="2" id="date" placeholder="Day" required/>
<input type="text" maxlength="2" size="2" id="month" placeholder="Month" autocomplete="on" required/>
<input type="text" maxlength="4" size="4" id="year" placeholder="Year" required/>
</label>
<br />
<br />
<label for="date2">
Today's Date:
<input type="text" maxlength="2" size="2" id="date2" placeholder="Date"/>
<input type="text" maxlength="2" size="2" id="month2" placeholder="Month"/>
<input type="text" maxlength="4" size="4" id="year2" placeholder="Year"/>
</label>
<br />
<br />
<button id="calbtn">Age calculator</button>
<br />
<br />
<span id="age"></span>
<span id="months"></span>
<span id="days"></span>
</form>
</div>
<script>
var form = document.getElementById("form"),
bdate = document.getElementById("date"),
bmonth = document.getElementById("month"),
byear = document.getElementById("year"),
date = document.getElementById("date2"),
month = document.getElementById("month2"),
year = document.getElementById("year2"),
age = document.getElementById("age"),
days = document.getElementById("days"),
mons = document.getElementById("months"),
today = new Date();
year.value = today.getFullYear();
month.value = today.getMonth() + 1;
date.value = today.getDate();
form.addEventListener('submit', function(event) {
event.preventDefault();
var by = Number.parseFloat(byear.value),
bm = Number.parseFloat(bmonth.value),
bd = Number.parseFloat(bdate.value),
ty = Number.parseFloat(year.value),
tm = Number.parseFloat(month.value),
td = Number.parseFloat(date.value);
if (td < bd) {
days.innerHTML = (td - bd + 30) + ' days';
tm = tm - 1;
} else {
days.innerHTML = (td - bd) + ' days'
}
if (tm < bm) {
months.innerHTML = (tm - bm + 12) + ' months';
ty = ty - 1;
} else {
months.innerHTML = (tm - bm) + ' months'
}
age.innerHTML = "Age: " + (ty - by) + ' years';
});
</script>
</body>
</html>
Step 7: Publish the post. Once you have added the HTML code, you can click on the "Publish" button to publish the post on your Blogger website.
Step 8: Link to Age Calculator. You can add a link to your Age Calculator page in your blog's sidebar or navigation menu so that users can easily access it.
Please note that Blogger may have some limitations when embedding JavaScript directly into posts for security reasons. In such cases, you may need to use external JavaScript hosted on another website. However, this code should work in most cases. Always remember to preview your post and check the age calculator so that it works as expected.