🚀 Build a QR Code Generator Using HTML, CSS & JavaScript
QR Codes are everywhere — websites, apps, menus, payments, and more. In this tutorial, you will learn how to create a simple and powerful QR Code Generator using HTML, CSS, and JavaScript.
This is a perfect beginner-friendly project and a great addition to your portfolio. We are also using a lightweight library called qrcodejs:
CDN: https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.min.js
✅ Features
- Generate QR codes instantly
- Accepts text or URL
- Press Enter to generate
- Download QR code as PNG
- Modern UI with smooth design
📌 Full Source Code (HTML, CSS & JavaScript)
📄 HTML Code
<!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="style.css">
<title>QR Code Generator</title>
</head>
<body>
<div class="container">
<h1>QR Code Generator</h1>
<input type="text" id="text" placeholder="Enter text or URL">
<button id="generateQR">Generate QR</button>
<div id="qrBox"></div>
<button id="downloadQR">Download QR</button>
</div>
<!-- QR Code Library -->
<script src="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@master/qrcode.min.js"></script>
<script src="script.js"></script>
</body>
</html>
🎨 CSS Code
*{
padding:0;
margin:0;
box-sizing:border-box;
font-family:Arial, Helvetica, sans-serif;
}
body{
display:flex;
justify-content:center;
align-items:center;
height:100vh;
background:linear-gradient(225deg, rgb(0, 60, 84), rgb(81,47,247), rgb(14,141,132));
}
.container{
background-color:rgba(0,234,255,0.242);
padding:20px;
border-radius:20px;
color:white;
display:flex;
flex-direction:column;
gap:10px;
transition:box-shadow 0.2s;
}
.container:hover{
box-shadow:0 0 30px rgba(0,0,0,0.4);
}
#text{
width:100%;
padding:12px;
border-radius:10px;
border:none;
background-color:rgb(0,44,44);
color:white;
}
#text::placeholder{
color:rgb(75,209,221);
}
#qrBox{
width:230px;
height:230px;
display:flex;
justify-content:center;
align-items:center;
background:white;
border-radius:10px;
}
button{
width:70%;
padding:8px;
border:none;
border-radius:10px;
background-color:cyan;
color:rgb(2,57,62);
font-weight:bold;
transition:0.2s;
}
button:hover{
transform:scale(1.04);
}
button:active{
background-color:rgb(75,237,237);
transform:scale(1);
}
⚙️ JavaScript Code
let qr;
let text=document.getElementById("text");
let generateQr=document.getElementById("generateQR");
let qrBox=document.getElementById("qrBox");
let downloadQr=document.getElementById("downloadQR");
generateQr.addEventListener("click", QR);
text.addEventListener("keyup",(e)=>{
if(e.key==="Enter"){ QR(); }
});
function QR(){
let value=text.value;
if(value.trim()){
qrBox.innerHTML="";
qr = new QRCode(qrBox, { text:value, width:200, height:200 });
}
}
downloadQr.addEventListener("click",()=>{
if(qr){
let img=document.querySelector("#qrBox img");
let link=document.createElement("a");
link.href=img.src;
link.download="qr_code.png";
link.click();
}
});
🎉 Final Thoughts
Congratulations! You have successfully built a complete QR Code Generator using HTML, CSS & JavaScript. This is a great beginner project that you can add to your GitHub or use as part of your portfolio.
If you want more beginner-friendly projects, explore the Beginner Web Projects category on SmartTechTip.
.png)
