Hello, guys in this tutorial we will create a custom captcha using JavaScript
Common Query
- How to create a custom captcha
- How to create JavaScript Captcha
- How to create a custom captcha in HTML
- How to create a captcha
Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create a custom captcha using JavaScript
First, we need to create three files index.html and style.css then we need to do code for it.
Make your dream true with Hostinger ( With Big Discount )
Step:1
Add below code inside index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>How to create custom Captcha using javascript</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta https-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
</head>
<body onload="generateCaptcha();">
<div class="full-row">
<div class="heading"><h1>How to create custom Captcha using javascript</h1></div>
<div class="captcha_outer flex-row">
<div class="captcha_output">
<input type="text" id="Captcha" readonly>
</div>
<div class="captcha_gen">
<button id="refresh" onclick="generateCaptcha();">Refresh</button>
</div>
</div>
<div class="captcha_valid flex-row">
<div class="fillcaptcha"><input type="text" id="txtInput" /></div>
<div class="valid_captcha">
<button id="CheckCaptcha" onclick="CheckValidCaptcha();">Check</button>
</div>
</div>
<div class="valid-msg-error">
<span id="error" style="color:red"></span>
<span id="success" style="color:green"></span>
</div>
</div>
</body>
<script type="text/javascript">
function generateCaptcha() {
var alpha = new Array('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');
var i;
for (i = 0; i < 5; i++) {
var a = alpha[Math.floor(Math.random() * alpha.length)];
var b = alpha[Math.floor(Math.random() * alpha.length)];
var c = alpha[Math.floor(Math.random() * alpha.length)];
var d = alpha[Math.floor(Math.random() * alpha.length)];
var e = alpha[Math.floor(Math.random() * alpha.length)];
}
var code = a + '' + b + '' + '' + c + '' + d + '' + e;
document.getElementById("Captcha").value = code;
}
function CheckValidCaptcha() {
var string1 = removeSpaces(document.getElementById('Captcha').value);
var string2 = removeSpaces(document.getElementById('txtInput').value);
if (string1 == string2) {
document.getElementById('success').innerHTML = "Captcha is validated Successfully";
//alert("Form is validated Successfully");
return true;
}
else {
document.getElementById('error').innerHTML = "Please enter a valid captcha.";
//alert("Please enter a valid captcha.");
return false;
}
}
function removeSpaces(string) {
return string.split(' ').join('');
}
</script>
</html>Step:2
Then we need to add code for style.css which code I provide in the below screen.
* {
padding: 0;
margin: 0;
outline: 0;
font-family: 'IBM Plex Sans', sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
width: 100vw;
background: #f2f4f6;
overflow: hidden;
user-select: none;
}
.flex-row {
display: flex;
align-items: center;
justify-content: center;
margin: 20px 0;
position: relative;
}
.heading {
position: absolute;
left: 0;
right: 0;
top: 20vh;
text-align: center;
}
.heading > h1 {
color: #0f62fe;
}
input#Captcha {
user-select: none;
pointer-events: none;
}
input#Captcha, input#txtInput {
font-size: 18px;
padding: 10px 20px;
outline: 0;
border: 1px solid #0f62fe;
width: 100%;
}
button {
background-color: #0f62fe;
border: 1px solid transparent;
color: #fff;
cursor: pointer;
padding: 10px 30px 10px 10px;
display: block;
transition: background-color 0.5s;
font-size: 18px;
width: 100%;
text-align: left;
outline: 0;
}
.captcha_output, .fillcaptcha {
width: 100%;
}