Develop An Age Calculator By Using HTML, CSS And JavaScript
HTML:
______________________________________________________
<!DOCTYPE html>
<html>
<head>
<!-- code copy rights is reserved-->
<!---Code By Waseem-------------->
<!-------Happy Coding :)----->
<meta charset="utf-8"/>
<meta name="description" content="This free age calculator computes age in terms of years, months, weeks, days, hours, minutes, and seconds, given a date of birth. Determine the time between today and your next birthday using the date calculator, or explore hundreds of other calculators addressing math." />
<meta name="keywords" content="age calculator , age calculator in days , calculate age in days , calculate
age in years , calculate age in months , calculate age , how old i am? , calculate your age
how i calculate my age? "/>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<link rel="stylesheet" href="style.css" type="text/css"/>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- jQuery library -->
<script src="js/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="js/bootstrap.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato&display=swap" rel="stylesheet">
<title></title>
<style>
</style>
<link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body bgcolor="#59596D">
<div class="container-fluid bbg"
<div class="main-container container">
<div class="head">
<h1 class="main-heading">Age Calculator</h1>
</div>
<div class="sub-container">
<div class="inner">
<div class="dateofbirth">
<span id="dob" >Date of Birth </span>
<input type="date" id="dateStart"/></br>
</div>
<div class="todaydate">
<span id="db">Age at the Date</span>
<input type="date" id="dateEnd"/>
</div>
<input type="button" id="btn" value="Calculate Age" />
</div>
</div>
<div class="container-fluid second">
<div class="row">
<div class="col-md">
<div class="contain" id="year">
<h1 class="heading1" id="showYears">0</h1>
<h3 class="heading2">Years</h3>
</div>
</div>
<div class="col-md">
<div class="contain" id="month">
<h1 class="heading1" id="showMonths">0</h1>
<h3 class="heading2">Months</h3>
</div>
</div>
<div class="col-md">
<div class="contain" id="days">
<h1 class="heading1" id="showDays">0</h1>
<h3 class="heading2">Days</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var showYears=document.getElementById('showYears');
var showMonths=document.getElementById('showMonths');
var showDays=document.getElementById('showDays');
var button=document.getElementById('btn');
btn.onclick=function(){
var dateStart=document.getElementById('dateStart').value;
var dateEnd=document.getElementById('dateEnd').value;
var dateStarting=new Date(dateStart);
var dateEnding=new Date(dateEnd);
var diff=dateEnding-dateStarting;
var years=Math.floor(diff/(365.25*24*60*60*1000));
var remaining=Math.floor(diff%(365.25*24*60*60*1000));
var months=Math.floor(remaining/((365.25/12)*24*60*60*1000));
var remaining=Math.floor(remaining%((365.25/12)*24*60*60*1000));
var days=Math.floor(remaining/(24*60*60*1000));
showYears.innerHTML=years;
showMonths.innerHTML=months;
showDays.innerHTML=days;
}
</script>
</body>
</html>
CSS:
______________________________________________________
body{
margin:0;
padding:0;
font-family: 'Lato', sans-serif;
}
.bbg{
background-color:#59596D;
}
.main-container{
margin-top:0px;
background-color:#59596D;
}
.dateofbirth{
padding-top:10px;
padding-bottom:10px;
}
.sub-container{
margin:0px auto;
width:97%;
height:190px;
background-color:#D9D9D9;
border-radius:2px;
}
.inner{
padding-top:25px;
text-align:center;
margin:12px auto;
width:100%;
height:200px;
}
#dateStart,#dateEnd{
width:200px;
height:25px;
}
#dateEnd{
}
@font-face{
src:"Lato-Regular.ttf";
}
#db{
padding-left:0px;
color:#595967;
font-weight:bold;
font-family: 'Lato', sans-serif;
}
#dob{
color:#595967;
font-weight:bold;
font-family: 'Lato', sans-serif;
}
#dateStart{
margin-left:27px;
}
#dateEnd{
margin-left:10px;
}
#btn{
padding:8px 20px 8px 20px;
font-family: 'Lato', sans-serif;
font-weight:bold;
text-transform:capitalize;
margin-top:20px;
pointer:cursor;
border-style:solid;
border-radius:3px;
border-color:#59596D;
outline:none;
border-width:1px;
}
.head{
padding-top:30px;
}
#btn:hover{
background-color:#59596D;
border-color:#59596D;
color:white;
}
.main-heading{
font-family: 'Lato', sans-serif;
text-align:center;
color:#D9D9D9;
margin-bottom:20px;
}
.second{
margin-top:20px;
}
.contain{
height:200px;
border-radius:3px;
}
#year{
background-color:#034A67;
margin-bottom:15px;
}
#month{
background-color:#9AAEC7;
margin-bottom:15px;
}
#days{
background-color:#228DDB;
margin-bottom:15px;
}
.heading1{
font-family: 'Lato', sans-serif;
font-size:65px;
font-weight:bold;
text-align:center;
padding-top:30px;
color:white;
}
.heading2{
text-align:center;
font-family: 'Lato', sans-serif;
font-weight:bold;
color:black;
}
0 Comments