Tabla de contenido
Una vez más aquí. Hoy vengo a dejar un pequeño artículo sobre algo que me comentó un «conocido» hace unos días. El caso es que este hombre quería poder crear sus propios Tier List en local (no sé muy bien para qué), pero no tenía nada claro que programa necesitaría para hacerlo. Bueno, pues después de que me comentara esto, me puse a buscar un poco, y descubrí que este tipo de listas de niveles interactivas, se pueden crear de forma «relativamente» sencilla con HTML, CSS y Vanilla JavaScript.
Por si alguien todavía no lo sabe, Vanilla JS es el nombre que le ha dado la comunidad al javascript puro, o más bien, a la ausencia de librerías y frameworks de Javascript y de ahí el concepto. El caso es que sin nada de esto, se pueden crear cosas interesantes.
Crea tus propios Tier List
Pues como decía, para crear esta aplicación web con la que elaborar nuestros Tier List, tan solo necesitaremos escribir un poco de código HTMK, CSS y JavaScript. El JavaScript necesario, para este ejemplo se ha dividido en tres archivos, pero esto los veremos más adelante.
Acabo de caer en la cuenta de que en el gif de muestra que hay justo encima de estas líneas, no he incluido el puntero, por eso igual no se muy claro el funcionamiento de esta aplicación. Por eso quiero aclarar que para añadir las imágenes, solo es necesario hacer clic sobre el texto «Añadir Imagen». Solo se podrá añadir las imágenes una a una. En caso de querer eliminar alguna de las imágenes que carguemos, no hay más que hacer doble clic sobre la imagen que queremos eliminar.
Si quieres probar este ejemplo, antes de utilizarlo en tu equipo o en tu servidor, puedes hacerlo desde el siguiente enlace.
El código de la aplicación
HTML
Bueno, para empezar el código que vamos a utilizar para mostrar el resultado de esta aplicación, se va a guardar en un archivo que vamos a llamar index.html. Solo necesitaremos pegar el siguiente código dentro de este archivo.
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="robots" content="index"/>
<meta http-equiv="cache-control" content="no-cache"/>
<meta name="author" content="ENTREUNOSYCEROS" />
<meta name="description" content="Crea tu propia Tier List con un poco de html, css y Javascript para utilizar el local o en un servidor"/>
<meta name="keywords" content="tier list, Javascript, HTML, CSS, entreunosyceros"/>
<title>Tier List</title>
<link rel="stylesheet" type="text/css" href="./stylesheet.css" />
</head>
<body>
<label class="headerContainer">
<h1>Tier List</h1>
</label>
<!--Div anidados para mostrar cada una de las líneas-->
<div id="board">
<div class="row">
<div class="label">A</div>
</div>
<div class="row">
<div class="label">B</div>
</div>
<div class="row">
<div class="label">C</div>
</div>
<div class="row">
<div class="label">D</div>
</div>
<div class="row">
<div class="label">E</div>
</div>
<div class="row">
<div class="label">F</div>
</div>
</div>
<!--botón y div para añadir imágenes-->
<button id="addCard" title="Añadir imagen">Añadir imagen➕</button>
<div id="banco"></div>
</body>
<!-- JavaScript necesarios-->
<script src="./lineas.js"></script>
<script src="./imagenes.js"></script>
<script src="./banco.js"></script>
</html>
CSS
Para darle estilos a nuestra aplicación, vamos a guardar el siguiente código dentro de un archivo llamado stylesheet.css.
body {
font-family: 'Comic Sans MS', sans-serif;
background-color: mediumturquoise;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
flex-direction: column;
justify-content: center;
align-items: center;
}
.headerContainer {
display: flex;
}
#addCard {
background: none;
border: none;
font-size: 40px;
}
#board {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 10px;
width: 80vw;
height: 70vh;
background-color: rgb(30, 30, 30);
}
.row {
display: flex;
width: 100%;
height: 85px;
background-color: rgb(56, 56, 56);
}
.label {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
width: 100px;
background-color: green;
}
.card {
display: flex;
justify-content: center;
align-items: center;
height: 85px;
width: 100px;
background-color: white;
}
#banco {
display: flex;
flex-wrap: wrap;
width: 80vw;
height: 300px;
background-color: rgb(30, 30, 30);
margin-bottom: 20px;
}
@media (max-width: 700px) {
img, .card {
height: 100%;
width: 100px;
}
.label {
height: 100%;
width: 110px;
}
#board {
width: 80vw;
height: 100vh;
}
}
JavaScript
Como decía líneas más arriba, el JavaScript necesario para esta aplicación, se ha dividido en tres archivos. El primero de ellos se llamará lineas.js, y dentro pegaremos el siguiente código.
const rows = document.querySelectorAll('.row');
const colors = ['green', '#9ACD32', 'yellow', 'orange', 'orangered', 'red'];
const onDragOver = (event) => {
event.preventDefault();
}
const onDrop = (event) => {
event.preventDefault();
const draggedCardId = event.dataTransfer.getData('id');
const draggedCard = document.getElementById(draggedCardId);
event.target.appendChild(draggedCard);
console.log('Elemento arrastrado');
}
rows.forEach((row, index) => {
const label = row.querySelector('.label');
label.style.backgroundColor = colors[index];
row.ondragover = onDragOver;
row.ondrop = onDrop;
})El siguiente archivo JavaScript lo vamos a utilizar para trabajar con la imágenes. Por este motivo, este archivo se llamará imagenes.js, y dentro solo hay que pegar el siguiente código.
const cards = document.querySelectorAll('.card');
const addCard = document.querySelector('#addCard');
/* Add lógica de la imágen */
const addCardToBank = (event) => {
const card = createCard();
const bank = document.querySelector('#banco');
bank.appendChild(card);
}
addCard.onclick = addCardToBank;
/* Lógica de la imágen */
const createCard = () => {
const card = document.createElement('div');
card.classList.add('card');
card.setAttribute('draggable', 'true');
card.id = Date.now();
card.ondragstart = onDragStart;
card.ondragend = onDragEnd;
card.onclick = deleteCard;
appendImage(card);
return card;
}
const appendImage = (card) => {
const input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/x-png,image/gif,image/jpeg');
input.style.visibility = 'hidden';
input.onchange = () => {
const image = new Image(100, 85);
const file = input.files[0];
console.log(file);
const reader = new FileReader();
reader.onload = (event) => {
image.src = event.target.result;
image.style.pointerEvents = 'none';
card.appendChild(image);
}
reader.readAsDataURL(file);
}
input.click();
}
/*Eliminar una imágen del Tier List*/
const deleteCard = (event) => {
const willDeleteCard = window.confirm('¿Quieres eliminar esta imágen?');
if (willDeleteCard) {
event.target.remove();
}
}
/*Log al mover*/
const onDragStart = (event) => {
console.log('Elemento seleccionado para arrastrar');
event.dataTransfer.setData('id', event.target.id);
setTimeout(() => {
event.target.style.visibility = 'hidden';
}, 50)
}
const onDragEnd = (event) => {
event.target.style.visibility = 'visible';
console.log('Finalizado el arrastre');
}
cards.forEach((card, index) => {
card.ondragstart = onDragStart;
card.ondragend = onDragEnd;
})Y el último archivo será el que utilizaremos para trabajar con las imágenes que queramos añadir a nuestro Tier List. Este archivo se va a llamar banco.js, y dentro tan solo necesitaremos pegar el código.
const bank = document.querySelector('#banco');
const onDropCard = (event) => {
const id = event.dataTransfer.getData('id');
bank.appendChild(document.getElementById(id));
}
bank.ondrop = onDropCard;
bank.ondragover = (event) => event.preventDefault();Y bueno, con esto cinco archivos ya estará todo listo para que si hacemos doble clic en index.html, podamos empezar a construir nuestro Tier List. También quiero aclarar que todos los archivos aquí mostrados se deben guardar en la misma carpeta. Esta aplicación no necesita de ningún servidor para funcionar. Si quieres descargar el código fuente para no tener que pegarlo, puedes hacerte con todos los archivos desde el repositorio en GitHub.
Con esto supongo que el interesado podrá generar sus Tier List (para lo que él quiera) sin necesidad de tener que utilizar ninguna aplicación de pago, ni un servicio de terceros.