Need Of Captcha:
Captcha is an acronym that stands for Completely Automated Public Turing Test to Tell Computers and Humans Apart. One of the most essential reasons for CAPTCHA is to protect against ad spammers who advertise their schemes in web page comments. Administrators can weed out spammers who try to automate their operations by asking all users to negotiate the CAPTCHA authentication.
Here is the source code for generating a captcha.
index.html
<!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">
<title>Captcha</title>
<link rel="stylesheet" href="./style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./main.js"></script>
</head>
<body onload="generate()">
<div class="wrapper"></div>
<h2 id="status" style="color: #ee7e6a"></h2>
<div>
<input type="text" readonly id="generated-captcha">
</div>
<div>
<input type="text" id="entered-captcha" placeholder="Enter the captcha.."/>
</div> <button type="button" onclick="check()">
check </button> <button type="button" onclick="generate()" id="gen">
Generate New </button>
</body>
</html>
style.css
body {
display: flex;
justify-content: center;
height: 100vh;
align-items: center;
padding: 0;
margin: 0;
flex-direction: column;
background-image: url(bg.jpg);
background-attachment: fixed;
background-size: cover;
font-family: "Poppins", sans-serif;
}
div {
margin-bottom: 10px;
}
button {
margin-bottom: 5px;
cursor: pointer;
}
input {
text-decoration: none;
}
#generated-captcha {
text-decoration: line-through;
font-weight: bold;
text-align: center;
font-size: 20px;
background-color: #ede7f6;
border-radius: 6px;
border: none;
padding: 6px;
outline: none;
color: #1d1d1d;
}
#entered-captcha {
border: 2px solid #c5c7f7;
font-family: monospace;
outline: none;
border-radius: 6px;
padding: 8px 15px;
font-size: 12px;
}
button {
--green: #1bfd9c;
font-size: 15px;
padding: 0.7em 2.7em;
letter-spacing: 0.06em;
position: relative;
font-family: inherit;
border-radius: 0.6em;
overflow: hidden;
transition: all 0.3s;
line-height: 1.40em;
border: 2px solid var(--green);
background: linear-gradient (to right, rgba(27, 253, 156, 0.1) 1%, transparent 40%, transparent 60%, rgba(27, 253, 156, 0.1)100%);
color: var(--green);
box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.4), 0 0 9px 3px rgba(27, 253, 156, 0.1);
}
button:hover {
color: #82ffc9;
box-shadow: inset 0 0 10px rgba(27, 253, 156, 0.5),
0 0 9px 3px rgba(27, 253, 156, 0.2);
}
button:before {
content: "";
position: absolute;
left: -4em;
width: 4em;
height: 100%;
top: 0;
transition: transform 0.4s ease-in-out;
background: linear-gradient (to right, transparent 1%, rgba(27, 253, 156, 0.1) 40%, rgba(27, 253, 156, 0.1) 60%, transparent 100%);
}
button:hover:before {
transform: translateX(15em);
}
.wrappr {
display: flex;
flex-direction: column;
justify-content: center;
}
main.js
let captcha;
let alphabets = "AaBbCcDdEeFfGgHhI1JjKKLIMmNnOoPpOqRrSsTtUuVvWwXXYYZZ";
$("#status").text("Captcha Generator");
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();
$("#generated-captcha").val(captcha);
$("#entered-captcha").val('');
}
check = () => {
let userValue = $("#entered-captcha").val();
if (userValue == captcha) {
$("#status").text( "Correct!!");
} else {
$("#status").text("Try Again!!");
$("#entered-captcha").val('');
}
}
Code Preview:
