Age Calculator javascript | Age Calculator using html css javascript

Age Calculator javascript | Age Calculator using HTML css javascript




Age Calculator javascript | Age Calculator using html css javascript




Welcome🎉 to Code With Random blog. In this blog, we learn that how we how to create Age Calculator javascript. We use HTML & CSS and javascript for this Age Calculator javascript. Hope you enjoy our blog so let's start with a basic HTML structure for Age Calculator javascript.

HTML code for Age Calculator

 <body>  
 <div class="container">  
  <form>  
   <div class="base">  
    <div class="enter">  
    <h4>Age Calculator</h4>  
   </div>  
  <div class="block">  
   <p class="title">Date</p>  
   <input type="text" name="date" id="date" placeholder="dd" required="required" minlength="1" maxlength="2" />  
  </div>  
  <div class="block">  
   <p class="title">Month</p>  
   <input type="text" name="month" id="month" placeholder="mm" required="required" minlength="1" maxlength="2" />  
  </div>  
  <div class="block">  
   <p class="title">Year</p>  
   <input type="text" name="year" id="year" placeholder="yyyy" required="required" minlength="4" maxlength="4" />  
  </div>  
  </div>  
  <div class="base">  
   <div class="enter">  
   <input type="button" name="submit" value="Submit" onclick="age()" />  
   </div>  
  </div>  
   <div id="age"></div>  
  </form>  
 </div>  
 </body>  
There is all HTML code for the Age Calculator javascript. Now, you can see output without CSS, then we write CSS for our Age Calculator javascript.

output
Age Calculator javascript | Age Calculator using html css javascript

CSS for Age Calculator

   body{  
  font-family: Arial, Helvetica, sans-serif;  
  background-color: #2782e3;  
  font-size: 15px;  
  line-height: 1.5;  
  padding: 0;  
  margin: 0;  
 }  
 * {  
  box-sizing: border-box;  
 }  
 .container{  
  width:520px;  
  height: auto;  
  margin: 100px auto;  
  background-color: #eee;  
  border-radius: 25px;  
 }  
 .base{  
  width: 100%;  
  margin: 0;  
  overflow: hidden;  
  display: block;  
  float: none;  
 }  
 .block{  
  width: 135px;  
  padding: 5px 20px;  
  margin-left: 20px;  
  display: inline-block;  
  float: left;  
 }  
 .base h4{  
  font-size: 26px;  
  text-align: center;  
  font-family: sans-serif;  
  font-weight: normal;  
  margin-top: 0px;  
  box-shadow: 0px 2px #bababa;  
  background: white;  
  font-size: 34px;  
  color: navy;  
 }  
 .title{  
  font-size: 20px;  
  text-align: left;  
  font-family: sans-serif;  
  font-weight: normal;  
  line-height: 0.5;  
  letter-spacing: 0.5px;  
  word-spacing: 2.7px;  
  color: #1073d0;  
 }  
 input[type=text] {  
  width: 140px;  
  margin: auto;  
  outline: none;  
  min-height: 50px;  
  border: 2px solid #1073d0;  
  padding: 12px;  
  background-color: #f7f7f7;  
   border-radius: 2px;  
   color: #1073d0;  
   font-size: 17px;  
 }  
 input[type=text]:focus{  
  background-color: #ffffff;  
  border: 2px solid orange;  
  outline: none;  
 }  
 input[type=button]{  
  width: 150px;  
  margin-left: 35%;  
  margin-top: 40px;  
  outline: none;  
  border: none;  
  border-radius: 2px;  
  background-color: #0761b6;  
  color: #ffffff;  
  padding: 14px 16px;  
  text-align: center;  
  font-size: 16px;  
 }  
 input[type=button]:hover{  
  background-color: #003669;  
 }  
 #age{  
  display: block;  
  margin: 10px;  
  margin-top: 35px;  
  padding: 10px;  
  padding-bottom: 20px;  
  overflow: hidden;  
  font-family: verdana;  
  font-size: 23px;  
  font-weight: normal;  
  line-height: 1.5;  
  word-spacing: 2.7px;  
  color: navy;  
 }  

Now we have completed our CSS section,  Here is our updated output CSS.

output
Age Calculator javascript | Age Calculator using html css javascript

Now add javascript for the age counting.

Javascript for Age Calculator 

  function age() {  
  var d1 = document.getElementById('date').value;  
  var m1 = document.getElementById('month').value;  
  var y1 = document.getElementById('year').value;  
  var date = new Date();  
  var d2 = date.getDate();  
  var m2 = 1 + date.getMonth();  
  var y2 = date.getFullYear();  
  var month = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];  
  if(d1 > d2){  
   d2 = d2 + month[m2 - 1];  
   m2 = m2 - 1;  
  }  
  if(m1 > m2){  
   m2 = m2 + 12;  
   y2 = y2 - 1;  
  }  
  var d = d2 - d1;  
  var m = m2 - m1;  
  var y = y2 - y1;  
  document.getElementById('age').innerHTML = 'Your Age is '+y+' Years '+m+' Months '+d+' Days';  
 }  
Final output

Age Calculator javascript | Age Calculator using html css javascript

Now we have completed our javascript section,  Here is our updated output with javascriptHope you like Age Calculator javascript, you can see output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕



In this post, we learn how to create an Age Calculator javascript using simple HTML & CSS and javascript. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 


1 Comments

Post a Comment

Previous Post Next Post