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 c8c7fa8

Browse files
Added CANVAS for CAPTCHA text
1 parent 15ad94a commit c8c7fa8

File tree

3 files changed

+23
-8
lines changed

3 files changed

+23
-8
lines changed

‎index.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
<div class="center">
1010
<h1 id="captchaHeading">Captcha Validator Using HTML, CSS and JavaScript</h1>
1111
<div id="captchaBackground">
12-
<span id="captcha">captcha text</span>
12+
<canvas id="captcha">captcha text</canvas>
1313
<input id="textBox" type="text" name="text">
1414
<div id="buttons">
1515
<input id="submitButton" type="submit">

‎script.js

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1+
12
// document.querySelector() is used to select an element from the document using its ID
23
let captchaText = document.querySelector('#captcha');
4+
var ctx = captchaText.getContext("2d");
5+
ctx.font = "30px Roboto";
6+
ctx.fillStyle = "#08e5ff";
7+
8+
39
let userText = document.querySelector('#textBox');
410
let submitButton = document.querySelector('#submitButton');
511
let output = document.querySelector('#output');
@@ -15,7 +21,8 @@ let emptyArr = [];
1521
for (let i = 1; i <= 7; i++) {
1622
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
1723
}
18-
captchaText.innerHTML = emptyArr.join('');
24+
var c = emptyArr.join('');
25+
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);
1926

2027

2128
// This event listener is stimulated whenever the user press the "Enter" button
@@ -24,7 +31,7 @@ captchaText.innerHTML = emptyArr.join('');
2431
userText.addEventListener('keyup', function(e) {
2532
// Key Code Value of "Enter" Button is 13
2633
if (e.keyCode === 13) {
27-
if (userText.value === captchaText.innerHTML) {
34+
if (userText.value === c) {
2835
output.classList.add("correctCaptcha");
2936
output.innerHTML = "Correct!";
3037
} else {
@@ -38,7 +45,7 @@ userText.addEventListener('keyup', function(e) {
3845
// "Correct!" or "Incorrect, please try again" message is
3946
// displayed after validating the input text with CAPTCHA
4047
submitButton.addEventListener('click', function() {
41-
if (userText.value === captchaText.innerHTML) {
48+
if (userText.value === c) {
4249
output.classList.add("correctCaptcha");
4350
output.innerHTML = "Correct!";
4451
} else {
@@ -55,6 +62,8 @@ refreshButton.addEventListener('click', function() {
5562
for (let j = 1; j <= 7; j++) {
5663
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
5764
}
58-
captchaText.innerHTML = refreshArr.join('');
65+
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
66+
c = refreshArr.join('');
67+
ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);
5968
output.innerHTML = "";
6069
});

‎styles.css

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ body {
66
}
77

88
#captchaBackground {
9-
height: 200px;
9+
height: 220px;
1010
width: 250px;
1111
background-color: #2d3748;
1212
display: flex;
@@ -20,10 +20,16 @@ body {
2020
}
2121

2222
#captcha {
23-
margin-bottom: 1em;
23+
height: 80%;
24+
width: 80%;
2425
font-size: 30px;
2526
letter-spacing: 3px;
26-
color: #08e5ff;
27+
margin: auto;
28+
display: block;
29+
top: 0;
30+
bottom: 0;
31+
left: 0;
32+
right: 0;
2733
}
2834

2935
.center {

0 commit comments

Comments
(0)

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