Lädt...


🔧 QR Code Generator Using HTML, CSS, and JavaScript


Nachrichtenbereich: 🔧 Programmierung
🔗 Quelle: dev.to

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

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>

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;
}

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();
    }
});

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

...

🔧 Creating an Advanced QR Code Generator Using HTML, CSS, and JavaScript


📈 33.92 Punkte
🔧 Programmierung

🔧 How to Build a QR Code Generator with API Using HTML, CSS, and JavaScript


📈 33.92 Punkte
🔧 Programmierung

🔧 QR Code Generator Using HTML, CSS, and JavaScript


📈 33.92 Punkte
🔧 Programmierung

🔧 Introduction of CSS, What is CSS, Why we use CSS and How CSS describe the HTML elements


📈 33.11 Punkte
🔧 Programmierung

🔧 Building a Random Quote Generator with API Using HTML, CSS, and JavaScript


📈 30.77 Punkte
🔧 Programmierung

🔧 Build a Tic Tac Toe Game using HTML, CSS, JavaScript, Tailwind CSS and Canvas Confetti


📈 28.46 Punkte
🔧 Programmierung

🔧 Secure Password Generator with HTML, CSS, and JavaScript


📈 26.88 Punkte
🔧 Programmierung

🔧 Build a Random Quote Generator with HTML, CSS, and JavaScript


📈 26.88 Punkte
🔧 Programmierung

🔧 Building the Quote Generator Web App with HTML, CSS, and JavaScript


📈 26.88 Punkte
🔧 Programmierung

🔧 OTP Generator with Verification in HTML CSS and JavaScript


📈 26.88 Punkte
🔧 Programmierung

🔧 Hands-On Guide: Building a Calendar Generator with HTML, CSS, and JavaScript for Beginners


📈 26.88 Punkte
🔧 Programmierung

🔧 How to make a clock using html , JavaScript and CSS and deploy it using firebase


📈 26.63 Punkte
🔧 Programmierung

🔧 Cursor Trail using html css js #virals #js #html #css #work


📈 26.01 Punkte
🔧 Programmierung

🔧 How To Create a Calculator Using HTML CSS & JavaScript | Simple Calculator in JavaScript


📈 25.64 Punkte
🔧 Programmierung

🔧 How to create a tiktok-style page generator using pure CSS / JavaScript


📈 25.43 Punkte
🔧 Programmierung

🔧 Code for maze game using the html css and javascript


📈 24.66 Punkte
🔧 Programmierung

🔧 Glassmorphism 3d Cards illusion using html css and javascript code


📈 24.66 Punkte
🔧 Programmierung

🔧 How to Create a QR Code Reader or Scanner with API Using HTML, CSS, and JavaScript


📈 24.66 Punkte
🔧 Programmierung

🔧 Latterns animation using the html css and javascript code


📈 24.66 Punkte
🔧 Programmierung

🔧 Responsive Admin Dashboard Page HTML, CSS And Javascript - CSS Admin Template


📈 24.57 Punkte
🔧 Programmierung

🕵️ HTML and Javascript Teacher - Code examples in HTML and Javascript.


📈 24.52 Punkte
🕵️ Hacking

🔧 Create Stunning Shadows With CSS Box Shadow | CSS Utility Generator Tutorial


📈 23.13 Punkte
🔧 Programmierung

🔧 Complete Website using HTML And CSS | CSS Project


📈 23.12 Punkte
🔧 Programmierung

🔧 A practical way to test HTML and CSS in real-time using only CSS.


📈 23.12 Punkte
🔧 Programmierung

🔧 A practical way to test HTML and CSS in real-time using only CSS.


📈 23.12 Punkte
🔧 Programmierung

🔧 Sun and Moon animation using html css and javascript


📈 22.75 Punkte
🔧 Programmierung

🔧 Drag and Drop Ui using html css and javascript https://www.instagram.com/webstreet_code/


📈 22.75 Punkte
🔧 Programmierung

🔧 How to Create a Pictures and Videos Search Engine with Download Using API, HTML, CSS, and JavaScript


📈 22.75 Punkte
🔧 Programmierung

🔧 How to create navigation menu with HTML CSS step by step | web design tutorial | HTML CSS tutorial


📈 22.12 Punkte
🔧 Programmierung

🔧 CSS Grid: Moving From CSS Frameworks To CSS Grid (2018 and beyond)


📈 22.04 Punkte
🔧 Programmierung

🔧 A BRIEF REVIEW OF CSS CASCADING, CSS SELECTORS and CSS SPECIFICITY.


📈 22.04 Punkte
🔧 Programmierung

🔧 Best Practices for Writing Clean and Maintainable Html, Css, and JavaScript Code


📈 22 Punkte
🔧 Programmierung

🔧 How To Build a QR Code Generator App Using Vanilla JavaScript


📈 21.63 Punkte
🔧 Programmierung

🔧 How To Make A Music Player Using HTML CSS And JavaScript


📈 21.52 Punkte
🔧 Programmierung

matomo