Build a HTML5 Captcha Validation Web App in Browser Using Javascript Full Project For Beginners

 

 

 

index.html

 

 

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="../assets/css/CaptchaValidator.css">
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
</head>

<body>
  <div class="center">

    <h1 id="captchaHeading" class="captchaHeading">Captcha Validator</h1>

    <div id="captchaBackground" class="captchaBackground">

      <canvas id="captcha" class="captcha">captcha text</canvas>
      <input id="textBox" class="textBox" type="text" name="text">

      <div id="buttons">

        <input id="submitButton" class="btn" type="submit">
        <button id="refreshButton" class="btn" type="submit">Refresh</button>

      </div>

        <span id="output"></span>

    </div>

  </div>

  <script src="../assets/js/CaptchaValidator.js"></script>

</body>

</html>

 

 

body {
 background-color:  #f0134d;
 font-family: 'Krona One', sans-serif;
}

.captchaBackground {
 height: 35rem;
 width: 50rem;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
}

.captchaHeading {
 color: #ffffff;
 font-size: 3rem;
}

.captcha {
 height: 80%;
 width: 80%;
 font-size: 30px;
 letter-spacing: 3px;
 margin: auto;
 display: block;
 top: 10;
 bottom: 10;
 left: 10;
 right: 10;
}

.center {
 display: flex;
 flex-direction: column;
 align-items: center;
}

.btn {
  -webkit-border-radius: 60;
  -moz-border-radius: 60;
  border-radius: 60px;
  font-family: Arial;
  color:  #f0134d;
  font-size: 19px;
  background:#e3f6f5 ;
  padding: 10px 23px 12px 22px;
  text-decoration: none;
  margin: 1rem;
}

.btn:hover {
  background: #f5c0c0;
  text-decoration: none;
}

.textBox {
 height: 2.5rem;
 margin-bottom:  3rem;
}

.incorrectCaptcha {
 color: #000000;
}

.correctCaptcha {
 color: #ffffff;
}

 

let captchaText = document.querySelector('#captcha');
var ctx = captchaText.getContext("2d");
ctx.font = "35px Roboto";
ctx.fillStyle = "#ffffff";

let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refreshButton');

// alphaNums contains the characters with which you want to create the CAPTCHA
let alphaNums = ['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', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let emptyArr = [];

// This loop generates a random string of 7 characters using alphaNums and this will be displayed as a CAPTCHA
for (let i = 1; i <= 6; i++) {
 emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
var c = emptyArr.join('');
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);

userText.addEventListener('keyup', function(e) {

 if (e.keyCode === 13) {
 if (userText.value === c) {
 output.classList.add("correctCaptcha");
 output.innerHTML = "Correct!";

 } else {
 output.classList.add("incorrectCaptcha");
 output.innerHTML = "Incorrect, please try again";
 }
 }
});

submitButton.addEventListener('click', function() {
 if (userText.value === c) {
 output.classList.add("correctCaptcha");
 output.innerHTML = "Correct!";

 } else {
 output.classList.add("incorrectCaptcha");
 output.innerHTML = "Incorrect, please try again";
 }
});

refreshButton.addEventListener('click', function() {
 userText.value = "";
 let refreshArr = [];
 for (let j = 1; j <= 6; j++) {
 refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
 }
 ctx.clearRect(0, 0, captchaText.width, captchaText.height);
 c = refreshArr.join('');
 ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);
 output.innerHTML = "";
});

Leave a Reply