El mundo en un chip: Contador de tiempo de cuarentena

Un poquito de programación siempre viene bien para agilizar nuestras neuronas: afianzar lo que sabemos y adquirir nuevos conocimientos.

Aprovechando esta etapa que, en el caso particular de la ciudad de Buenos Aires y alrededores, no se sabe a ciencia cierta cuándo tocará a su fin, he utilizado JavaScript para realizar un contador de los días, horas, minutos y segundos que llevamos confinados.

Aclaración: PiCat, la mascota del blog, tiene colocado su barbijo por si quien lo observa se encuentra a menos de metro y medio de él.

Lo cierto es que me cansé de andar contando a mano los días de encierro. ¿Cómo, entonces, podía hacer el conteo ágil y tenerlo a mano? Con un simple (eso pensé) gadget en el inicio del blog (tanto para la versión web como para la móvil).

Así fue que, entre lo (poco) que sé de JavaScript, lo que pude encontrar en internet y la ayuda de Chema, surgió este modelito que presento a continuación.

Descripción del algoritmo

Entendemos por algoritmo una secuencia finita de pasos que describen un procedimiento. Sirve para todo: explicar un paso de baile, una comida, un trayecto a recorrer. Toda acción que realicemos puede plantearse como algoritmo.

Como datos básicos para este algoritmo del contador (y su respectiva codificación) necesitaremos la fecha de inicio, la fecha actual y la fecha final. Pero primero debemos "preparar el terreno".

Paso 1

