Build a Captcha Code generator using JavaScript.
Published: 2020-12-20 19:40:08

> The better way to learn any programming language or framework is by building projects. Get out of the tutorial hell and build projects on your own.

##Introduction
Basically, **CAPTCHA** tools are used to differentiate between real users and bots. Have you ever wondered how they work?
Let's try to build a captcha generator on our own and understand what exactly happens under the hood. If you are a beginner in javascript then this small project will help you a lot.

##Demo of the application
{% codepen https://codepen.io/sumanth2303/pen/PoGjWwd %}

##Let's write some code 😎
![catcoding-gif](https://media0.giphy.com/media/ule4vhcY1xEKQ/source.gif)
A captcha generator typically consists of 4 elements verify button, generate new button, an input field to enter the code, captcha code in image format.

HTML, CSS are pretty simple here. So let's try to understand the JavaScript part.
Mainly the _captcha code_ consists of alphabets and numbers.
```javascript
// declaring and initializing some variables
let alphabets = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";
let status = document.getElementById('status');
// we'll use this status dom element to display the response while verifing the code
status.innerText = "Captcha Generator";
let captcha;
```

Next let's create a two functions  **generate()** and **check().** Using the generate() function we'll generate a new captcha code. And we'll validate the user entered code and the generated captcha code using the check() function.

```javascript
generate = () => {
let first = alphabets[Math.floor(Math.random() * alphabets.length)];
let second = Math.floor(Math.random() * 10);
let third = Math.floor(Math.random() * 10);
let fourth = alphabets[Math.floor(Math.random() * alphabets.length)];
let fifth = alphabets[Math.floor(Math.random() * alphabets.length)];
let sixth = Math.floor(Math.random() * 10);
captcha = first.toString()+second.toString()+third.toString()+fourth.toString()+fifth.toString()+sixth.toString();
// console.log(captcha);
// . . . . . 
}
```
We've used the *Math.random()* built-in function to generate a random number. Read more about *Math.random()* [here.]("https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random")
Now the *captcha* variable holds the 6 digit captcha code.
Now display the captcha code to the user using the below snippet.

```javascript 
generate = () => {
// . . . . 
document.getElementById('generated-captcha').value = captcha;
document.getElementById("entered-captcha").value = '';
status.innerText = "Captcha Generator"
}
```

The next task is to verify the user entered code with the generated captcha code. So using the *check()* function we'll do that.
```javascript
check = () => {
    let userValue = document.getElementById("entered-captcha").value;
    if(userValue == captcha){
    // navigate him to next page or do anything
    status.innerText = "Correct!!"
}else{
    // tell user to enter the code again
    status.innerText = "Try Again!!"
    document.getElementById("entered-captcha").value = '';
}
}
```
And that's simple. Now add some more features to this simple project like:
- Using special characters (%, $, &...) in captcha code
- Using the different font 
- Changing the length of captcha code dynamically

## Additional info
You can also use PHP language to implement this captcha verification.
If you want to implement the captcha code verification in your own website, you can use any **API service** without implementing it from the scratch. API handles the rest of the things.
Learn more about API's here.
{% youtube OVvTv9Hy91Q %}