Age Calculator Script for Blogger Website

Introduction: What is an Age Calculator?

An age calculator is a simple tool that can be used to calculate your age. All you need to do is input your date of birth and the age calculator will do the rest.

This tool can be useful for a variety of purposes. For example, if you want to find out how old you will be in 2025, simply input your date of birth and the age calculator will tell you.

Age calculators can also be used to calculate the age difference between two people. This can be useful if you want to find out whether someone is older or younger than you.

So, next time you need to know your exact age or someone else's age, make sure to use an age calculator.

How to Use an Age Calculator on a Blogger Website.

Assuming you would like a step-by-step guide on how to use an age calculator on a blogger website:

1. Go to the age calculator website of your choice. Many different websites offer this service, so find one that you like and go to its homepage.

2. Enter your birth date into the age calculator. This is usually done by selecting the month, day, and year of your birth from drop-down menus.

3. Once you have entered your birth date, click the “Calculate” or “Submit” button. This will tell the age calculator to calculate your current age based on the information you provided.

4. Your current age will then be displayed on the screen.

The Benefits of Using an Age Calculator on a Blogger Website.

A lot of people don’t know their exact age. Some might know the birth year but not the day or month. This can be frustrating when trying to calculate things like retirement benefits or life expectancy. But, there is an easy way to calculate your exact age using a simple online tool.

The Age Calculator is a free online tool that anyone can use. Simply enter your date of birth and the calculator will do the rest. It will tell you how old you are in years, days, hours, minutes, and seconds.

The Disadvantages of Using an Age Calculator on a Blogger Website.

If you're a blogger, you might be tempted to add an age calculator to your website. After all, it's a fun way for visitors to find out how old they are in dog years or how many days they've been alive. But there are some disadvantages to using an age calculator on your blog.

For one thing, an age calculator can be unreliable. If someone enters their birthdate incorrectly, the calculator will give them the wrong age. And if your blog is set up to automatically convert ages into other units (like days or weeks), those conversions could also be inaccurate.

Another downside of using an age calculator is that it can make your blog look unprofessional. If you're trying to build a brand and establish yourself as an expert in your field, adding a cheesy age calculator might not send the right message.

Let's Build this Age Calculator

Step 1: Create a new page on your blogger website.
Step 2: Copy this code and it into your new page

<div id="main_container">
  <div id="birth_date_input">
    Birth Date: <input id="birth_date" type="date" />
  </div>
  <br />
  <div class="bubbly-button" id="calculate" style="text-align: center;">
    <span style="color: white;">Calculate Your Age</span>
  </div>
  <br />

  <div
    style="background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);"
    id="age_container"
  >
    <span id="exact_age">&nbsp;</span>
  </div>
</div>
<p>
  <i
    >* The year here is 365/366 days and the month here is 28/29/30/31 days,
    that means your birthday may not mean you will be 0 days old.</i
  >
</p>
<p><i>**Don't worry I will not share your input.</i></p>

<style>
      #main_container {
      width: 100%;
      margin: 0px;
      margin-left: auto;
      margin-right: auto;
      padding: 30px;
      border-radius: 20px;
  }

  #birth_date_input, #age_container {
      text-align: center;
      margin: 20px;
      margin-left: auto;
      margin-right: auto;
  }

  #age_container {box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
      margin: 40px 5px;
      padding: 20px;
      border-radius: 5px;
      font-weight: bolder;
      background: white;
      font-size: 20px;
      line-height: 40px;
  }

    #birth_date{
    border-radius: 2px;
    border-color: #3b5997;
    }

    .bubbly-button{
      background-color: #204ecf;
      border-radius: 5px;
      font-size: 15px;
      padding: 10px 0px 10px 0px;
      margin-left: 5%;
      width: 90%;
    }
    .post-title {
  text-align:center;
  }
</style>

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script>
       $(document).ready(function(){
      $("#calculate").click(function(){
          var mdate = $("#birth_date").val().toString();
          var yearThen = parseInt(mdate.substring(0,4), 10);
          var monthThen = parseInt(mdate.substring(5,7), 10);
          var dayThen = parseInt(mdate.substring(8,10), 10);

          var today = new Date();
          var birthday = new Date(yearThen, monthThen-1, dayThen);

          var differenceInMilisecond = today.valueOf() - birthday.valueOf();

          var year_age = Math.floor(differenceInMilisecond / 31536000000);
          var day_age = Math.floor((differenceInMilisecond % 31536000000) / 86400000);

          if ((today.getMonth() == birthday.getMonth()) && (today.getDate() == birthday.getDate())) {
              alert("Happy B'day!!!");
          }

          var month_age = Math.floor(day_age/30);

          day_age = day_age % 30;

          if (isNaN(year_age) || isNaN(month_age) || isNaN(day_age)) {
              $("#exact_age").text("Invalid birthday - Please try again!");
          }
          else {
              $("#exact_age").html(getAge(new Date($("#birth_date").val()), new Date()));
          }
      });
          function getAge(date_1, date_2)
  {

  //convert to UTC
  var date2_UTC = new Date(Date.UTC(date_2.getUTCFullYear(), date_2.getUTCMonth(), date_2.getUTCDate()));
  var date1_UTC = new Date(Date.UTC(date_1.getUTCFullYear(), date_1.getUTCMonth(), date_1.getUTCDate()));


  var yAppendix, mAppendix, dAppendix;


  //--------------------------------------------------------------
  var days = date2_UTC.getDate() - date1_UTC.getDate();
  if (days < 0)
  {

      date2_UTC.setMonth(date2_UTC.getMonth() - 1);
      days += DaysInMonth(date2_UTC);
  }
  //--------------------------------------------------------------
  var months = date2_UTC.getMonth() - date1_UTC.getMonth();
  if (months < 0)
  {
      date2_UTC.setFullYear(date2_UTC.getFullYear() - 1);
      months += 12;
  }
  //--------------------------------------------------------------
  var years = date2_UTC.getFullYear() - date1_UTC.getFullYear();




  if (years > 1) yAppendix = " years";
  else yAppendix = " year";
  if (months > 1) mAppendix = " months";
  else mAppendix = " month";
  if (days > 1) dAppendix = " days";
  else dAppendix = " day";

  return "Your Age is<br/><span id=\"age\">"+years + yAppendix + ", " + months + mAppendix + ", and " + days + dAppendix +" </span>";
  }

  /*
  Wrong age calculation issue fixed / update javascript code
  By Mustakim 
  https://www.ns-design.eu.org
  */

  function DaysInMonth(date2_UTC)
  {
  var monthStart = new Date(date2_UTC.getFullYear(), date2_UTC.getMonth(), 1);
  var monthEnd = new Date(date2_UTC.getFullYear(), date2_UTC.getMonth() + 1, 1);
  var monthLength = (monthEnd - monthStart) / (1000 * 60 * 60 * 24);
  return monthLength;
  }

  });
</script>

Step 3: Publish your page
Step 4: Done!

---

Terms of Use

To appreciate our workshop, consider keeping the credits in canons. We do not allow to rewrite this post in any manner. Do not copy this post, canons or any part from this composition without authorization

Our All Posts Are Protected By DMCA. So Don't Try To Copy Our Posts And Reproduction In Any Way Is Strictly Prohibited! Or else Legal Actions Will Be Taken. © NS DESIGN | All Rights Reserved

©️ Copyright Reserved: NS DESIGN