Open in app

Sign in

Write

Sign in

Easily Create a QR Code Generator in Just 6 Simple Steps with HTML, CSS, and JavaScript

CodeKingdom
6 min readJan 28, 2023

--

Learn how to make a QR code generator using Html, Css and Javascript in just 6 simple steps and deploy it on firebase

Step 1:

Create a new folder called QR code generator anywhere in your system and open it inside your code editor

Step 2:

Create 3 files named accordingly: index.html, style.css and script.js

Your folder structure should look like this:

Folder Structure

Step 3:

Inside the index.html, let’s generate a boiler plate code and add reference to the scripts that we created:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QR Code generator</title>
</head>
<body>

    <script src="script.js"></script>
</body>
</html>

Step 4:

Now, Let’s write the code for index.html:

<!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">
    <title>QR Code generator</title>
</head>
<body>
    <div id="container">
        <div id="inputs">
            <label for="text-input">Enter text:</label>
            <input type="text" id="text-input" placeholder="Enter text">
            <br>
            <label for="link-input">Enter link:</label>
            <input type="text" id="link-input" placeholder="Enter link">
        </div>
        <button id="generate-button">Generate QR Code</button>
        <div id="qrcode"></div>

        <div id="qr-code-container" style="display:none;">
            <img id="qr-code" alt="QR Code">
            <button id="download-button"  style="display: none;" onclick="downloadQRCode()">Download QR Code</button>
        </div>
        
    </div>
    
<script src="script.js"></script>
</body>
</html>

Step 5:

Now, Let’s make the app work and generate QR code:

Inside the script.js file, write:

const generateButton = document.getElementById("generate-button");
const textInput = document.getElementById("text-input");
const linkInput = document.getElementById("link-input");
const qrCode = document.getElementById("qr-code");

generateButton.addEventListener("click", function() {
    let input;
    if(textInput.value) {
        input = textInput.value;
    } else if(linkInput.value) {
        input = linkInput.value;
    }
    const qrUrl = "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=" + input;
    qrCode.src = qrUrl;
});

qrCode.addEventListener("click", function() {
    if(linkInput.value) {
        window.open(linkInput.value, '_blank');
    }
});
const qrCodeContainer = document.getElementById("qr-code-container");

generateButton.addEventListener("click", function() {
    // Code to generate QR code
    qrCodeContainer.style.display = "block";
    downloadButton.style.display = "block";
    document.getElementById("qrcode").style.opacity = "1";
    document.getElementById("download-button").style.opacity = "1";

    document.getElementById("qrcode").classList.add("fade-in");
    document.getElementById("download-button").classList.add("fade-in");
});

const downloadButton = document.getElementById('download-button');


function downloadQRCode() {
    // Get the QR code element
    var qrcode = document.getElementById("qrcode");
    var imgData = qrcode.src;
    // Creates a link and triggers download
    var link = document.createElement("a");
    link.href = imgData;
    link.download = "qrcode.png";
    link.click();
  }

Till now you should have a working app which can generate QR codes.

Your app should look like this:

Step 6:

Let’s add some styling to our app and make it look more visually appealing:

Inside the style.css, we’ll write:

body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}

#container {
    width: 600px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #ccc;
    text-align: center;
}

#inputs {
    margin-bottom: 20px;
}

label {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

input {
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 60%;
    margin-bottom: 10px;
}

#download-button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px auto;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  #download-button:hover {
    background-color: #4CAF50;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
  }
  
  #generate-button:hover {
    background-color: #4CAF50;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
  }
  
  #download-button:active {
    background-color: #3e8e41;
    transform: scale(0.95);
  }

  #generate-button:active {
    background-color: #3e8e41;
    transform: scale(0.95);
  }

#generate-button {
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    margin-bottom: 20px;
}

#container {
    background: linear-gradient(to right, #f0f0f0, #d9d9d9);
    box-shadow: 2px 2px 10px #ccc;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

#generate-button {
    background: linear-gradient(to right, #4CAF50, #3e8e41);
    box-shadow: 2px 2px 5px #666;
    border-radius: 10px;
}


#generate-button:hover {
    background-color: #3e8e41;
}

#qr-code-container {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
}

#qr-code {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    animation: fadeIn 0.5s ease-in;
}

#download-button {
    animation: fadeIn 0.5s ease-in;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

So, Now we should have a complete QR code scanner made with Html, Css and Javascript and it should look like this:

Here is all of the code of index.html, style.css and script.js:

  1. index.html:
<!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">
    <title>QR Code Gennerator</title>
</head>
<body>
    <div id="container">
        <div id="inputs">
            <label for="text-input">Enter text:</label>
            <input type="text" id="text-input" placeholder="Enter text">
            <br>
            <label for="link-input">Enter link:</label>
            <input type="text" id="link-input" placeholder="Enter link">
        </div>
        <button id="generate-button">Generate QR Code</button>
        <div id="qrcode"></div>

        <div id="qr-code-container" style="display:none;">
            <img id="qr-code" alt="QR Code">
            <button id="download-button"  style="display: none;" onclick="downloadQRCode()">Download QR Code</button>
        </div>
        
    </div>
    
<script src="script.js"></script>
</body>
</html>

2. style.css:

body {
    background-color: #f5f5f5;
    font-family: Arial, sans-serif;
}

#container {
    width: 600px;
    margin: 50px auto;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px #ccc;
    text-align: center;
}

#inputs {
    margin-bottom: 20px;
}

label {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 5px;
}

input {
    padding: 10px;
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid #ccc;
    width: 60%;
    margin-bottom: 10px;
}

#download-button {
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px auto;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  }
  
  #download-button:hover {
    background-color: #4CAF50;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
  }
  
  #generate-button:hover {
    background-color: #4CAF50;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.05);
  }
  
  #download-button:active {
    background-color: #3e8e41;
    transform: scale(0.95);
  }

  #generate-button:active {
    background-color: #3e8e41;
    transform: scale(0.95);
  }

#generate-button {
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 18px;
    margin-bottom: 20px;
}

#container {
    background: linear-gradient(to right, #f0f0f0, #d9d9d9);
    box-shadow: 2px 2px 10px #ccc;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
}

#generate-button {
    background: linear-gradient(to right, #4CAF50, #3e8e41);
    box-shadow: 2px 2px 5px #666;
    border-radius: 10px;
}


#generate-button:hover {
    background-color: #3e8e41;
}

#qr-code-container {
    display: inline-block;
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
}

#qr-code {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    animation: fadeIn 0.5s ease-in;
}

#download-button {
    animation: fadeIn 0.5s ease-in;
  }
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

3. script.js:

const generateButton = document.getElementById("generate-button");
const textInput = document.getElementById("text-input");
const linkInput = document.getElementById("link-input");
const qrCode = document.getElementById("qr-code");

generateButton.addEventListener("click", function() {
    let input;
    if(textInput.value) {
        input = textInput.value;
    } else if(linkInput.value) {
        input = linkInput.value;
    }
    const qrUrl = "https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=" + input;
    qrCode.src = qrUrl;
});

qrCode.addEventListener("click", function() {
    if(linkInput.value) {
        window.open(linkInput.value, '_blank');
    }
});
const qrCodeContainer = document.getElementById("qr-code-container");

generateButton.addEventListener("click", function() {
    // Code to generate QR code
    qrCodeContainer.style.display = "block";
    downloadButton.style.display = "block";
    document.getElementById("qrcode").style.opacity = "1";
    document.getElementById("download-button").style.opacity = "1";

    document.getElementById("qrcode").classList.add("fade-in");
    document.getElementById("download-button").classList.add("fade-in");
});

const downloadButton = document.getElementById('download-button');

function downloadQRCode() {
    // Get the QR code element
    var qrcode = document.getElementById("qrcode");
    var imgData = qrcode.src;
    // Creates a link and triggers download
    var link = document.createElement("a");
    link.href = imgData;
    link.download = "qrcode.png";
    link.click();
  }

You can download the code from my Github:

GitHub - zeyanthecoder/qr-tastic: qr-tastic. With its intuitive interface and customizable options…

qr-tastic. With its intuitive interface and customizable options, you can create QR codes for text, URLs, and contact…

github.com

Also do check my other blogs:

How to make an AI assistant in Python: https://medium.com/@codekingdom/ai-assistant-in-python-7931b6edc567

Qrcodegenerator
Qr Code
Html5 Development
Javascript Development
Free Qr Code Generator

--

--

CodeKingdom

Written by CodeKingdom

2 Followers

I'm Zeyan Ramzan, a programmer sharing tutorials & tips on coding. Join me in demystifying the world of programming & improving our skills together.

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams