A captcha is a popular security measure used on many websites to prevent automated spam and bots from accessing sensitive information or performing malicious activities. A captcha typically involves displaying an image or a string of characters that users have to identify and enter correctly to prove that they are human. In this article, we will guide you on how to create a captcha generator using HTML, CSS, and JavaScript.
Step 1: Choose a Captcha Type
The first step is to choose the type of captcha you want to use. There are several types of captchas available, such as text-based, image-based captchas, math-based captchas, and audio-based captchas. You can choose a captcha type based on your website’s needs and preferences. In this tutorial, we will create custom text-based captcha.
Step 2: Create the HTML Markup
Next, you can create the HTML markup for the captcha. You can use the div tag with a unique class or ID to display the captcha. Depending on the captcha type you choose, you can add images, audio, or input fields to the captcha.
<!DOCTYPE html>
<!-- By Mr. Geek - www.wphotshot.com -->
<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 | WPHotshot</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="main.js"></script>
</body>
</html>
Step 3: Add CSS Styling
After creating the HTML markup, you can add CSS styling to the captcha to make it visually appealing and user-friendly. You can customize the appearance of the captcha, such as its size, position, color, and font. You can also use CSS animations and transitions to create smooth and engaging user interactions.
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&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: linear-gradient(to right, #2832d4, #00A5B2, #7209D4);
}
.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: #2832d4;
margin-bottom: 20px;
font-size: 20px;
font-weight: 600;
text-align: center;
font-family: 'DM Serif Display', serif;
}
.input_field {
position: relative;
height: 45px;
margin-top: 15px;
width: 100%;
}
.refresh_button {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: #2832d4;
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: #2832d4;
display: none;
}
.message.active {
display: block;
}
.button button {
background: #2832d4;
color: #fff;
cursor: pointer;
user-select: none;
}
.button button:active {
transform: scale(0.99);
}
.button.disabled {
opacity: 0.6;
pointer-events: none;
}
Step 4: Implement JavaScript Captcha Logic
The most crucial step in creating a captcha generator is implementing the JavaScript captcha logic. You can use JavaScript to generate a random captcha code and validate user input. You can do this by creating a function that generates a random code and compares it with the user input. You can also add a time limit or refresh button to prevent users from submitting an invalid code multiple times.
// 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 = randomStringArray.map((char) => (Math.random() > 0.5 ? char.toUpperCase() : char));
captchaText = changeString.join(" ");
captchaTextBox.value = captchaText;
console.log(captchaText);
};
const refreshBtnClick = () => {
generateCaptcha();
captchaInputBox.value = "";
captchaKeyUpValidate();
};
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
.split("")
.filter((char) => char !== " ")
.join("");
message.classList.add("active");
// Check if the entered captcha text is correct or not
if (captchaInputBox.value === captchaText) {
message.innerText = "Entered captcha is correct";
message.style.color = "#826afb";
} else {
message.innerText = "Entered captcha is not correct";
message.style.color = "#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
generateCaptcha();
Conclusion
In conclusion, a captcha generator is a powerful security measure that can improve the security and reliability of your website. By following the steps above, you can create a captcha generator using HTML, CSS, and JavaScript that will prevent spam and protect your website from malicious activities. Remember to test your code thoroughly to ensure that it works as intended. Implementing a captcha generator on your website can improve user trust and ultimately lead to higher conversion rates.
