Creating a QR Code Generator using HTML, CSS, and JavaScript is an engaging and practical project.

QR Code Generator Using HTML, CSS, and JavaScript

Byjvcodes

The use of QR codes has become essential for development or updating information sharing and promotion methods ultimately for clients and everyday users. Creating a QR Code Generator using HTML, CSS, and JavaScript is an engaging and practical project.

This post offers you all the needed help and free sample code for implementing a QR code generator and downloads.

GitHub Source: Generate and Download QR Code

Features

The source code for the QR Code Generator Using HTML, CSS, and JavaScript comes packed with the following features:

  • Generate QR Code: You can easily create a QR code by simply typing any kind of text or a URL.
  • Download QR Code: Right click to the displayed QR Code and you can instantly save the PNG image on your device.
  • Easy to Customize: The code is easily customizable according to one’s requirements.
  • Responsive: The design is fully responsive, which means that it’s freely adapting to any screen resolution available to a user.
  • Compatibility: Fully compatible with all modern browsers without any problems.
  • Clean Code: The code is clean, well formatted, very easy to read and modify by any programmer.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Responsive QR Code Generator & Downloader

Follow these simple steps to build your own QR Code Generator Using HTML, CSS, and JavaScript:

  • Create Project Folder: Create a folder to contain the files you will be working on your project.
  • Create index.html: Create the HTML file for the structure of the QR code generator.
  • Create style.css: Develop CSS code to create and style QR code generator.
  • Create script.js: Create JavaScript file to generate responsive QR code, and the download feature.
  • Copy & Paste the Code: Take advantage of the free source code given below so that you do not have to sweat much.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- ----- www.jvcodes.com ----- -->
  <meta charset="utf-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR Code Generator | JV Codes</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="wrapper">
      <header>
        <h1>QR Code Generator</h1>
        <p>Paste a URL or enter text to create QR code</p>
      </header>
      <div class="form">
        <input type="text" spellcheck="false" placeholder="Enter text or url">
        <button id="generate-btn">Generate QR Code</button>
      </div>
      <div class="qr-code">
        <img src="" alt="qr-code" id="qr-img">
      </div>
      <div class="download-btn hidden">
        <button id="download-btn">Download QR Code</button>
      </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

Here is the complete code for style.css file to style the QR Code Generator:

/* www.jvcodes.com */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

body {
  display: flex;
  padding: 0 10px;
  min-height: 100vh;
  align-items: center;
  background: #061727;
  justify-content: center;
}

.wrapper {
  height: 265px;
  max-width: 410px;
  background: #f5f5f5;
  border-radius: 7px;
  padding: 20px 25px 0;
  transition: height 0.2s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.wrapper.active {
  height: 580px;
}

header h1 {
  font-size: 21px;
  font-weight: 500;
}

header p {
  margin-top: 5px;
  color: #575757;
  font-size: 16px;
}

.wrapper .form {
  margin: 20px 0 25px;
}

.form :where(input, button) {
  width: 100%;
  height: 55px;
  border: none;
  outline: none;
  border-radius: 5px;
  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: 17px;
  background: #aa3101;
}

.qr-code {
  opacity: 0;
  display: flex;
  padding: 33px 0;
  border-radius: 5px;
  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;
}

.download-btn {
  display: none;
  text-align: center;
  margin-top: 15px;
}

.wrapper.active .download-btn {
  display: block;
}

.download-btn button {
  width: 100%;
  height: 55px;
  border: none;
  outline: none;
  border-radius: 5px;
  color: #fff;
  cursor: pointer;
  font-size: 17px;
  background: #aa3101;
  transition: 0.1s ease;
}

.download-btn button:hover {
  background: #b93500;
}

@media (max-width: 430px) {
  .wrapper {
    height: 255px;
    padding: 16px 20px;
  }

  .wrapper.active {
    height: 550px;
  }

  header p {
    color: #696969;
  }

  .form :where(input, button) {
    height: 52px;
  }

  .qr-code img {
    width: 160px;
  }
}

JavaScript

Here is the complete code for script.js file to function the QR Code Generator:

const wrapper = document.querySelector(".wrapper"),
      qrInput = wrapper.querySelector(".form input"),
      generateBtn = wrapper.querySelector(".form button"),
      qrImg = wrapper.querySelector(".qr-code img");

// Check if the button already exists, if not create it
let downloadBtn = wrapper.querySelector(".download-btn");
if (!downloadBtn) {
    downloadBtn = document.createElement("button");
    downloadBtn.innerText = "Download QR Code";
    downloadBtn.className = "download-btn";
    wrapper.appendChild(downloadBtn); // Append to the wrapper
    downloadBtn.style.display = "none"; // Initially hide the button
}

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=320x320&data=${qrValue}`;
    qrImg.addEventListener("load", () => {
        wrapper.classList.add("active");
        generateBtn.innerText = "Generate QR Code";
        downloadBtn.style.display = "block"; // Show the download button
    });
});

qrInput.addEventListener("keyup", () => {
    if (!qrInput.value.trim()) {
        wrapper.classList.remove("active");
        preValue = "";
        downloadBtn.style.display = "none"; // Hide the download button if input is cleared
    }
});

// Add functionality to the download button
downloadBtn.addEventListener("click", () => {
    const link = document.createElement("a");
    link.href = qrImg.src; // Use the QR code image URL
    link.download = "qr-code.png"; // Set the default filename
    link.click(); // Trigger the download
});

Download Source Code

By clicking the button below, you will be able to download the full source code of the QR Code Generator. The source code is free of any copyright so you can use it for your projects without any limitations.

Download Source Code

Conclusion

The QR Code Generator Using HTML, CSS, and JavaScript is an application that is quite effective in use and can be easily embedded into websites or personal practical projects. Apply this code to your site to improve it and add a new and fresh feature for your visitors.

Always ensure that you use the JV Source Codes by providing a link to this article. Don’t forget to click on subscribe for more helpful projects and if you haven’t following the instructions keenly, you can check the comments section for help, I shall be glad to assist.

Download JV Source Codes

Similar Posts

Navigation Bar With Page Scroll To Every Section
| | |

Navigation Bar With Page Scroll To Every Section in HTML and CSS

Do you want a clean and stylish website with a easy navigation between pages? A cool scroll navigation bar will help you make a great experience for your site. In this article, you’ll find out how to make a Navigation Bar with Page Scroll To Every Section completely free of charge. Here is a wonderful…

Navigation Menu Hover Animation
| | |

Navigation Menu Hover Animation in HTML and CSS

A navigation menu is one of the most important elements on any website. Navigation menus assist users in getting around various sections and pages that are in the website. Hover animations are another means through which you can enrich the user experience. The Navigation Menu Hover Animation in HTML, CSS enhances the look of any…

Responsive Masonry Image Gallery Source Code
| | |

Responsive Masonry Image Gallery in HTML and CSS

Would you like to present your pictures in an innovative and stylish approach? It would be easy to find a solution in the form of the A Responsive Masonry Image Gallery in HTML, CSS. This article gives out free source codes to create a masonry image gallery. Whether you are creating an entirely new website,…

Sidebar Menu with Sliding Submenu
| | |

Sidebar Menu with Sliding Submenu Using HTML, CSS and JavaScript

If you are developing a web project where navigation can be divided into several sections a sidebar menu with sliding submenu is perfect. Such a menu makes a way to develop proper structure of the site, and the users will be able to find what they want. Sliding submenus enable you to hide extra features…

Leave a Reply

Your email address will not be published. Required fields are marked *