Pertama tama kita buat index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Syamil</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section>
<div class="content">
<span id="success-message" class="success">Succecc, You can now submit the form</span>
<input type="text" id="captcha-code" class="input" placeholder="Enter Captcha">
<span id="captcha-error" class="error"></span>
<div class="captcha-wrap">
<div id="CaptchaImageCode">
<canvas id="CapCode" class="capcode" width="300" height="80"></canvas>
</div>
<input type="button" class="ReloadBtn" onclick="CreateCaptcha()">
</div>
<input type="button" value="Submit" class="btnSubmit" onclick="CheckCaptcha(); Submit()">
</div>
</section>
<script src="js/jquery.js"></script>
<script src="js/captcha.js"></script>
</body>
</html>
lalu kita buat css style.css
body {
height: 100%;
margin: 0;
background: linear-gradient(90deg, rgba(24, 151, 255, 0.979) 0%, rgb(85, 153, 226) 100%);
;
}
section {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column-reverse;
}
.content {
border: 1px solid #ccc;
padding: 15px;
max-width: 345px;
background-color: #ffffff;
border-radius: 5px;
overflow: hidden;
margin: 100px auto;
}
.input {
border-radius: 5px;
border: 1px solid #ccc;
display: block;
box-sizing: border-box;
padding: 15px 10px;
outline: none;
font-size: 18px;
font-weight: normal;
font-family: 'Open Sans', sans-serif;
width: 343px;
}
.captcha-wrap {
position: relative;
}
#CaptchaImageCode {
text-align: center;
margin-top: 15px;
padding: 0px 0;
width: 300px;
overflow: hidden;
}
.capcode {
font-size: 46px;
display: block;
-moz-user-select: none;
-webkit-user-select: none;
user-select: none;
cursor: default;
letter-spacing: 1px;
font-family: 'Roboto Slab', serif;
font-weight: 100;
font-style: italic;
}
.ReloadBtn {
background: url('img/refresh.png') left top no-repeat;
background-size: 100%;
width: 32px;
height: 32px;
border: 0px;
outline: none;
position: absolute;
bottom: 30px;
left: 310px;
cursor: pointer;
}
.btnSubmit {
margin-top: 15px;
border: 0px;
padding: 10px 20px;
border-radius: 5px;
font-size: 18px;
background-color: #1285c4;
color: #fff;
cursor: pointer;
}
.success {
color: green;
font-size: 18px;
margin-bottom: 15px;
display: none;
}
.error {
color: red;
display: none;
}
Lalu kita buat forder js di dalam nya kita buat juga file captcha.js
var cd;
var IsAllowed = false;
$(document).ready(function () {
CreateCaptcha();
});
// Create Captcha
function CreateCaptcha() {
//$('#InvalidCapthcaError').hide();
var alpha = new Array(
"A",
"B",
"C",
"D",
"E",
"F",
"G",
"H",
"I",
"J",
"K",
"L",
"M",
"N",
"O",
"P",
"Q",
"R",
"S",
"T",
"U",
"V",
"W",
"X",
"Y",
"Z",
"a",
"b",
"c",
"d",
"e",
"f",
"g",
"h",
"i",
"j",
"k",
"l",
"m",
"n",
"o",
"p",
"q",
"r",
"s",
"t",
"u",
"v",
"w",
"x",
"y",
"z",
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9"
);
var i;
for (i = 0; i < 6; i++) {
var a = alpha[Math.floor(Math.random() * alpha.length)];
var b = alpha[Math.floor(Math.random() * alpha.length)];
var c = alpha[Math.floor(Math.random() * alpha.length)];
var d = alpha[Math.floor(Math.random() * alpha.length)];
var e = alpha[Math.floor(Math.random() * alpha.length)];
var f = alpha[Math.floor(Math.random() * alpha.length)];
}
cd = a + " " + b + " " + c + " " + d + " " + e + " " + f;
$("#CaptchaImageCode")
.empty()
.append(
'<canvas id="CapCode" class="capcode" width="300" height="80"></canvas>'
);
var c = document.getElementById("CapCode"),
ctx = c.getContext("2d"),
x = c.width / 2,
img = new Image();
img.src = "./img/ft.jpg";
img.onload = function () {
var pattern = ctx.createPattern(img, "repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, c.width, c.height);
ctx.font = "46px Roboto Slab";
ctx.fillStyle = "#ccc";
ctx.textAlign = "center";
ctx.setTransform(1, -0.12, 0, 1, 0, 15);
ctx.fillText(cd, x, 55);
};
}
// Validate Captcha
function ValidateCaptcha() {
var string1 = removeSpaces(cd);
var string2 = removeSpaces($("#captcha-code").val());
if (string1 == string2) {
return true;
} else {
return false;
}
}
// Remove Spaces
function removeSpaces(string) {
return string.split(" ").join("");
}
// Check Captcha
function CheckCaptcha() {
var result = ValidateCaptcha();
if (
$("#captcha-code").val() == "" ||
$("#captcha-code").val() == null ||
$("#captcha-code").val() == "undefined"
) {
$("#captcha-error")
.text("Please enter code given below in a picture.")
.show();
$("#captcha-code").focus();
} else {
if (result == false) {
IsAllowed = false;
$("#captcha-error").text("Invalid Captcha! Please try again.").show();
CreateCaptcha();
$("#captcha-code").focus().select();
} else {
IsAllowed = true;
$("#captcha-code")
.val("")
.attr("place-holder", "Enter Captcha - Case Sensitive");
CreateCaptcha();
$("#captcha-error").fadeOut(100);
$("#success-message")
.fadeIn(500)
.css("display", "block")
.delay(5000)
.fadeOut(250);
}
}
}
function Submit() {
if (IsAllowed === false) {
alert("Invalid captcha");
} else {
document.getElementsByClassName("btnSubmit").style.visibility = "visible";
}
}
kalo kalian ingin liahat pelengkapan nya dan jadi nya langsung pencet ling ini untuk download forder :https://drive.google.com/drive/folders/1I6iRiygsvjFLowGXGH_GxNq3bhPLc99X?usp=drive_link
Comments