How to make age calculator tool website on blogger

How to make age calculator on Blogger Website. We will know all these things in this article related to make age calculator.

Nowadays blogging is at one level only. So in such a situation there are different departments in the blogging sector. So, one of the best is tool website. Many of my subscribers have asked me in the comment that how can we make age calculator tool websiteon Blogger / Blogspot Platform?

Your age calculator looks like this ....

How to make age calculator tool website on blogger

Let me tell you clearly that a different trend of 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 calculation tool.

What is Age Calculator Tool?

There are many new bloggers who have just entered the field of blogging. Which are they 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 age calculator.

So many people do not know about this tool. So let me tell them, that with the help of Age calculator tool, we can easily find out our age. By the way, how old is the age and 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

Now I have told you some steps below. By following which you can easily make this age calculator tool in your blogger or blog for free. By the way, you find many tool websites related to this age calculator tool on the internet.

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 – Download & Install Blogger Blank Template

I have provided Blank Blogger Template in below code box. Copy this code in go to blogger dashboard. Click on theme section, delete all code and now press ctrl+v for pasting new code.

<?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'/>
  <title><data:blog.pageTitle/></title>
  <b:skin><![CDATA[

     body{background:#fff}

   ]]></b:skin>
   </head>
   <body>
   <b:section class='main' id='main' showaddelement='yes'/>
   </body>
   </html>

Step #2 – Use JavaScript

So friends, now I have provided JavaScript code in the box below. You have to copy it. Now you have to go to Blogger Dashboard>Layout>Add a Gadget>HTML/JavaScript. You copied your code. Paste that code 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 Us";
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>

Step #3 – Use CSS

Now you will also get some CSS Script below. So you also have to copy and paste it easily by following the above steps and save it.

<style>
@import url('https://fonts.googleapis.com/css?family=Gotu&display=swap');
body {
background-color: dodgerblue;
font-family: 'Gotu', sans-serif;
color: white;
}
label {
font-size: 20px;
}
form {
text-align: center;
}
input {
border: 0;
padding: 10px 20px;
font-size: 20px;
border-radius: 50px;
margin: 5px;
}
h2 {
text-align: center;
}
button {
padding: 10px;
width: 300px;
margin: 10px 0;
font-size: 20px;
border: 0;
}
button:focus, button:hover {
background-color: black;
color: white;
}
p {
text-align: center;
}
div {
border: 1px solid white;
background-color: black;
text-align: center;
}
#postCredit {
background-color: powderblue;
color: black;
}
a {
text-decoration: none;
color: black;
display: block;
padding: 10px;
background-color: white;
}
a:hover {
background-color: cyan;
}
h1 {
background-color: black;
margin: 0 0 20px 0;
padding: 10px;
text-align: center;
}
</style>
Copied!

Step #4 – Use HTML

Now I have given you some HTML scripts below and copy them and paste them by following the steps given above.

Know more about us section is in this section if you want to chage given address with your site address otherwise , just paste it as it is ......

<h1>Age Calculator Tool</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://finddataforyou.blogspot.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>

Conclusion: - How did you like this article of How to Create Age Calculator Tool in Blogger in Urdu. 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.

INFORMATION FOR YOU

Search This Blog

AD