Age Calculator javascript | Age Calculator using html css javascript

Age Calculator javascript | Age Calculator using HTML CSS javascript







Age Calculator javascript


Welcome๐ŸŽ‰ to Code With Random blog. In this blog, we will cover how to create Age Calculator javascript. We use HTML & CSS and javascript for this Age Calculator javascript project.

Hope you enjoy our blog so let's start with a basic HTML structure for Age Calculator javascript.

HTML code for Age Calculator

In the body tag of the HTML document make a container for the calculator using <div> element — and add class attribute class = "container".
 <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 in javascript.

output
Age Calculator javascript - HTML part

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 that we have completed our CSS section,  Here is our updated output CSS.

output
Age Calculator javascript - final output

Now add javascript for the age counting.

JS part for the Javascript 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 that we have completed our javascript section,  Here is our updated output with javascript.

Conclusion

Hope you like Age Calculator in javascript, you can see the 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 


4 Comments

  1. This is educative. Thanks for publishing

    ReplyDelete
  2. Thanks for sharing all the tips ๐Ÿ˜Š. Will implement in our next project. To learn more about Earnings Methods, visit Earning Methods website

    ReplyDelete
  3. your age calculator working good but not with input validation

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete

Post a Comment

Previous Post Next Post