PHP HTML CSS

PHP Age Calculator

age calculator 2
This tutorial teach how to create a simple calculation system using PHP math function to display the total years, months and days based on the date of birth input. I use standard HTML form to capture the input such as the day, month and year of birth. Based on this input, I created a simple calculation function to calculate the different from current date with the date of birth date.
 
First, create the HTML form to capture the date, month and year. It is recommended to use dropdown list as it could help in controlling the input data. To make it look more attractive, I use the Roboto font from Google Font with rounded edges and two-toned color drop down list.
interface age calculator
 
 
The HTML and PHP code should look like this (Read the comment in coding for details) and rename it as index.php
<!DOCTYPE html>
<html>
<head>
<title>Age Calculator</title>
<link rel="stylesheet" type="text/css" href="/style.css"> <!--external CSS link for dropdown menu-->
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <!--Google Font: Roboto-->
</head>
<body>
 <div align="center">
<br><br><br><br>
<h3>Enter your date of birth</h3><!--Header-->
 <!--Input form start-->
<form action="index.php" method="post" class="drop">
 <select name="day"> <!--Select Day -->
 <option value="01">01</option>
 <option value="02">02</option>
 <option value="03">03</option>
 <option value="04">04</option>
 <option value="05">05</option>
 <option value="06">06</option>
 <option value="07">07</option>
 <option value="08">08</option>
 <option value="09">09</option>
 <option value="10">10</option>
 <option value="11" selected="selected">11</option><!--Default Value for Day -->
 <option value="12">12</option>
 <option value="13">13</option>
 <option value="14">14</option>
 <option value="15">15</option>
 <option value="16">16</option>
 <option value="17">17</option>
 <option value="18">18</option>
 <option value="19">19</option>
 <option value="20">20</option>
 <option value="21">21</option>
 <option value="22">22</option>
 <option value="23">23</option>
 <option value="24">24</option>
 <option value="25">25</option>
 <option value="26">26</option>
 <option value="27">27</option>
 <option value="28">28</option>
 <option value="29">29</option>
 <option value="30">30</option>
 <option value="31">31</option>
 
</select>
 
 <select name="month"><!--Select Month-->
 <option value="01">January</option>
 <option value="02">Febuary</option>
 <option value="03">March</option>
 <option value="04">April</option>
 <option value="05">May</option>
 <option value="06" selected="selected">June</option><!--Default Value for Month -->
 <option value="07">July</option>
 <option value="08">August</option>
 <option value="09">September</option>
 <option value="10">October</option>
 <option value="11">November</option>
 <option value="12">December</option>
 </select>
 
 <select name="year"><!--Select Year-->
 <option value="2014">2014</option>
 <option value="2013">2013</option>
 <option value="2012">2012</option>
 <option value="2011">2011</option>
 <option value="2010">2010</option>
 <option value="2009">2009</option>
 <option value="2008">2008</option>
 <option value="2007">2007</option>
 <option value="2006">2006</option>
 <option value="2005">2005</option>
 <option value="2004">2004</option>
 <option value="2003">2003</option>
 <option value="2002">2002</option>
 <option value="2001">2001</option>
 <option value="2000">2000</option>
 <option value="1999">1999</option>
 <option value="1998">1998</option>
 <option value="1997">1997</option>
 <option value="1996">1996</option>
 <option value="1995">1995</option>
 <option value="1994">1994</option>
 <option value="1993">1993</option>
 <option value="1992">1992</option>
 <option value="1991">1991</option>
 <option value="1990">1990</option>
 <option value="1989">1989</option>
 <option value="1988">1988</option>
 <option value="1987">1987</option>
 <option value="1986">1986</option>
 <option value="1985" selected="selected">1985</option><!--Default Value for Year -->
 <option value="1984">1984</option>
 <option value="1983">1983</option>
 <option value="1982">1982</option>
 <option value="1981">1981</option>
 <option value="1980">1980</option>
 <option value="1979">1979</option>
 <option value="1978">1978</option>
 <option value="1977">1977</option>
 <option value="1976">1976</option>
 <option value="1975">1975</option>
 <option value="1974">1974</option>
 <option value="1973">1973</option>
 <option value="1972">1972</option>
 <option value="1971">1971</option>
 <option value="1970">1970</option>
 <option value="1969">1969</option>
 <option value="1968">1968</option>
 <option value="1967">1967</option>
 <option value="1966">1966</option>
 <option value="1965">1965</option>
 <option value="1964">1964</option>
 <option value="1963">1963</option>
 <option value="1962">1962</option>
 <option value="1961">1961</option>
 <option value="1960">1960</option>
 <option value="1959">1959</option>
 <option value="1958">1958</option>
 <option value="1957">1957</option>
 <option value="1956">1956</option>
 <option value="1955">1955</option>
 <option value="1954">1954</option>
 <option value="1953">1953</option>
 <option value="1952">1952</option>
 <option value="1951">1951</option>
 <option value="1950">1950</option>
 <option value="1949">1949</option>
 <option value="1948">1948</option>
 <option value="1947">1947</option>
 <option value="1946">1946</option>
 <option value="1945">1945</option>
 <option value="1944">1944</option>
 <option value="1943">1943</option>
 <option value="1942">1942</option>
 <option value="1941">1941</option>
 <option value="1940">1940</option>
 <option value="1939">1939</option>
 <option value="1938">1938</option>
 <option value="1937">1937</option>
 <option value="1936">1936</option>
 <option value="1935">1935</option>
 <option value="1934">1934</option>
 <option value="1933">1933</option>
 <option value="1932">1932</option>
 <option value="1931">1931</option>
 <option value="1930">1930</option>
 </select>
 <br> <br>
