Laboratorio — 40 experimentos interactivos

Qué es

Laboratorio es una colección de 40 experimentos interactivos funcionando en el navegador. Una sola página, un solo archivo, cero dependencias: juegos, utilidades, efectos visuales y herramientas de datos.

La idea es simple: la web puede ser divertida. Cada tarjeta es un experimento terminado, listo para jugar.

Qué hay adentro

Juegos — contador de clics, piedra papel o tijera contra la máquina, dado virtual, adivinar el número, cara o seca, Simón dice, memoria de emojis…

Utilidades — reloj en vivo, cronómetro, temporizador, analizador de texto (vocales, consonantes, palabras), conversor de unidades, calculadora de propinas, generador de contraseñas…

Efectos — confeti, texto arcoíris, letras flotantes, emoji explosivo, máquina de escribir, ondulación, shake, partículas con el mouse…

Datos — generador de números, lanzamiento de monedas múltiple, palíndromos, carta aleatoria, IP del visitante, fecha y hora exactas…

Cómo está hecho

Todo vive en un solo archivo index.html (~60 KB): CSS con variables, markup de las 40 tarjetas y el JavaScript de cada función. Sin frameworks, sin build, sin servidor.

<!-- Una tarjeta = un experimento -->
<section class="card" data-cat="juegos">
  <span class="num">03</span>
  <h3><span class="ico">🎲</span> Dado Virtual</h3>
  <div class="display big" id="dado">🎲</div>
  <button class="btn" onclick="tirarDado()">Tirar dado</button>
</section>

// Cada función es autónoma
function tirarDado(){
  const d = 1 + Math.floor(Math.random()*6);
  $('dado').textContent = ['⚀','⚁','⚂','⚃','⚄','⚅'][d-1];
  $('dado').classList.remove('shake'); void $('dado').offsetWidth;
  $('dado').classList.add('shake');
}

El buscador filtra por nombre y los chips filtran por categoría — todo con JavaScript puro.

Detalles que importan

• data-cat en cada tarjeta permite filtrar en vivo sin recargar.
• Cada función es independiente: no hay estado global compartido, así que nada rompe nada.
• La estética es SpaceX: negro, blanco, tipografía fina, bordes minimalistas. Misma línea que el resto de la web.
• Los juegos funcionan sin servidor: se puede abrir el archivo desde el escritorio y andar igual.

Por qué cuenta

Demuestra que con HTML, CSS y JavaScript puro alcanza para construir un producto completo y pulido. No hacen falta frameworks de 50 MB para hacer cosas divertidas.