Custom Captcha Generator in HTML CSS & JavaScript

by Letscode - October 4,2023

CAPTCHA is an anti-bot security feature that combines distorted letters and numbers. It is employed to differentiate between humans and automated bots. Its purpose is to restrict access to specific online features like registration or comment posting. The distorted characters pose a challenge that bots have difficulty solving.

Creating a captcha generator using HTML, CSS, and JavaScript could be quite an important skill for a developer. Whether you’re building a personal website or developing a client’s site.

The purpose of this blog post is to teach you how to develop a Captcha Generator using HTML, CSS, and JavaScript. Essentially, we’ll be designing a form that randomly generates a combination of letters and numbers in an unordered format. We’ll then need to fill in the correct letters to determine if we’ve accurately solved the captcha. By the end of this post, you’ll have gained the knowledge and skills needed to create and implement captchas on your own websites.

Steps For Creating Custom Captcha Generator in HTML

To create a captcha generator using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic layout for the captcha generator.

HTML

                                          
<!DOCTYPE html>
<!-- YouTube - letscodeweb -->
<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 Generator</title>
    <link rel="stylesheet" href="style.css" />
    <!-- Fontawesome CDN Link -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" />
  </head>
  <body>
    <div class="container">
      <header>Captcha Generator</header>
      <div class="input_field captch_box">
        <input type="text" value="" disabled />
        <button class="refresh_button">
          <i class="fa-solid fa-rotate-right"></i>
        </button>
      </div>
      <div class="input_field captch_input">
        <input type="text" placeholder="Enter captcha" />
      </div>
      <div class="message">Entered captcha is correct</div>
      <div class="input_field button disabled">
        <button>Submit Captcha</button>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>

CSS

                                          
/* Coding by Letscode */
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #826afb;
}
.container {
  position: relative;
  max-width: 300px;
  width: 100%;
  border-radius: 12px;
  padding: 15px 25px 25px;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
header {
  color: #333;
  margin-bottom: 20px;
  font-size: 18px;
  font-weight: 600;
  text-align: center;
}
.input_field {
  position: relative;
  height: 45px;
  margin-top: 15px;
  width: 100%;
}
.refresh_button {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  background: #826afb;
  height: 30px;
  width: 30px;
  border: none;
  border-radius: 4px;
  color: #fff;
  cursor: pointer;
}
.refresh_button:active {
  transform: translateY(-50%) scale(0.98);
}
.input_field input,
.button button {
  height: 100%;
  width: 100%;
  outline: none;
  border: none;
  border-radius: 8px;
}
.input_field input {
  padding: 0 15px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.captch_box input {
  color: #6b6b6b;
  font-size: 22px;
  pointer-events: none;
}
.captch_input input:focus {
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
}
.message {
  font-size: 14px;
  margin: 14px 0;
  color: #826afb;
  display: none;
}
.message.active {
  display: block;
}
.button button {
  background: #826afb;
  color: #fff;
  cursor: pointer;
  user-select: none;
}
.button button:active {
  transform: scale(0.99);
}
.button.disabled {
  opacity: 0.6;
  pointer-events: none;
}

Finally, add the following JavaScript code to your script.js file to make the to generate random captcha and validated our entered captcha.

                                              
const wrapper = document.querySelector(".wrapper"),
qrInput = wrapper.querySelector(".form input"),
generateBtn = wrapper.querySelector(".form button"),
qrImg = wrapper.querySelector(".qr-code img");
let preValue;
    
generateBtn.addEventListener("click", () => {
    let qrValue = qrInput.value.trim();
    if(!qrValue || preValue === qrValue) return;
    preValue = qrValue;
    generateBtn.innerText = "Generating QR Code...";
    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
    qrImg.addEventListener("load", () => {
        wrapper.classList.add("active");
        generateBtn.innerText = "Generate QR Code";
    });
});
    
qrInput.addEventListener("keyup", () => {
    if(!qrInput.value.trim()) {
        wrapper.classList.remove("active");
        preValue = "";
    }
});

Conclusion and Final Words

I hope this blog post taught you how to make your own Captcha Generator using HTML, CSS, and JavaScript. The coding process is simple and easy to understand, so you can customize your generator to your needs.

With this skill, you can make your website more secure and prevent spam or hacking. I’m confident that this post gave you the tools and confidence to create a great Captcha Generator. I recommend you to check my blog on Strong Password Generator in HTML CSS & JavaScript. This will also help you to enhance you JavaScript skills.

If you face any difficulties while creating your own captcha generator or your code is not working as expected, you can download the source code files for this captcha generator for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

Custom Captcha Generator in HTML CSS & JavaScript

by Letscode - October 4,2023

Steps For Creating Custom Captcha Generator in HTML

Conclusion and Final Words

Letscode - October 20,2023

Letscode - October 4,2023

Letscode - October 10,2023

Letscode - November 4,2023

Letscode - October 24,2023