Proyecto simple para realizar sorteos de amigo secreto con nombres ingresados por el usuario.
Explora la documentación »
Ver Demo
·
Reportar Bug
·
Solicitar Funcionalidad
Tabla de Contenido
Este proyecto es una aplicación web sencilla que permite:
- Ingresar una lista de nombres.
- Validar que no se ingresen duplicados ni espacios vacíos.
- Realizar un sorteo aleatorio para seleccionar un “Amigo Secreto”.
Fue creado como práctica para fortalecer las habilidades en HTML, CSS y sobre todo JavaScript, enfocándose en manipulación del DOM y manejo de eventos.
- HTML5 – Estructura semántica de la interfaz.
- CSS3 – Estilos personalizados y uso de Google Fonts.
- JavaScript – Lógica del sorteo y actualización dinámica del DOM.
Para ejecutar el proyecto necesitas únicamente un navegador moderno (Chrome, Firefox, Edge, etc.).
- Clona el repositorio
git clone https://github.com/GusGus0012/juego-amigo-secreto.git
- Accede a la carpeta del proyecto
cd juego-amigo-secreto - Abre el archivo
index.htmlen tu navegador
- Escribe nombres en el campo de texto.
- Haz clic en Añadir para agregarlos a la lista.
- Una vez que tengas al menos dos nombres, presiona Sortear Amigo para obtener un resultado aleatorio.
Ejemplo de funciones principales en JavaScript:
function agregarAmigo() {
let amigoAgregado = document.getElementById('amigo').value; // Variable para almacenar el nombre del amigo agregado
if (amigoAgregado.trim() === '') { // Verifica si el input está vacío o solo contiene espacios
alert("Por favor, inserte un nombre."); // Mensaje de error si el nombre está vacío o solo contiene espacios
}
else if (amigos.includes(amigoAgregado)) {
alert("El nombre ya existe. Por favor, inserte un nombre diferente."); // Mensaje de error si el nombre ya existe
}
else {
amigos.push(amigoAgregado); // Añade el nombre a la lista de amigos
actualizarListaAmigos(); // Actualiza la lista de amigos en la interfaz
}
return LimpiarCajaTexto(); // Sale de la función y limpia la casilla
}function sortearAmigo() {
let maximo = amigos.length - 1; // Calcula el índice máximo basado en la cantidad de amigos
let indiceAleatorio; // Variable para almacenar el número aleatorio generado que será el índice del amigo seleccionado
if (amigos.length < 2) {
alert("Por favor, agregue al menos dos amigos para realizar el sorteo."); // Mensaje de error si hay menos de dos amigos ya que no tendría sentido sortear
return;
}
indiceAleatorio = Math.floor((Math.random() * (maximo + 1))); // Genera un número secreto aleatorio entre el mínimo = 0 (por eso ya no lo declaro como variable) y el máximo que sería la cantidad de amigos
let resultado = document.getElementById('resultado'); // Obtiene el elemento donde se mostrará el resultado del sorteo
resultado.innerHTML = amigos[indiceAleatorio]; // Muestra el nombre del amigo seleccionado aleatoriamente en el elemento resultado
}- Añadir lista dinámica de amigos
- Implementar validaciones para entradas duplicadas o vacías
- Crear función de sorteo aleatorio
- Mejorar estilos visuales (CSS avanzado o framework)
- Habilitar reinicio de la lista
- Implementar almacenamiento local (LocalStorage)
¡Las contribuciones son lo que hace que la comunidad de código abierto sea increíble!
Si tienes una sugerencia para mejorar este proyecto:
- Haz un fork del proyecto
- Crea una rama de feature (
git checkout -b feature/NuevaFeature) - Haz commit de tus cambios (
git commit -m 'Agrega NuevaFeature') - Haz push a la rama (
git push origin feature/NuevaFeature) - Abre un Pull Request
Distribuido bajo la licencia MIT. Consulta el archivo LICENSE.txt para más información.
Gustavo Berdejo - LinkedIn
Link del Proyecto: https://github.com/GusGus0012/juego-amigo-secreto