DEV Community

Cover image for How to use QR Code Generator API! With JS!
MAFEE7
MAFEE7

Posted on

How to use QR Code Generator API! With JS!

QR Code API By: Go QR

See API Docs:

http://goqr.me/api/

API Link

https://api.qrserver.com/v1/create-qr-code/

HTML

<input placeholder="data"> 
<button>Generate QR!</button><br><br>
<img src>
Enter fullscreen mode Exit fullscreen mode

Javascript

var parametersJson = {
    "size": 250, // Size of Qr Code
    "backgroundColor": "38-38-38", // Background Color Of Qr Code (In RGB)
    "qrColor": "255-255-255", // Color of Qr Code (In RGB)
    "padding": 2, // Padding 
    "data": "dev.to"
};

var parameters;

var btn = document.querySelector("button");
var img = document.querySelector("img");
var input = document.querySelector("input");

btn.addEventListener("click", function(){
    parametersJson.data = input.value || "dev.to";
    parameters = `size=${parametersJson.size}&bgcolor=${parametersJson.backgroundColor}&color=${parametersJson.qrColor}&qzone=${parametersJson.padding}&data=${parametersJson.data}` // Stitch Together all Paramenters
    img.src = `https://api.qrserver.com/v1/create-qr-code/?${parameters}` // Set Image URL To Link
});
Enter fullscreen mode Exit fullscreen mode

See Working Version:

https://jsfiddle.net/qcote16j/

Discussion (1)

Collapse
somanathgoudar profile image
Somanath Goudar

Good One!