Inicio Apuntes FPApuntes DAW Selector de nombres aleatorio, crea el tuyo con JavaScript

Selector de nombres aleatorio, crea el tuyo con JavaScript

Selecciona nombres cargados desde un archivo Json o añadelos vía formulario

Publicado por entreunosyceros

Una vez más aquí. Hoy vengo a dejar un pequeño artículo para un «amiJo» llamado Nacho. Este hombre me contaba que los alumnos que tiene en su clase, se le quejan de que las preguntas que hace siempre caen sobre los mismos, que debería repartirlas más. Pero él me decía que no es algo que haga a propósito, que le salían siempre los mismos nombres. Por eso se me ocurrió que debería tener a mano un pequeño script para nombrar a sus alumnos de forma aleatoria. Dicho esto, me puse a escribir un selector de nombres aleatorio. Esta aplicación web es perfecta para situaciones donde necesitas tomar decisiones de manera imparcial y aleatoria.

Esto no deja de ser una versión más sencilla del sistema de sorteos que publiqué en esta misma web hace unos meses. Pero quizás esto que vamos a ver es algo más rápido, y mucho más sencillo de utilizar y poner a funcionar. Por este motivo, creo que le puede venir bien a quien me contó que le podía venir bien algo así.

Funcionamiento de este selector de nombres aleatorio

Este selector de nombres aleatorio es una aplicación web sencilla de utilizar. Funciona cargando una lista de nombres desde un archivo JSON y permitiéndote seleccionar un nombre al azar con un simple clic. Además también permite añadir nuevos nombres a la lista del sorteo desde la propia página, si lo necesitas.

selector de nombres
  1. Carga los nombres de los participantes. La aplicación va a cargar de forma automática una lista de nombres desde un archivo JSON llamado nombres.json al iniciar.
  2. Selección de ganadores. Para seleccionar de uno en uno, los ganadores, solo es necesario hacer clic en el botón «Seleccionar Nombre» y verás cómo el selector elige un nombre al azar de la lista y lo muestra.
  3. Añadir Nuevos Nombres. Si por el motivo que sea, necesitas añadir más nombres a la lista, simplemente escribe el nombre en el campo input proporcionado y haz clic en «Añadir Nombre«.
  4. Visualización de Nombres Seleccionados y Guardados: Los nombres seleccionados se mostrarán en el área de visualización. Los nombres guardados se mantendrán en una lista por separado. Así se puede ver que nombres quedan por salir premiados.

Un vistazo rápido al código de este selector de nombres aleatorio

Este proyecto está construido con HTML, CSS, JavaScript y un archivo json, y cada componente cumple un papel importante en la funcionalidad de la aplicación. A continuación vamos a ver el código que forma este proyecto.

Archivo index.html

Este archivo define la estructura de la página web en la que se va a mostrar el proyecto. Incluyendo los botones, formularios y áreas de visualización.

<!DOCTYPE html>
<html lang="es"> <!-- Establece el idioma de la página como español -->

<head>
    <meta charset="UTF-8"> <!-- Especifica el conjunto de caracteres UTF-8 para admitir caracteres especiales -->
    <title>Selector de Nombres</title>
    <!-- Establece el título de la página que se mostrará en la pestaña del navegador -->
    <link rel="stylesheet" href="styles.css"> <!-- Enlaza el archivo CSS para aplicar estilos a la página -->
</head>

<body>
    <div class="titulo" aria-label="Hecho en entreunosyceros.net"></div>
    <!-- Crea un elemento <div> con una clase "titulo" y un atributo "aria-label" -->
    <button id="seleccionar">Seleccionar Nombre</button> <!-- Crea un botón con un id "seleccionar" -->
    <div id="contenedor-nombres"> <!-- Crea un contenedor con un id "contenedor-nombres" -->
        <ul id="lista-nombres"></ul> <!-- Crea una lista desordenada con un id "lista-nombres" -->
        <h2>Nombres incluidos en el sorteo:</h2> <!-- Crea un encabezado secundario con el texto indicado -->
        <ul id="nombres-guardados"></ul> <!-- Crea otra lista desordenada con un id "nombres-guardados" -->
    </div>
    <form id="formulario-nuevo-nombre" class="formulario-tarjeta">
        <!-- Crea un formulario con un id "formulario-nuevo-nombre" y una clase "formulario-tarjeta" -->
        <input type="text" id="nuevo-nombre" placeholder="Introduce un nuevo nombre" class="input-tarjeta">
        <!-- Crea un campo de entrada de texto con un id "nuevo-nombre", un marcador de posición y una clase "input-tarjeta" -->
        <button type="submit" class="boton-tarjeta">Añadir Nombre</button>
        <!-- Crea un botón de envío del formulario con una clase "boton-tarjeta" -->
        <div id="mensaje-error" class="mensaje-error"></div>
        <!-- Crea un elemento <div> con un id "mensaje-error" y una clase "mensaje-error" -->
    </form>
    <script src="script.js"></script> <!-- Enlaza el archivo de script JavaScript para agregar funcionalidades -->
