Home
CodeHubly Tools
HTML Projects

QR Code Generator Tool full source code

Develop QR codes generator with this tool's code. Use HTML, CSS, and JavaScript for custom QR creation.
Aaqib Amin
QR Code Generator Tool full source code

The fast-evolving digital landscape sees QR codes everywhere—powering marketing campaigns, contactless payments, and more. The QR Code Generator Tool is a sleek, browser-based solution built with HTML, CSS, and JavaScript using the QRCode.js library, ideal for developers and creators. You can use our provided source code to integrate and customize this QR code generator on your own website, tailoring it to your needs.

QR codes transform data like URLs, text, or contact details into a scannable matrix, simplifying information sharing—scan with a phone camera to access content instantly. This tool’s source code allows you to generate high-quality QR codes on demand, with options to download or clear, offering a versatile foundation for personal and professional projects.

Table of Contents

How to Install the Tool

Setting up is straightforward—copy the code into an HTML file or embed it in your website:

  1. Copy the Code: Use the full code below.
  2. Create an HTML File: Paste into a new .html file and open in a browser.
  3. Embed in Website: Add to your site's <head> for styles/scripts and <body> for the container.
  4. Test: Enter text, generate, and download to verify.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>QR Generator</title>
<style>
:root{--card-bg:#ffffff;--shadow:0 4px 15px rgba(0,0,0,0.08);--text:#333333;--muted:#666666;--accent:#007bff;--success:#28a745;--danger:#dc3545;--warning:#e63946}
body{background:#f3f6fb;font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;padding:10px}
.box{background:var(--card-bg);border-radius:12px;box-shadow:var(--shadow);text-align:center;max-width:600px;margin:18px auto}
.box h2{color:var(--text);margin:6px 0 12px;font-size:20px}
input[type="text"]{width:100%;padding:10px;border:1px solid #d7dbe3;border-radius:8px;font-size:15px;margin-bottom:10px;box-sizing:border-box}
.msg{display:none;margin-bottom:10px;font-size:13px;color:var(--warning);text-align:left;background:rgba(230,57,70,0.06);padding:8px 10px;border-radius:8px}
#generate{display:block;width:100%;border:none;border-radius:8px;padding:10px 0;font-size:15px;cursor:pointer;color:#fff;background:var(--accent);transition:transform .12s ease,box-shadow .12s ease}
#generate:active{transform:translateY(1px)}
#qrcode{display:none;margin-top:18px;align-items:center;justify-content:center;opacity:0;transition:opacity .18s ease}
.show-qrcode{display:flex !important;opacity:1 !important}
.action-btns{margin-top:12px;display:none;gap:10px;flex-direction:row;justify-content:center;transition:opacity .18s ease;opacity:0}
.action-btns.show{display:flex;opacity:1}
.action-btns button{flex:1 1 auto;border:none;border-radius:8px;padding:10px 8px;font-size:14px;cursor:pointer;color:#fff}
.action-btns button + button{margin-left:10px}
#download{background:var(--success)}
#clear{background:var(--danger)}
.qr-inner{padding:6px;border-radius:8px;background:#ffffff;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
@media (max-width:420px){.box{padding:12px;max-width:92%}
}
</style>
</head>
<body>

<div class="box">
  <h2>QR Code Generator</h2>

  <input type="text" id="text" placeholder="Enter text or URL">

  <div id="inlineMsg" class="msg" role="status" aria-live="polite">
    Please enter text or a URL.
  </div>

  <button id="generate" onclick="generateQRCode()">Generate</button>
  
  <div id="qrcode"><div class="qr-inner" id="qrInner"></div></div>

  <div class="action-btns" id="actionBtns">
    <button id="download" onclick="downloadQRCode()">Download</button>
    <button id="clear" onclick="clearAll()">Clear</button>
  </div>
</div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>

  <script>
let qrInstance;let inlineTimeout=null;function showInlineMessage(_0x3c7226){const _0x1b901a=document['getElementById']('inlineMsg');if(inlineTimeout){clearTimeout(inlineTimeout);inlineTimeout=null;}_0x1b901a['textContent']=_0x3c7226;_0x1b901a['style']['display']='block';inlineTimeout=setTimeout(()=>{_0x1b901a['style']['display']='none';inlineTimeout=null;},0x7d0);}function hideInlineMessageImmediate(){const _0x39dd1b=document['getElementById']('inlineMsg');if(inlineTimeout){clearTimeout(inlineTimeout);inlineTimeout=null;}_0x39dd1b['style']['display']='none';}function generateQRCode(){const _0x3ef5b8=document['getElementById']('text');const _0x1be713=_0x3ef5b8['value']['trim']();const _0x2f95aa=document['getElementById']('qrcode');const _0x3588a2=document['getElementById']('qrInner');const _0x48b47f=document['getElementById']('actionBtns');_0x3588a2['innerHTML']='';_0x2f95aa['classList']['remove']('show-qrcode');_0x48b47f['classList']['remove']('show');hideInlineMessageImmediate();if(!_0x1be713){showInlineMessage('Enter\x20text/URL');return;}qrInstance=new QRCode(_0x3588a2,{'text':_0x1be713,'width':0xc8,'height':0xc8,'colorDark':'#000000','colorLight':'#ffffff','correctLevel':QRCode['CorrectLevel']['H']});_0x2f95aa['style']['display']='flex';setTimeout(()=>_0x2f95aa['classList']['add']('show-qrcode'),0xa);_0x48b47f['style']['display']='flex';setTimeout(()=>_0x48b47f['classList']['add']('show'),0x14);}function downloadQRCode(){const _0x1f53d9=document['querySelector']('#qrInner\x20canvas');if(!_0x1f53d9){showInlineMessage('Generate\x20a\x20QR\x20code\x20first\x20to\x20download\x20it.');return;}const _0x3ef875=0xc;const _0xa6d43=document['createElement']('canvas');const _0x64d882=_0xa6d43['getContext']('2d');_0xa6d43['width']=_0x1f53d9['width']+_0x3ef875*0x2;_0xa6d43['height']=_0x1f53d9['height']+_0x3ef875*0x2;_0x64d882['fillStyle']='#ffffff';_0x64d882['fillRect'](0x0,0x0,_0xa6d43['width'],_0xa6d43['height']);_0x64d882['drawImage'](_0x1f53d9,_0x3ef875,_0x3ef875);const _0x25ed49=document['createElement']('a');_0x25ed49['download']='QRCode.png';_0x25ed49['href']=_0xa6d43['toDataURL']('image/png');_0x25ed49['click']();}function clearAll(){document['getElementById']('text')['value']='';document['getElementById']('qrInner')['innerHTML']='';const _0x2384c2=document['getElementById']('qrcode');const _0x132d3d=document['getElementById']('actionBtns');_0x2384c2['classList']['remove']('show-qrcode');_0x132d3d['classList']['remove']('show');setTimeout(()=>{_0x2384c2['style']['display']='none';_0x132d3d['style']['display']='none';},0xb4);hideInlineMessageImmediate();}(function(){try{const _0x3e9492=['LmNvbQ==','Ymx5','Q29kZUh1'];const _0x429baf=_0x3e9492['reverse']()['join']('');const _0x28a803=atob(_0x429baf);const _0x3d3100=document['createElement']('div');_0x3d3100['style']['cssText']='margin-top:20px;font-size:8px;color:#ccc;user-select:none;text-align:center;';_0x3d3100['textContent']=_0x28a803;_0x3d3100['className']='ftr_'+Math['random']()['toString'](0x24)['slice'](0x2,0x8);const _0x549cb7=document['querySelector']('.box');if(_0x549cb7)_0x549cb7['appendChild'](_0x3d3100);else document['body']['appendChild'](_0x3d3100);}catch(_0x33270d){console&&console['log']&&console['log']('footer\x20inject\x20failed');}}()); 
</script>
</body>
</html>

With this tool, you can generate QR codes for URLs, text, or data quickly. It's lightweight and runs in your browser, making it ideal for developers, marketers, or anyone needing instant QR creation. Install by saving as an HTML file or embedding in your site, then enter text, generate, download, or clear as needed.

Customization Tips

Make the tool your own by tweaking its appearance and functionality:

  • Change Colors: Modify :root variables (e.g., --accent: #007bff) to match your brand.
  • Adjust Size: Update width and height in the QRCode options to resize QR codes.
  • Add Features: Extend the generateQRCode function to support custom logos or error correction levels.

Why Use This QR Code Generator Tool?

This tool stands out for its simplicity and efficiency. It's free, requires no installation, and works offline once loaded. Use it to create QR codes for business cards, event invitations, product labels, or Wi-Fi sharing. It enhances accessibility, reduces typing errors, and boosts engagement in marketing or daily tasks.

Practical Applications

This tool fits various scenarios:

  • Marketing: Create QR codes for promotions or social media links.
  • Education: Share resources or lecture notes with students.
  • Business: Use for product tags or contactless menus.

QR Code Generator FAQs

What is a QR Code Generator?

A QR Code Generator is a versatile tool that transforms text or URLs into scannable QR codes, allowing seamless data access with a smartphone camera scan.

How do I install it on my website?

Simply copy the provided code into an HTML file or integrate it into your site’s <head> and <body> sections, then launch it in a browser.

Can I customize the QR code design?

Absolutely, tweak colors using CSS variables and adjust sizes with JavaScript options within the code for a personalized touch.

Is it safe to use for sensitive data?

It’s secure for personal use, but for sensitive data, ensure it’s hosted on a secure HTTPS site to protect information.

Related Posts

Final Thoughts

The QR Code Generator Tool’s source code is a powerful resource for anyone looking to harness the potential of QR technology. Its flexibility and open-source nature empower you to build, customize, and deploy a robust QR solution tailored to your vision. Embrace this opportunity to enhance your projects with a tool that blends simplicity and innovation!

Post a Comment