Un Experimento en JavaScript con Mi Reloj Binario

Introducción: La Fascinación Binaria

Ver el Pen Binary clock experiment by Moncho Varela (@nakome) on CodePen.

La idea de representar el tiempo en formato binario siempre me ha intrigado. La simplicidad y elegancia de la numeración binaria añaden un toque de misterio a la forma en que percibimos el tiempo. Decidí llevar esta fascinación al siguiente nivel y crear una versión digital de mi reloj binario utilizando JavaScript.

Pasos Iniciales: Planificación y Diseño

Antes de sumergirme en el código, pasé algún tiempo planificando la estructura de mi reloj binario. Decidí dividir cada dígito en bloques binarios, con luces encendidas o apagadas representando los bits. Este diseño proporcionaría una representación visual clara y fácil de entender.

Código en Acción: Desarrollando el Reloj Binario en JavaScript

El corazón de este experimento reside en el código JavaScript que impulsa el reloj binario. Utilicé las funciones de manipulación del DOM para actualizar dinámicamente los valores binarios y las luces del reloj. El código también incluye funciones para obtener la hora actual y dividirla en componentes binarios.

function actualizarReloj() {
// Obtiene todos los elementos
const itemsHora = document.querySelectorAll(`[data-hour]`);
const itemsHoraTexto = document.querySelectorAll(`[data-hour-txt]`);
const itemMinuto = document.querySelectorAll(`[data-minutes]`);
const itemMinutoTexto = document.querySelectorAll(`[data-minutes-txt]`);
// Obtiene el array de la hora y el minuto
const horas = [8, 4, 2, 1];
const minutos = [32, 16, 8, 4, 2, 1];
// Obtiene la hora actual
const horaActual = new Date().getHours();
const minutoActual = new Date().getMinutes();

// Obtener el array de horas filtrado
const horaBinaria = (horaActual % 12).toString(2).padStart(4, "0");
const minutoBinario = minutoActual.toString(2).padStart(6, "0");

// Convertir las representaciones binarias a arrays de números
const horasFiltradas = horaBinaria
.split("")
.map((bit, index) => (bit === "1" ? horas[index] : 0))
.filter(Boolean);
const minutosFiltrados = minutoBinario
.split("")
.map((bit, index) => (bit === "1" ? minutos[index] : 0))
.filter(Boolean);

// Construir la cadena para mostrar la hora actual en formato de 12 horas con ceros en el minuto si es necesario
const hora12Formato = horaActual % 12 || 12;
const horaActualStr = hora12Formato.toString().padStart(2, "0");
const minutoActualStr = minutoActual.toString().padStart(2, "0");
const amPm = horaActual < 12 ? "AM" : "PM" ; // Mostrar la hora actual en el div con id "reloj-real" const
	relojReal=document.getElementById("reloj-real"); relojReal.textContent=`${horaActualStr}:${minutoActualStr}
	${amPm}`; // Borrar clases borrarClases(itemsHora); borrarClases(itemsHoraTexto); borrarClases(itemMinuto);
	borrarClases(itemMinutoTexto); // Activar los elementos correspondientes horasFiltradas.forEach((item)=>
	activar(`[data-hour="${item}"]`, `[data-hour-txt="${item}"]`)
	);
	minutosFiltrados.forEach((item) =>
	activar(`[data-minutes="${item}"]`, `[data-minutes-txt="${item}"]`)
	);
	// Actualizar reloj constantemente
	requestAnimationFrame(actualizarReloj);
	}

	// Borrar clases de los elementos
	// Remove classes from elements
	function borrarClases(elements) {
	elements.forEach((element) => {
	if (element) {
	element.classList.remove("active");
	}
	});
	}

	// Activar los elementos correspondientes
	function activar(hora, texto) {
	const activarElemento = (elemento) => {
	const item = document.querySelector(elemento);
	if (item) item.classList.add("active");
	};

	activarElemento(hora);
	activarElemento(texto);
	}

	// Actualiza el reloj al cargar la página
	actualizarReloj();
	

Interactividad y Experiencia del Usuario

Para mejorar la experiencia del usuario, implementé características interactivas. Añadí la capacidad de cambiar entre formatos de 12 y 24 horas, así como un botón de pausa para detener y reanudar el reloj binario. Estas características adicionales brindan versatilidad y hacen que la experiencia sea más personalizada.

Conclusiones y Reflexiones

Este experimento no solo fue una oportunidad para sumergirme en el mundo de la programación binaria, sino también para explorar cómo la representación visual del tiempo puede ser tan emocionante como funcional. La versatilidad de JavaScript y su capacidad para interactuar con el DOM facilitaron la creación de esta experiencia única.

Este proyecto me ha dejado con una mayor apreciación por la belleza de la programación y la creatividad que se puede expresar a través de ella. ¡Espero que esta exploración del reloj binario haya sido tan intrigante para ustedes como lo fue para mí!