Skip to content

Commit 77e9628

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#293 from Kumar-Ankit56/Kumar-Ankit56-patch-2
Qr_code_generator
2 parents 4f7c1aa + aba177f commit 77e9628

File tree

4 files changed

+181
-0
lines changed

4 files changed

+181
-0
lines changed

‎Qr_code_generator/Readme.md

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
### Prerequisites
2+
3+
- [X] I am a GSSoC-22 Participant
4+
- [X] I checked to make sure that this issue has not already been filed
5+
6+
### Description
7+
8+
### The idea behind this project :
9+
Like nowadays we often use QR code scanners example can be taken as digital payment that we are doing in the bulk
10+
11+
### How does it work
12+
Just on the base of random thinking, I decided can't make a QR code generator. For this project, you just need to enter your name or any URL and click generate button you will be able to generate the QR of the respective URL and name.
13+
14+
for more details please refer to the attached images.
15+
16+
17+
![Screenshot (170)](https://user-images.githubusercontent.com/73521123/166518588-904aad1e-f48f-4491-99eb-c8e8cfa074c1.png)
18+
![Screenshot (171)](https://user-images.githubusercontent.com/73521123/166518615-c708984e-f32a-4a6a-9a1c-2d8a7e3f5ef5.png)
19+
20+
21+
22+
23+
### Tech Stack
24+
25+
Web Development (HTML,CSS,JS)
26+

‎Qr_code_generator/index.html

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Qr Code generator</title>
8+
<link rel="stylesheet" href="./style.css">
9+
</head>
10+
<body>
11+
<div class="wrapper">
12+
<header>
13+
<h1>Qr Generator</h1>
14+
<p>Paste a url or enter text to create a Qr code</p>
15+
</header>
16+
<div class="form">
17+
<input type="text" spellcheck="false" placeholder="Enter text and url">
18+
<button>Genertor Qr Code</button>
19+
</div>
20+
<div class="qr-code">
21+
<img src="" alt="qr-code">
22+
</div>
23+
</div>
24+
<script src="./script.js"></script>
25+
</body>
26+
</html>

‎Qr_code_generator/script.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const wrapper = document.querySelector(".wrapper"),
2+
qrInput = wrapper.querySelector(".form input"),
3+
generateBtn = wrapper.querySelector(".form button"),
4+
qrImg = wrapper.querySelector(".qr-code img");
5+
let preValue;
6+
7+
generateBtn.addEventListener("click", () => {
8+
let qrValue = qrInput.value.trim();
9+
if(!qrValue || preValue === qrValue) return;
10+
preValue = qrValue;
11+
generateBtn.innerText = "Generating QR Code...";
12+
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
13+
qrImg.addEventListener("load", () => {
14+
wrapper.classList.add("active");
15+
generateBtn.innerText = "Generate QR Code";
16+
});
17+
});
18+
19+
qrInput.addEventListener("keyup", () => {
20+
if(!qrInput.value.trim()) {
21+
wrapper.classList.remove("active");
22+
preValue = "";
23+
}
24+
});

‎Qr_code_generator/style.css

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
font-family: sans-serif;
6+
}
7+
8+
body{
9+
display: flex;
10+
padding: 0 10px;
11+
min-height: 100vh;
12+
align-items: center;
13+
background: #090221;
14+
justify-content: center;
15+
}
16+
17+
.wrapper{
18+
height: 265px;
19+
max-width: 410px;
20+
background: #fff;
21+
border-radius: 7px;
22+
padding: 20px 25px 0;
23+
transition: height 0.2s ease;
24+
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
25+
}
26+
27+
.wrapper.active{
28+
height: 530px;
29+
}
30+
header h1{
31+
font-size: 21px;
32+
font-weight: 500;
33+
text-align: center;
34+
}
35+
header p{
36+
margin-top: 5px;
37+
color: #575757;
38+
font-size: 16px;
39+
}
40+
.wrapper .form{
41+
margin: 20px 0 25px;
42+
}
43+
.form :where(input,button){
44+
width: 100%;
45+
height: 55px;
46+
border: none;
47+
outline: none;
48+
border-radius: 5px;
49+
transition: 0.1s ease;
50+
}
51+
.form input{
52+
font-size: 18px;
53+
padding: 0 17px;
54+
border: 1px solid #999;
55+
}
56+
.form input:focus{
57+
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
58+
}
59+
.form input::placeholder{
60+
color: #999;
61+
}
62+
.form button{
63+
color: #fff;
64+
cursor: pointer;
65+
margin-top: 20px;
66+
font-size: 15px;
67+
background: #090221;
68+
border-radius: 5px;
69+
}
70+
.qr-code{
71+
opacity: 0;
72+
display: flex;
73+
padding: 33px 0;
74+
border-radius: 5px;
75+
align-items: center;
76+
pointer-events: none;
77+
justify-content: center;
78+
border: 1px solid #ccc;
79+
}
80+
.wrapper.active .qr-code{
81+
opacity: 1;
82+
pointer-events: auto;
83+
transition: opacity 0.5s 0.05s ease;
84+
}
85+
.qr-code img{
86+
width: 170px;
87+
}
88+
@media screen and (max-width:430px) {
89+
.wrapper{
90+
height: 255px;
91+
padding: 16px 20px;
92+
}
93+
.wrapper.active{
94+
height: 510px;
95+
}
96+
header p{
97+
color: #696969;
98+
}
99+
.form:where(input,button){
100+
height: 52px;
101+
}
102+
.qr-code img{
103+
width: 160px;
104+
}
105+
}

0 commit comments

Comments
 (0)