This will find your exact age digitaly
A Pen by Carlo Moscatiello on CodePen.
This will find your exact age digitaly
A Pen by Carlo Moscatiello on CodePen.
<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; | |
} |