How to make QR Code Generator
with HTML,CSS and JavaScript
QR (Quick Response) codes are fit for putting away heaps of information, and clients can undoubtedly get to the data by checking the QR code. In my QR Code Generator application, clients can enter a text or URL to create a QR code for it. It is a QR code generator application, not a QR code scanner.
On the off chance that you're feeling trouble to comprehend what I'm talking about or what this QR code generator resembles then you can watch a video instructional exercise of this QR code generator in JavaScript.
Video Tutorial of QR Code Generator
QR Code Generator [Source Codes]
To Create QR Code Generator 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 code 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 Generator</title>
- <link rel="stylesheet" href="style.css">
- </head>
- <body>
- <div class="wrapper">
- <header>
- <h1>QR Code Generator</h1>
- <p>Type Text or Paste a URL to create a QR code</p>
- </header>
- <div class="form">
- <input type="text" spellcheck="false" placeholder="Enter text or URL">
- <button id="generate">Generate</button>
- </div>
- <div class="qr-code">
- <img id="qr-image" src="" alt="qr-code">
- <a id="download-link" download="qrcode.png"><button id="download-btn" disabled>Download</button></a>
- </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: "Open Sans", sans-serif;
- }
- body{
- display: flex;
- padding: 0 10px;
- min-height: 100vh;
- align-items: center;
- background: #282A35;
- justify-content: center;
- }
- ::selection{
- color: #fff;
- background: #282A35;
- }
- .wrapper{
- height: 300px;
- max-width: 400px;
- background: #f1f1f1;
- border-radius: 5px;
- padding: 30px 35px 0;
- transition: height 0.2s ease;
- }
- .wrapper.active{
- height: 550px;
- }
- header h1{
- font-size: 25px;
- font-weight: 500;
- }
- header p{
- margin-top: 5px;
- color: #606060;
- font-size: 18px;
- }
- .wrapper .form{
- margin: 20px 0 25px;
- }
- .form :where(input, button){
- width: 100%;
- height: 50px;
- border: none;
- outline: none;
- border-radius: 6px;
- transition: 0.1s ease;
- }
- .form input{
- font-size: 18px;
- padding: 0 17px;
- border: 1px solid #999;
- }
- .form input:focus{
- box-shadow: 0 3px 6px rgba(0,0,0,0.13);
- }
- .form input::placeholder{
- color: #999;
- }
- .form button{
- color: #fff;
- cursor: pointer;
- margin-top: 20px;
- font-size: 18px;
- background: #785BF8;
- }
-
- #download-btn {
- padding: 10px 15px;
- margin-left: 30px;
- font-size: 16px;
- background-color: #785BF8;
- color: #fff;
- border: none;
- border-radius: 6px;
- cursor: pointer;
- transition: background-color 0.3s ease;
- }
-
- #download-btn:hover {
- background-color: #5c42cc;
- }
- .qr-code{
- opacity: 0;
- display: flex;
- padding: 45px 60px;
- border-radius: 8px;
- align-items: center;
- pointer-events: none;
- justify-content: center;
- border: 1px solid #ccc;
- }
- .wrapper.active .qr-code{
- opacity: 1;
- pointer-events: auto;
- transition: opacity 0.5s 0.05s ease;
- }
- .qr-code img{
- width: 170px;
- }
-
- @media (max-width: 430px){
- .wrapper{
- height: 255px;
- padding: 16px 20px;
- }
- .wrapper.active{
- height: 510px;
- }
- header p{
- color: #696969;
- }
- .form :where(input, button){
- height: 52px;
- }
- .qr-code img{
- width: 160px;
- }
- }
Now paste the following codes into your script.js file
- const wrapper = document.querySelector(".wrapper"),
- qrInput = wrapper.querySelector(".form input"),
- generateBtn = wrapper.querySelector("#generate"),
- qrImg = wrapper.querySelector("#qr-image"),
- downloadBtn = wrapper.querySelector("#download-btn"),
- downloadLink = wrapper.querySelector("#download-link");
- let preValue;
-
- generateBtn.addEventListener("click", () => {
- let qrValue = qrInput.value.trim();
- if (!qrValue || preValue === qrValue) return;
- preValue = qrValue;
- generateBtn.innerText = "Generating QR Code...";
- qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=${qrValue}`;
- qrImg.addEventListener("load", () => {
- wrapper.classList.add("active");
- generateBtn.innerText = "Generate QR Code";
- downloadBtn.disabled = false;
- downloadLink.href = qrImg.src;
- });
- });
-
- downloadBtn.addEventListener("click", () => {
- downloadLink.click();
- });
-
- qrInput.addEventListener("keyup", () => {
- if (!qrInput.value.trim()) {
- wrapper.classList.remove("active");
- preValue = "";
- downloadBtn.disabled = true;
- }
- });
-
If you face any difficulties while creating QR Code Generator or your code is not working as expected, you can download the source code files by clicking download button.