Javascript Exact Age Calculator From Date of Birth Calendar Widget in Browser Full Project For Beginners

Javascript Exact Age Calculator From Date of Birth Calendar Widget in Browser Full Project For Beginners

 

Welcome folks today in this blog post we will be building a exact age calculator from date of birth calendar widget in browser using javascript. All the full source code of the application is shown below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

 

<html>
<head>
    <title>Exact Age Calculator</title>
    <link rel='stylesheet' href='style.css'/>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script>
    <script src='script.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>
        <p><em>* The year here is 365 days and the month here is 30 days, that means your birthday may not mean you will be 0 days old.</br>  
        **Don't worry I will not share your input.</em></p>
        </p>
    </div>
</body>
</html>

 

 

And now make a style.css file and copy paste the below code

 

style.css

 

#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;
    background-color: green;
}
html{
    background:rgb(100, 100, 1000);
}

 

See also  Build a React.js Chess Game in Browser Using Javascript Full Project For Beginners

 

And now make a script.js  file and copy paste the following code

 

script.js

 

$(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");
        }
    });
});

 

See also  StencilJS Hive PDF Viewer Component Example to Display PDF Documents in Browser Using React,Vue,Angular and Ionic Full Project For Beginners

 

And now if you open index.html file inside the browser you will see the below screenshot

 

Leave a Reply