Skip to content

Commit d2fb017

Browse files
HuXn-WebDevHuXn-WebDev
committed
Random Captcha Project Using HTML, CSS and JAVASCRIPT
1 parent 66a187a commit d2fb017

File tree

3 files changed

+261
-0
lines changed

3 files changed

+261
-0
lines changed

‎70. Captcha Project/app.js‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
let captcha = document.querySelector(".captcha");
2+
let reloadBtn = document.querySelector(".reload-btn");
3+
let inputField = document.querySelector("input");
4+
let checkBtn = document.querySelector(".check-btn");
5+
let statusTxt = document.querySelector(".status-text");
6+
7+
let allCharacters = [
8+
"A",
9+
"B",
10+
"C",
11+
"D",
12+
"E",
13+
"F",
14+
"G",
15+
"H",
16+
"I",
17+
"J",
18+
"K",
19+
"L",
20+
"M",
21+
"N",
22+
"O",
23+
"P",
24+
"Q",
25+
"R",
26+
"S",
27+
"T",
28+
"U",
29+
"V",
30+
"W",
31+
"X",
32+
"Y",
33+
"Z",
34+
"a",
35+
"b",
36+
"c",
37+
"d",
38+
"e",
39+
"f",
40+
"g",
41+
"h",
42+
"i",
43+
"j",
44+
"k",
45+
"l",
46+
"m",
47+
"n",
48+
"o",
49+
"p",
50+
"q",
51+
"r",
52+
"s",
53+
"t",
54+
"u",
55+
"v",
56+
"w",
57+
"x",
58+
"y",
59+
"z",
60+
0,
61+
1,
62+
2,
63+
3,
64+
4,
65+
5,
66+
6,
67+
7,
68+
8,
69+
9,
70+
];
71+
72+
checkBtn.addEventListener("click", (e) => {
73+
e.preventDefault();
74+
statusTxt.style.display = "block";
75+
let inputVal = inputField.value.split("").join("");
76+
if (inputVal == captcha.innerText) {
77+
statusTxt.style.color = "#4db2ec";
78+
statusTxt.innerText = "Nice, Captcha Matched";
79+
setTimeout(() => {
80+
statusTxt.style.display = "";
81+
inputField.value = "";
82+
captcha.innerText = "";
83+
getCaptcha();
84+
}, 4000);
85+
} else {
86+
statusTxt.style.color = "#ff0000";
87+
statusTxt.innerText = "Captcha not matched. Please Try Again Later";
88+
}
89+
});
90+
91+
function getCaptcha() {
92+
for (let i = 0; i < 6; i++) {
93+
let randomChar =
94+
allCharacters[Math.floor(Math.random() * allCharacters.length)];
95+
captcha.innerText += `${randomChar}`;
96+
}
97+
}
98+
99+
reloadBtn.addEventListener("click", () => {
100+
captcha.innerHTML = "";
101+
getCaptcha();
102+
});

‎70. Captcha Project/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Captcha Project</title>
7+
<link
8+
rel="stylesheet"
9+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
10+
integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
11+
crossorigin="anonymous"
12+
referrerpolicy="no-referrer"
13+
/>
14+
<link rel="stylesheet" href="style.css" />
15+
</head>
16+
<body>
17+
<div class="wrapper">
18+
<h1>Random Captcha</h1>
19+
<div class="captcha-area">
20+
<div class="captcha-container">
21+
<span class="captcha"></span>
22+
</div>
23+
<button class="reload-btn">
24+
<i class="fa fa-redo"></i>
25+
</button>
26+
</div>
27+
<form action="" class="input-area">
28+
<input type="text" placeholder="Enter Captcha" required />
29+
<button class="check-btn">Check</button>
30+
</form>
31+
<div class="status-text"></div>
32+
</div>
33+
34+
<script src="app.js"></script>
35+
</body>
36+
</html>

‎70. Captcha Project/style.css‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
font-family: sans-serif;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
display: flex;
10+
justify-content: center;
11+
align-items: center;
12+
min-height: 100vh;
13+
}
14+
15+
.wrapper {
16+
max-width: 80%;
17+
background: #c81a54;
18+
padding: 7rem 8rem;
19+
}
20+
21+
.wrapper h1 {
22+
color: #fff;
23+
font-size: 33px;
24+
font-weight: 500;
25+
text-align: center;
26+
}
27+
28+
.wrapper .captcha-area {
29+
display: flex;
30+
align-items: center;
31+
justify-content: center;
32+
height: 65px;
33+
margin: 30px 0 20px;
34+
}
35+
36+
.captcha-area .captcha-container {
37+
height: 100%;
38+
width: 350px;
39+
user-select: none;
40+
background: #000;
41+
position: relative;
42+
border-radius: 5px;
43+
}
44+
45+
.captcha-container .captcha {
46+
position: absolute;
47+
left: 60%;
48+
top: 50%;
49+
width: 100%;
50+
color: #fff;
51+
font-size: 35px;
52+
letter-spacing: 10px;
53+
transform: translate(-50%, -50%);
54+
text-shadow: 0 0 2px #b1b1b1;
55+
font-family: sans-serif;
56+
}
57+
58+
.wrapper button {
59+
border: none;
60+
outline: none;
61+
color: #041897;
62+
background-color: #fff;
63+
cursor: pointer;
64+
}
65+
66+
.captcha-area .reload-btn {
67+
border-radius: 5px;
68+
width: 75px;
69+
height: 100%;
70+
font-size: 23px;
71+
margin-left: 20px;
72+
}
73+
74+
.captcha-area i {
75+
transition: transform 0.3s ease;
76+
}
77+
78+
.input-area .reload-btn:hover i {
79+
transform: rotate(15deg);
80+
}
81+
82+
.wrapper .input-area {
83+
height: 60px;
84+
width: 100%;
85+
position: relative;
86+
}
87+
88+
.input-area input {
89+
height: 100%;
90+
width: 100%;
91+
outline: none;
92+
font-size: 20px;
93+
padding-left: 20px;
94+
border-radius: 5px;
95+
border: 1px solid #bfbfbf;
96+
}
97+
98+
.input-area .check-btn {
99+
position: absolute;
100+
right: 7px;
101+
top: 50%;
102+
font-size: 17px;
103+
height: 45px;
104+
padding: 0 20px;
105+
opacity: 0;
106+
pointer-events: none;
107+
background: #041897;
108+
color: #fff;
109+
transform: translateY(-50%);
110+
}
111+
112+
.input-area input:valid + .check-btn {
113+
opacity: 1;
114+
pointer-events: auto;
115+
}
116+
117+
.wrapper .status-text {
118+
display: none;
119+
font-size: 18px;
120+
color: #ff0000;
121+
text-align: center;
122+
margin: 20px 0 -5px 0;
123+
}

0 commit comments

Comments
 (0)