Captcha using JavaScript
captcha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body onload="generate()">
<div id="user-input" class="inline">
<input type="text" id="submit" placeholder="captchacode">
</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>
<script src="captcha.js"></script>
</body>
</html>
captcha.js
let captcha;
function generate(){
//clear old input
document.getElementById("submit").value=" ";
// access the element to store the gereated captcha
captcha=document.getElementById("image");
let uniquechar= " ";
const randomchar = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
// generate cptcha for length of 5 using randomchar
for(let i=1;i<5;i++){
uniquechar+=randomchar.charAt(Math.random()*randomchar.length)
}
//store henerated input
captcha.innerHTML= uniquechar;
}
function printmsg(){
const user_input = document.getElementById("submit").value;
// check whether the input is equal to generated captcha or not
if(user_input == captcha.innerHTML){
let s= document.getElementById("key").innerHTML = "matched";
generate();
}
else{
let s= document.getElementById("key").innerHTML = "not-matched";
generate();
}
}
style.css
#image{
font-size: 2rem;
border: 2px solid red;
background-color: black;
color: white;
display: inline-block;
padding: 1rem;
margin: 2rem;
}
Comments
Post a Comment