Javascript Age Calculator | Calculate Age from Date of Birth
Tags: html, css, javascript, webdev
Published: 2021-08-08 13:51:36

JavaScript Age Calculator helps to determine user's current age from date of birth. This is a very easy and simple design. I have shared many more designswith you before. This is the first time I've made a simple JavaScript age calculator and shared it with you.

  You can [watch the live demo](https://www.foolishdeveloper.com/2021/07/javascript-age-calculator.html) to see how this design works. First of all, I made a small box in a web page. Then below is a small submit button.

 Here you can input dates, months and years in the Input field. After inputting your date of birth, click on the submit button and you will see your current age here.

 Below is the complete information on how I made it, step-by-step.

### Step 1: Create the basic structure

First of all I designed that web page using HTML and CSS code. Then I made a small box on it.
```html
<div class="container">
 
</div>
```

```css
* {
 box-sizing: border-box;
}

body{
 font-family: Arial, Helvetica, sans-serif;
 background-color: #c83deb;
 font-size: 15px;
 line-height: 1.5;
 padding: 0;
 margin: 0;
}

.container{
 width:520px;
 height: auto;
 min-height:100px;
 margin: 100px auto;
 background-color: #eee;
 border-radius: 5px;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cmvkzz3n61uhix91it6v.jpg)

### Step 2: Add title or heading

 Then here I created a title. I used the following HTML and CSS code to create this heading.

```html
 <div class="base">
   <h4>Age Calculator</h4>
 </div>
```


```css
.base{
 width: 100%;
 margin: 0;
 overflow: hidden;
 display: block;
 float: none;
}

.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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/phesk7lct86816rr51it.jpg)
### Step 3: Create a place to input the date of birth

There are three input boxes to input as you saw in the demo. To input the first date, second month and third year. The following HTML and CSS codes have been used to create it.

```html
 <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>
```


```css
.block{
 width: 135px;
 padding: 5px 20px;
 margin-left: 20px;
 display: inline-block;
 float: left;
}

.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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g46arjwcofr8fsrtpjpm.jpg)
### Step 4: Create a button to submit
Now I have made a submit button which if clicked the user will see his current age. The following HTML and CSS code helped to create and design it. 

```html
<div class="base">
 <input type="button" name="submit" value="Submit" onclick="age()" />
</div>
```
```css
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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vk6rcduhvixyqhxxv4yu.jpg)
### Step 5: Create a display to see the age
This box has a small display at the bottom to see your current age. Now it is in hidden state. This can only be seen when it is executed by JavaScript.

```html
<div id="age"></div>
```

```css
#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;
}
```
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ngx8h9dmbfkxbi4xhvus.jpg)
### Step 6: Activate the age calculator using JavaScript
Now I have implemented it with JavaScript code. I have used very simple code here and made it in general. If you know basic JavaScript, you must understand this structure.

Everyone's first `date`, `month`, `year` has been determined by a variable. 

```javascript
  var d1 = document.getElementById('date').value;
  var m1 = document.getElementById('month').value;
  var y1 = document.getElementById('year').value;

```
Then I received the current date from the device using the `new Date ()` function. Here we have taken d2, m2, y2 solids in which we have stored the current date. Here I have given the number of days in a month using var month.

```javascript
  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];
```


```javascript

  if(d1 > d2){
  	d2 = d2 + month[m2 - 1];
  	m2 = m2 - 1;
  }
  if(m1 > m2){
  	m2 = m2 + 12;
  	y2 = y2 - 1;
  }
```
Subtract the user's date of birth from the current time and store it at d, m, y constant.

```javascript
  var d = d2 - d1;
  var m = m2 - m1;
  var y = y2 - y1;
```


 After all, I have arranged all this information in the HTML page using innerHTML. Below you will see that I have used one line of HTML code which indicates how this date, month and year can be seen in that page.

```javascript
  document.getElementById('age').innerHTML = 'Your Age is '+y+' Years '+m+' Months '+d+' Days';
```

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2cw5xutahbw70ylho9j.jpg)

### Final Javascript Code
```javascript
  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';
}
```

 This is a very [simple JavaScript age calculator](https://www.foolishdeveloper.com/2021/07/javascript-age-calculator.html) design. Hope this tutorial helped you to know how I made this design. Please comment on how you like it. If there is any mistake in my design, please let me know in the comments.