Online QR Generator System

We are going to learn how to implement an Online QR Generator System implemented in Javascript, basically using an api to which the request is sent, with the URL or the text on which the related QR is going to be generated:

https://goqr.me/api/doc/create-qr-code/

This application uses javascript to send the requests, through a variable that is superimposed on the sending URL, with the size of the QR image, which in this case is 200 by 200 pixels.

The system returns the QR image and overlays it on the page inside the wrapper with the wrapper class.

Demo of the Online QR Generator System

I implemented a demo of the application that you can see in the following link:

https://mauriciosevilla.com/qr/

Explanation of the Online QR Generator System

The application consists of two main files, which are what the end user sees, the index.html, another file called style.css, which is the one that manages how the application is going to be displayed, and finally the file that carries the logic of the application is the script.js.

This application in the script.js is where the URL or the text that the end user completes with the click event is sent, which is what drives the query to the API, it responds with the image of the QR, parameterized at 200 by 200 pixels.

Download and implementation of the project in JavaScript

The following is the repository link where I have the project posted on GitHub:

Sistema Generador QR en Línea en Javascript
https://github.com/configuroweb/qr
0 forks.
0 stars.
0 open issues.

Recent commits:

• primera versión funcional sistema generador de qr en línea, Mauricio

As it is a static page, it is not necessary to use a backend, you do not have to install any server, just download the project and run the page index.html

Upload of the Online QR Generator System in Javascript to a hosting

In a previous post I explain how to upload a project similar to this to GitHub Pages If you want to upload it to a hosting like hostinger in the following video I explain how to do it (in spanish):

I'm on the lookout for any questions!