How to use QR Code Generator API! With JS!

#javascript #qrcode

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>

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
});

See Working Version:

https://jsfiddle.net/qcote16j/

Hands-on debugging session: instrument, monitor, and fix

Join Lazar for a hands-on session where you’ll build it, break it, debug it, and fix it. You’ll set up Sentry, track errors, use Session Replay and Tracing, and leverage some good ol’ AI to find and fix issues fast.

RSVP here →