Hey friends, today in this blog, 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 Random Quote Generator in 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.
QR Code Generator in JavaScript [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, paste the following codes into your index.html file.
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<title>QR Code Generator in JavaScript | CodingNepal</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<h1>QR Code Generator</h1>
<p>Paste a url or enter text to create QR code</p>
<input type="text" spellcheck="false" placeholder="Enter text or url">
<button>Generate QR Code</button>
<img src="" alt="qr-code">
<script src="script.js"></script>
<!DOCTYPE html>
<!-- Coding By CodingNepal - youtube.com/codingnepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>QR Code Generator in JavaScript | CodingNepal</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>
Second, paste the following codes into your style.css file
/* Import Google Font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
font-family: 'Poppins', sans-serif;
transition: height 0.2s ease;
box-shadow: 0 10px 30px rgba(0,0,0,0.1);
.form :where(input, button){
box-shadow: 0 3px 6px rgba(0,0,0,0.13);
.form input::placeholder{
.wrapper.active .qr-code{
transition: opacity 0.5s 0.05s ease;
@media (max-width: 430px){
.form :where(input, button){
/* 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;
}
}
Last, paste the following codes into your script.js file.
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.