</body>

</html>

Archivo styles.css

Este archivo establece los estilos visuales, desde los colores y fuentes hasta la disposición de los elementos en la página.

/* Estilos para el cuerpo de la página */
body {
    font-family: Arial, sans-serif; /* Define la fuente de texto a utilizar */
    background-color: #5900ff; /* Establece el color de fondo */
    margin: 0; /* Elimina los márgenes predeterminados */
    padding: 20px; /* Añade un espacio alrededor del contenido */
    display: flex; /* Usa el modelo de caja flexible para organizar elementos */
    flex-direction: column; /* Establece la dirección de los elementos como columna */
    align-items: center; /* Centra los elementos horizontalmente */
}

/* Estilos para los botones */
button {
    padding: 10px 20px; /* Añade espacio alrededor del texto dentro del botón */
    font-size: 16px; /* Establece el tamaño de la fuente */
    margin-bottom: 20px; /* Añade espacio entre el botón y el siguiente elemento */
}

/* Estilos para el contenedor de nombres */
#contenedor-nombres {
    max-width: 600px; /* Establece el ancho máximo del contenedor */
    width: 100%; /* Establece el ancho al 100% */
    background-color: #fff; /* Establece el color de fondo */
    padding: 20px; /* Añade espacio alrededor del contenido */
    border-radius: 10px; /* Añade esquinas redondeadas */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Añade una sombra alrededor del contenedor */
    text-align: left; /* Alinea el texto a la izquierda */
    margin-bottom: 20px; /* Añade espacio entre este elemento y el siguiente */
    border: 2px solid #8a2be2; /* Establece un borde de color y grosor */
}

/* Estilos para la lista de nombres guardados */
#nombres-guardados {
    list-style-type: none; /* Elimina la viñeta de la lista */
    padding: 0; /* Elimina el espacio entre elementos de la lista */
    margin-top: 10px; /* Añade espacio encima de la lista */
}

/* Estilos para la lista de nombres seleccionados */
#lista-nombres {
    font-weight: bold; /* Establece el grosor de la fuente */
    font-size: larger; /* Establece un tamaño de fuente mayor */
    list-style-type: none; /* Elimina la viñeta de la lista */
    text-align: center; /* Alinea el texto al centro */
}

/* Estilos para el formulario de añadir nombre */
.formulario-tarjeta {
    background-color: #8a2be2; /* Establece el color de fondo */
    padding: 20px; /* Añade espacio alrededor del contenido */
    border-radius: 10px; /* Añade esquinas redondeadas */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Añade una sombra alrededor del formulario */
    text-align: left; /* Alinea el texto a la izquierda */
    width: 100%; /* Establece el ancho al 100% */
    max-width: 600px; /* Establece el ancho máximo del formulario */
    width: 100%; /* Establece el ancho al 100% */
    margin-bottom: 20px; /* Añade espacio entre este elemento y el siguiente */
    border: 1px solid #fff; /* Establece un borde de color y grosor */
}

/* Estilos para el campo de entrada de texto */
.input-tarjeta {
    width: calc(100% - 20px); /* Establece el ancho del campo de entrada */
    padding: 10px; /* Añade espacio alrededor del contenido del campo */
    margin-bottom: 10px; /* Añade espacio entre el campo y el siguiente elemento */
    border: none; /* Elimina el borde del campo */
    border-radius: 5px; /* Añade esquinas redondeadas */
    font-size: 16px; /* Establece el tamaño de la fuente */
}

