Captcha Generator using HTML CSS JavaScript with free source code

captcha generator,impossible captcha generator,react captcha generator,select all squares captcha generator,random captcha generator,custom captcha generator,spring boot captcha generator example,captcha generator meme,black metal captcha generator,php captcha generator,ai captcha generator,captcha generator api,captcha generator angular,captcha audio generator,generate captcha android,captcha auto maker,generate captcha aspx,captcha generator using html css and javascript,asp-captcha-generator-display-mode,captcha rules,audio captcha generator, captcha generator,angular captcha generator,how do i create a captcha,how do you create a captcha code,can you make money with captcha,how do you get a captcha code,discord token generator captcha bypass,botdetect captcha generator,captcha code example,quantum random bit generator captcha,spring boot captcha generator,can captcha be bypassed,captcha generator c#,captcha generator code,captcha generator codeigniter,captcha generation code in python,captcha generation code in java,captcha code generator javascript,captcha code generator in c#,captcha code generator in php,generate captcha code in core,captcha generator html code,c# captcha generator,captcha generator javascript,captcha generator python,captcha generator in python with source code,captcha generator java,captcha generator php,react-captcha-generator example,captcha explained,get paid by typing captcha,captcha generator free,captcha generator fake,captcha generator facebook,fake captcha generator,facebook captcha generator,fake image captcha generator,free primogems generator no captcha,free robux generator no captcha,fake captcha text generator,how are captcha generated,captcha generator github,google recaptcha generator,golang captcha generator,captcha when using google,github captcha generator,google captcha key generator,google captcha meme generator,why am i getting a google captcha,captcha generator html,heavy metal captcha generator,html captcha image generator,captcha generator in html,homestuck captcha code generator,how to get captcha to work,captcha generator image,captcha generator in php,captcha generator in python,captcha image generator javascript,captcha image generator api,captcha image generator c#,random captcha generator in java,image captcha generator php,java captcha image generator,c# captcha image generator,captcha creator job,captcha generation using javascript,java captcha generator open source,captcha writing jobs,javascript captcha generator,java captcha generator,node js captcha generator,captcha key generator,how much can you earn from captcha,key captcha example,captcha generator online,free captcha generator,recaptcha meme generator,captcha message example,captcha meme generator,is captcha typing legal,captcha generator npm,captcha generator nodejs,captcha generator node,captcha number generator,.net captcha generator,nodejs captcha generator,.net core captcha generator,npm captcha generator,node-captcha-generator,npm node-captcha-generator,robux generator no captcha,captcha generator open source,open source captcha generator,one click captcha generator,online captcha generator,captcha words list,how to get captcha code,captcha picture generator,python captcha generator,captcha test example,captcha generator react,captcha generation in spring boot,quantum random bit generator service captcha,python simple captcha generator,simple captcha example,why do i get captcha every time,captcha test generator,captcha token generator,recaptcha token generator,recaptcha token generator online,recaptcha test generator,text captcha generator,what is the best captcha to use,captcha generator using python,free robux generator captcha verification,captcha types,captcha rating,captcha word generator,word captcha generator,funny captcha generator,2captcha key generator,how 2captcha pay,2captcha prices,is 2captcha legal,2captcha rates,3d captcha,4chan captcha solver github,4chan captcha solver,4chan captcha bypass,human captcha test

Social Links

<!DOCTYPE html>
<html lang="en">

  <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 | CodingAyush</title>
  <link rel="stylesheet" href="style.css" />
  <!-- Fontawesome CDN Link -->
  <link rel="stylesheet" href="" />

  <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>
    <div class="input_field captch_input">
      <input type="text" placeholder="Enter captcha" />
    <div class="message">Entered captcha is correct</div>
    <div class="input_field button disabled">
      <button>Submit Captcha</button>

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

/* Import Google font - Poppins */
@import url(";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: #11131e;
.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;
} {
  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;
// Selecting necessary DOM elements
const captchaTextBox = document.querySelector(".captch_box input");
const refreshButton = document.querySelector(".refresh_button");
const captchaInputBox = document.querySelector(".captch_input input");
const message = document.querySelector(".message");
const submitButton = document.querySelector(".button");

// Variable to store generated captcha
let captchaText = null;

// Function to generate captcha
const generateCaptcha = () => {
  const randomString = Math.random().toString(36).substring(2, 7);
  const randomStringArray = randomString.split("");
  const changeString = => (Math.random() > 0.5 ? char.toUpperCase() : char));
  captchaText = changeString.join("   ");
  captchaTextBox.value = captchaText;

const refreshBtnClick = () => {
  captchaInputBox.value = "";

const captchaKeyUpValidate = () => {
  //Toggle submit button disable class based on captcha input field.
  submitButton.classList.toggle("disabled", !captchaInputBox.value);

  if (!captchaInputBox.value) message.classList.remove("active");

// Function to validate the entered captcha
const submitBtnClick = () => {
  captchaText = captchaText
    .filter((char) => char !== " ")
  // Check if the entered captcha text is correct or not
  if (captchaInputBox.value === captchaText) {
    message.innerText = "Entered captcha is correct"; = "#826afb";
  } else {
    message.innerText = "Entered captcha is not correct"; = "#FF2525";

// Add event listeners for the refresh button, captchaInputBox, submit button
refreshButton.addEventListener("click", refreshBtnClick);
captchaInputBox.addEventListener("keyup", captchaKeyUpValidate);
submitButton.addEventListener("click", submitBtnClick);

// Generate a captcha when the page loads

Post a Comment

Previous Post Next Post