Build a Customisable CAPTCHA using HTML, CSS, and JavaScript

Published on June 14, 2024

Hello everyone, and welcome back to our YouTube channel! Today, we’re diving into the world of web development, where we’ll be learning how to create a simple Captcha generator using HTML, CSS, and JavaScript. Captchas are those little puzzles you often encounter online that help verify whether you’re a human or a bot.

Let’s start by looking at the HTML code. At the very top, we have the <!DOCTYPE html> declaration, which specifies that this document is an HTML5 document. Next, we have the opening <html> tag, indicating the start of our HTML document, with the lang attribute set to “en” for English.

Moving on, we have some meta tags inside the <head> section. These meta tags define the character encoding (charset) as UTF-8, ensuring proper handling of special characters. The viewport meta tag is crucial for responsive web design, as it sets the width of the viewport to the device’s width and scales it accordingly.

Then, we have the <title> tag, which sets the title of our webpage to “Captcha Generator“. This is what will appear on the browser tab.

Next, we link to external stylesheets using the <link> tag. We’re using Font Awesome for some icons, which is hosted on a CDN (Content Delivery Network), so we don’t need to download it locally. Additionally, we link to our own custom stylesheet named “style.css”, which we’ll use to style our Captcha generator.

Now, let’s move on to the <body> section. Inside the body, we have a <div> element with the class “container“, which serves as the main container for our content.

Within the container, there’s another <div> with the class “wrapper“. Inside this wrapper, we have a <canvas> element with the id “canvas“. This canvas is where we’ll generate the Captcha image. Next to the canvas, we have a <button> with the id “reload-button”. This button will allow users to reload or regenerate the Captcha image if they’re having trouble reading it.

Below the wrapper, we have an <input> field with the id “user-input”. This is where users will enter the text they see in the Captcha image. Finally, we have another <button> with the id “submit-button”. Users will click this button to submit their input and validate the Captcha.

At the end of the body, just before the closing </body> tag, we include a <script> tag that links to our JavaScript file named “script.js“. This is where all the magic happens – where we’ll write the code to generate the Captcha image and handle user input.

CSS

Starting with the CSS code, we have a universal selector (*) where we’re setting some baseline styles. We’re resetting margins and padding to zero, ensuring consistent spacing across different elements. The box-sizing property is set to border-box, which includes padding and border in the element’s total width and height calculations. Also, we’re specifying a fallback font stack of Arial, Helvetica, sans-serif for all text elements.

Moving on to the body, we’re setting the background colour to a dark shade of grey (#2a2a2a) to create a visually pleasing contrast with our content.

Inside the .container class, we’re defining styles for the main container of our Captcha generator. It has a fixed width of 430 pixels, a white background, some padding, rounded corners (border-radius), and a subtle box shadow for a 3D effect. This container is centred on the page using margin auto and has some spacing from the top to maintain visual balance.

Within the container, the .wrapper class is used to style the wrapper around the Captcha canvas and reload button. It’s a flex container, allowing its child elements to be positioned horizontally with space between them. This ensures the canvas and reload button are evenly spaced and aligned.

The #canvas ID styles the canvas element where the Captcha image will be displayed. It has a light grey border with rounded corners to match the container’s design.

The button#reload-button styles the reload button. It’s given a larger font size, a square shape (width and height equal), a dark background colour (#2a2a2a), rounded corners, and white text. Additionally, it has a cursor set to pointer to indicate interactivity.

Moving to the input field (input[type=”text”]), we’re setting a reasonable font size, padding, a light grey border, and rounded corners. When focused, the border colour remains the same, but the outline is removed to maintain a clean look.

Finally, the button#submit-button styles the submit button. It spans the full width of its container, has a dark background colour, white text, rounded corners, and a slightly larger font size. It also has a cursor set to pointer for interactivity.

JAVASCRIPT

Starting with the JavaScript code, we’ll begin by declaring variables to access various elements of our Captcha generator. We have submitButton, userInput, canvas, and reloadButton, which will be essential for handling user interaction and generating Captcha images.

Next, we define a constant named textGenerator, which is a function responsible for generating random strings to be displayed as Captcha. Inside this function, we use a loop to generate a random alphanumeric string of three characters.

We also have a helper function called randomNumber, which generates a random number within a specified range.

The draStringOnCanvas function is responsible for drawing the generated string onto the canvas. It clears any previous content on the canvas and then iterates over each character of the string, randomly assigning colour and position for each character.

The traggerFunction (triggerFunction) is called to initialise the Captcha generation process. It resets the user input field, generates a new random string, shuffles its characters, and then draws it onto the canvas using the draStringOnCanvas function.

We set up an event listener on the reload button (reloadButton) to trigger the traggerFunction whenever the button is clicked. This ensures that users can generate a new Captcha if they’re having trouble reading the current one.

Additionally, we use the window.onload event to automatically trigger the traggerFunction when the page finishes loading, ensuring that a Captcha is displayed right away.

Finally, we set up an event listener on the submit button (submitButton). When clicked, it checks if the user input matches the generated Captcha text. If it does, an alert with the message “Success” is displayed. If not, an alert with “Incorrect” is shown, and the traggerFunction is called again to generate a new Captcha.

And there you have it! With our JavaScript code in place, our Captcha generator is now fully functional. In the next video, we’ll wrap things up by testing our project and making any final adjustments. So, stay tuned, and don’t forget to like and subscribe for more web development tutorials. Thanks for watching, and I’ll see you in the next one!

Our Latest Blog

Java Programming

Introduction to Java Programming Getting Started with the Basics

Welcome to the innovative world of Java programming. Java is an important and powerful programming...
Read More
Reinforcement Learning

Future Trends in Reinforcement Learning Innovations and Opportunities

Reinforcement Learning (RL) is an important branch of artificial intelligence (AI) in which agents learn...
Read More
LSET's New Course

How LSET’s New Course Structure Enhances Your Learning Experience

LSET stands out for its commitment to nonstop enhancement in the ever-evolving geography of education....
Read More