Javascript Age Calculator | Calculate Age from Date of Birth
Javascript Age Calculator | Calculate Age from Date of Birth

Javascript Age Calculator | Calculate Age from Date of Birth

Javascript Age Calculator | Calculate Age from Date of Birth

JavaScript Age Calculator is a remarkable JavaScript application that will help to calculate a user’s age. Earlier I have shown many types of JavaScript projects like JavaScript Clock, Random Password Generator, Calculator, etc. 

This is the first time I am going to make such an age calculator. This type of design is used in many cases. Basically, there are different types of registration forms where the user needs to be 18 years of age or whatever. 

In that case, the system will calculate the age of the user as soon as the user inputs his date of birth. In this javascript Age Calculator, I have given three places to input age. Where the user can input the day, month, and year of his date of birth. 

Javascript Age Calculator 

The system will then automatically convert the distance of its date of birth from the current time to year months and days. Here I have designed this system using HTML and CSS code and implemented it using JavaScript. 

First I collected the current date from your device using JavaScript code (new Date). Then we subtract that with your input time and convert the subtraction to years, months and days.

As you can see above, I painted the background # 2782e3 of the web page and made a rectangular box in it. I used a title or heading on top of that box. Then I made three boxes to input using HTML’s input (<input>) function. 

The first, second, and third boxes are designed to input days, months, and years, respectively. Then there is a submit button below which the user can see his current age by clicking on it. I have arranged to show the result at the bottom of the box. 

Here’s how to transform your current age into years, months and days. If you want to know how it works and you want to use it live then use the demo section below. Here you will find the required source code which you can use for your own purposes. 

However, I would urge you to follow the tutorial below if you are a beginner and want to know how I made it (Age Calculator using javascript). 

See the Pen
Age calculator by Foolish Developer (@fghty)
on CodePen.

Hopefully, the demo above has helped you to know and enjoy its live demo.

Calculate Age from Date of Birth using Javascript

Now is the time to get to know it steps by step. I have shared the possible results after each step so that it is more convenient for you to understand. 

At the bottom of the article, I have given a download button with the help of which you can download the source code.

Step 1: Design the webpage and create a box (more…)

Continue ReadingJavascript Age Calculator | Calculate Age from Date of Birth
How to Make a Word Counter with JavaScript ‍

How to Make a Word Counter with JavaScript ‍

You will learn how to create word counters with the help of JavaScript. You will see that there are many websites on the internet that are much more popular for counting words or characters. I will try to explain in this tutorial a basic structure of how these designs work. 

A simple word counter depending on the general JavaScript programming code. First of all, I have made a box (Textarea) here. When you write something in that box, every character you write in that box will be a live count. The counted results can be seen in the box below. 

Simple Word Counter with JavaScript ‍

Basically, this design will count the number of characters, each character you write in this box will count with space. I used a small amount of HTML and CSS code to create the box and design the background. 

Here all the work is handled by JavaScript, that is, everything shown in the box that counts these words is handled by JavaScript. If you want to know better how this word (character) counter works then you can see the demo below.

See the Pen
word counter by Foolish Developer (@fghty)
on CodePen.

As you can see, I made a rectangular box here. When you type something in that box, it will count live. The counted results can be seen through a small box below.

In the background of this box, I have used white color and added a blue border all around to enhance the beauty. Follow the tutorial below to make this design. In this case, first of all, let me say that I have used the bootstrap CDN link. Be sure to add a link to these two in the head section of your HTML file.

Step 1: Design the background of the word counter

 First of all, you create HTML and CSS files. Then copy the following HTML structure and add it to your HTML file.

<!DOCTYPE html>
<html lang=”en”>
<head> 
  <link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css”>
  
  <meta charset=”UTF-8″>
  <meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
  <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
  <title>Document</title>
  <style>
   /* CSS Code */
  </style>
</head>
<body>
  
   
  <div class=”column”>
 
</div>
<script>
  // Javascript code
</script>
</body>
</html>

Using the CSS code below I basically designed this word counter in the background.

(more…)

Continue ReadingHow to Make a Word Counter with JavaScript ‍