Age Calculator Html Code |age Calculator Html Css Javascript

Age Calculator Html Code |age Calculator Html Css 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 so let’s start with a basic HTML structure for the Age Calculator

HTML Code

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

age calculator

CSS Code

#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;
}

Css Updated output

age calculator html code

Javascript(jquery) Code

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

age calculator javascript 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. Thank you!
This post teaches us how to create an Age Calculator using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki

Code By – Hùng Võ

Check out more…..

1. 50 front-end projects html Css

2. add to cart button

3. quiz app javascript

Share on:

Leave a Comment