Inicio Informática Generador de códigos QR. ¿Cómo crear el tuyo con JavaScript?

Generador de códigos QR. ¿Cómo crear el tuyo con JavaScript?

Creado utilizando la API que ofrecen en https://goqr.me/

Publicado por entreunosyceros
Publicado el: Última actualización:

AVISO: Esta entrada tiene más de dos años desde su publicación. Es posible que el contenido esté desactualizado.

Una vez más aquí. Como el Covid me tiene un poco jodido, pues voy a dejar aquí publicado un pequeño artículo sobre el que ya publiqué algo a principios de mes. En aquel artículo hablamos sobre cómo conectarnos a nuestra red Wifi utilizando un código QR. Estos se podrían crear utilizando algunos servicios online. Pero en el artículo de hoy, vamos a ver cómo crear una pequeña Web estática en la que pondremos a funcionar nuestro generador de códigos QR.

Este generador de códigos QR va a funcionar gracias a JavaScript. Básicamente utilizaremos una API a la que se le envía el requerimiento, con la URL o el texto que queremos utilizar para crear el código QR.

El generador de códigos QR

Al tratarse de una página estática, no se requiere utilizar un backend ni instalar ningún servidor. Basta tener el proyecto en nuestro equipo, tener conexión a internet (por la API) y ejecutar la página index.html en nuestro navegador web.

La aplicación web que vamos a ver, como decía utiliza JavaScript para enviar las peticiones utilizando una variable a la que se le da la URL del envío. En esta URL podemos añadir cosas como son las dimensiones de la imagen del QR.

El código del generador de códigos QR

La aplicación consta de tres archivos. El primero de ellos es index.html, en donde se maqueta la aplicación. Después también tendremos otro llamado style.css, que es el que contiene las reglas CSS para visualizar la aplicación, y por último está el archivo que lleva el código JavaScript, el cual se llama script.js, y que es el que va a enviar la petición a la API para convertir el texto o la URL en el código QR.

El archivo index.html

generador de códigos QR

Cuando pulsemos el botón «Genera tu Código QR«, el sistema nos va a devolver la imagen QR, la cual se va a insertar en la página, dentro del contenedor con la clase wrapper.

<!DOCTYPE html>
<html lang="es" dir="auto">
  <head>
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>Generador de QR</title>
    <link rel="icon" type="image/png" sizes="16x16" href="logo.png">
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="wrapper"> <!--envoltura del formulario -->   
      <header>        
        <h1>Generador de QR</h1>
        <p>Pega una URL o escribe texto para crear un código QR</p>
      </header>
     
      <div class="form"><!--Formulario en el que escribir para crear el código QR-->
        <input type="text" placeholder="Escribe un texto o una URL">
        <button>Genera tu Código QR</button>   
      </div>
      
      <div class="codigo-qr"> 
        <img src="" alt="codigo-qr"><!--aquí se genera la imágen del código QR-->
      </div>
    </div>

    <script src="script.js"></script>  <!--El script con el que generar el código QR-->

  </body>
</html>

El archivo Style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Gill Sans Extrabold", Helvetica, sans-serif;
}
body{
  display: flex;
  padding: 0 10px;
  min-height: 100vh; /*“viewport height” (altura de la ventana gráfica)*/
  align-items: center;
  background: hwb(278 11% 1%);
  justify-content: center;
}
::selection{
  color: #fff;
  background: hwb(278 11% 1%);;
}
.wrapper{
  height: 270px;
  max-width: 420px;
  background: #fff;
  border-radius: 7px;
  padding: 20px 25px 0;
  transition: height 0.2s ease;
}
.wrapper.active{
  height: 620px;
}
.wrapper .form{
  margin: 20px 0 25px;
}
.wrapper.active .codigo-qr{
  opacity: 1;
  transition: opacity 0.5s 0.05s ease;
  pointer-events: auto;
}
header h1{
  font-size: 22px;
  font-weight: 600;
  text-align: center;
}
header p{
  margin-top: 5px;
  color: #464646;
  font-size: 16px;
}
.form :where(input, button){
  width: 100%;
  height: 50px;
  border-radius: 5px;
  transition: 0.1s ease;
}
.form input{
  font-size: 20px;
  padding: 0 20px;
  border: 1px solid #999;
}
.form input::placeholder{
  color: rgb(173, 173, 173);
}
.form input:focus{
  box-shadow: 0 6px 12px rgba(85, 85, 85, 0.13);
}
.form button{
  color: #fff;
  background: #19bca6;
  cursor: pointer;
  margin-top: 25px;
  font-size: 17px;
}
.codigo-qr{
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  opacity: 0;
  display: flex;
  padding: 33px 0;
  border-radius: 5px; 
}
.codigo-qr img{
  width: 250px;
}
/*CSS para móvil*/
@media (max-width: 430px){
  .wrapper{
    height: 255px;
    padding: 18px 20px;
  }
  .wrapper.active{
    height: 560px;
  }
  header p{
    color: #696969;
  }
  .form :where(input, button){
    height: 55px;
  }
  .codigo-qr img{
    width: 200px;
  }  
}

El archivo script.js

Como decía líneas más arriba, en este archivo es de donde se envía la URL o el texto que quiera el usuario utilizando el evento clic, que es el que manda la consulta al API. Esta va a responder con la imagen del QR con el tamaño que nosotros le solicitemos (para este ejemplo 250×250).

let preValue;
//Tomamos valores del formulario
const wrapper = document.querySelector(".wrapper"),
qrInput = wrapper.querySelector(".form input"),
qrImg = wrapper.querySelector(".codigo-qr img"),
Btngenerado = wrapper.querySelector(".form button");

//Generar el cógio QR
Btngenerado.addEventListener("click", () => {
    let qrValue = qrInput.value.trim();
    if(!qrValue || preValue === qrValue) return;
    preValue = qrValue;
    Btngenerado.innerText = "Generando código QR...";
    //URL de la API con la que generar el código QR
    qrImg.src = `https://api.qrserver.com/v1/create-qr-code/?size=250x250&data=${qrValue}`;
    qrImg.addEventListener("load", () => {
        wrapper.classList.add("active");
        Btngenerado.innerText = "Código QR Generado";
    });
});

qrInput.addEventListener("keyup", () => {
    if(!qrInput.value.trim()) {
        wrapper.classList.remove("active");
        preValue = "";
    }
});

Si quieres ver funcionando este proyecto, puedes seguir el siguiente enlace.

Fuente

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.