/* Estilos para el botón de añadir nombre */
.boton-tarjeta {
    padding: 10px 20px; /* Añade espacio alrededor del texto dentro del botón */
    font-size: 16px; /* Establece el tamaño de la fuente */
    border: none; /* Elimina el borde del botón */
    border-radius: 5px; /* Añade esquinas redondeadas */
    background-color: #fff; /* Establece el color de fondo */
    color: #8a2be2; /* Establece el color del texto */
    cursor: pointer; /* Cambia el cursor al pasar por encima del botón */
    transition: background-color 0.3s; /* Añade una transición suave al color de fondo */
}

/* Estilos para el botón de añadir nombre cuando se hace hover */
.boton-tarjeta:hover {
    background-color: #f0f0f0; /* Cambia el color de fondo al hacer hover */
}
/*Título*/
.titulo {
    box-sizing: border-box;
    padding: 10px;
    border: none;
    font: normal 38px / normal "Warnes", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    white-space: pre;
    text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgba(255, 0, 0),
      0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272,
      0 0 80px #4e4e4e, 0 0 100px #2b2b2b;
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }
  /* Estilo para el título cuando se le hace hover */
  .titulo:hover {
    text-shadow: 0 0 10px rgb(73, 73, 73), 0 0 20px rgb(56, 56, 56),
      0 0 30px rgb(48, 48, 48), 0 0 40px #5c5c5c, 0 0 70px #000000,
      0 0 80px #000000, 0 0 100px #000000;
  }
  /* Texto del título */
  .titulo::after {
    content: "Selección del afortunado/a";
  }

  /* Ganador */

  /* Texto que muestra al ganador */
.ganador {
    box-sizing: border-box;
    padding: 10px;
    border: none;
    font: normal 38px / normal "Warnes", Helvetica, sans-serif;
    color: rgba(255, 255, 255, 1);
    text-align: center;
    white-space: pre;
    text-shadow: 0 0 10px rgb(255, 0, 0), 0 0 20px rgb(25, 0, 255),
      0 0 30px rgba(255, 0, 0), 0 0 40px #727272, 0 0 70px #727272,
      0 0 80px #4e4e4e, 0 0 100px #2b2b2b;
    -webkit-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -moz-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    -o-transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    transition: all 200ms cubic-bezier(0.42, 0, 0.58, 1);
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
  }

Archivo script.js

Este archivo proporciona la funcionalidad interactiva, como cargar nombres, seleccionar uno aleatoriamente y añadir nuevos nombres.

