Build a Random Captcha Generator in Browser Using HTML5 & Javascript

index.html

<style>
    body {
        display: flex;
        justify-content: center;
        height: 100vh;
        align-items: center;
        padding: 0;
        margin: 0;
        flex-direction: column;
        background-color: #ffffff;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0' gradientTransform='rotate(264,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(199,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23F00'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='5.28'%3E%3Cpath transform='translate(-73.5 16.8) rotate(10.5 1409 581) scale(1.042)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='1.7600000000000002' transform='translate(-42 42) rotate(12.6 800 450) scale(1.021)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(37.8 -126) rotate(126 401 736) scale(1.021)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='1.6'%3E%3Cpath transform='translate(252 -16.8) rotate(4.2 150 345) scale(0.958)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='3.5200000000000005' transform='translate(-168 -105) rotate(151.2 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='translate(-252 84) rotate(25.2 1400 132)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        background-attachment: fixed;
        background-size: cover;
    }

    div {
        margin-bottom: 10px;
    }

    button {
        margin-bottom: 5px;
        cursor: pointer;
    }

    input {
        text-decoration: none;
    }

    #generated-captcha {
        text-decoration: line-through;
        font-weight: bold;
        text-align: center;
        font-size: 20px;
        background-color: #ede7f6;
        border-radius: 6px;
        border: none;
        padding: 6px;
        outline: none;
        color: #1d1d1d;
    }

    #entered-captcha {
        border: 2px solid #c5c7f7;
        font-family: monospace;
        outline: none;
        border-radius: 6px;
        padding: 8px 15px;
        font-size: 12px;
    }

    button {
        border: none;
        padding: 8px 20px;
        border-radius: 6px;
        font-size: 14px;
        font-family: monospace;
        font-weight: bold;
        outline: none;
        background-color: #64f394;
    }

    #gen {
        background-color: #ee7e6a;
    }

    .wrappr {
        /* border: 1px solid red; */
        display: flex;
        flex-direction: column;
        /* align-items: center; */
        justify-content: center;
    }
</style>

<body onload="generate()">
    <div class="wrapper"></div>
    <h2 id="status" style="color: #ee7e6a;"></h2>
    <div>
        <input type="text" readonly id="generated-captcha">
    </div>
    <div>
        <input type="text" id="entered-captcha" placeholder="Enter the captcha..">
    </div>
    <button type="button" onclick="check()">
        check
    </button>
    <button type="button" onclick="generate()" id="gen">
        Generate New
    </button>

</body>
<script>
    let captcha;
    let alphabets = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";
    console.log(alphabets.length);
    let status = document.getElementById('status');
    status.innerText = "Captcha Generator";

    generate = () => {
        // console.log(status)
        let first = alphabets[Math.floor(Math.random() * alphabets.length)];
        let second = Math.floor(Math.random() * 10);
        let third = Math.floor(Math.random() * 10);
        let fourth = alphabets[Math.floor(Math.random() * alphabets.length)];
        let fifth = alphabets[Math.floor(Math.random() * alphabets.length)];
        let sixth = Math.floor(Math.random() * 10);
        captcha = first.toString() + second.toString() + third.toString() + fourth.toString() + fifth.toString() + sixth.toString();
        console.log(captcha);
        document.getElementById('generated-captcha').value = captcha;
        document.getElementById("entered-captcha").value = '';
        status.innerText = "Captcha Generator"
    }

    check = () => {
        // console.log(status)
        let userValue = document.getElementById("entered-captcha").value;
        console.log(captcha);
        console.log(userValue);
        if (userValue == captcha) {
            status.innerText = "Correct!!"
        } else {
            status.innerText = "Try Again!!"
            document.getElementById("entered-captcha").value = '';
        }
    }

</script>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

<style>

body {

display: flex;

justify-content: center;

height: 100vh;

align-items: center;

padding: 0;

margin: 0;

flex-direction: column;

background-color: #ffffff;

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0' gradientTransform='rotate(264,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%230FF'/%3E%3Cstop offset='1' stop-color='%23CF6'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(199,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23F00'/%3E%3Cstop offset='1' stop-color='%23FC0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='5.28'%3E%3Cpath transform='translate(-73.5 16.8) rotate(10.5 1409 581) scale(1.042)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='1.7600000000000002' transform='translate(-42 42) rotate(12.6 800 450) scale(1.021)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(37.8 -126) rotate(126 401 736) scale(1.021)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='1.6'%3E%3Cpath transform='translate(252 -16.8) rotate(4.2 150 345) scale(0.958)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='3.5200000000000005' transform='translate(-168 -105) rotate(151.2 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='translate(-252 84) rotate(25.2 1400 132)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

background-attachment: fixed;

background-size: cover;

}

div {

margin-bottom: 10px;

}

button {

margin-bottom: 5px;

cursor: pointer;

}

input {

text-decoration: none;

}

#generated-captcha {

text-decoration: line-through;

font-weight: bold;

text-align: center;

font-size: 20px;

background-color: #ede7f6;

border-radius: 6px;

border: none;

padding: 6px;

outline: none;

color: #1d1d1d;

}

#entered-captcha {

border: 2px solid #c5c7f7;

font-family: monospace;

outline: none;

border-radius: 6px;

padding: 8px 15px;

font-size: 12px;

}

button {

border: none;

padding: 8px 20px;

border-radius: 6px;

font-size: 14px;

font-family: monospace;

font-weight: bold;

outline: none;

background-color: #64f394;

}

#gen {

background-color: #ee7e6a;

}

.wrappr {

/* border: 1px solid red; */

display: flex;

flex-direction: column;

/* align-items: center; */

justify-content: center;

}

</style>

<div>

</div>

<div>

</div>

check

</button>

Generate New

</button>

</body>

let captcha;

let alphabets = "AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz";

console.log(alphabets.length);

let status = document.getElementById('status');

status.innerText = "Captcha Generator";

generate = () => {

// console.log(status)

let first = alphabets[Math.floor(Math.random() * alphabets.length)];

let second = Math.floor(Math.random() * 10);

let third = Math.floor(Math.random() * 10);

let fourth = alphabets[Math.floor(Math.random() * alphabets.length)];

let fifth = alphabets[Math.floor(Math.random() * alphabets.length)];

let sixth = Math.floor(Math.random() * 10);

captcha = first.toString() + second.toString() + third.toString() + fourth.toString() + fifth.toString() + sixth.toString();

console.log(captcha);

document.getElementById('generated-captcha').value = captcha;

document.getElementById("entered-captcha").value = '';

status.innerText = "Captcha Generator"

}

check = () => {

// console.log(status)

let userValue = document.getElementById("entered-captcha").value;

console.log(captcha);

console.log(userValue);

if (userValue == captcha) {

status.innerText = "Correct!!"

} else {

status.innerText = "Try Again!!"

document.getElementById("entered-captcha").value = '';

}

</script>

Build a Random Captcha Generator in Browser Using HTML5 & Javascript

Comments

Leave a Reply Cancel reply

Archives