Skip to content

Commit 5c4e38a

Browse files
PrajapatiRoshanPrajapatiRoshan
PrajapatiRoshan
authored and
PrajapatiRoshan
committed
QA code generator
1 parent 0bc4f7d commit 5c4e38a

File tree

3 files changed

+130
-0
lines changed

3 files changed

+130
-0
lines changed

‎QRCodeGenerator/index.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="stylesheet" href="style.css" />
7+
<script defer src="script.js"></script>
8+
<title>QA Code generator</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<p>Enter your text or URL</p>
13+
<input type="text" placeholder="Text or URL" />
14+
<div id="imgBox">
15+
<img src="" alt="" id="qaImage" />
16+
</div>
17+
<button onclick="GenerateQR()">Generate QA Code</button>
18+
</div>
19+
</body>
20+
</html>

‎QRCodeGenerator/script.js‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
const imgBox = document.getElementById('imgBox');
2+
const qrImg = document.getElementById('qaImage');
3+
const ipText = document.getElementsByTagName('input')[0];
4+
5+
const GenerateQR = () => {
6+
if (ipText.value) {
7+
qrImg.src =
8+
'https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=' + ipText.value;
9+
imgBox.classList.add('show-img');
10+
} else {
11+
imgBox.classList.remove('show-img');
12+
ipText.classList.add('error');
13+
setTimeout(() => {
14+
ipText.classList.remove('error');
15+
}, 1000);
16+
}
17+
};

‎QRCodeGenerator/style.css‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
font-family: 'Poppins', sans-serif;
5+
box-sizing: border-box;
6+
}
7+
8+
body {
9+
background: #262a2f;
10+
}
11+
12+
.container {
13+
width: 400px;
14+
padding: 25px 35px;
15+
position: absolute;
16+
top: 50%;
17+
left: 50%;
18+
transform: translate(-50%, -50%);
19+
background: #fff;
20+
border-radius: 10px;
21+
}
22+
23+
.container p {
24+
font-weight: 600;
25+
font-size: 22px;
26+
margin-bottom: 8px;
27+
}
28+
29+
.container input {
30+
width: 100%;
31+
height: 50px;
32+
border: 1px solid #494eea;
33+
outline: 0;
34+
padding: 10px;
35+
margin: 10px 0 20px;
36+
border-radius: 10px;
37+
font-size: 18px;
38+
}
39+
40+
.container button {
41+
width: 100%;
42+
height: 50px;
43+
background: #494eea;
44+
color: white;
45+
outline: 0;
46+
border: 0;
47+
border-radius: 10px;
48+
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
49+
margin: 10px 0;
50+
cursor: pointer;
51+
font-size: 1.4rem;
52+
font-weight: 500;
53+
}
54+
55+
#imgBox {
56+
width: 200px;
57+
overflow: hidden;
58+
border-radius: 5px;
59+
max-height: 0;
60+
transition: max-height 1s;
61+
}
62+
#imgBox img {
63+
width: 100%;
64+
padding: 10px;
65+
}
66+
67+
#imgBox.show-img {
68+
max-height: 200px;
69+
margin: 10px auto;
70+
border: 1px solid #1d1d1d;
71+
}
72+
73+
.error {
74+
animation: shake 0.1s linear 10;
75+
}
76+
77+
@keyframes shake {
78+
0% {
79+
transform: translateX(0);
80+
}
81+
25% {
82+
transform: translateX(-2px);
83+
}
84+
50% {
85+
transform: translateX(0);
86+
}
87+
75% {
88+
transform: translateX(2px);
89+
}
90+
100% {
91+
transform: translateX(0);
92+
}
93+
}

0 commit comments

Comments
 (0)