I know everyone is interested in doing a project with any language. So, I’ve been sharing projects that I made using HTML CSS & JS, Let’s look at the project namely captcha generator in HTML CSS and JS from scratch. Inside the project, you can generate random captcha code also inside the project have validation.
I’m going to teach you how to use HTML and CSS to design it from scratch, then we will use JavaScript to display the random characters inside the input fields. Also, we will use simple validation that helps use to check the captcha code.
In the ever-evolving landscape of the internet, security is a top priority for websites and online platforms. One common tool used to protect against automated bots is the CAPTCHA, which stands for Completely Automated Public Turing Test to Tell Computers and Humans Apart. In this article, we’ll explore how to create a simple yet effective Captcha generator using HTML, CSS, and JavaScript.
CAPTCHAs are designed to distinguish between human users and automated bots. They often present challenges that are easy for humans to solve but difficult for machines. These challenges can take various forms, such as distorted text, image recognition, or simple puzzles.
How to Make Captcha Generator in HTML CSS and JS
I made the video tutorial you must watch it, inside the video I mentioned each step that is used to make a captcha Generator in HTML CSS, and JS from scratch. I hope you like the video tutorial, you can learn many new things from this tutorial.
I hope you’ve watched the complete video and you’ve learned something new from this tutorial. You can check out the source code used inside the project.
You May Also Like
- Multi-Step Form With Progress Bar Using HTML, CSS, & JavaScript
- Budget App Using HTML CSS and JavaScript
- How to Make a Random Color Generator in JavaScript
- Dynamic Calendar Using HTML CSS and JavaScript
- Creating a Category Filter Using HTML CSS and JavaScript
Setting Up the HTML Structure:
Start by creating the basic HTML structure for your Captcha generator. This will include the main container, input fields, and a button to generate a new Captcha. The user interface should be clear and easy to navigate.
<div class="container">
<h2>Captcha Generator</h2>
<form action="#">
<input
type="text"
placeholder=" a b c e d 0"
disabled
class="input-field disable"
/>
<button type="button" class="btn-icon">
<i class="fa fa-refresh"></i>
</button>
<input
type="text"
placeholder="Enter Your Captcha"
class="input-field captcha"
/>
<p class="message">Please Enter Your Captcha</p>
<button type="button" class="btn-submit">Submit Captcha</button>
</form>
</div>Styling with CSS:
Enhance the visual appeal of your Captcha by using CSS to style the elements. Consider using colors, borders, and spacing to create a visually appealing and user-friendly interface. A well-designed Captcha contributes to a positive user experience.
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&family=Ruda:wght@400;600;700&display=swap");
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #2c3e50;
font-family: "poppins", sans-serif;
}
.container {
max-width: 450px;
width: 100%;
background: #fff;
border-radius: 5px;
padding: 2rem;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.container h2 {
font-size: 2rem;
text-align: center;
margin: 1rem 0;
}
form {
position: relative;
}
.input-field {
width: 100%;
padding: 0.8rem 0.5rem;
margin: 1rem 0;
font-family: inherit;
outline: none;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1.2rem;
}
.btn-icon {
position: absolute;
top: 25px;
transform: translateY(-50%);
right: 10px;
outline: none;
cursor: pointer;
border: none;
width: 40px;
height: 40px;
background-color: #d35cee;
border-radius: 5px;
transform: scale(1);
}
.fa-refresh {
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.message {
text-align: center;
margin: 1rem 0;
display: none;
}
.message.active {
display: block;
}
.btn-submit {
width: 100%;
background-color: #d35cee;
outline: none;
border: none;
color: #fff;
font-family: inherit;
padding: 1rem 0;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
}
.btn-icon:active,
.btn-submit:active {
transform: scale(0.98);
}
Implementing JavaScript Logic:
JavaScript plays a crucial role in generating and validating Captchas. Utilize JavaScript to create random challenges, such as distorted characters or simple arithmetic problems. Ensure that the generated Captcha is unique each time, making it more secure against automated attacks.
"use strict";
const inputDisableEl = document.querySelector(".disable");
const inputEnableEl = document.querySelector(".captcha");
const btnRefereshEl = document.querySelector(".btn-icon");
const messagEl = document.querySelector(".message");
const btnSubmit = document.querySelector(".btn-submit");
let captchaTxt = null;
//==================Generate Random Characters=================
function generateCaptcha() {
const randomString = Math.random().toString(36).substring(2, 8);
const randomStringArr = randomString.split("");
const changeString = randomStringArr.map((char) =>
Math.random() > 0.5 ? char.toUpperCase() : char,
);
captchaTxt = changeString.join(" ");
inputDisableEl.value = captchaTxt;
}
//==================Generate Random Characters=================
function submitBtn() {
captchaTxt = captchaTxt
.split(" ")
.filter((char) => char != "")
.join(" ");
console.log(captchaTxt);
messagEl.classList.add("active");
if (inputEnableEl.value === captchaTxt) {
messagEl.innerHTML = "You've Entered Correct Captcha.......";
messagEl.style.color = "#28b463";
} else {
messagEl.innerHTML = "You've Entered Invalid Captcha.......";
messagEl.style.color = "#C70039";
}
}
//==================Refresh Btn =================
const refereshBtn = () => {
generateCaptcha();
submitBtn();
inputEnableEl.value = "";
messagEl.classList.remove("active");
};
btnRefereshEl.addEventListener("click", refereshBtn);
btnSubmit.addEventListener("click", submitBtn);
generateCaptcha();
Implement user-friendly features that enhance the interaction with your Captcha. For instance, provide a refresh button to generate a new Captcha in case the user finds it difficult to solve or encounters an error. This ensures a smoother user experience.
Once the user submits their response to the Captcha challenge, implement a validation mechanism using JavaScript. Verify that the user’s input matches the generated Captcha, and provide appropriate feedback. This step ensures that only legitimate users can proceed while blocking automated bots.
Keep in mind the importance of accessibility when designing your Captcha. Ensure that the challenges are perceivable and solvable by users with disabilities. This may involve providing alternative text for visually impaired users or using audio-based challenges.
Conclusion:
Building a Captcha generator with HTML, CSS, and JavaScript is a valuable skill for web developers aiming to enhance the security of their online platforms. By creating an engaging and user-friendly Captcha experience, you contribute to a safer online environment while maintaining a positive user experience. Remember to continually test and refine your Captcha to stay ahead of evolving security threats on the internet.
