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

Popular posts from this blog

Notes on Compiler and Interpreter in C Programming

  Notes on Compiler and Interpreter in C Programming  lecture link -  https://youtu.be/SsFJ7KnHaEM **Compiler:** - Translates the entire C program into machine code before execution. - Generates an executable file that can be run independently. - Performs lexical, syntactic, and semantic analysis. - Optimizes code during compilation for better performance. - Errors are detected and reported after the whole program is analyzed. - Compilation process can be time-consuming, but execution of the compiled program is faster. - Examples of C compilers: GCC (GNU Compiler Collection), Clang, MSVC (Microsoft Visual C++). **Interpreter:** - Translates and executes the C program line by line. - Does not produce an intermediate executable file. - Executes the code immediately, which can be useful for debugging. - Slower execution compared to compiled code since translation occurs during runtime. - Errors are detected and reported line by line, which can be easier for debugging specifi...
Read more

GATE exam guide 2024

Image
GATE exam guide  22-03-2024 (by- K aushani Kanjilal )    GATE, the Graduate Aptitude Test in Engineering, provides an excellent opportunity to achieve your IIT dreams. It is a national-level exam conducted by IISc Bengaluru and the seven IITs, typically scheduled for the first week of February. All Engineering graduates or candidates who have completed 3+2 Hons. Degree in Pure Sciences must register for the GATE exam. A good rank in this exam can lead to highly valuable M.Tech, M.S., or PhD degrees, along with research opportunities from IITs, IISc, and various other universities in and outside India. Moreover, esteemed universities in Germany, Singapore, Canada, and Australia accept GATE scorecards for admission to Masters and PhD degrees, with additional benefits of stipend throughout the course. The eligibility criteria for GATE are as follows: 1. Engineering students in the 3rd or higher year of their degree can sit for the exam. 2. Students in the 1st Year of M.Sc ar...
Read more
Image
  JAVASCRIPT ARRAY <! DOCTYPE html > < html lang = "en" > < head >     < meta charset = "UTF-8" >     < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >     < title > Document </ title >     < script > ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////         const staffdetail = [             { name : "Gourab Das" , age : 20 , salary : 80000 , currency : "INR" },             { name : "Abhisek ck" , age : 20 , salary : 60000 , currency : "INR" },             { name : "Rahul k" , age : 20 , salary : 90000 , currency : "INR" },             { name : "Jahir" , age : 20 , salary : 100000 , currency : "INR" },         ...
Read more