Skip to content

Commit

Permalink
init Scanner
Browse files Browse the repository at this point in the history
  • Loading branch information
@imdanieldev
imdanieldev committed Aug 4, 2022
0 parents commit a036ae5
Show file tree
Hide file tree
Showing 4 changed files with 418 additions and 0 deletions.
33 changes: 33 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
<title>QR Scanner</title>
</head>
<body>
<div class="wrapper">
<form action="#">
<input type="file" hidden accept="image/*">
<img src="" alt="QR Code">
<div class="content">
<i class="fas fa-cloud-upload"></i>
<p>Upload QR Code To Scan</p>
</div>
</form>
<div class="dateils">
<textarea disabled></textarea>
<div class="buttons">
<button class="close">Close</button>
<button class="copy">Copy</button>
</div>
</div>
</div>

<a href="https://ImDanielDev.hithub.io" target="_blank" rel="noopener noreferrer">By Daniel</a>
<script src="script.js"></script>
</body>
</html>
44 changes: 44 additions & 0 deletions script.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
const
wrapper = document.querySelector(".wrapper"),
form = wrapper.querySelector("form"),
fileInp = form.querySelector("input[type=file]"),
infoText = form.querySelector("p"),
copyBtn = wrapper.querySelector(".copy"),
closeBtn = wrapper.querySelector(".close");


function fetchRequest(formData, file){
infoText.innerText = "Scanning QR Code...";
fetch("http://api.qrserver.com/v1/read-qr-code/", {
method: "POST",
body: formData
}).then(res => res.json()).then(result => {
result = result[0].symbol[0].data;
infoText.innerText = result ? "Upload QR Code To Scan" : "Couldn't Scan QR Code";
if(!result) return;
wrapper.querySelector("textarea").innerText = result;
form.querySelector("img").src = URL.createObjectURL(file);
wrapper.classList.add("active");
});
}

fileInp.addEventListener("change", e => {
let
file = e.target.files[0],
formData = new FormData();
if(!file) return;
formData.append("file", file);
fetchRequest(formData, file);
});


copyBtn.addEventListener("click", ()=>{
let text = wrapper.querySelector("textarea").textContent;
navigator.clipboard.writeText(text);
copyBtn.innerText = "Copyed";
setTimeout(()=>{
copyBtn.innerText = "Copy";
},2000);
});
form.addEventListener("click", ()=>fileInp.click());
closeBtn.addEventListener("click", ()=>wrapper.classList.remove("active"));
231 changes: 231 additions & 0 deletions style.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,231 @@
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 100;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiAyp8kv8JHgFVrJJLmE3tF.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmv1plEA.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm21llEA.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrJJLedw.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmg1hlEA.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmr19lEA.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLmy15lEA.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm111lEA.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: italic;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiDyp8kv8JHgFVrJJLm81xlEA.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 100;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiGyp8kv8JHgFVrLPTedw.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 200;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLFj_V1s.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 300;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDz8V1s.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrFJA.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLGT9V1s.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLEj6V1s.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLCz7V1s.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLDD4V1s.ttf) format('truetype');
}
@font-face {
font-family: 'Poppins';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/poppins/v20/pxiByp8kv8JHgFVrLBT5V1s.ttf) format('truetype');
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #E3F2FD;
}
.wrapper {
width: 420px;
border-radius: 7px;
background: #0B85FF;
padding: 30px 30px 35px;
height: 270px;
transition: height 0.2s ease;
}
.wrapper.active {
height: 525px;
}
.wrapper.active form {
height: 225px;
pointer-events: none;
}
.wrapper.active form img {
display: block;
}
.wrapper.active form .content {
display: none;
}
.wrapper.active .dateils {
opacity: 1;
pointer-events: auto;
}
.wrapper form {
background: #FFF;
height: 210px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
border-radius: 7px;
cursor: pointer;
}
.wrapper form img {
display: none;
max-width: 148px;
}
.wrapper form .content i {
color: #0B85FF;
font-size: 55px;
}
.wrapper form .content p {
color: #0B85FF;
font-size: 16px;
margin-top: 15px;
}
.wrapper .dateils {
opacity: 0;
pointer-events: none;
margin-top: 25px;
transition: opacity 0.5s 0.05s ease;
}
.wrapper .dateils textarea {
width: 100%;
resize: none;
height: 128px;
padding: 10px 15px;
background: transparent;
outline: none;
border: 1px solid #FFF;
color: #FFF;
font-size: 18px;
border-radius: 5px;
}
.wrapper .dateils .buttons {
display: flex;
justify-content: space-between;
margin-top: 20px;
}
.wrapper .dateils .buttons button {
height: 55px;
width: calc(100% / 2 - 10px);
outline: none;
border: none;
color: #0B85FF;
background: #FFF;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
font-weight: 500;
}
a {
color: blue;
text-decoration: none;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
cursor: pointer;
}
Loading

0 comments on commit a036ae5

Please sign in to comment.