cm85/Age Finder.markdown

## Age Finder.markdown

      
    Raw
  

              Age Finder.markdown
            
          
    Age Finder

This will find your exact age digitaly
A Pen by Carlo Moscatiello on CodePen.
License.

  
## index.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>

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

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