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
1 2 3 4 5 6 7 8 9 10 11 12 |
<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> |
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
1 2 3 4 5 6 |
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> |
styles.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
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
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
1 2 3 4 5 |
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.
1 2 |
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.
1 2 3 4 |
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
1 2 3 4 5 6 7 8 9 10 11 |
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
1 2 3 4 5 6 7 8 9 |
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
1 2 3 4 5 6 7 8 9 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
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 = ""; }); |