How to create a custom captcha
Tags: html, javascript, beginners, tutorial
Published: 2021-02-27 16:07:44

***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**
```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>
```
###Step:2###
Then we need to add code for ***style.css*** which code I provide in the below screen.

```css
* {
    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%;
}
```
> ***<a href="https://blog.stackfindover.com/card-design-like-css-tricks/" rel="dofollow">Card Design like CSS tricks</a>***


###Custom captcha video output:###
{% youtube okYAzwpMqwU %}

###Custom captcha codepen output:###
{% codepen https://codepen.io/stack-findover/pen/eYgXWVY %}