Tabla de contenido
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
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.