By using this site, you agree to the Privacy Policy and Terms of Use.
Accept
rocoderesrocoderes
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Notification Show More
Latest News
Responding to and Tracking Key Presses
How to Work With Responding to and Tracking Key Presses
JavaScript
Passing a JavaScript Value Between HTML Pages
Passing a JavaScript Value Between HTML Pages
JavaScript
Compare Objects in an Array
JavaScript Problem: Compare Objects in an Array
JavaScript
Switching Name Order Using Capturing Groups in Regular Expressions
Switching Name Order Using Capturing Groups in Regular Expressions
JavaScript
Shuffling an Array
JavaScript Problem: How to Perform Shuffling an Array
JavaScript
Aa
Aa
rocoderesrocoderes
Search
  • Home
  • HTML & CSS
    • Login and Registration Form
    • Card Design
    • Loader
  • JavaScript
  • Python
  • Internet
  • Landing Pages
  • Tools
    • Google Drive Direct Download Link Generator
    • Word Count
  • Games
    • House Painter
Follow US
High Quality Design Resources for Free.
rocoderes > JavaScript > How to Make a QR Code Reader in HTML, CSS & JavaScript
JavaScript

How to Make a QR Code Reader in HTML, CSS & JavaScript

Rocoderes
Last updated: 2022/10/22 at 5:24 AM
Rocoderes
Share
14 Min Read
QR Code Reader

In this article, we will make a QR code reader in HTML, CSS & JavaScript. We will make the QR code using QR API which we will use in JavaScript. In this, we will provide an area to add an image of Qr code, and as soon we upload image then it automatically tries to read the Qr code. And also, If we try to upload anything except Qr code, then it won’t read it.

Contents
Pre-requisite to Make Qr Code Generator in HTML, CSS & JavaScriptCreating HTML SkeletonCustomizing And Styling Our ProjectAdding JS ConstantFetching The File From SystemQR Code Reading FunctionFull Source Code to Make QR Code Scanner & Reader in HTML, CSS & JavaScriptOutputYou may also like:

This is going to be a beginner-friendly project and basic project. So let’s make it step-by-step.

Demo

Pre-requisite to Make Qr Code Generator in HTML, CSS & JavaScript

  • Basic Knowledge of HTML.
  • Basic Knowledge of CSS.
  • Basic Knowledge of JavaScript.

Creating HTML Skeleton

For this project, we need to basically three files. First will be our index.html, in this we will add our elements, and you can simply say we will create the skeleton of the project using HTML file. Then for designing purpose we will be adding our style.css file, with this we will add some styles to our HTML, this is going to be purely based on you, like you can customize it any way. And lastly, our script.js file, this will be our main file because we will add functionality so that we can generate our qr code using the JavaScript file.

Now in HTML, We have used font awesome to get the icon of upload file. Then in the body, we have added a wrapper <div>, in which we have added an input field with file type. Also, we have added a <div> to add some details, Then we have added a textarea in which we will print the information of the QR code. Lastly we have to add two buttons, one for copy and other for close. So this is it for our HTML.

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">  
    <title>QR Code Reader</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Font Awesome CDN Link for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.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>
QR code reader

Customizing And Styling Our Project

So after adding the basic elements which is actually perfect, but we need to add some CSS styling so that our project looks a little bit good. For that we just added some background color, added a font family, and did some customizations to our elements as well as we centered our project, added some border, color, transitions etc. to make the project interactive. CSS styling is purely depending on the developer to give more interactive look, so we won’t discuss much about it.

All source code will be provided below, so you can simply copy and paste it.

In CSS, you might see some changes like buttons, image etc. gets hide, this is because we need to create our project little bit dynamic. So as we upload the image, then these missing elements will be shown up. This thing we will control in our JS part.

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 10px;
  background: #E3F2FD;
}
.wrapper{
  height: 270px;
  width: 420px;
  border-radius: 7px;
  background: #0B85FF;
  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: 210px;
  display: flex;
  cursor: pointer;
  user-select: none;
  text-align: center;
  border-radius: 7px;
  background: #fff;
  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: #0B85FF;
  font-size: 55px;
}
form .content p{
  color: #0B85FF;
  margin-top: 15px;
  font-size: 16px;
}
.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: 128px;
  outline: none;
  resize: none;
  color: #fff;
  font-size: 18px;
  background: none;
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #fff;
}
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: 500;
  font-size: 16px;
  cursor: pointer;
  color: #0B85FF;
  border-radius: 5px;
  background: #fff;
  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;
  }
}
QR code reader

Adding JS Constant

