Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d2fb017

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /