Create a QR code generator using HTML CSS and JavaScript

byAdmin

In this article, we will be discussing how to create a QR code generator using HTML, CSS, and JavaScript. QR code generators are applications that encode textual data into a QR code, which can be scanned using a QR code scanner to retrieve the stored information.

QR codes have become increasingly popular as they can be used in a variety of ways, such as on posters or websites, to provide users with additional information. With this QR code generator application, users can input the required data and save a PNG or SVG image of the QR code.

Although you can generate QR codes for URLs in browsers like Chrome, creating your own QR code generator is always an interesting learning experience. Let's get started!

You May like

Create a QR code generator using HTML CSS and JavaScript [Source Code]

To create the QR Code Generator in JavaScript, you need to create three files: an HTML file, a CSS file, and a JavaScript file. Once you have created these files, simply paste the provided codes into them. You can also download the source code files for this QR Code Generator app for free by clicking on the download button.

Begin by creating an HTML file named "index.html" and paste the given code into the file. Remember to name the file with a .html extension.

  
    <!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">
    <title>QR Code Generator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="form">
            <div class="form-control">
                <label>Enter data to generate a code</label>
            </div>
            <div class="form-control">
                <input type="text" id="data">
            </div>
            <div class="form-control">
                <button id="btn">Generate QR Code</button>
            </div>
        </div>
        <img src="" id="img">
    </div>
    <script src="script.js"></script>
</body>
</html>

Then, create a CSS file named "style.css" and paste the given code into the file. Ensure that the file has a .css extension.

  
    * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.form {
  padding: 15px;
  border-radius: 10px;
  width: 300px;
  border: 1px solid #ccc;
}

.form-control {
  margin-bottom: 15px;
}

.form-control input {
  padding: 10px;
  border-radius: 15px;
  width: 100%;
  border: 1px solid #ccc;
}

.form-control input:focus {
  outline: none !important;
  border: 1px solid #ccc;
}

.form-control button {
  display: block;
  cursor: pointer;
  padding: 10px 5px;
  width: 100%;
  background-color: #444;
  color: #fff;
  border: 0;
  border-radius: 15px;
}

#img {
  width: 100%;
  margin-top: 20px;
}

Lastly, create a JavaScript file named "script.js" and paste the given code into the file. Ensure that the file has a .js extension.

  
    const input = document.getElementById("data");
const button = document.getElementById("btn");
const qrImg = document.getElementById("img");

button.addEventListener("click", ()=>{
    let data = input.value;
    if(data.length>0){
        let qrsource="https://api.qrserver.com/v1/create-qr-code/?size=150x150&x36;data="+data;

        qrImg.src=qrsource;
    }
})

With these three files in place, you have successfully created a QR Code Generator in HTML, CSS, and JavaScript. If you encounter any issues or your code is not working, you can download the source code files from the provided download button. The file is a .zip file, so you will need to extract it once it is downloaded.

Create a QR code generator using HTML CSS and JavaScript

Create a QR code generator using HTML CSS and JavaScript [Source Code]

Post a Comment

Contact Form