Make QR Code Generator using JavaScript

Code armor, armor code, qr code generator, qr code generator using javascript, Source code of qr code generator

Source Code of QR Code Generator using JavaScript, HTML, CSS

QR Code Generator, Everyone knows about it. QR Code means quick response code. It is a machine-readable code that consists of black and white squares. Typically it is used for storing various information such as URLs, data, news, etc. As you saw on the internet, QR Code is beneficial in day-to-day tasks. You can send your secret information to others in QR form without data leaks.

Hey guys, in this article, we will see how to create our custom QR Code Generator using pure HTML, CSS, and JavaScript. This is a straightforward and promising project. In the previous article, I shared How to create a tic-tac-toe game using react and tailwindcss. If you want to improve your react js skills, check my previous article.

It is time to build a QR Code Generator using JavaScript, HTML, and CSS.

So, without any further delay, let's start.

Preview GitHub

Prerequisites

It is necessary to know what is required to create this project. This project does not require much JavaScript knowledge. Basic knowledge of JavaScript is sufficient for the project. But you should be familiar with topics like fetch API, error handling, ES6 features, etc.

Suggested for you:-

Project Structure

This project has a pretty straightforward structure. You just need to create a folder and name it such as "QR Code Generator" in our case. Now, make a file of HTML, CSS, and JavaScript like index.html, style.css, and main.js. Now, connect CSS and JavaScript files to the HTML files.

We are ready to go.

Adding HTML to the Project

HTML gives structure to our webpage. Here's a quick look at the HTML code. It is straightforward. Just copy the given code. And paste it into your HTML file. We will understand it later.

HTML Source Code

<!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">

  <title>QR Code Generator</title>

  <!-- HTML -->


  <!-- Custom Styles -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="container">

    <div class="generator">
      <h3 class="heading">QR Code Generator</h3>
      <div class="info_text">
        <h3>Generate QR Code</h3>
        <p>Enter url or text to generate qr code</p>
      </div>
      <textarea id="input_text" placeholder="Enter any text or url..."></textarea>
      <div id="generate_btn">Generate</div>
      <div id="image_div">
        <p id="temp_text">QR Code will display here</p>
        <img id="qr" src="BY DIKSHANT SINGH" alt="QR">
      </div>
      <div class="btn">
        <div id="getQR_btn">
          Get QR
        </div>
      </div>

      <div id="error_alert">
        <p>Fail to get QR</p>
      </div>

      <div id="success_alert">
        <p>Successfull</p>
      </div>

    </div>
  </div>
  <!-- Project -->
  <script src="main.js"></script>
</body>

</html>

Understanding the code

This is simple code. If you are familiar with HTML, you can understand it easily. Here a container is created. In the container, I make a QR Code generator. This generator div contains a heading, text area, QR Code display div, button to get QR code, and alert dive. I am sure the work of all elements is cleared by their names.

We created the structure of our project. Now it's time to add some styles to our project.

Adding Styles to the project

This generator has a UI/UX-based design. I used only pure CSS in this project. However, you are free to add your custom styles. But it looks beautiful by default.

Now copy the provided style properties and paste them into your CSS file.

CSS source code

:root {
  --bg_color: #fff;
  --generator_bg: #fff;
  --btn_color: hsla(221, 17%, 37%, 1);
  --text_color: hsla(221, 30%, 60%, 1);
  --border_color: hsla(221, 35%, 88%, 1);
  --transition: 1s;
}

body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  font-family: sans-serif;
  background: var(--bg_color);
  /* background: linear-gradient(135deg,#0CCDA3,#C1FCD3); */
}

.container {
  width: 100%;
  height: 100%;
  background: transparent;
  display: grid;
  place-items: center;
  overflow: hidden;
}

#error_alert,
#success_alert {
  position: absolute;
  bottom: -500%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15em;
  height: 2.2em;
  display: flex;
  place-items: center;
  justify-content: center;
  background: linear-gradient(-40deg, #ff2957, #ff7357);
  border-radius: 5px;
  box-sizing: border-box;
  color: #fff;
  font-weight: 500;
  transition: 1s;
  opacity: 1;
  z-index: 100;
}

#success_alert {
  background: linear-gradient(160deg, #d6ff7f, #0ccda3);
  z-index: 99;
}

#error_alert::before,
#success_alert::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-radius: 5px;
  background: linear-gradient(-40deg, #ff2957, #ff7357);
  filter: blur(10px);
}

#success_alert::before {
  background: linear-gradient(160deg, #d6ff7f, #0ccda3);
}

#error_alert p,
#success_alert p {
  position: absolute;
  color: #fff;
}

.generator {
  position: relative;
  width: 20em;
  height: auto;
  background: var(--generator_bg);
  border-radius: 5px;
  box-sizing: border-box;
  padding: 0 1em 1em 1em;
  box-shadow: hsla(221, 17%, 75%, 1) 0px 25px 50px -12px;
  transition: 1s;
}

.container .heading {
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  height: 2em;
  margin: 0 0 0.8em 0;
  border-radius: 0 0 10px 10px;
  background: linear-gradient(160deg, #d6ff7f, #0ccda3);
  color: var(--generator_bg);
  display: grid;
  place-items: center;
}

.info_text {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 0.5em;
  padding: 0.5em;
}

.info_text h3 {
  color: #d6ff7f;
  margin: 0 0 0.3em 0;
  background: linear-gradient(160deg, #d6ff7f, #0ccda3);
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.info_text p {
  color: var(--text_color);
  margin: 0;
}

#input_text {
  width: 100%;
  min-height: 5rem;
  resize: vertical;
  outline: none;
  padding: 0.5em;
  box-sizing: border-box;
  color: var(--text_color);
  border: 1px solid var(--border_color);
  border-radius: 2px;
}

#input_text::placeholder {
  color: var(--text_color);
}

#generate_btn,
#getQR_btn {
  width: 100%;
  height: 2.2em;
  margin: 0.5em 0;
  background: var(--btn_color);
  display: grid;
  place-items: center;
  border-radius: 2px;
  color: var(--generator_bg);
  font-weight: 500;
  font-size: 1.1em;
  letter-spacing: 1px;
  box-shadow: border-box;
}

