Custom Captcha Generator design and validation in HTML CSS & JavaScript - Devhubspot

Validation Design CSS Html javascript Captcha

CAPTCHA is a security measure designed to combat bots that mixes scrambled characters and numbers. It is used to distinguish between automated bots and people. Its objective is to limit access to particular web functions, such as registration and commenting. Bots struggle to overcome the hurdle posed by the warped figures.

Using HTML, CSS, and JavaScript to create a captcha generator might be a crucial ability for a developer. Whether you're creating a website for yourself or a customer.

This blog post's goal is to show you how to use HTML, CSS, and JavaScript to create a Captcha Generator. In essence, we'll be creating a form that creates characters and numbers in an unordered fashion at random. To check if we correctly solved the captcha, we must next type in the appropriate letters. You will have acquired the information and abilities required to design and deploy captchas on your own websites by the conclusion of this article.

Steps For Creating Custom Captcha Generator in HTML

To create a captcha generator using HTML, CSS, and vanilla 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 script and its extension .js

To start, add the following HTML codes to your index.html file to create a basic layout for the captcha generator.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Captcha Generator Html Css Javascript - Devhubspot</title>
        <link rel="stylesheet" href="./styles.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    </head>
    <body>
        <div class="container">
            <header>Captcha Generator - Devhubspot</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</button>
            </div>
        </div>

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

Next, add the following CSS codes to your style.css file to style the captcha generator and make it interactive and beautiful.

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Poppins:ital,wght@0,200;0,300;0,500;0,600;0,700;1,200;1,300;1,400&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: #766cea;
}
.container{
    position: relative;
    max-width: 400px;
    width: 100%;
    border-radius: 12px;
    padding: 15px 25px 25px;
    background-color: #fff;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
header{
    color: #222;
    margin-bottom: 20px;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
.input-field {
    position: relative;
    height: 44px;
    margin-top: 15px;
    width: 100%;
}

.input-field input {
    padding: 0 15px;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.captch-box input {
    color: #6b6b6b;
    font-size: 20px;
    pointer-events: none;
}

.captch-input input:focus {
    box-shadow: 0 1px 1px rgbs(0, 0, 0, 0.8);
}

.refresh-button {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    background: #766cea;
    height: 30px;
    width: 30px;
    border: none;
    border-radius: 5px;
    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;
} 
.message {
    font-size: 14px;
    margin: 14px 0;
    color: #766cea;
    display: none;
}
.message.active{
    display: block;
}
.button button{
    background: #766cea;
    color: #fff;
    cursor: pointer;
    user-select: none;
}
.button button:active{
    transform: scale(0.99);
}
.button.disabled{
    opacity: 0.6;
    pointer-events: none;
}

Finally, add the following JavaScript code to your script.js file to make the to generate random captcha and validated our entered captcha.

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 submit = document.querySelector(".button");

let captchaText = null;

const generateCapcha = () =>{
    const randomString = Math.random().toString(36).substring(2, 7);
    const randomStringArrray = randomString.split("");
    const changeString = randomStringArrray.map((el) => (Math.random() > 0.5 ? el.toUpperCase() : el));
    captchaText = changeString.join("   ");
    captchaTextBox.value = captchaText;
    console.log(captchaText, "captchaText");
}

const refrshBtnClick = () =>{
    generateCapcha();
    captchaInputBox.value = "";
}

const captchaKeyUpValidate = () =>{
    submit.classList.toggle("disabled", !captchaInputBox.value);

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

const submitBtnClick = () => {
    captchaText = captchaText.split("").filter((el) => el !== " ").join("");
    message.classList.add("active");

    if(captchaInputBox.value === captchaText){
        message.innerText = "Entered captcha is correct";
        message.style.color = "#766cea";
    }else{
        message.innerText = "Entered captcha is not correct";
        message.style.color = "#FF2525";
    }
}

refreshButton.addEventListener("click", refrshBtnClick);
captchaInputBox.addEventListener("keyup", captchaKeyUpValidate);
submit.addEventListener("click", submitBtnClick);

generateCapcha();

Conclusion

With HTML, CSS, and JavaScript, I aim to have shown you how to create your own Captcha Generator. You may modify your generator to suit your demands because the coding procedure is straightforward and simple to grasp.