captcha generator files added(issue-389) · nirUpma52/30DaysOfJavaScript@4b05683 · GitHub
Skip to content

Commit 4b05683

Browse files
piyusha2001piyusha2001
committed
captcha generator files added(issue-389)
1 parent b3ba6d8 commit 4b05683

7 files changed

Lines changed: 274 additions & 1 deletion

File tree

‎30DaysOfJavaScript/assets/97.png‎

77.1 KB
Loading

‎97-Captcha Generator/assets/bg6.png‎

41.9 KB
Loading

‎97-Captcha Generator/assets/favicon.ico‎

15 KB
Binary file not shown.

‎97-Captcha Generator/index.html‎

Lines changed: 45 additions & 0 deletions

‎97-Captcha Generator/script.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
const captcha = document.querySelector('.captcha'),
2+
reloadbtn = document.querySelector('.reload'),
3+
inputText = document.querySelector('.input-text input'),
4+
verifyBtn = document.querySelector('.verify'),
5+
responseTxt = document.querySelector('.result');
6+
7+
let characters = [
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+
function getCaptcha() {
72+
for (let i = 0; i < 6; i++) {
73+
let randomCharacter =
74+
characters[Math.floor(Math.random() * characters.length)];
75+
console.log(randomCharacter);
76+
captcha.innerText += ` ${randomCharacter}`;
77+
//passing 6 random characters
78+
}
79+
}
80+
getCaptcha();
81+
82+
reloadbtn.addEventListener('click', () => {
83+
removeInput();
84+
getCaptcha();
85+
});
86+
87+
verifyBtn.addEventListener('click', (e) => {
88+
e.preventDefault();
89+
responseTxt.style.display = 'block';
90+
91+
let inputVal = inputText.value.split('').join(' ');
92+
if (inputVal == captcha.innerText) {
93+
responseTxt.style.color = '#85C88A';
94+
responseTxt.innerText = "Nice! You don't appear to be a robot.";
95+
setTimeout(() => {
96+
removeInput();
97+
getCaptcha();
98+
}, 2000);
99+
} else {
100+
responseTxt.style.color = '#ff0000';
101+
responseTxt.innerText = 'Captcha not matched. Please try again!';
102+
}
103+
});
104+
105+
function removeInput() {
106+
inputText.value = '';
107+
captcha.innerText = '';
108+
responseTxt.style.display = 'none';
109+
}

‎97-Captcha Generator/style.css‎

Lines changed: 113 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: 'Poppins', sans-serif;
6+
}
7+
8+
body {
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
min-height: 100vh;
13+
background: #19172e;
14+
}
15+
.cover {
16+
max-width: 485px;
17+
width: 100%;
18+
background: #fff;
19+
padding: 22px 30px 40px;
20+
border-radius: 10px;
21+
}
22+
23+
.cover header {
24+
color: #e45826;
25+
font-size: 30px;
26+
font-weight: bold;
27+
text-align: center;
28+
}
29+
.cover .captcha-box {
30+
display: flex;
31+
height: 65px;
32+
margin: 30px 0 20px;
33+
align-items: center;
34+
justify-content: space-between;
35+
}
36+
.captcha-box .captcha-img {
37+
height: 100%;
38+
width: 345px;
39+
user-select: none;
40+
background: #000;
41+
border-radius: 5px;
42+
position: relative;
43+
}
44+
.captcha-img img {
45+
width: 100%;
46+
height: 100%;
47+
object-fit: cover;
48+
border-radius: 5px;
49+
opacity: 0.95;
50+
}
51+
.captcha-img .captcha {
52+
position: absolute;
53+
left: 50%;
54+
top: 50%;
55+
width: 100%;
56+
color: #ececec;
57+
font-size: 35px;
58+
font-style: italic;
59+
text-align: center;
60+
letter-spacing: 10px;
61+
transform: translate(-50%, -50%);
62+
}
63+
.cover button {
64+
outline: none;
65+
border: none;
66+
color: #fff;
67+
cursor: pointer;
68+
background: #e45826;
69+
border-radius: 5px;
70+
}
71+
72+
.captcha-box .reload {
73+
width: 75px;
74+
height: 100%;
75+
font-size: 25px;
76+
}
77+
78+
.cover .input-text {
79+
height: 60px;
80+
width: 100%;
81+
position: relative;
82+
}
83+
.input-text input {
84+
width: 100%;
85+
height: 100%;
86+
outline: none;
87+
padding-left: 20px;
88+
font-size: 20px;
89+
border-radius: 5px;
90+
border: 1px solid #bfbfbf;
91+
}
92+
.input-text input {
93+
padding-left: 19px;
94+
border: 2px solid #e45826;
95+
}
96+
97+
.input-text .verify {
98+
position: absolute;
99+
right: 7px;
100+
top: 50%;
101+
font-size: 17px;
102+
height: 45px;
103+
padding: 0 20px;
104+
105+
transform: translateY(-50%);
106+
}
107+
108+
.cover .result {
109+
display: none;
110+
font-size: 18px;
111+
text-align: center;
112+
margin: 20px 0 -5px;
113+
}

‎index.html‎

Lines changed: 7 additions & 1 deletion

0 commit comments

Comments
 (0)