#image_div {
  width: 100%;
  height: 3.5em;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  padding: 1em;
  margin-top: 0.5em;
  border: 1px solid var(--border_color);
  border-radius: 2px;
  transition: var(--transition);
  overflow: hidden;
}

#image_div #temp_text {
  margin: 0;
  color: var(--text_color);
  text-align: left;
}

#qr {
  opacity: 0;
}

#getQR_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #d6ff7f;
  background: linear-gradient(160deg, #d6ff7f, #0ccda3);
  background-clip: text;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  width: 100%;
  height: 100%;
}

.btn {
  position: relative;
  width: 100%;
  height: 0;
  outline: none;
  margin: 0.3em 0;
  display: grid;
  place-items: center;
  border-radius: 2px;
  font-weight: 500;
  letter-spacing: 1px;
  box-shadow: border-box;
  background: linear-gradient(160deg, #d6ff7f, #0ccda3);
  opacity: 0;
  transition: 1s;
}

.btn::before {
  content: "";
  width: 98%;
  height: 90%;
  background: var(--bg_color);
}

.box:before {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(162deg, #f89b29 0%, #ff0f30 72%);
  transform: translate3d(0px, 0px, 0) scale(1.12);
  filter: blur(20px);
  opacity: var(0.7);
  transition: opacity 0.3s;
  border-radius: inherit;
}

.box::after {
  content: "";
  z-index: -1;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: inherit;
  border-radius: inherit;
}

Understanding the code

There are no tough-style properties used in the project. Just try these properties yourself. You will understand them easily.

Our project has a great look at this time.

Now, let's add scripts to it.

Adding logic to the project

JavaScript is the most essential part of this project. HTML and CSS give it a look. But JavaScript gives it the brain to process requests. Add the provided script to your JavaScript file.
JavaScript source code

window.addEventListener("load", () => {
  let input_text = document.getElementById("input_text");
  let generate_btn = document.getElementById("generate_btn");
  let qr = document.getElementById("qr");
  let image_div = document.getElementById("image_div");
  let temp_text = document.getElementById("temp_text");
  let btn = document.querySelector(".btn");
  let getQR_btn = document.getElementById("getQR_btn");
  let error_alert = document.getElementById("error_alert");
  let success_alert = document.getElementById("success_alert");

  let generate_qr = () => {
    let text = input_text.value;
    if (!(text == "")) {
      temp_text.remove();

      qr.src = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${text}&color=434C60`;
      image_div.style.height = `11.5em`;
      qr.style.opacity = `1`;
      btn.style.opacity = `1`;
      btn.style.height = `2.2em`;
    } else {
      input_text.placeholder = `Don't Leave it Blank!!!`;

      //  console.log(input_text.placeholder);
    }
  };

  generate_btn.addEventListener("click", generate_qr);


  getQR_btn.addEventListener("click", () => {
    //console.log(qr.src);
    getQR_btn.innerText = "Getting Ready...";
    fetch_file(qr.src);
  });

  function fetch_file(url) {
    fetch(url)
      .then((res) => res.blob())
      .then((file) => {
        let tempUrl = URL.createObjectURL(file);
        let aTag = document.createElement("a");
        aTag.href = tempUrl;
        aTag.download = `qr`;
        document.body.appendChild(aTag);
        aTag.click();
        URL.revokeObjectURL(tempUrl);
        getQR_btn.innerText = `Get QR`;
        success_alert.style.bottom = "25%";
        success_alert.style.opacity = "1";
        setTimeout(() => {
          success_alert.style.bottom = "-100%";
          success_alert.style.opacity = "0";
        }, 3000);
        aTag.remove();
        //console.log(tempUrl);
      })
      .catch(() => {
        error_alert.style.bottom = "25%";
        error_alert.style.opacity = "1";
        setTimeout(() => {
          getQR_btn.innerText = `Get QR`;
          error_alert.style.bottom = "-100%";
          error_alert.style.opacity = "0";
        }, 3000);
      });
  }

  console.log("Ready To Start. . .");
});

Understanding the code

All logic of the QR Code Generator wrapped in a function calls after the loading window. Then some elements are called by their id and classes. With two functions, it works completely. The first one generates a QR Code. Using the second function, you will get the QR Code.

Hurray! All set.

Now, enjoy the QR Code Generator.

Conclusion

This project is easy but a creative innovation same time. I'm sure you learned something new from this project. Now you can send secret messages to your...

I enjoy this project a lot. If you do so, please share it with your friends. Mention your valuable comments in the comment section. If you have queries, tell us. We try our best to tackle them.

Thank you!

Code Armor

Make QR Code Generator using JavaScript

Source Code of QR Code Generator using JavaScript, HTML, CSS

Prerequisites

Suggested for you:-

Project Structure

Adding HTML to the Project

HTML Source Code

Understanding the code

Adding Styles to the project

CSS source code

Understanding the code

Adding logic to the project

Understanding the code

Conclusion

About the Author

إرسال تعليق

3d Website with Three.js + CDN example

How to create a react app using Vite js and tailwind CSS

Build a React JS Website with Tailwind css

Dynamic React image gallery with tailwind

Code Armor