QR Code Scanner with HTML,CSS
and JavaScript
As you might be aware, a QR code scanner is a filtering gadget that can peruse QR codes. Most the telephone has an underlying QR code scanner application.
In this blog, I won't make a QR code scanner by the camera rather than this, in my QR code peruser application, clients can transfer any QR code picture and translate or remove the substance from it, as you've found in the picture review.
Video Tutorial of QR Code Scanner
QR Code Scanner [Source Codes]
To Create QR Code Scanner with HTML,CSS and JavaScript, follow the given steps line by line:
Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be style and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the source codes by clicking download button.
First, paste the following codes into your index.html file
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="utf-8">
- <title>QR Code Scanner</title>
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="wrapper">
- <form action="#">
- <input type="file" hidden>
- <img src="#" alt="qr-code">
- <div class="content">
- <i class="fas fa-cloud-upload"></i>
- <p>Upload QR Code to Read</p>
- </div>
- </form>
- <div class="details">
- <textarea spellcheck="false" disabled></textarea>
- <div class="buttons">
- <button class="close">Close</button>
- <button class="copy">Copy Text</button>
- </div>
- </div>
- </div>
- <script src="script.js"></script>
- </body>
- </html>
Now paste the following codes into your style.css file
- *{
- margin: 0;
- padding: 0;
- box-sizing: border-box;
- font-family: Arial, sans-serif;
- }
- body{
- display: flex;
- align-items: center;
- justify-content: center;
- min-height: 100vh;
- padding: 0 10px;
- background: #282A35;
- }
- .wrapper{
- width: 500px;
- height: 300px;
- border-radius: 10px;
- background:#919191;
- padding: 30px 30px 35px;
- transition: height 0.2s ease;
- box-shadow: 0 10px 20px rgba(0,0,0,0.1);
- }
- .wrapper.active{
- height: 525px;
- }
- .wrapper form{
- height: 240px;
- display: flex;
- cursor: pointer;
- user-select: none;
- text-align: center;
- border-radius: 7px;
- background: #FFFFFF;
- align-items: center;
- justify-content: center;
- transition: height 0.2s ease;
- }
- .wrapper.active form{
- height: 225px;
- pointer-events: none;
- }
- form img{
- display: none;
- max-width: 148px;
- }
- .wrapper.active form img{
- display: block;
- }
- .wrapper.active form .content{
- display: none;
- }
- form .content i{
- color: #282A35;
- font-size: 55px;
- }
- form .content p{
- color: #282A35;
- margin-top: 15px;
- font-size: 16px;
- font-weight: 600;
- }
- .wrapper .details{
- opacity: 0;
- margin-top: 25px;
- pointer-events: none;
- }
- .wrapper.active .details{
- opacity: 1;
- pointer-events: auto;
- transition: opacity 0.5s 0.05s ease;
- }
- .details textarea{
- width: 100%;
- height: 140px;
- outline: none;
- resize: none;
- color: #fff;
- font-size: 18px;
- background: none;
- border-radius: 5px;
- padding: 10px 15px;
- border: 1px solid #f1f1f1;
- }
- textarea::-webkit-scrollbar{
- width: 0px;
- }
- textarea:hover::-webkit-scrollbar{
- width: 5px;
- }
- textarea:hover::-webkit-scrollbar-track{
- background: none;
- }
- textarea:hover::-webkit-scrollbar-thumb{
- background: #fff;
- border-radius: 8px;
- }
- .details .buttons{
- display: flex;
- margin-top: 20px;
- align-items: center;
- justify-content: space-between;
- }
- .buttons button{
- height: 55px;
- outline: none;
- border: none;
- font-weight: 600;
- font-size: 16px;
- cursor: pointer;
- color: #fff;
- border-radius: 5px;
- background: #0B85FF;
- transition: transform 0.3s ease;
- width: calc(100% / 2 - 10px);
- }
- .buttons button:active{
- transform: scale(0.95);
- }
-
- @media (max-width: 450px) {
- .wrapper{
- padding: 25px;
- height: 260px;
- }
- .wrapper.active{
- height: 520px;
- }
- }
Now paste the following codes into your script.js file
- const wrapper = document.querySelector(".wrapper"),
- form = document.querySelector("form"),
- fileInp = form.querySelector("input"),
- infoText = form.querySelector("p"),
- closeBtn = document.querySelector(".close"),
- copyBtn = document.querySelector(".copy");
-
- function fetchRequest(file, formData) {
- 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;
- document.querySelector("textarea").innerText = result;
- form.querySelector("img").src = URL.createObjectURL(file);
- wrapper.classList.add("active");
- }).catch(() => {
- infoText.innerText = "Couldn't scan QR Code";
- });
- }
-
- fileInp.addEventListener("change", async e => {
- let file = e.target.files[0];
- if(!file) return;
- let formData = new FormData();
- formData.append('file', file);
- fetchRequest(file, formData);
- });
-
- copyBtn.addEventListener("click", () => {
- let text = document.querySelector("textarea").textContent;
- navigator.clipboard.writeText(text);
- });
-
- form.addEventListener("click", () => fileInp.click());
- closeBtn.addEventListener("click", () => wrapper.classList.remove("active"));
If you face any difficulties while creating your QR Code Scanner or your code is not working as expected, you can download the source code files by clicking download button.