Generate Captcha Using JavaScript

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

Shahjaha Shaikh

I am a .Net developer with extensive experience with designing and developing large-scale applications. Key Areas Of Expertise: • ASP.NET Core MVC • ASP.NET Core Web API • C# • ASP.NET MVC 5 • Angular All versions • HTML5 • CSS3 / SCSS • Bootstrap • JavaScript • Angular Material.