Web development | Build Website to Calculate Age

Step 1:-Front-end code containing Age Calculate and Functions to calculate age

//create a file with name index.html

<!DOCTYPE html>
<! — code by HackMeFu13 →
<html>
<head>
<title>Age Calculator| HackMeFu</title>
<link href=”./style.css” rel=’stylesheet’ type=’text/css’>
<style>
.calculate {
width: 15%;
background-color: #38ACEC;
color: white;
font-size: 18pt;
border-radius: 15px;
}
form option {
background-color: #ADD8E6;
color: white;
}
</style>
</head>
<body>
<div align=”center”>
<br><br><br><br>
<h1>Enter Your DOB</h1>

<form action=”index.php” method=”post” class=”drop”>
<select name=”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″>11</option>
<option value=”12″>12</option>
<option value=”13″ selected=”selected”>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”>
<option value=”01″>January</option>
<option value=”02″>Febuary</option>
<option value=”03″>March</option>
<option value=”04″>April</option>
<option value=”05″ selected=”selected”>May</option>
<option value=”06″>June</option>
<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”>
<option value=”2031″>2031</option>
<option value=”2030″>2030</option>
<option value=”2029″>2029</option>
<option value=”2028″>2028</option>
<option value=”2027″>2027</option>
<option value=”2026″>2026</option>
<option value=”2025″>2025</option>
<option value=”2024″>2024</option>
<option value=”2023″>2023</option>
<option value=”2022″>2022</option>
<option value=”2021″>2021</option>
<option value=”2020″>2020</option>
<option value=”2019″>2019</option>
<option value=”2018″>2018</option>
<option value=”2017″>2017</option>
<option value=”2016″>2016</option>
<option value=”2015″>2015</option>
<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″ selected=”selected”>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″>1985</option>
<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>
<input name=”submit” type=”submit” value=”Calculate My Age!” class=”calculate” />
</form>

<?php
if(isset($_POST[‘submit’]))
{
$d=$_POST[‘day’];
$m=$_POST[‘month’];
$y=$_POST[‘year’];

$dob=$d.’-’.$m.’-’.$y;

$bday=new DateTime($dob);

$t=date(‘d-m-Y’);

$age=$bday->diff(new DateTime);

$today=date(‘d-m-Y’);
echo ‘<br />’;
echo ‘<b>Your Birth date: </b>’;
echo $dob;
echo ‘<br>’;
echo ‘<b>Your Age : </b> ‘;
echo $age->y;
echo ‘ Years, ‘;
echo $age->m;
echo ‘ Months, ‘;
echo $age->d;
echo ‘ Days’;
echo “<body style=’background-color:silver’>”;

}
?>
<br><br>
</div>
<div align=”center”>

Code By <a> AKASH RANJAN PATEL</a>
</div>
</body>
</html>

Step 2:-Back-end code containing stylesheet to style Website

//create a file with name style.css

/* cyrillic-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(
https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format(‘woff2’);
unicode-range: U+0460–052F, U+1C80–1C88, U+20B4, U+2DE0–2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(
https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format(‘woff2’);
unicode-range: U+0400–045F, U+0490–0491, U+04B0–04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(
https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format(‘woff2’);
unicode-range: U+1F00–1FFF;
}
/* greek */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(
https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format(‘woff2’);
unicode-range: U+0370–03FF;
}
/* vietnamese */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(
https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format(‘woff2’);
unicode-range: U+0102–0103, U+0110–0111, U+0128–0129, U+0168–0169, U+01A0–01A1, U+01AF-01B0, U+1EA0–1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(
https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format(‘woff2’);
unicode-range: U+0100–024F, U+0259, U+1E00–1EFF, U+2020, U+20A0–20AB, U+20AD-20CF, U+2113, U+2C60–2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: ‘Roboto’;
font-style: normal;
font-weight: 400;
src: local(‘Roboto’), local(‘Roboto-Regular’), url(
https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format(‘woff2’);
unicode-range: U+0000–00FF, U+0131, U+0152–0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000–206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

Step 3:- Host Website using xampp on local system and CPanel on live website and Getting Output

Image for post
Image for post

Leave a Reply

error: Content is protected !!