8000 Added CANVAS for CAPTCHA text · makeuseofcode/CAPTCHA-Validator@c8c7fa8 · GitHub
[go: up one dir, main page]
Skip to content
10000

Commit c8c7fa8

Browse files
YuvrajchandraYuvrajchandra
committed
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)
0