Build a QRCode.js Plain Text Dynamic QRCode Generator in Browser Using HTML5 & Javascript Full Project For Beginners

 

 

 

index.html

 

 

<input id="input" type="text" onkeyup="triggerCreateQRCode()" placeholder="input here" onmouseenter="this.focus()" autofocus>

<div id="qrcode"></div>

<p>You can reference <a href="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@04f46c6a0708418cb7b96fc563eacae0fbf77674/qrcode.js" target="_blank">the CDN code (MIT license included)</a> or <a href="https://cdn.jsdelivr.net/gh/davidshimjs/qrcodejs@04f46c6a0708418cb7b96fc563eacae0fbf77674/qrcode.min.js" target="_blank">the minified CDN code</a> or just copy the <a href="https://github.com/davidshimjs/qrcodejs/blob/master/qrcode.js">file with its license</a>.</p>

<p><a href="https://github.com/davidshimjs/qrcodejs" target="_blank">https://github.com/davidshimjs/qrcodejs</a></p>

 

 

 

style.css

 

 

* {
  background: lightgrey;
  color: black;
  font-family: avenir, arial, monospace;
  padding: 10px;
  border-radius: 10px;
  transition: 0.25s;
}

button {
  border: none;
  box-shadow: 2px 2px 5px black;
}

button:hover,
button:focus {
  background: green;
  color: black;
}

a {
  line-height: 1.75;
  padding: 10px 0;
}

a:hover,
a:focus {
  color: green;
}

input {
  background: grey;
  color: white;
  border: none;
}

input:hover {
  background: green;
  box-shadow: 1px 1px 1px black;
}

 

 

script.js

 

 

var sideSize = 150;
var settings = {text:'', width: sideSize, height: sideSize};
var qrcode = new QRCode(document.getElementById("qrcode"), settings);

function triggerCreateQRCode() {
  qrcode.clear();
  createQRCode(document.getElementById('input').value);
}

function createQRCode(input) {
  qrcode.makeCode(input);
}

 

Leave a Reply