html age calculator

Simple Age Calculator In HTML And JavaScript

Simple Age Calculator In HTML And JavaScript

Welcome to Code With Random blog. This blog teaches us how we create an Age Calculator. We use HTML, CSS, and JavaScript for the Age Calculator. I hope you enjoy our blog.

We’ll show you a Simple Age Calculator In HTML And JavaScript with complete source code available for you so you just copy and paste it into your project.

So let’s start with a basic HTML structure for the Age Calculator.

 

HTML Code For Age Calculator

<!DOCTYPE html>
<html>

<head>
  <title>Age Calculator</title>
  <link rel='stylesheet' href='style1.css' />
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
  <script src='app.js'></script>
</head>

<body>
  <div id="main_container">
    <div id="birth_date_input">Birth Date: <input type="date" id="birth_date"></div>
    <br />
    <div id="calculate">Calculate your age</div>
    <div id="age_container"><span id="exact_age">Age</span></div>

  </div>
</body>

</html>

There is all the HTML code for the Age Calculator. Now, you can see an output with an Age Calculator then we write javascript for the Age Calculator.

Output

Simple Age Calculator In HTML And JavaScript

Temperature Convertor using HTML, CSS &JavaScript

CSS Code For Age Calculator

#main_container {
  width: 400px;
  margin: 20px;
  margin-left: auto;
  margin-right: auto;
  padding: 30px;
  font-family: sans-serif;
  border-radius: 20px;
  border: 3px solid #999;
}

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

#age_container {
  margin: 40px 5px;
  padding: 20px;
  border-radius: 50px;
  border: 1px solid #000;
  font-weight: bolder;
  background: #eee;
  font-size: 20px;
  line-height: 40px;
}

#calculate {
  cursor: pointer;
  text-align: center;
  width: 200px;
  padding: 5px;
  margin: 10px;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid #999;
  border-radius: 10px;
  background: #ffd119;
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#ffd119),
    to(#e6b800)
  );
  background: -moz-linear-gradient(top, #ffd119, #e6b800);
  font-weight: bold;
  height: 28px;
  box-shadow: 0 -8px inset;
}

#calculate:hover {
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#e6b800),
    to(#ffd119)
  );
  background: -moz-linear-gradient(top, #e6b800, #ffd119);
  margin-top: 13px;
  height: 25px;
  box-shadow: 0 -5px inset;
}

#calculate:active {
  background: #403300;
  padding-top: 10px;
  height: 20px;
  box-shadow: 0 5px #000 inset;
}

#age {
  padding: 5px;
  border: 3px dashed #aaa;
}

How to Copy To Clipboard From Input field JavaScript

CSS Updated output

Simple Age Calculator In HTML And JavaScript

JavaScript(jquery) Code For Age Calculator

$(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(
                'You are<br/><span id="age">' +
                year_age +
                " years " +
                month_age +
                " months " +
                day_age +
                " days</span> old"
            );
        }
    });
});

Final output

Simple Age Calculator In HTML And JavaScript

50+ Html, Css &Javascript Projects With Source Code

Now that we have completed our javascript section, our updated output with javascript. I hope you like the Age Calculator.

you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development
This post teaches us how to create a Simple Age Calculator In HTML And JavaScript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Thank You And Happy Learning!!!

Written by – Code With Random/Anki

Code By – Hùng Võ



Tags: , ,

Leave a Reply