Javascript Project to Generate Random Image Captcha For Authentication in Browser Using HTML5 & CSS3

Welcome folks today in this blog post we will be building a random image captcha generator in browser using htnl5 css3 and javascript. All the full source code of the application is given below.

Get Started

In order to get started you need to make an index.html file and copy paste the following code

index.html

 <div class="center">
        <h1>Captcha Validator</h1>
        <div id="captchaBackground">
            <span id="captcha">captcha text</span>
            <input id="textBox" type="text" name="text">
            <div id="buttons">
                <input id="submit" type="submit">
                <button id="refresh" type="submit">Refresh</button>
            </div>
            <span id="output"></span>
        </div>
    </div>

<h1>Captcha Validator</h1>

<span id="captcha">captcha text</span>

<button id="refresh" type="submit">Refresh</button>

</div>

</div>

In this block of html code we have the captcha area where we will be actually displaying the image captcha randomly every time when we refresh the page or hit the button of refresh. And then we have the simple input field where we will write the captcha value and then we have two html5 buttons to submit the captcha and also refresh button. And also we have the span tag of output where we will display whether the entered value is correct or not.

Now we need to apply some css to this application. Just include the styles.css file inside the html as shown below

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="styles.css">
</head>

<!DOCTYPE html>

<html>

<head>

</head>

styles.css

body {
    background-color: #e3bdef;
  }
  #captchaBackground {
    height: 200px;
    width: 250px;
    background-color: #7b807f;
    background-image: url("https://www.transparenttextures.com/patterns/light-toast.png");
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
  #captcha {
    margin-bottom: 1em;
    font-size: 30px;
    letter-spacing: 3px;
  }
  .center {
  display: flex;
  flex-direction: column;
  align-items: center;
  }
  #submit {
    margin-top: 2em;
    margin-bottom: 2em;
  }
  #textBox {
    height: 25px;
  }
  .redText {
    color: #a03146;
    font-weight: bold;
  }
  .greenText {
    color: #1a3815;
    font-weight: bold;
  }

body {

background-color: #e3bdef;

}

#captchaBackground {

height: 200px;

width: 250px;

background-color: #7b807f;

background-image: url("https://www.transparenttextures.com/patterns/light-toast.png");

display: flex;

align-items: center;

justify-content: center;

flex-direction: column;

}

#captcha {

margin-bottom: 1em;

font-size: 30px;

letter-spacing: 3px;

}

.center {

display: flex;

flex-direction: column;

align-items: center;

}

#submit {

margin-top: 2em;

margin-bottom: 2em;

}

#textBox {

height: 25px;

}

.redText {

color: #a03146;

font-weight: bold;

}

.greenText {

color: #1a3815;

font-weight: bold;

}

As you can see we are applying the css styles to all the elements of the DOM. If you now open the app inside the browser it will look something like this as shown below

Now we will write the javascript code for the application. Just at the bottom include the app.js file as shown below

<script src="app.js"></script>

1	<script src="app.js"></script>

Now first guys we will get all the references of all the dom elements and store it inside the variables as shown below

let captchaText = document.querySelector('#captcha');
let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submit');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refresh');

let captchaText = document.querySelector('#captcha');

let userText = document.querySelector('#textBox');

let submitButton = document.querySelector('#submit');

let output = document.querySelector('#output');

let refreshButton = document.querySelector('#refresh');

Here we have used the famous querySelector javascript method and we are selecting elements by the id that we have given them. For this we are using the # symbol to get the references.

let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let emptyArr = [];

let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];

let emptyArr = [];

Now in this block of code we are declaring an Array holding all the alphanumeric characters inside it. Because from this array we will be generating the image captcha randomly every time you refresh the page or press the button. And also we have the second empty array variable.

for(let i = 1; i <= 7; i++) {
	emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join('');

for(let i = 1; i <= 7; i++) {

emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);

}

captchaText.innerHTML = emptyArr.join('');

Here in this block of code we are using a for loop to loop through all the elements inside the alphanumeric array and we are using some math random method to collect random characters and then we are pushing to an empty array variable we declared. And lastly we will be showing these characters inside the captcha placeholder whenever you load the page or press the refresh button

Now guys we will be attaching a keyup event listener to the application. Such that when we press the enter key on the keyboard. We should submit the form and tell to the user whether the entered captcha is correct or not

