Aplicación web interactiva para sorteos de amigo secreto
Desarrollado como parte del programa Alura Latam en colaboración con Oracle Next Education - Grupo 9
Amigo Secreto es una aplicación web moderna y funcional desarrollada para facilitar los sorteos de intercambio de regalos. La aplicación permite a los usuarios agregar nombres de participantes, validar las entradas y realizar sorteos aleatorios de manera intuitiva y divertida.
Este proyecto forma parte de las actividades prácticas del programa Alura Latam en colaboración con Oracle Next Education, donde aplicamos los conceptos fundamentales de desarrollo web frontend utilizando tecnologías core como HTML5, CSS3 y JavaScript vanilla.
- ✅ Manipulación del DOM con JavaScript
- ✅ Validación de formularios y manejo de eventos
- ✅ Diseño responsive con CSS3 y Flexbox
- ✅ Almacenamiento local con localStorage
- ✅ Lógica de programación aplicada a problemas reales
- ✅ Experiencia de usuario (UX) y interfaz intuitiva
- ✅ Programación orientada a eventos
- ✅ Buenas prácticas de desarrollo frontend
- Diseño moderno con gradientes y animaciones suaves
- Modo día/noche con toggle interactivo
- Totalmente responsive - Compatible con móviles y tablets
- Iconografía con Font Awesome para mejor UX
- Animaciones CSS y transiciones fluidas
- Solo acepta nombres válidos (letras, espacios, acentos)
- Previene caracteres especiales como símbolos y números
- Validación en tiempo real con feedback visual
- Detección de duplicados (case-insensitive)
- Longitud mínima y máxima configurable
- Algoritmo aleatorio justo y confiable
- Animación de sorteo con efectos visuales
- Efecto confeti al mostrar el ganador
- Contador de sorteos realizados
- Historial persistente en navegador
- Almacenamiento local automático
- Recuperación de datos al recargar página
- Exportar/Importar listas (funcionalidad avanzada)
- Backup automático de preferencias
Enter- Agregar amigoCtrl + Enter- Realizar sorteoEscape- Cerrar resultadoCtrl + L- Focus en campo de entrada
| Tecnología | Propósito | Versión |
|---|---|---|
 |
Estructura semántica | HTML5 |
 |
Estilos y diseño responsive | CSS3 |
 |
Lógica y interactividad | ES6+ |
 |
Iconografía | v6.4.0 |
 |
Tipografía Poppins | Latest |
📦 amigo-secreto/
├── 📄 index.html # Estructura principal HTML5
├── 🎨 styles.css # Estilos CSS3 y responsive design
├── ⚡ main.js # Lógica JavaScript y funcionalidades
├── 📸 images/ # Capturas de pantalla
│ ├── desktop-light.png
│ ├── desktop-dark.png
│ ├── mobile-view.png
|
└── 📖 README.md # Este archivo
- ✅ Navegador web moderno (Chrome, Firefox, Safari, Edge)
- ✅ Servidor web local (opcional) - Live Server, XAMPP, etc.
-
Clonar o descargar el repositorio:
git clone https://github.com/Oliver-Fj/alura-challengue cd amigo-secreto-one -
Abrir en navegador:
- Doble clic en
index.html, o - Usar Live Server en VS Code, o
- Servir con servidor local
- Doble clic en
-
¡Listo para usar! 🎉
- Escribir el nombre en el campo de texto
- Hacer clic en "Adicionar" o presionar
Enter - El nombre se valida automáticamente
- Se muestra en la lista con numeración
- Agregar al menos un participante
- Hacer clic en "Sortear Amigo"
- Ver la animación del sorteo
- ¡Disfrutar del efecto confeti!
- Cambiar tema: Clic en el botón sol/luna
- Eliminar participante: Hover sobre nombre → clic en ❌
- Limpiar lista: Clic en 🗑️ (con confirmación)
- Nuevo sorteo: Botón "Nuevo Sorteo" después del resultado
// Ejemplo de validación implementada
function isValidName(name) {
const nameRegex = /^[a-zA-ZÀ-ÿ\u00f1\u00d1\s]+$/;
const trimmedName = name.trim();
return nameRegex.test(name) &&
trimmedName.length >= 2 &&
trimmedName.length <= 50;
}- Persistencia automática de preferencia
- Variables CSS para fácil customización
- Transiciones suaves entre temas
- Detección de preferencia del sistema (futuro)
// Persistencia automática de datos
localStorage.setItem('amigoSecreto_friends', JSON.stringify(friends));
localStorage.setItem('amigoSecreto_theme', currentTheme);
| Funcionalidad | Estado | Descripción |
|---|---|---|
| ✅ Validación de nombres | Pasado | Solo acepta letras válidas |
| ✅ Sorteo aleatorio | Pasado | Distribución uniforme |
| ✅ Responsive design | Pasado | Móvil, tablet, desktop |
| ✅ Persistencia datos | Pasado | localStorage funcional |
| ✅ Modo día/noche | Pasado | Cambio fluido de temas |
| ✅ Manejo de errores | Pasado | Validaciones y feedback |
| ✅ Accesibilidad | Pasado | Contraste y navegación |
| ✅ Performance | Pasado | Carga < 2s, animaciones 60fps |
- Nombres duplicados (case-insensitive)
- Caracteres especiales y números
- Lista vacía al sortear
- Límite máximo de participantes (50)
- Nombres solo con espacios
- Caracteres con acentos y ñ
📚 Fundamentos Web: [████████████] 100%
🎨 CSS Avanzado: [████████████] 100%
⚡ JavaScript Lógica: [████████████] 100%
🔄 DOM Manipulation: [████████████] 100%
📱 Responsive Design: [████████████] 100%
🎯 Proyecto Integrador: [████████████] 100%
- ✅ Problem Solving - Algoritmos de validación y sorteo
- ✅ Clean Code - Código legible y bien documentado
- ✅ UX/UI Design - Interfaz intuitiva y atractiva
- ✅ Responsive Web - Adaptabilidad total
- ✅ Version Control - Git y GitHub
- ✅ Testing - Pruebas manuales exhaustivas
- Modo multijugador con WebSockets
- Compartir sorteos via URL
- Historial de sorteos con fechas
- Perfiles de usuario básicos
- Restricciones personalizadas (evitar ciertas combinaciones)
- Sorteo por grupos o categorías
- Notificaciones push web
- Exportar resultados a PDF
- API para sorteos programáticos
- Integración con calendarios
- Modo offline con Service Workers
- Sincronización en la nube
Oliver Felix Perez
- 🎓 Estudiante: Alura Latam x Oracle Next Education - Grupo 9
- 💼 Rol: Apasionado por la Tecnología
- 🌐 LinkedIn: oliver-felix-perez
- 🐙 GitHub: oliverfelixperez
- 📧 Email: [email protected]
- Institución: Alura Latam en colaboración con Oracle Next Education (ONE)
- Grupo: G9 - huancayo 2024
- Instructores: Equipo Alura Latam y Oracle Education
- Duración: 6 meses intensivos
- Metodología: Proyecto-based learning
¡Las contribuciones son bienvenidas! Si eres compañero del Grupo 9 o parte de la comunidad ONE:
- Fork el proyecto
- Crea una rama feature (
git checkout -b feature/AmazingFeature) - Commit tus cambios (
git commit -m 'Add some AmazingFeature') - Push a la rama (
git push origin feature/AmazingFeature) - Abre un Pull Request
- Seguir convenciones de naming del proyecto
- Documentar nuevas funcionalidades
- Mantener backward compatibility
- Incluir tests para nuevas features
- Respetar el coding style existente
Gracias al programa conjunto de Alura Latam y Oracle Next Education por proporcionar educación de calidad mundial y la oportunidad de desarrollar proyectos reales que impactan en la comunidad.
Agradecimiento especial a todos los compañeros del Grupo 9 por el apoyo mutuo, las sesiones de estudio grupal y el intercambio de conocimientos durante todo el programa.
Por la guía experta, feedback constructivo y dedicación para ayudarnos a crecer como desarrolladores profesionales.
A todas las librerías, frameworks y recursos utilizados que hacen posible el desarrollo web moderno:
- Font Awesome por los iconos
- Google Fonts por la tipografía Poppins
- MDN Web Docs por la documentación
Prueba la aplicación aquí: Amigo Secreto - Demo
