Notification texts go here. Contact Us Buy Now!

How To Create Age Calculator website Tool In Blogger

 Hello friends! Welcome to your Epic-Template blog. So in this article today we are going to talk about How to Create Age Calculator Tool in Blogger in Hindi. And this Blogger is Age Calculator let's start how to make?. So we will know all these things in this article. So stay in this article and know more in full details.Nowadays Blogging is at the same level. So in this blogging sector there are different departments too. So this is one of Web Tools. So many of my Subscribers have asked me in the comment that can we easily create Age Calculator Tool on Blogger / Blogspot Platform?Let me tell you clearly that Age Calculator has a different trend. So in this way all people want to have their own age calculator tool. So in this post, I have explained in detail how you can easily create an age-old tool.

What is the Age Calculator Tool?


There are many new bloggers who have just stepped into the field of blogging. Which they now have to do something new in this Blogging Industries. So in this case, all people want is that something be separated. So in this way a tool comes in the name of age calculator.So many people do not know about this tool. So let me tell them with the help of Age calculator tool, we can easily find out our age. By the way, how old is age and there are many ways to extract information. But if you use this tool, you can find out your correct age in a pinch.

Steps to Create Age Calculator Tool in Blogger :)

So friends, now I have told you some steps. Which you can easily make this age calculator tool free in your blogger blog by following it. By the way, you can find many websites related to this edge calculator tool on the Internet.

And most designs vary. So in this way the tool that I have provided to you below is completely unique. I have provided HTML, CSS and JavaScript code to build this tool below. And you have to follow all the steps.

Step #1 – Download & Install Blogger Blank Template

The most important thing is to download the Blank Blogger Template by clicking on the Download button below. Then edit it in Notepad and install it in your blogger site.

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 had copied your code. Paste that code and serve 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<br>I am Techly360.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>  


Step #3 – Use CSS

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

 <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>  


Step #4 – Use HTML

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

 <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://www.facebook.com/rohit.baidya.338/" target="_blank">Know More About Me</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. You must tell by commenting in the comment box .

Getting Info...

About the Author

Hey There I'm Rahul Shah Founder Of Rahul's Blog and interested In Blogging and coding too.

8 comments

  1. Thanks dude
  2. his lead to development of fundamental adding machines that were equipped for performing minor computations like 'in addition to', 'less', 'increase' and 'division'. 150 lbs to kg
  3. I admire this article for the well-researched content and excellent wording. I got so involved in this material that I couldn’t stop reading. I am impressed with your work and skill. Thank you so much. useless website generator
  4. However, if the goal of the website is to assist users to locate a specific task or compare choices, it can hurt user experience. https://www.sandeepmehta.co.in/affordable-seo-services-delhi/
  5. Indeed, video is dominating, and will turn into a considerably more noteworthy web design pattern in 2018.
    https://onohosting.com/
  6. It is an excellent blog, I have ever seen. I found all the material on this blog utmost unique and well written. And, I have decided to visit it again and again. https://electric-generator-1.blogspot.com/2021/09/singapore-storage-space-costs-price.html
  7. These conditions eventually result in the discovery of a timber calculator referred to as abathia. binary calculator
  8. It was wondering if I could use this write-up on my other website, I will link it back to your website though.Great Thanks. storage box singapore
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.