userText.addEventListener('keyup', function(e) {
	if(e.keyCode === 13) {
		if(userText.value === captchaText.innerHTML) {
			output.classList.add("greenText");
			output.innerHTML = "Correct!";
		} else {
			output.classList.add("redText");
			output.innerHTML = "Incorrect, please try again";
		}
	}
});

userText.addEventListener('keyup', function(e) {

if(e.keyCode === 13) {

if(userText.value === captchaText.innerHTML) {

output.classList.add("greenText");

output.innerHTML = "Correct!";

} else {

output.classList.add("redText");

output.innerHTML = "Incorrect, please try again";

}

});

As you can we have the keyup event. Here in this we are checking the keycode value. If it equals to 13 which is the enter key pressed then we need to submit the form and also check the value of captcha if it is correct then we will print the correct message in green color or else incorrect message as shown below

Similarly we will bind a onclick event listener to the submit button. When it is clicked we will be showing whether the entered captcha by the user is correct or not

submitButton.addEventListener('click',  function() {
	if(userText.value === captchaText.innerHTML) {
		output.classList.add("greenText");
		output.innerHTML = "Correct!";
	} else {
		output.classList.add("redText");
		output.innerHTML = "Incorrect, please try again";
	}
});

submitButton.addEventListener('click', function() {

if(userText.value === captchaText.innerHTML) {

output.classList.add("greenText");

output.innerHTML = "Correct!";

} else {

output.classList.add("redText");

output.innerHTML = "Incorrect, please try again";

}

});

And also we will be adding a onclick event listener to the refresh button also. When we click the refresh button we will generate a new image captcha or characters

refreshButton.addEventListener('click', function () {
	userText.value = "";
	let refreshArr = [];
	for(let j = 1; j <= 7; j++) {
		refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
	}
	captchaText.innerHTML = refreshArr.join('');
	output.innerHTML = "";
});

refreshButton.addEventListener('click', function () {

userText.value = "";

let refreshArr = [];

for(let j = 1; j <= 7; j++) {

refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);

}

captchaText.innerHTML = refreshArr.join('');

output.innerHTML = "";

});

Full Javascript Code

Wrapping it up this is the full javascript code for this application

`app.js`

let captchaText = document.querySelector('#captcha');
let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submit');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refresh');

let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let emptyArr = [];
for(let i = 1; i <= 7; i++) {
	emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
captchaText.innerHTML = emptyArr.join('');

userText.addEventListener('keyup', function(e) {
	if(e.keyCode === 13) {
		if(userText.value === captchaText.innerHTML) {
			output.classList.add("greenText");
			output.innerHTML = "Correct!";
		} else {
			output.classList.add("redText");
			output.innerHTML = "Incorrect, please try again";
		}
	}
});

submitButton.addEventListener('click',  function() {
	if(userText.value === captchaText.innerHTML) {
		output.classList.add("greenText");
		output.innerHTML = "Correct!";
	} else {
		output.classList.add("redText");
		output.innerHTML = "Incorrect, please try again";
	}
});

refreshButton.addEventListener('click', function () {
	userText.value = "";
	let refreshArr = [];
	for(let j = 1; j <= 7; j++) {
		refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
	}
	captchaText.innerHTML = refreshArr.join('');
	output.innerHTML = "";
});

let captchaText = document.querySelector('#captcha');

let userText = document.querySelector('#textBox');

let submitButton = document.querySelector('#submit');

let output = document.querySelector('#output');

let refreshButton = document.querySelector('#refresh');

let emptyArr = [];

for(let i = 1; i <= 7; i++) {

emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);

}

captchaText.innerHTML = emptyArr.join('');

userText.addEventListener('keyup', function(e) {

if(e.keyCode === 13) {

if(userText.value === captchaText.innerHTML) {

output.classList.add("greenText");

output.innerHTML = "Correct!";

} else {

output.classList.add("redText");

output.innerHTML = "Incorrect, please try again";

}

});

submitButton.addEventListener('click', function() {

if(userText.value === captchaText.innerHTML) {

output.classList.add("greenText");

output.innerHTML = "Correct!";

} else {

output.classList.add("redText");

output.innerHTML = "Incorrect, please try again";

}

});

refreshButton.addEventListener('click', function () {

userText.value = "";

let refreshArr = [];

for(let j = 1; j <= 7; j++) {

refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);

}

captchaText.innerHTML = refreshArr.join('');

output.innerHTML = "";

});