Skip to content

Commit 72b6587

Browse files
psykatsamantapsykatsamanta
authored
Add files via upload
1 parent c2b04ff commit 72b6587

File tree

4 files changed

+372
-0
lines changed

4 files changed

+372
-0
lines changed

‎QRCode/psykatsamanta/download.png

2.96 KB
Loading

‎QRCode/psykatsamanta/index.html

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
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="icon" type="image/png" href="download.png" />
7+
<link rel="stylesheet" type="text/css" href="style.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
11+
crossorigin="anonymous"
12+
/>
13+
<title>QR-Code-Reader-Generator</title>
14+
</head>
15+
<body>
16+
<div class="reader">
17+
<div id="container1">
18+
<form action="#">
19+
<input type="file" hidden />
20+
<img src="" alt="image not available" />
21+
<div class="upload">
22+
<i class="fa-solid fa-cloud-arrow-up"></i>
23+
<p>Upload Your QR Code Here</p>
24+
</div>
25+
</form>
26+
<div class="content">
27+
<textarea disabled></textarea>
28+
<div class="button">
29+
<button type="submit" id="reset">Clear</button>
30+
<button type="submit" id="copy">Copy Text</button>
31+
</div>
32+
</div>
33+
</div>
34+
</div>
35+
<div class="generator">
36+
<div id="container2">
37+
<p>Paste a URL or enter text here to create QR Code</p>
38+
<div class="form">
39+
<input type="text" placeholder="Enter Text Or URL Here" autofocus />
40+
<button id="generate">Generate QR Code</button>
41+
</div>
42+
<div class="qr-code">
43+
<img src="" alt="QR Code Not Available" />
44+
<button id="download">Download QR Code</button>
45+
</div>
46+
</div>
47+
</div>
48+
<script src="script.js"></script>
49+
</body>
50+
</html>

‎QRCode/psykatsamanta/script.js

