Looking for a simple way to create QR codes directly on your website? This project shows you how to build a QR Code Generator using HTML, CSS, and JavaScript.
With this tool, you can:
-
✅ Enter any text or URL
-
✅ Instantly generate a QR code
-
✅ Copy or scan the code right away
-
✅ Use it on both desktop and mobile
Why build a QR Code Generator?
QR codes are everywhere today — from payments to event tickets. By learning how to make one with JavaScript, you’ll not only improve your coding skills but also create a real-world project you can showcase in your portfolio.
This project is fully customizable — change the colors, add styles, or integrate it into your own web app.
Do check out the video tutorial of this project on my YouTube channel and do subscribe to support me! Thanks!
Here’s the HTML/CSS/JS code for the project 👇
<!-- Created by CodingPorium,2025. Visit https://youtube.com/c/CodingPorium for more tutorials with free source code --> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>QR Code Generator | CodingPorium</title> <style> /*Import Poppins Font*/ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap'); body{ font-family:poppins,sans-serif; background: #2bd695; display:flex; flex-direction:column; align-items:center; padding:20px; } h1{ color:white; } .container{ background: white; padding:30px; border-radius:8px; box-shadow: 0 2px 6px rgba(0,0,0,0.1); max-width: 400px; width: 100%; text-align: center; } input,select,button{ font-family: poppins; padding:8px; margin:5px 0; width:100%; border:1px solid #ccc; border-radius:4px; font-size:14px; } button{ font-family:poppins; background:#2bd695; color:white; border:none; cursor:pointer; transition:0.3s; } button:hover{ opacity:0.8; } #qrcode{ margin-top:20px; } </style> </head> <body> <h1>QR Code Generator</h1> <div class="container"> Text or URL: <input type="text" id="text" placeholder="Enter text or URL" /> Size (in px): <input type="number" id="size" placeholder="Size in px" value="200" /> <select id="ec"> <option value="L">Low</option> <option value="M">Medium</option> <option value="Q">Quartile</option> <option value="H">High</option> </select> Colour: <input type="color" id="fg" value="#000000"> Background Colour: <input type="color" id="bg" value="#ffffff"> <button id="generate">Generate</button> <button id="download" style="background:royalblue;">Download PNG</button> <div id="qrcode"></div> </div> <!--get this link from our website in description box--> <script src="https://cdn.jsdelivr.net/npm/qrcode/build/qrcode.min.js"></script> <script> const textInput = document.getElementById('text'); const sizeInput = document.getElementById('size'); const ecSelect = document.getElementById('ec'); const fgInput = document.getElementById('fg'); const bgInput = document.getElementById('bg'); const generateBtn = document.getElementById('generate'); const downloadBtn = document.getElementById('download'); const qrContainer = document.getElementById('qrcode'); let currentDataURL = ''; generateBtn.addEventListener('click', () => { const text = textInput.value.trim(); if(!text) return alert('Please enter a text or URL!'); const options = { text: text, width: parseInt(sizeInput.value) || 200, margin:2, color:{ dark : fgInput.value, light : bgInput.value }, errorCorrectionLevel : ecSelect.value }; QRCode.toDataURL(text, options) .then(url => { qrContainer.innerHTML = `<img src="${url}" alt="QR Code">`; currentDataURL = url; }) .catch(err => console.error(err)); }); downloadBtn.addEventListener('click',()=>{ if (!currentDataURL) return alert('Generate a QR Code first!'); const a = document.createElement('a'); a.href=currentDataURL; a.download = 'qrcode.png'; a.click(); }); </script> </body> </html>
✨ With just a few lines of code, you’ve built your own QR Code Generator web app! Keep practicing and soon you’ll be building bigger and more powerful projects.
Thanks for reading, do subscribe our YouTube channel to support us in providing more awesome projects with free source code!
Post a Comment