<!DOCTYPE html>
<html>
<head>
    <title>Exact Age Calculator</title>
	<link rel='stylesheet' href='style.css'/>
	<script src="http://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>* Year here means 365 days and Month  here means 30 days, thus your birthday may not means you will be 0 days old</em></p>
        <hr>
        <p>Possible upgrade:
            <ul>
                <li>Up to hour and minute - then we could have timezone</li>
                <li>Get timezone by choosing country instead of timezone</li>
                <li>Get current life expectancy data for the country, to show estimated time left to chase dream</li>
            </ul>
        </p>
    </div>
</body>
</html>
#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;
}
$(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");
        }
    });
});
Created from scratch
750 forks
39226 views

Browse more Codebits