DEV Community

loading...
Cover image for How to create a custom captcha

How to create a custom captcha

stackfindover profile image Stackfindover ・3 min read

Hello, guys in this tutorial we will create a custom captcha using JavaScript

Common Query

  1. How to create a custom captcha
  2. How to create JavaScript Captcha
  3. How to create a custom captcha in HTML
  4. How to create a captcha

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create a custom captcha using JavaScript

First, we need to create three files index.html and style.css then we need to do code for it.

Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>How to create custom Captcha using javascript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500&display=swap" rel="stylesheet">
  </head>
<body onload="generateCaptcha();">
   <div class="full-row">
      <div class="heading"><h1>How to create custom Captcha using javascript</h1></div>
      <div class="captcha_outer flex-row">
         <div class="captcha_output">
            <input type="text" id="Captcha" readonly>
         </div>
         <div class="captcha_gen">
            <button id="refresh" onclick="generateCaptcha();">Refresh</button>
         </div>
      </div>
      <div class="captcha_valid flex-row">
         <div class="fillcaptcha"><input type="text" id="txtInput" /></div>
         <div class="valid_captcha">
            <button id="CheckCaptcha" onclick="CheckValidCaptcha();">Check</button>
         </div>
      </div>
      <div class="valid-msg-error">
         <span id="error" style="color:red"></span>
         <span id="success" style="color:green"></span>
      </div>
   </div>
</body>

<script type="text/javascript">
   function generateCaptcha() {
      var alpha = new Array('A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M',
         'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z',
         'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm',
         'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z');
      var i;
      for (i = 0; i < 5; i++) {
         var a = alpha[Math.floor(Math.random() * alpha.length)];
         var b = alpha[Math.floor(Math.random() * alpha.length)];
         var c = alpha[Math.floor(Math.random() * alpha.length)];
         var d = alpha[Math.floor(Math.random() * alpha.length)];
         var e = alpha[Math.floor(Math.random() * alpha.length)];
      }
      var code = a + '' + b + '' + '' + c + '' + d + '' + e;
      document.getElementById("Captcha").value = code;

   }
   function CheckValidCaptcha() {
      var string1 = removeSpaces(document.getElementById('Captcha').value);
      var string2 = removeSpaces(document.getElementById('txtInput').value);
      if (string1 == string2) {
         document.getElementById('success').innerHTML = "Captcha is validated Successfully";
         //alert("Form is validated Successfully");
         return true;
      }
      else {
         document.getElementById('error').innerHTML = "Please enter a valid captcha.";
         //alert("Please enter a valid captcha.");
         return false;
      }
   }
   function removeSpaces(string) {
      return string.split(' ').join('');
   }

</script>

</html>
Enter fullscreen mode Exit fullscreen mode

Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
    padding: 0;
    margin: 0;
    outline: 0;
    font-family: 'IBM Plex Sans', sans-serif;
}
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    background: #f2f4f6;
    overflow: hidden;
    user-select: none;
}
.flex-row {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    position: relative;
}
.heading {
    position: absolute;
    left: 0;
    right: 0;
    top: 20vh;
    text-align: center;
}
.heading > h1 {
    color: #0f62fe;
}
input#Captcha {
    user-select: none;
    pointer-events: none;
}
input#Captcha, input#txtInput {
    font-size: 18px;
    padding: 10px 20px;
    outline: 0;
    border: 1px solid #0f62fe;
    width: 100%;
}
button {
    background-color: #0f62fe;
    border: 1px solid transparent;
    color: #fff;
    cursor: pointer;
    padding: 10px 30px 10px 10px;
    display: block;
    transition: background-color 0.5s;
    font-size: 18px;
    width: 100%;
    text-align: left;
    outline: 0;
}
.captcha_output, .fillcaptcha {
    width: 100%;
}
Enter fullscreen mode Exit fullscreen mode

Card Design like CSS tricks

Custom captcha video output:

Custom captcha codepen output:

We will update soon:)

Discussion (1)

pic
Editor guide
Collapse
mrwolferinc profile image
mrwolferinc

I think I'm gonna make a JavaScript framework out of this...