Custom Captcha Generator with HTML,CSS
and JavaScript
Manual human test is an enemy of bot security include that joins misshaped letters and numbers is CAPTCHA. It is utilized to separate among people and robotized bots. Its motivation is to confine admittance to explicit web-based highlights like enlistment or remark posting. The misshaped characters represent a test that bots experience issues settling.
Making a manual human test generator utilizing HTML, CSS, and JavaScript could be a seriously significant expertise for an engineer. Whether you're fabricating an individual site or fostering a client's site. The reason for this blog entry is to show you how to foster a Manual human test Generator utilizing HTML, CSS, and JavaScript. Basically, we'll be planning a structure that haphazardly produces a mix of letters and numbers in an unordered configuration. We'll then, at that point, need to fill in the right letters to decide whether we've precisely tackled the manual human test. Toward the finish of this post, you'll have acquired the information and abilities expected to make and execute manual human tests on your own sites.
Captcha Generator with HTML,CSS and JavaScript Video Tutorial
Captcha Generator with HTML,CSS and JavaScript [Source Codes]
Captcha Generator with HTML,CSS and 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 style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes of this Border Loading Animation by clicking on the given download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>Custom Captcha Generator</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="captcha-container">
- <div class="captcha" id="captcha"></div>
- <button class="refresh-btn" onclick="refreshCaptcha()">Refresh</button>
- <input type="text" id="userInput" placeholder="Enter Captcha" required>
- <button class="verify-btn" onclick="verifyCaptcha()">Verify</button>
- <p id="result"></p>
- </div>
-
- <script src="script.js"></script>
- </body>
- </html>
-
Now paste the following codes into your style.css file
- body {
- font-family: Arial, sans-serif;
- display: flex;
- justify-content: center;
- align-items: center;
- height: 100vh;
- margin: 0;
- background:linear-gradient(135deg, #667eea, #764ba2);
- }
-
- .captcha-container {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- 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);
- }
- .captcha {
- font-size: 24px;
- font-weight: bold;
- margin-bottom: 10px;
- border: 1px solid #ccc;
- border-radius: 5px;
- padding: 10px;
- width: 250px;
- text-align: center; /* Add this line */
- display: inline-block;
- }
- .refresh-btn,
- .verify-btn {
- padding: 8px 16px;
- margin: 5px;
- font-size: 16px;
- cursor: pointer;
- border: none;
- border-radius: 4px;
- background-color: #4caf50;
- color: white;
- }
-
- .verify-btn {
- background-color: #2196f3;
- }
-
- input[type="text"] {
- padding: 10px;
- font-size: 16px;
- margin-bottom: 10px;
- border-radius: 5px;
- }
-
- #result {
- margin-top: 10px;
- font-weight: bold;
- }
-
Now paste the following codes into your script.js file
- function generateCaptcha() {
- const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
- let captcha = '';
- for (let i = 0; i < 6; i++) {
- const index = Math.floor(Math.random() * chars.length);
- captcha += chars.charAt(index);
- }
- return captcha;
- }
-
- function refreshCaptcha() {
- const captchaElement = document.getElementById('captcha');
- const captcha = generateCaptcha();
- captchaElement.textContent = captcha;
- }
-
- function verifyCaptcha() {
- const userInput = document.getElementById('userInput').value;
- const captchaText = document.getElementById('captcha').textContent;
- const resultElement = document.getElementById('result');
-
- if (userInput.toLowerCase() === captchaText.toLowerCase()) {
- resultElement.textContent = 'Captcha matched!';
- resultElement.style.color = 'green';
- } else {
- resultElement.textContent = 'Captcha not matched. Please try again.';
- resultElement.style.color = 'red';
- refreshCaptcha();
- }
- }
-
- // Initial load
- window.onload = function () {
- refreshCaptcha();
- };
-
If you face any difficulties while creating your Captcha Generator or your code is not working as expected, you can download the source code files for this Card for free by clicking on the download button.