Home
CSS
HTML

Crafting QR Code generator in HTML, CSS & JavaScript

QR Code Generator | Coding Zemigle

Quick Response Codes have become a critical component of our environment. These two dimensional barcodes has the capacity to store a wide range of data. Including the requirements of the product internet links, and contact information. They are generally used in logistics, advertising and daily life and are flexible and effective.

Using the ability of JavaScript, HTML and CSS. We'll set out on a quest to build a custom QR code generator in this blog post. By the end of this program, you'll not only have the skills to generate QR codes effectively, but you will also have a better understanding regarding how these technologies interact to generate engaging online apps. Whether you are a experienced developer trying to find a hands on project or a beginner hoping to improve your coding skills. You should use this tutorial, starting with zero, we'll set up the project before constructing the generator piece by piece. Therefore, let's explore Web development and create our own QR code generator altogether!

Step 1: Organizing the structure of QR Code Generator project

Setting up the project atmosphere is crucial before we begin writing the code for our QR code generator. This stage is essential to a successful development process. What you must do is as follows making a project folder in an additional folder for the project to start.



It can be provided a name like "QRCodeGenerator". Make the following three subfolder inside of this one "css, js and images". Your project will stay organized with the help of this scientific technique, putting HTML structure together launch a favourite code editor called an IDE, for integrated development environment within your project folder. Make a new HTML file called "index.html" the QR code generator will be built on the shoulders of this document.

✲    index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>QR Code Generator | Coding Zemigle </title>
  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet"/>
  <!--- QR Code CDN -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
  <!-- Stylesheet -->
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="wrapper">
    <input type="text" id="userInput" placeholder="Enter some text or URL"/>
    <div class="options">
      <select class="sizeOptions">
        <option value="200" selected>200 x 200</option>
        <option value="250">250 x 250</option>
        <option value="300">300 x 300</option>
      </select>
      <input type="color" id="BGColor" class="color-inp"/>
      <input type="color" id="FGColor" class="color-inp"/>
    </div>
    <div class="box">
      <button id="submit" disabled>Generate</button>
      <a href="#" id="download">Download</a>
    </div>
    <div class="container"></div>
  </div>
  <!-- Script -->
    <script src="https://cdn.rawgit.com/davidshimjs/qrcodejs/gh-pages/qrcode.min.js"></script>
  <script src="script.js"></script>
</body>
</html>



Take note on the external JavaScript and CSS files we're linked because seperation of concerns, our code is clear and easy to maintain. In their respective folders, add two new files "main.js" within the "css" folder. With these first steps accomplish, our project is prepared for use. We'll use HTML and CSS to create the client interaction for the QR code generator in in the following section. Remain tuned! Designing the user interface, section III after establishing the framework for our project. It's time to design the client interface for the QR code generator.

The user experience is improved and our program looks better with a well designed UI. To create the interface, configuring the input fields in your code editor and choose the index.html file. Create an element to house our UI components inside the section. Give it a class name that is appropriate such as the "qr-generator-container". The input and container elements should be designed to look good. To manage how these items appear, you can utilize rules of CSS like font family, border, padding and margin.



Step 2: Styling the QR Code with CSS

The quick response code (QR Code) generator will be complete with these finishing touches if you want it to be both practical and visually beautiful. We'll finish the project by doing this in the following part, creating QR codes by adding JavaScript code. Let's combine everything for a nice conclusion! With HTML, CSS or JavaScript, you have created your own unique QR Code Generator. We have been learning about web development as we go along, setting up the task to creating an initiative design and adding functionality.

✲    style.css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}

body {
  height: 100vh;
  background: linear-gradient(#377dff 50%, #03191e 50%);
}

.wrapper {
  background-color: #ffffff;
  padding: 2em 2em;
  position: absolute;
  width: 25em;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  outline: 2px solid #377dff;
  border-radius: 0.6em;
  box-shadow: 0 1.5em 3em rgba(3, 21, 55, 0.3);
}

#userInput {
  width: 100%;
  height: 60px;
  border: 1px solid;
  font-weight: bold;
  padding: 0.5em 1em;
  font-size: 1em;
  outline: none;
}

.options {
  margin-top: 1em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

select {
  appearance: none;
  width: 8em;
  padding: 0.45em 0.9em;
  font-size: 1.25em;
  letter-spacing: 0.5px;
  cursor: pointer;
  background: none;
  border-radius: 1px solid;
  color: #03191e;
  background-image: url("arrow.png");
  background-size: 1.1em;
  background-position: 6em;
  outline: none;
}

select::-ms-expand {
  display: none;
}

select option {
  background-color: #ffffff;
  color: #377dff;
  letter-spacing: 0.06em;
  font-weight: 400;
  font-size: 1.12em;
}

.selected {
  display: none;
}

.color-inp {
  appearance: none;
  background-color: transparent;
  width: 3.1em;
  height: 3.4em;
  outline: none;
  border: none;
}

.color-inp::-webkit-color-swatch {
  border-radius: 0em;
  border: 0.18em solid transparent;
}

.color-inp::-moz-color-swatch {
  border-radius: 0em;
  border: 0.18em solid transparent;
}

.box {
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.box button,
.box a {
  font-size: 18px;
  font-weight: bold;
  padding: 0.7em 2.4em;
  border-radius: 0em;
  margin-top: 2em;
}

.box button:disabled {
  background-color: transparent;
  color: #03191e;
  border: 0.10em solid #03191e;
}

.box button {
  background-color: transparent;
  color: #377dff;
  border: 0.18em solid #377dff;
}

.box a {
  background-color: #377dff;
  color: #ffffff;
  text-decoration: none;
  border: 0.18em solid #377dff;
}

.container {
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  margin-top: 1.8em;
  outline: auto #377dff;
}

.hide {
  display: none;
}



To make the input fields and button stand out, think about include background colors, borders or round edges. The QR code generator dashboard has a tidy and user-friendly design thanks to these CSS rules and regulations. We will deliver into JavaScript in the following part too. Make our generator work properly. As we complete our endeavour, stick with us. Final touches, we are nearly there! The QR code generator is starting to come together, but it still needs a few finishing to be more polished and user-friendly. To complete our project let's add the final touches!

We hope you enjoyed and learned from this tutorial. Share the QR generator among your friends, coworkers and even visitors to your personal website. You have all they need to contribute to the creative and innovative world of web development with your acquired expertise. We appreciate your participation in our coding experience and might your endeavours. Determine how user-friendly and intuitive the user interface is. Request input from prospective users or pinpoint any features for the QR code generator it might be unclear or challenging to use.


Step 3: Adding Interactivity with JavaScript

Add a javascript function to your "main.js" file to process user input and create QR codes. Use error handling to make sure users gets precise input if they enter inaccurate to incomplete data. For entrance, you can determine whether the input blank or contains improper characters.

✲    script.js
const container = document.querySelector(".container");
const userInput = document.getElementById("userInput");
const submitBtn = document.getElementById("submit");
const downloadBtn = document.getElementById("download");
const sizeOptions = document.querySelector(".sizeOptions");
const BGColor = document.getElementById("BGColor");
const FGColor = document.getElementById("FGColor");
let QR_Code;
let sizeChoice, BGColorChoice, FGColorChoice;

//Set size
sizeOptions.addEventListener("change", () => {
  sizeChoice = sizeOptions.value;
});

//Set background color
BGColor.addEventListener("input", () => {
  BGColorChoice = BGColor.value;
});

//Set foreground color
FGColor.addEventListener("input", () => {
  FGColorChoice = FGColor.value;
});

//Format input
const inputFormatter = (value) => {
  value = value.replace(/[^a-z0-9A-Z]+/g, "");
  return value;
};

submitBtn.addEventListener("click", async () => {
  container.innerHTML = "";
  //QR code genertion
  QR_Code = await new QRCode(container, {
    text: userInput.value,
    width: sizeChoice,
    height: sizeChoice,
    colorDark: FGColorChoice,
    colorLight: BGColorChoice,
  });

  //Set url for download
  const src = container.firstChild.toDataURL("image/pmg");
  downloadBtn.href = src;
  let userValue = userInput.value;
  try {
    userValue = new URL(userValue).hostname;
  } catch (_) {
    userValue = inputFormatter(userValue);
    downloadBtn.download = `${userValue}QR`;
    downloadBtn.classList.remove("hide");
  }
});

userInput.addEventListener("input", () => {
  if (userInput.value.trim().length < 1) {
    submitBtn.disabled = true;
    downloadBtn.href = "";
    downloadBtn.classList.add("hide");
  } else {
    submitBtn.disabled = false;
  }
});

window.onload = () => {
  container.innerHTML = "";
  sizeChoice = 200;
  sizeOptions.value = 200;
  userInput.value = "";
  BGColor.vavlue = BGColorChoice = "#ffffff";
  FGColor.value = FGColorChoice = "#377dff";
  downloadBtn.classList.add("hide");
  submitBtn.disabled = true;
};



Designing and placing the QR code choose the location where the produced QR code will be displayed. You can designate a <div> component of your HTML as hold the QR code image. To position and design this container, use CSS. To make the QR code more visually appealing, think about adding a border, a background or padding. After creating the quick response code, update the material of this element in the javaScript with the resulting image.

You can unblock other features like the option to down the created QR code as the picture of ability to dynamically adjust it's size, depending on the objects of your project. To improve the functionality, you can so think about integrating outside libraries or APIs. For example, you can alter the QR code's colors or add a logo.

Step 4: Optional addition of features of QR Code Generator

Examine the security safeguards built into the bar code generator safeguard user information. Perform vulnerability assessments to find any threats as weaknesses that might jeopardize the reliability of the generated QR codes. Evaluate the QR code generator's effectiveness in terms of speed as well as efficacy. Make the code more efficient so that QR code's render quickly without sacrificing quality or functionality. Retest previously approved functionalities to make sure that no unforseen problems have been brought about new code.

After putting any update or changes into practice make sure a quick response code generator still worked intended. Describe the testing procedures in detail, nothing the methodologies tools and any unique test cases used. Put together a through report outlining the testing outcomes, any problems found, and some action taken to fix them.

Make sure your readers are aware of the significance during through testing to ensure a dependable and durable QR code generator. To ensure that their users receive high quality products, encourage them to incorporate comparable testing practices into their development projects.