This will find your exact age digitaly
A Pen by Carlo Moscatiello on CodePen.
Created
July 20, 2016 23:45
-
-
Save cm85/3e1d5a4b50c9de36bdbfebc4f5af7265 to your computer and use it in GitHub Desktop.
Age Finder
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(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"); | |
| } | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| #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; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment