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 15ad94a

Browse files
Added HTML, CSS and JavaScript files
0 parents commit 15ad94a

File tree

3 files changed

+143
-0
lines changed

3 files changed

+143
-0
lines changed

‎index.html

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<link rel="stylesheet" type="text/css" href="styles.css">
6+
</head>
7+
8+
<body>
9+
<div class="center">
10+
<h1 id="captchaHeading">Captcha Validator Using HTML, CSS and JavaScript</h1>
11+
<div id="captchaBackground">
12+
<span id="captcha">captcha text</span>
13+
<input id="textBox" type="text" name="text">
14+
<div id="buttons">
15+
<input id="submitButton" type="submit">
16+
<button id="refreshButton" type="submit">Refresh</button>
17+
</div>
18+
<span id="output"></span>
19+
</div>
20+
</div>
21+
<script src="script.js"></script>
22+
</body>
23+
24+
</html>

‎script.js

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
// document.querySelector() is used to select an element from the document using its ID
2+
let captchaText = document.querySelector('#captcha');
3+
let userText = document.querySelector('#textBox');
4+
let submitButton = document.querySelector('#submitButton');
5+
let output = document.querySelector('#output');
6+
let refreshButton = document.querySelector('#refreshButton');
7+
8+
9+
// alphaNums contains the characters with which you want to create the CAPTCHA
10+
let alphaNums = ['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'];
11+
let emptyArr = [];
12+
13+
// This loop generates a random string of 7 characters using alphaNums
14+
// Further this string is displayed as a CAPTCHA
15+
for (let i = 1; i <= 7; i++) {
16+
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
17+
}
18+
captchaText.innerHTML = emptyArr.join('');
19+
20+
21+
// This event listener is stimulated whenever the user press the "Enter" button
22+
// "Correct!" or "Incorrect, please try again" message is
23+
// displayed after validating the input text with CAPTCHA
24+
userText.addEventListener('keyup', function(e) {
25+
// Key Code Value of "Enter" Button is 13
26+
if (e.keyCode === 13) {
27+
if (userText.value === captchaText.innerHTML) {
28+
output.classList.add("correctCaptcha");
29+
output.innerHTML = "Correct!";
30+
} else {
31+
output.classList.add("incorrectCaptcha");
32+
output.innerHTML = "Incorrect, please try again";
33+
}
34+
}
35+
});
36+
37+
// This event listener is stimulated whenever the user clicks the "Submit" button
38+
// "Correct!" or "Incorrect, please try again" message is
39+
// displayed after validating the input text with CAPTCHA
40+
submitButton.addEventListener('click', function() {
41+
if (userText.value === captchaText.innerHTML) {
42+
output.classList.add("correctCaptcha");
43+
output.innerHTML = "Correct!";
44+
} else {
45+
output.classList.add("incorrectCaptcha");
46+
output.innerHTML = "Incorrect, please try again";
47+
}
48+
});
49+
50+
// This event listener is stimulated whenever the user press the "Refresh" button
51+
// A new random CAPTCHA is generated and displayed after the user clicks the "Refresh" button
52+
refreshButton.addEventListener('click', function() {
53+
userText.value = "";
54+
let refreshArr = [];
55+
for (let j = 1; j <= 7; j++) {
56+
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
57+
}
58+
captchaText.innerHTML = refreshArr.join('');
59+
output.innerHTML = "";
60+
});

‎styles.css

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
2+
3+
body {
4+
background-color: #232331;
5+
font-family: 'Roboto', sans-serif;
6+
}
7+
8+
#captchaBackground {
9+
height: 200px;
10+
width: 250px;
11+
background-color: #2d3748;
12+
display: flex;
13+
align-items: center;
14+
justify-content: center;
15+
flex-direction: column;
16+
}
17+
18+
#captchaHeading {
19+
color: white;
20+
}
21+
22+
#captcha {
23+
margin-bottom: 1em;
24+
font-size: 30px;
25+
letter-spacing: 3px;
26+
color: #08e5ff;
27+
}
28+
29+
.center {
30+
display: flex;
31+
flex-direction: column;
32+
align-items: center;
33+
}
34+
35+
#submitButton {
36+
margin-top: 2em;
37+
margin-bottom: 2em;
38+
background-color: #08e5ff;
39+
border: 0px;
40+
font-weight: bold;
41+
}
42+
43+
#refreshButton {
44+
background-color: #08e5ff;
45+
border: 0px;
46+
font-weight: bold;
47+
}
48+
49+
#textBox {
50+
height: 25px;
51+
}
52+
53+
.incorrectCaptcha {
54+
color: #FF0000;
55+
}
56+
57+
.correctCaptcha {
58+
color: #7FFF00;
59+
}

0 commit comments

Comments
(0)

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