Home Project Source Code JavaScript Age Calculator in JavaScript – With Source Code

Age Calculator in JavaScript – With Source Code

0
Age Calculator in JavaScript
Age Calculator in JavaScript

Hey friends, Welcome to CodeWithNepal today in this blog you’ll learn How to make Age Calculator in JavaScript. To make Age Calculator we use only HTML CSS & JavaScript. In the earlier blog, I shared Word Counter in JavaScript which I recommend you to watch.

Age Calculator

In this section, we’ll create a simple age calculator with Javascript. The user will input their birth year, and the calculator will spit out their current age.

First, we need to create an HTML input field for the user to enter their birth year. We’ll also add a button to trigger the calculation.

Calculate Age

Now, we need to write the Javascript function to perform the calculation.

function calculateAge(){ var birthyear = document.getElementById(“birthyear”).value; var age = 2019 – birthyear; document.write(“You are ” + age + ” years old.”); }

And that’s it! The user’s age will be displayed on the screen when the button is clicked.

You might like this:

How to make Age Calculator.

There are a lot of different ways to calculate your age. You can use a simple mathematical formula, or you can use a more complicated one. You can even use an online age calculator.

The most common way to calculate your age is to simply take the number of years you have been alive and subtract the number of years you were born. For example, if you are 30 years old and you were born in 1990, you would subtract 1990 from 30 to get 10. This would mean that you are 10 years old.

However, this method is not always accurate. It only works if you were born on January 1st of the year you are calculating for. If you were born on any other day of the year, this method will not work.

There is a more accurate way to calculate your age, but it is a bit more complicated. This method takes into account the number of days in each month, as well as leap years.

How to make Age Calculator in JavaScript.

Assuming you would like a blog discussing how to make an age calculator in JavaScript:

To make an age calculator in JavaScript, you will need to use the Date object. This object can be used to get the current date, as well as to set a specific date. You can use the getFullYear() method to get the year, and the getMonth() method to get the month. To get the day, you can use the getDate() method.

Once you have the current date, you can then subtract the year, month, and day from the current date to get the person’s age. For example, if today is January 1, 2020, and the person’s birthday is December 31, 2019, their age would be 0.

It is important to note that the age calculated will be the person’s age on the current day, not their age at the end of the year. For example, if today is December 31, 2019, and the person’s

Age Calculator Code. [Source Code]

Step 1

Initially you need to create three files HTML (.html) CSS (.css) and JS (.js) . After creating these files, just paste the following codes into your VS IDE code sample create an HTML file called index.html and paste the indicated codes into your HTML file (.html) Remember, you must create a file with the extension. HTML.

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Age Calculator</title>
	<link rel="stylesheet" href="style.css">
</head>
    <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>  
 <script src="script.js"></script>
</body>
</html>

Step 2

And, create a CSS file name style.css and paste the indicated codes into your CSS file. Remember, you must create a .css file.

body{  
  font-family: Arial, Helvetica, sans-serif;  
  background-color: #DA33FF;  
  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; 
}

Step 3

Third, create a JavaScript file with the name script.js and paste the given codes into your JavaScript file. Remember, you’ve to create a file with a .js extension. We’ll store random word details as an object in this file.

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';  
 }  

Preview of Age Calculator

Age Calculator in JavaScript

That’s all, now you’ve successfully built Age Calculator in JavaScript. If your code doesn’t work or you’ve faced any problems, please free to comment down I will provide the source code files.

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exit mobile version