logo
GitHub repositoryAbout - Blog Post

QR Code Generator using JavaScript

Usman Sabuwalamarkup

1<html lang="en">
2<head>
3 <meta charset="UTF-8">
4 <meta http-equiv="X-UA-Compatible" content="IE=edge">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>QR Code Generator</title>
7 <style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 width: 80%;
16 height: 100vh;
17 margin: auto;
18 display: grid;
19 place-items: center;
20 }
21
22 h1 {
23 font-family: sans-serif;
24 }
25
26 input {
27 padding: 10px;
28 border-radius: 20px;
29 border: 2px solid steelblue;
30 font-size: 1.5rem;
31 letter-spacing: 2px;
32 outline: none;
33 }
34 </style>
35</head>
36<body>
37 <h1>QR Code Generator</h1>
38 <input
39 type="text"
40 spellcheck="false"
41 id="text"
42 value="https://google.com"
43 />
44 <div id="qrcode"></div>
45 <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js"></script>
46 <script type="text/javascript">
47
48 const qrcode = document.getElementById("qrcode");
49 const textInput = document.getElementById("text");
50
51 const qr = new QRCode(qrcode);
52 qr.makeCode(textInput.value.trim());
53
54 textInput.oninput = (e) => {
55 qr.makeCode(e.target.value.trim());
56 };
57
58 </script>
59</body>
60</html>