DEV Community

Cover image for QR Code Generator Using HTML, CSS, and JavaScript
Doxa Social
Doxa Social

Posted on

QR Code Generator Using HTML, CSS, and JavaScript

In this project, we will create a simple QR Code Generator using HTML, CSS, and JavaScript. This application allows users to input text or a URL and generate a corresponding QR code. We will also utilize Font Awesome icons for a better user interface and the GoQR.me API for generating the QR codes.

Features

  • User-friendly interface

  • Generates QR codes for any text or URL

  • Responsive design

  • Uses Font Awesome icons for enhanced visuals

Prerequisites

Before we start, make sure to include the Font Awesome CDN link in your HTML file. This is essential for using the icons in our project. Here’s the link you need to add in the <head> section of your HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
Enter fullscreen mode Exit fullscreen mode

Project Structure

  1. HTML: The structure of our QR Code Generator.

  2. CSS: Styling for the application.

  3. JavaScript: Functionality to generate the QR code.

HTML Code

Here’s the HTML code for the QR Code Generator:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Qr.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css">
    <title>Qr Code Generator</title>
</head>
<body>
 <div class="container">
    <h3 class="title"><i class="fa-solid fa-qrcode"></i> Qr Code Generator</h3>
    <div class="qr-code-box">
        <img src="" alt="">
    </div>
    <input type="text" class="user-input" placeholder="Enter Text or URL">
    <button class="generate-btn">Generate</button>
 </div>
<script src="Qr.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

CSS Code

Here’s the CSS code to style our application:

/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;600;700&display=swap');

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

body {
    background: #7289da;
    font-family: "Poppins", sans-serif;
}

.container {
    padding: 30px;
    width: 340px;
    background: #fff;
    border-radius: 7px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .2s;
}

.container .title {
    text-align: center;
    font-size: 16px;
}

.container .qr-code-box {
    height: 0px;
    width: 100%;
    margin: auto;
    margin-top: 0px;
    border-radius: 3px;
    transition: all .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container .qr-code-box.active {
    height: 180px;
    margin-top: 20px;
    border: 1px solid grey;
}

.container .user-input {
    all: unset;
    height: 45px;
    width: 95%;
    border: 1px solid #808080;
    padding-left: 15px;
    border-radius: 3px;
    margin-top: 23px;
}

.container .generate-btn {
    all: unset;
    height: 45px;
    width: 100%;
    background: #7289da;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 8px;
    border-radius: 3px;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript Code

Here’s the JavaScript code that handles the QR code generation:

let qrCodeBox = document.querySelector(".container .qr-code-box");
let qrCode = document.querySelector(".container .qr-code-box img");
let userInput = document.querySelector(".container .user-input");
let generateBtn = document.querySelector(".container .generate-btn");

let generateQr = () => {
    let url = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${userInput.value}`;
    qrCode.src = url;
    qrCodeBox.classList.add("active");
}

generateBtn.addEventListener("click", () => {
    if (userInput.value != "") {
        generateQr();
    }
});
Enter fullscreen mode Exit fullscreen mode

How It Works

  1. HTML Structure: The HTML file contains a container with a title, an input field for the user to enter text or a URL, and a button to generate the QR code. The QR code will be displayed in an image element.
  2. Styling: The CSS styles the container, input field, button, and QR code display. It ensures that the application is visually appealing and user-friendly.
  3. JavaScript Functionality:
  • The JavaScript code captures the user input and constructs a URL for the QR code API.

  • When the "Generate" button is clicked, it checks if the input field is not empty. If valid input is provided, it calls the generateQr function, which updates the src attribute of the image element with the generated QR code URL.

  • The QR code box is then made visible by adding the active class.

Live Demo

You can see the live demo of this QR Code Generator in my Codepen Page. ▼

Click on the link to see the live demo

Video Tutorial

For those who prefer a visual guide, a video tutorial is available that walks you through the entire process of building this QR Code Generator from scratch. Be sure to check it out for a more comprehensive understanding!

Conclusion

Creating a QR Code Generator using HTML, CSS, and JavaScript is a fun and educational project that demonstrates the power of web technologies. By utilizing the GoQR.me API, we can easily generate QR codes based on user input. This project can be expanded further by adding features such as saving the QR code image, customizing the QR code size, or even integrating it into a larger application.
Feel free to experiment with the code and make it your own! Happy coding!

For More Amazing Content Follow Me On Other Platforms

➤ Github
➤ Telegram
➤ X
➤ Codepen
➤ Premium Projects - Buymeacoffee.com
➤ Youtube

AWS Security LIVE!

Join us for AWS Security LIVE!

Discover the future of cloud security. Tune in live for trends, tips, and solutions from AWS and AWS Partners.

Learn More

Top comments (1)

Collapse
 
antogiela profile image
marialo

Check out my latest blog post on Particle Aurora Bloom, where I explore particle systems and their innovative uses in web design. Learn how I created this captivating effect from scratch, perfect for enhancing your projects. Dive into the world of web creativity with tips and tricks! Don’t miss out on discovering the connection to fun concepts like Monkey Mart!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay