How to create a custom captcha

#html #javascript #beginners #tutorial

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

Common Query

How to create a custom captcha
How to create JavaScript Captcha
How to create a custom captcha in HTML
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>

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