+107
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,107 @@
1+
let container1 = document.getElementById("container1");
2+
let form = container1.querySelector("form");
3+
let fileInput = form.querySelector("input");
4+
let infoText = form.querySelector("p");
5+
let QRData = container1.querySelector("textarea");
6+
let QRImg = form.querySelector("img");
7+
let copyBtn = document.getElementById("copy");
8+
let resetBtn = document.getElementById("reset");
9+
10+
form.onclick = () => {
11+
fileInput.click();
12+
};
13+
14+
fileInput.onchange = (e) => {
15+
let file = e.target.files[0];
16+
if (!file) {
17+
return;
18+
}
19+
let formData = new FormData();
20+
formData.append("file", file);
21+
fetchRequest(formData, file);
22+
};
23+
24+
let fetchRequest = (formData, file) => {
25+
infoText.innerText = "QR Code is uploading ....";
26+
fetch("http://api.qrserver.com/v1/read-qr-code/", {
27+
method: "POST",
28+
body: formData,
29+
})
30+
.then((res) => res.json())
31+
.then((result) => {
32+
result = result[0].symbol[0].data;
33+
infoText.innerText = result
34+
? "Upload QR Code To Scan"
35+
: "Couldn't Scan QR Code";
36+
if (!result) {
37+
return;
38+
}
39+
QRData.innerText = result;
40+
QRImg.src = URL.createObjectURL(file);
41+
container1.classList.add("active");
42+
})
43+
.catch(() => {
44+
QRData.innerText = "Couldn't Scan The QR Code";
45+
});
46+
};
47+
48+
copyBtn.onclick = () => {
49+
let text = QRData.textContent;
50+
navigator.clipboard.writeText(text);
51+
copyBtn.style.background = "#2532a5";
52+
copyBtn.style.color = "#fff";
53+
setTimeout(() => {
54+
copyBtn.style.background = "#fff";
55+
copyBtn.style.color = "#3744bd";
56+
}, 100);
57+
};
58+
59+
resetBtn.onclick = () => {
60+
resetBtn.style.background = "#2532a5";
61+
resetBtn.style.color = "#fff";
62+
setTimeout(() => {
63+
resetBtn.style.background = "#fff";
64+
resetBtn.style.color = "#3744bd";
65+
}, 100);
66+
container1.classList.remove("active");
67+
};
68+
69+
let container2 = document.getElementById("container2");
70+
let QRText = container2.querySelector(".form input");
71+
let generateBtn = document.getElementById("generate");
72+
let qrImg = container2.querySelector(".qr-code img");
73+
let downloadBtn = document.getElementById("download");
74+
75+
generateBtn.onclick = () => {
76+
let QRValue = QRText.value;
77+
if (!QRValue) {
78+
return;
79+
}
80+
qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${QRValue}`;
81+
qrImg.onload = () => {
82+
container2.classList.add("activate");
83+
};
84+
};
85+
86+
downloadBtn.onclick = () => {
87+
let ImageURL = `https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${QRText.value}`;
88+
//Fetching the response as a blob
89+
fetch(ImageURL)
90+
.then((res) => res.blob())
91+
.then((file) => {
92+
//URL.createObjectURL() creates a url of passed object
93+
let tempURL = URL.createObjectURL(file);
94+
//Create a anchor element
95+
let aTag = document.createElement("a");
96+
//Set its url as the tempurl
97+
aTag.href = tempURL;
98+
//Set the name of the downloaded file as filename
99+
aTag.download = file.type;
100+
document.body.appendChild(aTag);
101+
// console.log(file);
102+
// console.log(aTag.download);
103+
//Clicking the aTag so that the file download
104+
aTag.click();
105+
aTag.remove();
106+
});
107+
};

‎QRCode/psykatsamanta/style.css

+215
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,215 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Dancing+Script&family=Poppins&display=swap");
2+
3+
* {
4+
margin: 0;
5+
padding: 0;
6+
box-sizing: border-box;
7+
font-family: "Poppins", sans-serif;
8+
}
9+
10+
body {
11+
position: relative;
12+
height: 100vh;
13+
background-color: #e3f2fd;
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
19+
.reader,
20+
.generator {
21+
position: relative;
22+
width: 50vw;
23+
}
24+
25+
#container1 {
26+
position: absolute;
27+
height: 230px;
28+
width: 400px;
29+
background-color: #8675e7;
30+
top: 50%;
31+
left: 50%;
32+
transform: translate(-50%, -50%);
33+
border-radius: 7px;
34+
box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.3);
35+
padding: 15px;
36+
transition: height 0.2s ease;
37+
}
38+
39+
#container1.active {
40+
height: 450px;
41+
}
42+
43+
form {
44+
position: relative;
45+
height: 200px;
46+
background-color: #fff;
47+
border-radius: 7px;
48+
display: flex;
49+
justify-content: center;
50+
align-items: center;
51+
text-align: center;
52+
cursor: pointer;
53+
}
54+
55+
#container1.active form {
56+
pointer-events: none;
57+
}
58+
59+
form img {
60+
position: relative;
61+
height: 180px;
62+
width: 180px;
63+
display: none;
64+
}
65+
66+
#container1.active form img {
67+
display: block;
68+
}
69+
70+
#container1.active form .upload {
71+
position: relative;
72+
display: none;
73+
}
74+
75+
form .upload i {
76+
font-size: 3rem;
77+
color: #878dc7;
78+
}
79+
80+
form .upload p {
81+
font-size: 18px;
82+
margin-top: 10px;
83+
color: #878dc7;
84+
}
85+
86+
.content {
87+
margin-top: 15px;
88+
/* background-color: red; */
89+
height: 200px;
90+
border-radius: 5px;
91+
display: flex;
92+
flex-direction: column;
93+
justify-content: space-between;
94+
opacity: 0;
95+
user-select: none;
96+
}
97+
98+
#container1.active .content {
99+
opacity: 1;
100+
pointer-events: auto;
101+
transition: opacity 0.5s 0.05s ease;
102+
}
103+
104+
.content textarea {
105+
width: 100%;
106+
height: 70%;
107+
resize: none;
108+
border-radius: 5px;
109+
background-color: transparent;
110+
padding: 7px;
111+
font-size: 15px;
112+
color: #fff;
113+
border: 1px solid #fff;
114+
}
115+
116+
.content .button {
117+
display: flex;
118+
justify-content: space-between;
119+
align-items: center;
120+
}
121+
122+
.content .button button {
123+
padding: 10px;
124+
width: calc(100% / 2 - 15px);
125+
outline: none;
126+
border: none;
127+
background-color: #fff;
128+
font-size: 16px;
129+
color: #3744bd;
130+
cursor: pointer;
131+
}
132+
133+
#container2 {
134+
position: absolute;
135+
width: 350px;
136+
height: 190px;
137+
top: 50%;
138+
left: 50%;
139+
transform: translate(-50%, -50%);
140+
background-color: #fff;
141+
padding: 15px;
142+
border-radius: 7px;
143+
box-shadow: 10px 10px 10px -5px rgba(0, 0, 0, 0.3);
144+
transition: height 0.2s ease;
145+
}
146+
147+
#container2.activate {
148+
height: 480px;
149+
}
150+
151+
#container2 p {
152+
position: relative;
153+
font-size: 16px;
154+
font-weight: bold;
155+
}
156+
157+
#container2 .form {
158+
margin: 10px 0px;
159+
display: flex;
160+
justify-content: center;
161+
align-items: center;
162+
flex-direction: column;
163+
}
164+
165+
#container2 .form input {
166+
width: 100%;
167+
padding: 8px;
168+
font-size: 16px;
169+
outline: none;
170+
border: 1px solid #000;
171+
border-radius: 5px;
172+
margin-bottom: 5px;
173+
background-color: transparent;
174+
}
175+
176+
#container2 .form button,
177+
#container2 .qr-code button {
178+
width: 100%;
179+
margin: 10px 0px;
180+
height: 40px;
181+
font-size: 16px;
182+
color: #fff;
183+
background: #4754c5;
184+
outline: none;
185+
border: none;
186+
cursor: pointer;
187+
border-radius: 5px;
188+
}
189+
190+
#container2 .qr-code button {
191+
margin-top: 25px;
192+
}
193+
194+
#container2 .qr-code img {
195+
height: 200px;
196+
width: 200px;
197+
}
198+
199+
#container2 .qr-code {
200+
position: relative;
201+
/* background-color: #fff; */
202+
display: flex;
203+
justify-content: center;
204+
align-items: center;
205+
opacity: 0;
206+
user-select: none;
207+
padding: 10px;
208+
flex-direction: column;
209+
}
210+
211+
#container2.activate .qr-code {
212+
pointer-events: auto;
213+
opacity: 1;
214+
transition: opacity 0.5s 0.05s ease;
215+
}

0 commit comments

Comments
 (0)