Crear archivo con números aleatorios en rango con separador

Generador de números aleatorios online

Hoy te quiero compartir una herramienta en línea para generar números aleatorios directamente en el navegador web. Puedes especificar el límite inferior, límite superior y cantidad de números aleatorios que quieres generar.

También puedes especificar el separador de números aleatorios para que sea una coma, un punto, un espacio, un salto de línea o cualquier carácter.

El generador de números aleatorios permite mostrar los números generados o descargarlos en un archivo de texto (extensión txt).

Acceder al generador

La herramienta para generar un archivo con números aleatorios se encuentra en el siguiente enlace: https://parzibyte.github.io/ejemplos-javascript/generar-numeros-aleatorios/

Todo el proceso se hace en el navegador web con JavaScript, incluyendo la generación del archivo. A continuación explicaré el funcionamiento técnico.

Creando generador de números

Para hacer un generador de números aleatorios simplemente hay que concatenar varios números en una cadena y mostrar dicha cadena en el contenedor o colocarla en un archivo.

He usado la función previamente expuesta en mi blog para generar un número aleatorio en un rango:

// Tomado de https://parzibyte.me/blog/2020/08/01/javascript-numero-aleatorio-rango/
const obtenerNumeroAleatorioEnRango = (min, max) => {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

Después he encerrado el comportamiento en una función que lee los valores de los input y concatena varios números aleatorios usando el separador y los límites:

const generar = () => {
    let resultado = "";
    const separador = $separador.value;
    const limiteInferior = $limiteInferior.valueAsNumber;
    const limiteSuperior = $limiteSuperior.valueAsNumber;
    const cantidad = $cantidad.valueAsNumber;
    for (let i = 0; i < cantidad; i++) {
        resultado += (obtenerNumeroAleatorioEnRango(limiteInferior, limiteSuperior)).toString() + separador;
    }
    return resultado;
}

En este caso $limiteInferior, $limiteSuperior y todas las constantes que inician con el signo de peso son elementos del DOM obtenidos con querySelector.

Después, en el clic del botón simplemente genero los números aleatorios y los muestro en el contenedor modificando su textContent:

$generarYMostrar.addEventListener("click", () => {
    if (!valoresSonValidos()) {
        return alert("Rellene todos los campos");
    }
    $contenedor.textContent = generar();
});
Generar cantidad de números aleatorios y mostrarlos

O los guardo en un archivo usando Blob y genero un enlace para descargarlo:

$generarEnArchivo.addEventListener("click", () => {
    if (!valoresSonValidos()) {
        return alert("Rellene todos los campos");
    }
    const a = document.createElement("a");
    const archivo = new Blob([generar()], { type: 'text/plain' });
    const url = URL.createObjectURL(archivo);
    a.href = url;
    a.download = `${$cantidad.valueAsNumber} números aleatorios entre ${limiteInferior.valueAsNumber} y ${limiteSuperior.valueAsNumber}.txt`;
    a.click();
    URL.revokeObjectURL(url);
});

Así como se ve en la siguiente imagen:

Crear archivo con números aleatorios en rango con separador
Crear archivo con números aleatorios en rango con separador

El código HTML, JavaScript y CSS completos están en el repositorio de GitHub, ya que aquí solo he mostrado las partes más importantes: https://github.com/parzibyte/ejemplos-javascript/tree/master/generar-numeros-aleatorios

Recuerda que puedes acceder al generador en: https://parzibyte.github.io/ejemplos-javascript/generar-numeros-aleatorios/

Y por aquí puedes aprender más de JavaScript.

Estoy aquí para ayudarte 🤝💻


Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *