Build a Captcha Code generator (Mock) using JavaScript.

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

Let's write some code 😎

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.

// 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.

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.
Now the captcha variable holds the 6 digit captcha code.
Now display the captcha code to the user using the below snippet.

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.

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.

Comments

[Dhruv Shah]

Doesn't this defeat the entire purpose of captcha where we don't wany any kind of code that can target the div in our DOM, get the value and set it as innerHTML of the input div and spam our server with more and more requests?