A year in pixels - Parte 2

En la primera parte hablamos sobre la iniciativa A Year In Pixels y dábamos nuestra opinión sobre los beneficios que podía traer. Ahora veremos una implementación con HTML, CSS y JS usando localStorage.

NOTA: La primera vez no tendrás datos pero al guardar al menos un estado, si recargas, el navegador recordará tus elecciones.

HTML

Para simplificar la lectura de los datos hemos utilizado una tabla (<table>) ya que a fin de cuentas son datos tabulados y esta estructura facilita su comprensión. Y para la construcción del marcado, para su simplificación, hemos usado PUGJS

A cada <td> le hemos añadido dos atributos, [data-day] que nos servirá como id y para almacenar la información y recuperarla correctamente y [data-mood] para dar estilos con CSS acorde a los estados de ánimo.

[data-day] es un id único formado por el día del mes y el número del propio día unidos mediante #, de modo que el id del 1 de Enero será 1#1 y el 28 de Julio 28#7.

La tabla tiene un <caption> que funciona como título y es, además, una buena práctica para evitar que el usuario tenga que deducir lo que la tabla representa mediante el propio contenido. Y esto aplica a todos los usuarios, tengan o no dificultades visuales o cognitivas. Además las celdas que representan la leyenda de colores en el <tfoot> tienen un [title] para mostrar el estado de ánimo que representa cada color.

CSS

En la capa de estilos hay pocas sorpresas.

• El color gris que nos sirve como color por defecto para las celdas lo utilizamos con dos opacidades diferentes, y como estamos utilizando Custom Properties, en lugar de usar dos variables, guardamos el valor de los canales y para usarlos dentro de la función hsla() con la opacidad que corresponda en cada caso.
• La función clamp() para hacer variable y fluido el tamaño del titular (puedes leer más aquí sobre esta y otras funciones CSS).
• Utilizamos selectores de atributo para dar color a las celdas.

:root {
  --default-color: 0, 0%, 87%;
}

caption {
  padding: 0.5rem 0.5rem 1.5rem;
  font-size: clamp(1.5rem, 50ch, 5vw);
  font-weight: 700;
}

[data-mood="happy"] {
  background-color: var(--happy-color);
}

JavaScript

El funcionamiento es sencillo. Si al cargarse se intenta recuperar datos que ya existiesen. Si los hay, se rellena cada celda con el estado que le corresponde, y sino, se crea un calendario y se guarda en localStorage.

LocalStorage

localStorage es una API sencilla con la que trabajar aunque puede resultar algo volátil porque los datos almacenados desaparecen si el usuario borra la información guaradada por el navegador. Pero para la demo es perfecta porque su nivel de complejidad es bajo y además, ¿qué usuarios borran con frecuencia sus datos almacenados salvo quienes trabajamos en desarrollo web?. Y por otro lado, al ser información guardada en tu navegador personal, aunque no lo puedas compartir entre dispositivos, resulta de caracter más personal si cabe.

Celdas

Cada celda es responsable de manejar su estado interno. Cada una tendrá un handler con un contador para moverse entre los diferentes estados, lo creará o actualizará dependiendo de si encuentra una coincidencia ya existente usando su id y finalmente guardará la modificación del objeto en el localStorage.

Cosas a mejorar

Se me ocurren un par de cosas que podríamos mejorar en la demo, por si te apetece colaborar conimgo o hacer un fork de la misma:

• Hacer fijas la columna de los días (numerales) y la fila de los meses para un manejo más sencillo en dispositivos móviles, ya que cuando haces scroll (horizontal o vertical) pierdes las referencias y el contexto.
• Actualizar el valor de cada celda desde el estado en el que se quedó. Cuando recargas o entras de nuevo, al hacer click en una celda ya rellena, se actualiza desde el primer estado, en lugar de continuar con el siguiente que le tocaría.