// Este evento se dispara cuando el DOM (la estructura de la página web) ha cargado completamente.
document.addEventListener('DOMContentLoaded', function () {
    let nombres = []; // Un arreglo para almacenar los nombres cargados desde el archivo JSON.

    // Esta función carga los nombres desde el archivo JSON usando la API de Fetch.
    function cargarNombres() {
        fetch('nombres.json') // Hace una petición para obtener el archivo 'nombres.json'.
            .then(response => {
                if (!response.ok) { // Si la respuesta no es satisfactoria (por ejemplo, un error HTTP), lanza un error.
                    throw new Error('No se pudo cargar la lista de nombres.');
                }
                return response.json(); // Convierte la respuesta en un objeto JSON.
            })
            .then(data => {
                if (!data || !data.nombres || !Array.isArray(data.nombres)) { // Si el JSON no tiene la estructura esperada, lanza un error.
                    throw new Error('El archivo de nombres tiene un formato incorrecto.');
                }
                nombres = data.nombres; // Almacena los nombres en la variable 'nombres'.
                mostrarNombresGuardados(); // Llama a la función para mostrar los nombres en la página.
            })
            .catch(error => { // Captura cualquier error que haya ocurrido en las promesas anteriores.
                console.error('Error:', error.message); // Imprime el mensaje de error en la consola.
                mostrarError(error.message); // Llama a la función para mostrar un mensaje de error en la página.
            });
    }

    // Esta función muestra los nombres guardados en el archivo JSON en la página HTML.
    function mostrarNombresGuardados() {
        const listaNombresGuardados = document.getElementById('nombres-guardados');
        listaNombresGuardados.innerHTML = nombres.map(nombre => `<li>${nombre}</li>`).join(''); // Crea una lista de elementos <li> con los nombres.
    }

    // Esta función guarda los nombres actualizados en el archivo JSON.
    function guardarNombres() {
        fetch('nombres.json', {
            method: 'POST', // Usa el método HTTP POST para enviar datos.
            headers: {
                'Content-Type': 'application/json' // Indica que el contenido es de tipo JSON.
            },
            body: JSON.stringify({ nombres }) // Convierte el arreglo de nombres a una cadena JSON y lo envía en el cuerpo de la petición.
        })
            .then(response => {
                if (!response.ok) { // Si la respuesta no es satisfactoria, lanza un error.
                    throw new Error('No se pudo guardar la lista de nombres.');
                }
            })
            .catch(error => { // Captura cualquier error que haya ocurrido en las promesas anteriores.
                console.error('Error:', error.message); // Imprime el mensaje de error en la consola.
                mostrarError(error.message); // Llama a la función para mostrar un mensaje de error en la página.
            });
        mostrarNombresGuardados(); // Llama a la función para actualizar la lista de nombres en la página.
    }

    // Esta función selecciona un nombre al azar y lo muestra en la página.
    function seleccionarNombre() {
        if (nombres.length > 0) {
            const indice = Math.floor(Math.random() * nombres.length); // Indice para seleccionar el nombre
            const nombreSeleccionado = nombres.splice(indice, 1); // Remueve el nombre seleccionado del array 'nombres'.
            const listaNombres = document.getElementById('lista-nombres');
            listaNombres.innerHTML = `FELICIDADES!! <li class="ganador">${nombreSeleccionado}</li>`; // Muestra un mensaje de felicitación.
            guardarNombres(); // Guarda los nombres actualizados en el archivo JSON.
        } else {
            alert("¡Todos los nombres han sido seleccionados! ¡Introduce nuevos nombres!"); // Muestra un mensaje de alerta si no hay más nombres.
        }
    }

    // Esta función añade un nuevo nombre a la lista.
    function añadirNombre(event) {
        event.preventDefault();
        const nuevoNombre = document.getElementById('nuevo-nombre').value;
        if (nuevoNombre.trim() !== "") {
            nombres.push(nuevoNombre); // Agrega el nuevo nombre al arreglo 'nombres'.
            guardarNombres(); // Guarda los nombres actualizados en el archivo JSON.
            document.getElementById('nuevo-nombre').value = ""; // Limpia el campo de entrada.
        }
    }

    // Esta función muestra un mensaje de error en la página por un tiempo determinado.
    function mostrarError(mensaje) {
        const mensajeError = document.getElementById('mensaje-error');
        mensajeError.textContent = mensaje;
        setTimeout(() => {
            mensajeError.textContent = "";
        }, 5000); // El mensaje de error desaparecerá después de 5 segundos.
    }

    cargarNombres(); // Llama a la función para cargar los nombres cuando el DOM esté completamente cargado.

    // Agrega escuchadores de eventos a los elementos de la página.
    document.getElementById('seleccionar').addEventListener('click', seleccionarNombre);
    document.getElementById('formulario-nuevo-nombre').addEventListener('submit', añadirNombre);
});

Archivo nombres.json

En este archivo se incluye el array de nombres que tomará de forma aleatoria el programa.

{
    "nombres": [
        "Nombre 1",
        "Nombre 2",
        "Nombre 3",
        "Nombre 4",
        "Nombre 5",
        "Nombre 6",
        "Nombre 7",
        "Nombre 8",
        "Nombre 9",
        "Nombre 10"
    ]
}

Para aquellos interesados en explorar más a fondo el código, se puede encontrar todos los archivos en el repositorio de GitHub en el que alojé este proyecto. Si quieres probar este pequeño proyecto antes de descargarlo a tu equipo, puedes hacerlo en el siguiente enlace.

El selector de nombres aleatorio es una herramienta versátil que puede resultar útil en una gran variedad de situaciones. Ya sea para sorteos, decisiones al azar o simplemente para añadir un toque de diversión. Espero que a mi «amiJo» le resulte útil y sus alumnos se dejen de quejar.

También te puede interesar ...

Deja un comentario

* Al utilizar este formulario, aceptas que este sitio web almacene y maneje tus datos.

Adblock Detectado!!

Ayúdanos deshabilitando la extensión AdBlocker de tu navegador para visitar esta web.
Si no sabes hacerlo en Chrome, consulta el siguiente enlace. Si utilizas Firefox, puedes consultar este otro enlace.
Esto mejorará tu experiencia en este sitio web.