Now our project is looking beautiful, Now we need to add functionalities in this. So as we know JavaScript is powerful, so we will take help from JS. In JS file, we have added some constants in order to fetch required elements. We have used the document.querySelector() method to fetch the classes of elements to access those elements. We have fetched here input field, and button.

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");

Fetching The File From System

Now we need to fetch our file from system like QR code image for that we have added an event listener on form to listen click event, in this we just call click() method so that we can access our system’s files.

Now we will add another event listener on input field, in which we have a variable which have our file or image. Then we have created an object of FormData(), which allows us to access the methods of FormData(). Here we have added our file to formData. Then we have called a function named fetchRequest() in which we will add logic to identify and fetch the data from 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);
});
form.addEventListener("click", () => fileInp.click());

QR Code Reading Function

In this fetchRequest() function, we will add main logic to scan qr code. For that we have fetched our qrserver API, we have used post method to send formData as body. By this we want a response in JSON form using this line of code then(res => res.json()).then(result => { result = result[0].symbol[0].data;, this we will return data about the file. The result will be empty if we don’t add qr code, then we will replace the inner text with couldn’t scan qr code.

Then after we will target our textarea in which we will write our result value, and we will put image of QR code using this line of code form.querySelector("img").src = URL.createObjectURL(file);. Lastly we just added our active class in which have to show our buttons, images etc.

Now for copy button, we have added an event listener to listen click, in this we have assigned a variable to store text from textarea using document.querySelector("textarea").textContent. Then we need to copy the text as we click the button and this can be performed using the following line of code: document.querySelector("textarea").textContent

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";
    });
}
copyBtn.addEventListener("click", () => {
    let text = document.querySelector("textarea").textContent;
    document.querySelector("textarea").textContent
});


closeBtn.addEventListener("click", () => wrapper.classList.remove("active"));
QR code reader

Full Source Code to Make QR Code Scanner & Reader in HTML, CSS & JavaScript

index.html

<!DOCTYPE html>

<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">  
    <title>QR Code Reader</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Font Awesome CDN Link for Icons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.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>

style.css

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 0 10px;
  background: #E3F2FD;
}
.wrapper{
  height: 270px;
  width: 420px;
  border-radius: 7px;
  background: #0B85FF;
  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: 210px;
  display: flex;
  cursor: pointer;
  user-select: none;
  text-align: center;
  border-radius: 7px;
  background: #fff;
  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: #0B85FF;
  font-size: 55px;
}
form .content p{
  color: #0B85FF;
  margin-top: 15px;
  font-size: 16px;
}
.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: 128px;
  outline: none;
  resize: none;
  color: #fff;
  font-size: 18px;
  background: none;
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #fff;
}
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: 500;
  font-size: 16px;
  cursor: pointer;
  color: #0B85FF;
  border-radius: 5px;
  background: #fff;
  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;
  }
}

script.js

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"));

Output

QR code reader
Demo
Download Code

Check out awesome video reference here:

You may also like:

  • How To Build a Quiz App With HTML CSS and JavaScript
  • How To Make Slide Puzzle Game in HTML CSS and JavaScript
  • How To Make Space War Game Using HTML, CSS & JavaScript

Related

Subscribe to Our Newsletter

Subscribe to our newsletter to get our newest articles instantly!

TAGGED: CSS, javascript, QR Code Reader
Share this Article
Facebook Twitter Email Print
What do you think?
Love1
Sad0
Happy0
Sleepy0
Angry0
Dead0
Wink0
Posted by Rocoderes
Rocoderes is a blog you can learn HTML, CSS, JavaScript, React Js and Python along with creative coding stuff and free source code files.
Previous Article Word Scramble Game How To Create Word Scramble Game in HTML
Next Article Ad Blocker Detector in HTML How to Make Ad Blocker Detector in HTML, CSS & JavaScript
Leave a comment Leave a comment

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

- Advertisement -

You Might Also Like

Responding to and Tracking Key Presses

How to Work With Responding to and Tracking Key Presses

February 5, 2023
Passing a JavaScript Value Between HTML Pages

Passing a JavaScript Value Between HTML Pages

February 3, 2023
Compare Objects in an Array

JavaScript Problem: Compare Objects in an Array

January 30, 2023
Switching Name Order Using Capturing Groups in Regular Expressions

Switching Name Order Using Capturing Groups in Regular Expressions

January 29, 2023
rocoderesrocoderes
Follow US

Copyright © 2022 All Right Reserved By Rocoderes

  • Home
  • About us
  • Contact us
  • Disclaimer
Join Us!

Subscribe to our newsletter and never miss our latest news, podcasts etc.

Zero spam, Unsubscribe at any time.
Welcome Back!

Sign in to your account

Lost your password?