Abrimos la etiqueta script (<script>) y definimos la función cerramiento() [nótese que se abre llave ({) al inicio] y vamos declarando las variables (var) a medida que las vamos creando. Con doble barra (//) colocamos los comentarios (aclaraciones acerca del código), para que nos quede más claro cada paso.

Dado que el tiempo se mide en milisegundos (ms), calculamos la cantidad de ms que hay en un minuto, en una hora y en un día.

Paso 2

Determinamos la fecha inicial, la fecha actual y la fecha final. Nótese que los meses comienzan en 0 (enero) y finalizan en 11 (diciembre). Colocamos un condicional if para detener el contador al llegar al final: si la fecha actual es mayor que la final, vale la final.

Paso 3

Mediante getTime() obtenemos el intervalo (en milisegundos) que necesitamos para que el contador avance… o retroceda… Dado que tenemos dos fechas fijas (la inicial y la final) y otra que varía (la actual), si queremos que avance (indicaría el tiempo que ha transcurrido), utilizaremos la diferencia entre la fecha actual y la inicial; si queremos que retroceda (indicaría el tiempo que falta), utilizaremos la diferencia entre la fecha final y la actual (en este caso se ha dejado que el contador "avance"; el contador de retroceso está "anulado" con doble barra de comentario).

Paso 4

Math.floor() devuelve el resultado de la operación, encerrada en el paréntesis, redondeado al entero inferior más próximo.

Valiéndonos de ese comando, primero determinamos la cantidad de días que tiene el intervalo (dividimos los ms totales en los ms que tiene un día); y luego hallamos los ms que nos sobran (restamos los días obtenidos [en ms] de los ms totales). Ese nuevo intervalo lo transformamos en horas (obtenemos otro intervalo con los ms sobrantes), en minutos (obtenemos otro intervalo con los ms sobrantes) y en segundos (como el contador no mostrará los ms, es despreciable sacar los sobrantes para este último caso).

Como detalle, agregamos tres condicionales para que, en el caso de que las horas, los minutos y los segundos tengan sólo un dígito, estén precedidos por un cero.

Paso 5

Declaramos la variable micuarentena como concatenación de cadenas de texto (entrecomilladas) y los valores de las variables. En este caso, se ha optado por hacer cuatro concatenaciones distintas, dentro de dos condicionales if con sus respectivos else: conforme el tiempo se haya cumplido o no o si avanza o retrocede. Cerramos la función cerramiento() con llave (}) luego del comando return (que devuelve el valor de la variable micuarentena).

Paso 6

Definimos la función actualizar() para mostrar los resultados. Luego, nos valemos de setInterval() para que "refresque" la función actualizar() cada 1000 ms (o sea, cada segundo). Cerramos la etiqueta script (</script>) y creamos una división (div) con atributos id y class para reflejar allí los datos y atributos CSS, respectivamente.

Completamos el código agregándole, al elemento contenedor, atributos CSS de dimensiones, color, tipo de letra y posición (entre las etiquetas <style> y </style>).

Contador de avance o cronómetro

Mientras que el tiempo actual sea menor que el final, el contador indicará el tiempo transcurrido desde el día inicial. Y quedará fijo una vez que el tiempo actual sea mayor o igual que el final: marcará la cantidad total de días que duró la cuarentena.

Código JavaScript completo

Aquí está todo el código para que podamos (por medio de copiar y pegar) utilizarlo como gadget o ejecutarlo directamente en html.

Para esto último lo único que deberemos hacer es un txt con el código; y guardar ese archivo como html. Doble clic y listo: el navegador lo interpreta (no necesita compilación).

También puede adaptárselo para cualquier situación que requiera contar tiempo: cuántos días faltan para mi cumple, cuántos días llevamos de vacaciones.

Recordemos que podemos cambiar nombres de variables y funciones; además de su apariencia: color, dimensiones, tipo de letra, entre otras características.

Contador de retroceso o temporizador

Basándonos en el código completo precedente, si desactivamos la línea 14 y activamos la 15 ("corremos" la doble barra del inicio de la 15 al inicio de la 14), obtenemos el contador de tiempo faltante (también habrá que sacar la doble barra del inicio de las líneas 33 y 34 y colocarlas en el inicio de las 31 y 32). Una vez que dicho tiempo haya expirado (cuando el tiempo actual sea mayor o igual que el final), quedará en 0.

Si sumamos ambos contadores, el de avance y el de retroceso, debe darnos el tiempo total de cuarentena decretado hasta el momento.

Contador de avance y retroceso

También me cansé de no saber cuántos días faltan (si uso el primer código) o cuántos días van (si uso el segundo); así que hice un "join" entre ambos códigos para tener a la vista el "conteo" de este período, conforme van apareciendo más DNU.

El resultado puede apreciarse a continuación.

Código JavaScript completo

Como con el código anterior, también se puede copiarlo en un txt, guardarlo como html y ejecutarlo directamente. O utilizarlo como gadget.

Fuentes:

TecnoBlog. Espacio de Tecnología, Resalta el código fuente de tu web con Google Code Prettify, 2/2/2015.
Aprende web, El tiempo I. Reloj digital, 2/12/2014.
Rodrigo Gómez, Calcular el tiempo transcurrido JavaScript, 15/8/2014.

La cuarentena a través de los DNU

Agrego aquí el listado de los DNU (Decretos de Necesidad y Urgencia) que permite detallar el alcance de cada tramo del ASPO (aislamiento social, preventivo y obligatorio; que abarcó todo el país hasta el sexto decreto, inclusive; con un total de 80 días de duración) y del DISPO (distanciamiento social, preventivo y obligatorio; que "surgió" y "convivió" con el ASPO desde el séptimo decreto en adelante).

(Nota: Las fechas y períodos tachados corresponden a fechas y períodos que fueron modificados por el DNU siguiente; los que están entre paréntesis, a fechas y períodos no especificados que quedaron explicitados por el DNU siguiente).

Decreto 297/2020, 20-03/31-03, 12 días.
Decreto 325/2020, 01-04/12-04, 12 días.
Decreto 355/2020, 13-04/26-04, 14 días.
Decreto 408/2020, 27-04/10-05, 14 días.
Decreto 459/2020, 11-05/24-05, 14 días.
Decreto 493/2020, 25-05/07-06, 14 días.
Decreto 520/2020, 08-06/~~28-06~~ 30-06, 21 23 días.
Decreto 576/2020, 01-07/17-07, 17 días.
Decreto 605/2020, 18-07/02-08, 16 días.
Decreto 641/2020, 03-08/16-08, 14 días.
Decreto 677/2020, 17-08/30-08, 14 días.
Decreto 714/2020, 31-08/20-09, 21 días.
Decreto 754/2020, 21-09/11-10, 21 días.
Decreto 792/2020, 12-10/25-10, 14 días.
Decreto 814/2020, 26-10/08-11, 14 días.

En concreto

Y es así que, confirmados DNU tras DNU, seguimos camino al récord Guinness del ASPO los abnegados habitantes de la Ciudad Autónoma de Buenos Aires y de los siguientes 35 partidos bonaerenses: Almirante Brown, Avellaneda, Berazategui, Berisso, Ensenada, Escobar, Esteban Echeverría, Ezeiza, Florencio Varela, General Las Heras, General Rodríguez, General San Martín, Hurlingham, Ituzaingó, José C. Paz, La Matanza, Lanús, La Plata, Lomas de Zamora, Luján, Marcos Paz, Malvinas Argentinas, Moreno, Merlo, Morón, Pilar, Presidente Perón, Quilmes, San Fernando, San Isidro, San Miguel, San Vicente, Tigre, Tres de Febrero y Vicente López.

Zafaron y están en DISPO, a partir del octavo DNU, los habitantes de los 5 partidos restantes del AMBA: Brandsen, Campana, Cañuelas, Exaltación de la Cruz y Zárate. Es decir, llegaron sólo a 101 días de ASPO.

Esta entrada se irá actualizando periódicamente conforme sean publicados más DNU. Luego, serán retirados sólo los gadgets de encabezamiento del blog. Los de esta nota quedarán a modo de recordatorio de una experiencia fuera de lo común, aleccionadora y "motivadora".

Luego de 234 días, la ciudad de Buenos Aires y los 35 partidos bonaerenses pasaron a DISPO: