Skip to content

Commit 74e652f

Browse files
AsmrProg-YTAsmrProg-YT
committed
Adding Day#67
1 parent af098ff commit 74e652f

File tree

7 files changed

+213
-1
lines changed

7 files changed

+213
-1
lines changed

‎Day #67 - Capthca App/README.md

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Day #67
2+
3+
### Captcha App
4+
In this tutorial ([Open in YouTube](https://youtu.be/KPR-s3JIh1Q)), we delve into the world of captcha using JavaScript. This video is a must-watch for anyone looking to enhance their web development skills, especially in the area of captcha codes❗️
5+
6+
### 🌟 What You'll Learn:
7+
- Understanding Captcha: Learn how captcha codes work!
8+
- How To Add Noise To Captcha
9+
- Working With Canvas
10+
11+
# Screenshot
12+
Here we have project screenshot :
13+
14+
![screenshot](screenshot.jpg)

‎Day #67 - Capthca App/bg.png

2.21 MB
Loading

‎Day #67 - Capthca App/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<link rel="stylesheet" href="style.css">
8+
<title>Day #67 - Captcha App | AsmrProg</title>
9+
</head>
10+
11+
<body>
12+
13+
<div id="captcha-container">
14+
<img src="bg.png">
15+
<div class="captcha">
16+
<canvas id="captcha" width="200" height="40"></canvas>
17+
<button id="reload-captcha">Reload</button>
18+
</div>
19+
<div class="user">
20+
<input type="text" id="captcha-input" placeholder="Enter CAPTCHA">
21+
<button id="check-captcha">Check</button>
22+
</div>
23+
<p id="captcha-status">Status : IDLE</p>
24+
</div>
25+
26+
<script src="script.js"></script>
27+
</body>
28+
29+
</html>

‎Day #67 - Capthca App/screenshot.jpg

293 KB
Loading

‎Day #67 - Capthca App/script.js

+86
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
document.addEventListener('DOMContentLoaded', function () {
2+
var canvas = document.getElementById('captcha');
3+
var ctx = canvas.getContext('2d');
4+
var captchaText = generateCaptchaText(6);
5+
const captchaStatus = document.getElementById('captcha-status');
6+
drawCaptcha(captchaText);
7+
8+
// Function to handle CAPTCHA verification
9+
function verifyCaptcha() {
10+
var inputText = document.getElementById('captcha-input').value.toLowerCase();
11+
12+
if (inputText === captchaText.toLowerCase()) {
13+
captchaStatus.textContent = 'Captcha Correct!';
14+
captchaStatus.style.color = 'green';
15+
} else if (inputText.length < 6) {
16+
captchaStatus.textContent = 'Enter all characters!';
17+
captchaStatus.style.color = 'red';
18+
} else {
19+
captchaStatus.textContent = 'Captcha incorrect. Please try again!';
20+
captchaStatus.style.color = 'red';
21+
}
22+
setTimeout(() => {
23+
captchaStatus.textContent = 'Status : IDLE';
24+
captchaStatus.style.color = 'black';
25+
}, 3000);
26+
document.getElementById('captcha-input').value = '';
27+
captchaText = generateCaptchaText(6);
28+
drawCaptcha(captchaText);
29+
}
30+
31+
// Add event listener for check button
32+
document.getElementById('check-captcha').addEventListener('click', verifyCaptcha);
33+
34+
// Add event listener for reload button
35+
document.getElementById('reload-captcha').addEventListener('click', function () {
36+
captchaText = generateCaptchaText(6);
37+
drawCaptcha(captchaText);
38+
document.getElementById('captcha-input').value = '';
39+
captchaStatus.textContent = 'Status : IDLE';
40+
});
41+
42+
function generateCaptchaText(length) {
43+
let result = '';
44+
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
45+
const cahrsLength = chars.length;
46+
for (let i = 0; i < length; i++) {
47+
result += chars.charAt(Math.floor(Math.random() * cahrsLength));
48+
}
49+
return result;
50+
}
51+
52+
function drawCaptcha(text) {
53+
ctx.clearRect(0, 0, canvas.width, canvas.height);
54+
ctx.fillStyle = '#f3f3f3';
55+
ctx.fillRect(0, 0, canvas.width, canvas.height);
56+
addNoise(ctx);
57+
ctx.fillStyle = '#06108c';
58+
ctx.font = '24px Arial';
59+
60+
// Calculate the width of text and start position
61+
const textWidth = ctx.measureText(text).width;
62+
const startX = (canvas.width - textWidth) / 3;
63+
64+
// Adding rotation and distortion
65+
for (let i = 0; i < text.length; i++) {
66+
ctx.save();
67+
// Addjust startX for each char
68+
ctx.translate(startX + i * 20, 30);
69+
ctx.rotate((Math.random() - 0.5) * 0.4);
70+
ctx.fillText(text[i], 0, 0);
71+
ctx.restore();
72+
}
73+
}
74+
75+
function addNoise(ctx) {
76+
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
77+
const pixels = imageData.data;
78+
for (let i = 0; i < pixels.length; i += 1) {
79+
// Rnadom noise color
80+
let color = (Math.random() > 0.5) ? 255 : 0;
81+
pixels[i] = pixels[i + 1] = pixels[i + 2] = color;
82+
}
83+
ctx.putImageData(imageData, 0, 0);
84+
}
85+
86+
});

‎Day #67 - Capthca App/style.css

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');
2+
3+
*{
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: 'Roboto', sans-serif;
8+
}
9+
10+
body{
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
height: 100vh;
15+
background: #36d1dc;
16+
background: linear-gradient(to right, #5b86e5, #36d1dc);
17+
}
18+
19+
#captcha-container{
20+
display: flex;
21+
flex-direction: column;
22+
justify-content: center;
23+
background-color: #fff;
24+
padding: 40px 30px 30px;
25+
border-radius: 8px;
26+
box-shadow: 0 1em 2em rgba(0, 0, 0, 0.25);
27+
}
28+
29+
#captcha-container img{
30+
width: 100%;
31+
height: 200px;
32+
object-fit: cover;
33+
border-radius: 6px;
34+
margin-bottom: 20px;
35+
}
36+
37+
.captcha{
38+
display: flex;
39+
align-items: center;
40+
margin-bottom: 20px;
41+
justify-content: space-between;
42+
gap: 10px;
43+
width: 100%;
44+
}
45+
46+
.captcha button,
47+
.user button,
48+
.user input{
49+
padding: 12px;
50+
border: 1px solid #ddd;
51+
border-radius: 4px;
52+
width: 100%;
53+
}
54+
55+
canvas{
56+
border: none;
57+
background-color: #e8e8e8;
58+
border-radius: 4px;
59+
border: 2px solid #1939ba;
60+
border-radius: 6px;
61+
}
62+
63+
.user{
64+
width: 100%;
65+
}
66+
67+
.user input,
68+
.user button{
69+
margin-bottom: 14px;
70+
}
71+
72+
button{
73+
cursor: pointer;
74+
background-color: #1939ba;
75+
color: #fff;
76+
border: none;
77+
transition: all 0.3s ease;
78+
}
79+
80+
button:hover{
81+
background-color: #5b86e5;
82+
}

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -76,8 +76,9 @@ Here we have list of projects:
7676
64. Speech To Text
7777
65. Capture Screenshot
7878
66. Live Chart Generator
79+
67. Captcha App
7980

80-
## Where is rest 34 Projects
81+
## Where is rest 33 Projects
8182

8283
We create a project each 3 days with voting on our <a href="https://youtube.com/@AsmrProg" target="_blank">Youtube</a> channel.
8384
You can vote for upcoming projects on our channel **community** page :wink:

0 commit comments

Comments
 (0)