- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Environmental Science
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- articles and Answers
- Effective Resume Writing
- HR Interview articles
- Computer Glossary
- Who is Who
how to create a QR Code Generator in HTML CSS & JavaScript.
Hey Everyone, today in this tutorials, you’ll learn how to create a QR Code Generator in HTML CSS & JavaScript. In the earlier blog, I have shared how to Create A Todo List App in HTML CSS & JavaScript and now it’s time to make a QR Code Generator in JavaScript.
QR (Quick Response) codes are capable of storing lots of data, and users can easily access the information by scanning the QR code. In my QR Code Generator app, users can enter a text or URL to generate a QR code for it. It is a QR code generator app, not a QR code scanner.
If you’re feeling difficulty to understand what I’m saying or what this QR code generator looks like then you can watch a video tutorial of this QR code generator in JavaScript.
QR Code Generator in JavaScript with Source Codes
To create QR Code Generator in JavaScript. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the given codes into your file. You can also download the source code files of this QR Code Generator App from the below download button. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Remember, you’ve to create a file with .html extension.
<!DOCTYPE html>
<!-- Coding By Codegyan - www.codegyan.in-->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>QR Code Generator in JavaScript | Codegyan</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</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>Generate QR Code</button>
</div>
<div class="qr-code">
<img src="" alt="qr-code">
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
Second, create a CSS file with the name style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.
/* Import Google Font - Poppins */
@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: #3498DB;
justify-content: center;
}
.wrapper{
height: 265px;
max-width: 410px;
background: #fff;
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: 530px;
}
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: #3498DB;
}
.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;
}
@media (max-width: 430px){
.wrapper{
height: 255px;
padding: 16px 20px;
}
.wrapper.active{
height: 510px;
}
header p{
color: #696969;
}
.form :where(input, button){
height: 52px;
}
.qr-code img{
width: 160px;
}
}
JavaScript
Last, create a JavaScript file with the name script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.
const wrapper = document.querySelector(".wrapper"),
qrInput = wrapper.querySelector(".form input"),
generateBtn = wrapper.querySelector(".form button"),
qrImg = wrapper.querySelector(".qr-code img");
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=200x200&data=${qrValue}`;
qrImg.addEventListener("load", () => {
wrapper.classList.add("active");
generateBtn.innerText = "Generate QR Code";
});
});
qrInput.addEventListener("keyup", () => {
if(!qrInput.value.trim()) {
wrapper.classList.remove("active");
preValue = "";
}
});
That’s all, now you’ve successfully created a QR Code Generator in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a .zip file will be downloaded then you’ve to extract it.
- Related Questions & Answers
- Create Animated Minions Using HTML & CSS
- Facebook Wow Reaction Emoji in HTML & CSS
- How to create a Facebook Post Box in HTML CSS & JavaScript
- Slicing Design Newsletter Subcribe Modal
- Create Beautiful Login Page Using HTML and JS
- DA PA Kya Hai ? How to Boost It in Hindi
- Preview Image Before Upload Using JavaScript
- Create Page Reload Button Using JavaScript
- How to Add Scroll Animations to a Page with JavaScript’s Intersection Observer API
- Build A Currency Converter App in HTML CSS & JavaScript
- Create a simple calculator using HTML, CSS and Javascript
- Santa Animation With HTML & CSS
- How To Create Animated Panda Login Page using HTML & JS
- How To Create New Year Countdown using HTML & Javascript
- Which is default HTML5 skeleton ?
- Download YouTube Video Thumbnail in PHP & JavaScript
Advertisements
ads