Este proyecto nació como respuesta al primer desafío de programación de ONE Oracle Next Education + Alura Latam, partiendo de una estructura inicial que nos fue proporcionada. La misión era clara: implementar la lógica básica de un amigo secreto.
Pero, a medida que avanzaba, no podía dejar de pensar en todas las funcionalidades que le faltaban para ser una experiencia completa. Sentía que la interfaz de usuario podía ser mucho más fluida, intuitiva y, sobre todo, divertida. Fue entonces cuando tomé una decisión: no solo cumpliría con el desafío, sino que lo llevaría al siguiente nivel.
Decidí hacer un rediseño total de la UI/UX y añadir esas lógicas que sentía que sí o sí DEBÍAN estar. Para ello, investigué otras apps similares, definí un nuevo look and feel y me puse ¡manos a la obra!
-
Agregar Participantes: Añade nombres a la lista del sorteo de forma fácil y rápida.
Tip profesional: Para agilizar el proceso, presionaEnterdespués de cada nombre. ¡No necesitas hacer clic en 'Agregar'! -
Validación de Entradas: Evita nombres vacíos o duplicados para un sorteo sin errores.
-
Sorteo Aleatorio: Con un solo clic, el organizador descubre quién le regala a quién.
-
Animación de Confeti: ¡Celebra el resultado con una divertida lluvia de confeti!
-
Botón de Reinicio: Limpia la lista y el resultado para empezar un nuevo sorteo al instante.
-
Diseño Responsivo: Experiencia de usuario óptima en cualquier dispositivo, ya sea móvil o de escritorio.
Este proyecto fue construido utilizando las tecnologías fundamentales de la web, sin necesidad de frameworks:
-
HTML5: Para la estructura y el contenido semántico.
-
CSS3: Para el diseño, las animaciones y la responsividad (utilizando Flexbox y Grid).
-
JavaScript (ES6+): Para toda la lógica interactiva y la manipulación del DOM.
-
Canvas Confetti: Una librería ligera para la animación de celebración.
Este proyecto tiene un gran potencial para crecer. Algunas de las funcionalidades que se podrían implementar a futuro son:
-
Envío de Resultados por Email: Permitir que cada participante reciba el nombre de su amigo secreto de forma privada en su correo electrónico.
-
Creación de Grupos con Enlace: Generar un enlace único por sorteo para que los participantes puedan unirse sin que el organizador tenga que añadir todos los nombres manualmente.
-
Listas de Deseos: Opción para que cada participante pueda añadir sugerencias de regalos.
-
Reglas de Exclusión: Permitir establecer reglas para evitar que ciertas personas se regalen entre sí (ej. parejas).
-
Sorteos Anteriores: Guardar un historial de sorteos para los usuarios registrados.
No se requiere ninguna instalación compleja. Para ejecutar el proyecto localmente, simplemente:
- Clona el repositorio:
git clone https://github.com/Tolevats/amigo-secreto.git
- Navega al directorio del proyecto:
cd amigo-secreto
- Abre el archivo
index.htmlen tu navegador web preferido.
¡Y listo para sortear!
¿Alguna pregunta, sugerencia, elogio o queja? ¡Conectemos y conversemos! 👇
 GitHub |
 |
 BlueSky |
|---|
Un buen agente secreto sabe dar crédito a sus fuentes. Los recursos que hicieron posible esta misión son:
- Ilustración Principal: La increíble imagen de la pantalla de inicio fue obtenida de Freepik, luego fue editada con su propio asistente de IA y, finalmente, fue modificada y adaptada a la paleta de colores de la app utilizando la herramienta de IA, ChatGPT.
- Iconografía: Todos los iconos que ves en la aplicación provienen de la fantástica librería de SVGRepo.
