In today’s article, we are going to talk about How to Create Age Calculator Tool in Blogger. So we will know all these things in this article. So stay tuned in this article and know in full detail.
Nowadays blogging is at one level only. So in such a situation, there are different departments in the blogging sector. So one of these is Web Tools. So many of my Subscribers have asked me in the Comment I can easily make Age Calculator Tool on Blogger / Blogspot Platform.
Read More: What is a Canonical Tag and How to Use Canonical Tag
Let me tell you clearly that a different trend in Age Calculator is going on. So in such a situation, everyone wants to have their own age calculator tool. So in such a situation, I have explained in detail in this post how you can easily make age telling tool.
What is Age Calculator Tool?
There are many new bloggers who have just entered the field of blogging. They now have to do something new in this blogging industry. So in such a situation, all the people just want that everything should be different. So in such a situation, a tool comes in the name of an age calculator.
So many people do not know about this tool. So let me tell them that with the help of the Age calculator tool, we can easily find out our age. By the way, how old is the age there are many ways to extract more information? But if you use this tool then you can find out your exact age in a pinch.
Create Age Calculator Tool in Blogger
I have told you some steps below. By following this you can easily make this age calculator tool in your blogger blog for free. By the way, you find many tool websites related to this age calculator tool on the internet.
And most of the designs are different. So in such a situation, the tool I have provided to you below is completely unique. I have provided HTML, CSS, and JavaScript code to make this tool below. And you have to follow all the steps.
Step #1 – Install Template
Best of all, you have to download Blogger Template by clicking on the Download Button below. Then edit it in Notepad and install it on your blogger site.
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html b:css='false' b:responsive='true' expr:dir='data:blog.languageDirection' lang='en-US' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <meta content='width=device-width, initial-scale=1' name='viewport'/> <b:include data='blog' name='all-head-content'/> <link rel="stylesheet" href="https://codebarta.com/wcode/css/age_calculator_tool.css"> <title>Age Calculator Tool Made by CodeBarta.com </title> </head> <body> <b:section class='main' id='main' showaddelement='yes'/> <h1>Age Calculator Tool(CodeBarta.com)</h1> <h2>Hey Dear, What's your name? <br /><input type = "text" placeholder = "Enter Your Name" autofocus/></h2> <div id = "disBlock"> <p id = "disBD"></p> <p id = "display"></p> <p id = "time"></p> </div> <div id = "postCredit"> <p id = "credit"></p> <a id = "about" href="https://codebarta.com/" target="_blank">Know More About us</a> </div> <form> <label>Enter Your Date of Birth: <input type = "date"/></label><br /> <button type = "button">Calculate</button> <button type = "reset">Reset</button> </form> </body> </html>
Step #2 – Use JavaScript
Now I have provided the JavaScript code in the box below. You have to copy it. You copied your code. Paste that code end </form> and do it.
<script>
let display = document.getElementById("display");
let input = document.getElementsByTagName("input");
let button = document.getElementsByTagName("button");
let time = document.getElementById("time");
let disBlock = document.getElementById("disBlock");
let disBD = document.getElementById("disBD");
let creditBlock = document.getElementById("postCredit");
let credit = document.getElementById("credit");
let about = document.getElementById("about");
disBlock.style.display = "none";
creditBlock.style.display = "none";
let dob = new Date(), today = new Date(), calTime;
function samay() {
let d = new Date();
time.innerHTML = d.getHours() + " Hours, " +
d.getMinutes() + " Minutes, " + d.getSeconds() + " Seconds Old";
}
function calculate() {
disBlock.style.display = "block";
creditBlock.style.display = "block";
credit.innerHTML = "Thank You For Visiting our Tool<br>Edited By codebarta.com";
let x = input[1].value.split("-");
dob.setDate(x[2]);
dob.setMonth(x[1] - 1);
dob.setFullYear(x[0]);
let year, month, day, HBD;
day = (function() {
if(today.getDate() > dob.getDate()) {
return today.getDate() - dob.getDate() - 1;
}
else if(today.getDate() == dob.getDate()) {
return today.getDate() - dob.getDate();
}
else {
let calDate = new Date(dob.getFullYear(), dob.getMonth() + 1, 0);
return (today.getDate() + calDate.getDate()) - dob.getDate() - 1;
}
}());
month = (function() {
if(today.getMonth() >= dob.getMonth()) {
if(today.getDate() >= dob.getDate()) {
return today.getMonth() - dob.getMonth();
}
else {
if((today.getMonth() - 1) >= dob.getMonth()) {
return (today.getMonth() - 1) - dob.getMonth();
}
else {
return ((today.getMonth() - 1) + 12) - dob.getMonth();
}
}
}
else {
if(today.getDate() >= dob.getDate()) {
return (today.getMonth() + 12) - dob.getMonth();
}
else {
return ((today.getMonth() - 1) + 12) - dob.getMonth();
}
}
}());
year = (function() {
if(dob.getMonth() == today.getMonth()) {
if(dob.getDate() > today.getDate()) {
return (today.getFullYear() - 1) - dob.getFullYear();
}
else {
return today.getFullYear() - dob.getFullYear();
}
}
else {
if(dob.getMonth() > today.getMonth()) {
return (today.getFullYear() - 1) - dob.getFullYear();
}
else {
return today.getFullYear() - dob.getFullYear();
}
}
}());
HBD = (function(){
if(today.getMonth() == dob.getMonth()) {
if(today.getDate() == dob.getDate()) {
disBD.innerHTML = "OMG it's your Birthday<br>Happy Birthday To You<br>";
}
else {
disBD.innerHTML = "";
}
}
else {
disBD.innerHTML = "";
}
}());
display.innerHTML = "Hi Dear " + input[0].value + ", <br/>You are " + year + " Years, " + month +
" Months, " + day + " Days, ";
calTime = setInterval(samay, 1000);
}
button[0].onclick = calculate;//when calculate button is clicked
function reset() {
input[0].focus();
display.innerHTML = "";
time.innerHTML = null;
clearInterval(calTime);
disBlock.style.display = "none";
creditBlock.style.display = "none";
}
button[1].onclick = reset;//when the reset button is clicked
</script>
You must tell by commenting in the comment box below. Or if you want to give any kind of suggestion, then you can share your opinion with us in the comment box below. can.