Captcha Generator using HTML CSS and JavaScript
A captcha is a way of identifying a user whether the user is human or not. A captcha is made up with the help of combining letters and digits. it ensures that the user who is trying to access the platform is a human. So without wasting the time let’s get started.
Prerequisites
Application of Captcha
- Form Authentication: For login and sign up it can be used to ensure that an end user is human.
- Preventing Fake Registrations: With the captcha, we can prevent bots from creating an account on a system.
- Preventing Fake comments: This way bot would not be able to Comment on a system,
- NetBanking and financial institutes: To ensure that Authentication is only done by humans and this way manipulation of transactions can be prevented.
Note: Captcha can protect From some Automated attacks as well.
Example: First, create a section for Captcha with HTML. The below code will generate a design for a captcha and from the CSS file we will add style and on the image(refresh) click, we will generate a new captcha by calling generate() method from JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="captcha.css">
<link rel="stylesheet" href=
"https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity=
"sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
crossorigin="anonymous">
<script src="captcha.js"></script>
</head>
<body onload="generate()">
<div id="user-input" class="inline">
<input type="text"
id="submit"
placeholder="Captcha code" />
</div>
<div class="inline" onclick="generate()">
<i class="fas fa-sync"></i>
</div>
<div id="image"
class="inline"
selectable="False">
</div>
<input type="submit"
id="btn"
onclick="printmsg()" />
<p id="key"></p>
</body>
</html>
#image{
margin-top: 10px;
box-shadow: 5px 5px 5px 5px gray;
width: 60px;;
padding: 20px;
font-weight: 400;
padding-bottom: 0px;
height: 40px;
user-select: none;
text-decoration:line-through;
font-style: italic;
font-size: x-large;
border: red 2px solid;
margin-left: 10px;
}
#user-input{
box-shadow: 5px 5px 5px 5px gray;
width:auto;
margin-right: 10px;
padding: 10px;
padding-bottom: 0px;
height: 40px;
border: red 0px solid;
}
input{
border:1px black solid;
}
.inline{
display:inline-block;
}
#btn{
box-shadow: 5px 5px 5px grey;
color: aqua;
margin: 10px;
background-color: brown;
}
let captcha;
function generate() {
// Clear old input
document.getElementById("submit").value = "";
// Access the element to store
// the generated captcha
captcha = document.getElementById("image");
let uniquechar = "";
const randomchar =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
// Generate captcha for length of
// 5 with random character
for (let i = 1; i < 5; i++) {
uniquechar += randomchar.charAt(
Math.random() * randomchar.length)
}
// Store generated input
captcha.innerHTML = uniquechar;
}
function printmsg() {
const usr_input = document
.getElementById("submit").value;
// Check whether the input is equal
// to generated captcha or not
if (usr_input == captcha.innerHTML) {
let s = document.getElementById("key")
.innerHTML = "Matched";
generate();
}
else {
let s = document.getElementById("key")
.innerHTML = "not Matched";
generate();
}
}
Output:
Captcha Generator