<!--Submit form(Date of Birth) data-->
 <input name="submit" type="submit" value="Calculate My Age!" class="calculate" />  
 </form> <!--Input form end-->

 <?php
// if-> Check whether form has been submitted
if(isset($_POST['submit']))
{
$d=$_POST['day'];
$m=$_POST['month'];
$y=$_POST['year'];
 
//convert DOB to "dd-mm-yyyy" format
$dob=$d.'-'.$m.'-'.$y;

//Create a new date object
$bday=new DateTime($dob);

//todays's day
$t=date('d-m-Y');
 
//calculate diff dob-today
$age=$bday->diff(new DateTime);
 
$today=date('d-m-Y'); //Current date
echo '<br />';
echo '<b>Your Birth date: </b>';
echo $dob;
echo '<br><b>Today : </b> ';
echo $today;
echo " " . date("l"); //current day
echo '<br>';
echo '<b>Your Age : </b> ';
echo $age->y;
echo ' Years, ';
echo $age->m;
echo ' Months, ';
echo $age->d;
echo ' Days';
}
?>
<br><br>
</div>
<div align="center">

&copy; 2014-<?php echo date("Y")?> Asyraf WA
</div>
</body>
</html>

 

The CSS code should look like this (Read the comment in coding for details) and rename it as style.css
body{
  font-family: 'Roboto', sans-serif;
}

/*----Calculate Button style----*/
.calculate {
	-moz-box-shadow: 0px 1px 0px 0px #6cc7f5;
	-webkit-box-shadow: 0px 1px 0px 0px #6cc7f5;
	box-shadow: 0px 1px 0px 0px #6cc7f5;
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #1cb3ff), color-stop(1, #067eba));
	background:-moz-linear-gradient(top, #1cb3ff 5%, #067eba 100%);
	background:-webkit-linear-gradient(top, #1cb3ff 5%, #067eba 100%);
	background:-o-linear-gradient(top, #1cb3ff 5%, #067eba 100%);
	background:-ms-linear-gradient(top, #1cb3ff 5%, #067eba 100%);
	background:linear-gradient(to bottom, #1cb3ff 5%, #067eba 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#1cb3ff', endColorstr='#067eba',GradientType=0);
	background-color:#1cb3ff;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	border:1px solid #074f73;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-size:15px;
	font-weight:bold;
	padding:8px 30px;
	text-decoration:none;
	text-shadow:0px 1px 0px #6cc7f5;
}
.calculate:hover {
	background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #067eba), color-stop(1, #1cb3ff));
	background:-moz-linear-gradient(top, #067eba 5%, #1cb3ff 100%);
	background:-webkit-linear-gradient(top, #067eba 5%, #1cb3ff 100%);
	background:-o-linear-gradient(top, #067eba 5%, #1cb3ff 100%);
	background:-ms-linear-gradient(top, #067eba 5%, #1cb3ff 100%);
	background:linear-gradient(to bottom, #067eba 5%, #1cb3ff 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#067eba', endColorstr='#1cb3ff',GradientType=0);
	background-color:#067eba;
}
.calculate:active {
	position:relative;
	top:1px;
}

/*----Dropddown options style----*/
.drop select {
		border: 0 !important;  /*Removes border*/
		-webkit-appearance: none;  /*Removes default chrome and safari style*/
		-moz-appearance: none; /* Removes Default Firefox style*/
		background: #0088cc url(select-arrow.png) no-repeat 90% center;
		width: 100px; /*Width of select dropdown to give space for arrow image*/
		text-indent: 0.01px; /* Removes default arrow from firefox*/
		text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
		color: #FFF;
		border-radius: 15px;
		padding: 5px;
		box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
	}

 

Save the scripts in your web server application and access it from your web browser. Download the code directly from download section or clone from my GitHub page. Good luck!
Author Information
Muhammad Asyraf bin Wahi Anuar
Web Administrator
Asyraf enjoys life and has great enthusiasm for all outdoors activities especially MTB! Don't Follow Me. I'm Lost Too -_-

Muhammad Asyraf bin Wahi Anuar | Copyright 2017 | Informatic Trooper