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
HTML: The structure of our QR Code Generator.
CSS: Styling for the application.
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
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.
Styling: The CSS styles the container, input field, button, and QR code display. It ensures that the application is visually appealing and user-friendly.- 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
generateQrfunction, which updates thesrcattribute of the image element with the generated QR code URL.The QR code box is then made visible by adding the
activeclass.
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
SOCIAL SHARE CARD GENERATOR