Captcha Generator using HTML CSS and JavaScript

0 0 2 minutes read

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.

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 do 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.

index.html

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">
    <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>

captcha.css: For designing our captcha box and submit button.

CSS

#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;
}

captcha.js: This file will verify the entered captcha with generated captcha when the user clicks on submit button. And when the refresh icon is clicked it will re-generate the Captcha.

Javascript

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();
    }
}