Skip to content

Commit ae99895

Browse files
AsmrProg-YTAsmrProg-YT
committed
Adding Day AsmrProg-YT#20 
1 parent 674cfa6 commit ae99895

File tree

3 files changed

+231
-0
lines changed

3 files changed

+231
-0
lines changed

‎Day #20 - QR Code Reader/index.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
7+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
8+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css">
9+
<link rel="stylesheet" href="style.css">
10+
<title>Day #20 - QR Code Reader | AsmrProg</title>
11+
</head>
12+
13+
<body>
14+
15+
<div class="wrapper">
16+
<form action="#">
17+
<input type="file" hidden>
18+
<img src="#" alt="">
19+
<div class="content">
20+
<i class="fa-solid fa-cloud-arrow-up"></i>
21+
<p>Upload QR Code To Read</p>
22+
</div>
23+
</form>
24+
<div class="details">
25+
<textarea spellcheck="false" disabled></textarea>
26+
<div class="buttons">
27+
<button class="close">Close</button>
28+
<button class="copy">Copy Text</button>
29+
</div>
30+
</div>
31+
</div>
32+
33+
34+
<script src="index.js"></script>
35+
</body>
36+
37+
</html>

‎Day #20 - QR Code Reader/index.js‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
const wrapper = document.querySelector(".wrapper");
2+
const form = document.querySelector("form");
3+
const fileInp = document.querySelector("input");
4+
const infoText = document.querySelector("p");
5+
const closeBtn = document.querySelector(".close");
6+
const copyBtn = document.querySelector(".copy");
7+
8+
// Fecth Data From Api
9+
10+
function fetchRequest(file, formData) {
11+
infoText.innerText = "Scanning QR Code...";
12+
fetch("http://api.qrserver.com/v1/read-qr-code/", {
13+
method: 'POST', body: formData
14+
}).then(res => res.json()).then(result => {
15+
result = result[0].symbol[0].data;
16+
infoText.innerText = result ? "Upload QR Code To Scan" : "Couldn't Scan QR Code";
17+
if (!result) return;
18+
document.querySelector("textarea").innerText = result;
19+
form.querySelector("img").src = URL.createObjectURL(file);
20+
wrapper.classList.add("active");
21+
}).catch(() => {
22+
infoText.innerText = "Couldn't Scan QR Code...";
23+
});
24+
}
25+
26+
// Send QR Code File With Request To Api
27+
fileInp.addEventListener("change", async e => {
28+
let file = e.target.files[0];
29+
if (!file) return;
30+
let formData = new FormData();
31+
formData.append('file', file);
32+
fetchRequest(file, formData);
33+
});
34+
35+
// Copy Text To Clipboard
36+
copyBtn.addEventListener("click", () => {
37+
let text = document.querySelector("textarea").textContent;
38+
navigator.clipboard.writeText(text);
39+
});
40+
41+
// When user click on form do fileInp Evenetlistener function
42+
form.addEventListener("click", () => fileInp.click());
43+
44+
closeBtn.addEventListener("click", () => wrapper.classList.remove("active"));

‎Day #20 - QR Code Reader/style.css‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');
2+
3+
*{
4+
padding: 0;
5+
margin: 0;
6+
box-sizing: border-box;
7+
font-family: 'Poppins', sans-serif;
8+
}
9+
10+
body{
11+
display: flex;
12+
align-items: center;
13+
justify-content: center;
14+
min-height: 100vh;
15+
padding: 0 10px;
16+
background: #06283d;
17+
}
18+
19+
.wrapper{
20+
height: 270px;
21+
width: 420px;
22+
background-color: #334155;
23+
border-radius: 7px;
24+
padding: 30px 30px 35px;
25+
transition: all 0.2s ease;
26+
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
27+
}
28+
29+
.wrapper.active{
30+
height: 525px;
31+
}
32+
33+
.wrapper form{
34+
height: 210px;
35+
display: flex;
36+
cursor: pointer;
37+
user-select: none;
38+
text-align: center;
39+
border-radius: 7px;
40+
background: #fff;
41+
align-items: center;
42+
justify-content: center;
43+
transition: all 0.2s ease;
44+
}
45+
46+
.wrapper.active form{
47+
height: 225px;
48+
pointer-events: none;
49+
}
50+
51+
form img{
52+
display: none;
53+
max-width: 148px;
54+
}
55+
56+
.wrapper.active form img{
57+
display: block;
58+
}
59+
60+
.wrapper.active form .content{
61+
display: none;
62+
}
63+
64+
form .content i{
65+
color: #334155;
66+
font-size: 55px;
67+
}
68+
69+
form .content p{
70+
color: #334155;
71+
margin-top: 15px;
72+
font-size: 16px;
73+
}
74+
75+
.wrapper .details{
76+
opacity: 0;
77+
margin-top: 25px;
78+
pointer-events: none;
79+
}
80+
81+
.wrapper.active .details{
82+
opacity: 1;
83+
pointer-events: auto;
84+
transition: opacity 0.5s 0.05s ease;
85+
}
86+
87+
.details textarea{
88+
width: 100%;
89+
height: 128px;
90+
outline: none;
91+
resize: none;
92+
color: #fff;
93+
font-size: 18px;
94+
background: none;
95+
border-radius: 5px;
96+
padding: 10px 15px;
97+
border: 1px solid #fff;
98+
}
99+
100+
textarea::-webkit-scrollbar{
101+
width: 0px;
102+
}
103+
104+
textarea:hover::-webkit-scrollbar{
105+
width: 5px;
106+
}
107+
108+
textarea:hover::-webkit-scrollbar-track{
109+
background: none;
110+
}
111+
112+
textarea:hover::-webkit-scrollbar-thumb{
113+
background: #fff;
114+
border-radius: 8px;
115+
}
116+
117+
.details .buttons{
118+
display: flex;
119+
margin-top: 20px;
120+
align-items: center;
121+
justify-content: space-between;
122+
}
123+
124+
.buttons button{
125+
height: 55px;
126+
outline: none;
127+
border: none;
128+
font-weight: 500;
129+
font-size: 16px;
130+
cursor: pointer;
131+
color: #334155;
132+
border-radius: 5px;
133+
background: #fff;
134+
transition: transform 0.3s ease;
135+
width: calc(100% / 2 - 10px);
136+
}
137+
138+
.buttons button:active{
139+
transform: scale(0.95);
140+
}
141+
142+
@media (max-width: 450px){
143+
.wrapper{
144+
padding: 25px;
145+
height: 260px;
146+
}
147+
.wrapper.active{
148+
height: 520px;
149+
}
150+
}

0 commit comments

Comments
 (0)