🎲 Generador de Números Aleatorios

📖 Descripción

¡Bienvenido al Generador de Números Aleatorios! Esta es una aplicación web sencilla y divertida que te permite generar un número aleatorio entre 1 y 1000 con solo un clic. Ideal para juegos, sorteos o simplemente para divertirte probando la suerte. La interfaz es minimalista, rápida y fácil de usar, con una animación suave que hace que cada generación sea visualmente atractiva.

✨ Características

• Generación instantánea: Obtén un número aleatorio al instante al presionar el botón.
• Rango definido: Números entre 1 y 1000.
• Interfaz intuitiva: Diseño centrado y limpio con colores vibrantes.
• Animación suave: Efecto de fade-in para una experiencia visual agradable.
• Responsive: Funciona en dispositivos móviles y de escritorio.

🔧 Funcionamiento

La aplicación consta de tres elementos principales:

• Título: Muestra el nombre de la aplicación.
• Contenedor del número: Un área donde se muestra el número generado, con animación.
• Botón "Generate": Al hacer clic, genera y muestra un nuevo número aleatorio.

El flujo es simple: abre la página, haz clic en el botón y ¡ve el número aparecer con un efecto visual!

🛠 Tecnologías Utilizadas

• HTML: Estructura básica de la página web.
• CSS: Estilos para el diseño, incluyendo flexbox para centrado, colores y animaciones.
• JavaScript: Lógica para la generación de números aleatorios y manipulación del DOM.

📝 Fragmentos de Código Destacados

JavaScript: Manipulación del DOM y Generación de Números

El corazón de la aplicación está en script.js. Aquí se destacan los conceptos clave de manipulación del DOM y manejo de eventos.

// Selección de elementos del DOM
const generateBtn = document.getElementById('generate-btn');
const numberElement = document.getElementById('random-number');

• Explicación: Usamos document.getElementById() para seleccionar el botón y el elemento donde se mostrará el número. Esto es fundamental para interactuar con el DOM, permitiendo acceder y modificar elementos HTML desde JavaScript.

// Agregar un event listener al botón
generateBtn.addEventListener("click", ()=> {
    // Generar un número aleatorio entre 1 y 1000
    const randomNumber = Math.floor(Math.random() * 1000) + 1;
    // Actualizar el contenido del elemento
    numberElement.textContent = randomNumber;
});

• Explicación
  • addEventListener("click", ...): Escucha el evento de clic en el botón. Es una función clave para manejar interacciones del usuario, permitiendo ejecutar código cuando ocurre un evento.
  • Math.random(): Genera un número decimal aleatorio entre 0 y 1. Multiplicado por 1000 y redondeado hacia abajo con Math.floor(), obtenemos un entero entre 0 y 999, al que sumamos 1 para el rango 1-1000.
  • textContent: Propiedad para cambiar el texto dentro del elemento <span>. Es una forma eficiente de manipular el contenido de elementos del DOM sin afectar el HTML interno.

Estos fragmentos ilustran cómo JavaScript interactúa con el DOM para crear una experiencia dinámica: selecciona elementos, responde a eventos y actualiza la interfaz en tiempo real.

CSS: Animación y Diseño

.number-container {
    font-size: 3rem;
    margin-bottom: 1rem;
    animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

• Explicación: La animación fadeIn hace que el número aparezca suavemente, mejorando la UX. Usa @keyframes para definir estados de animación y transform para movimiento vertical.

📥 Cómo Descargar el Código desde GitHub

1. Ve al repositorio de GitHub: [Enlace al repositorio] (reemplaza con el enlace real).
2. Haz clic en el botón "Code" (verde).
3. Selecciona "Download ZIP" para descargar todos los archivos.
4. Extrae el ZIP y abre index.html en tu navegador.

Si tienes Git instalado:

git clone https://github.com/Seb-RM/Javascript_Html_Css-Random-Number-Generator.git
cd generador-numeros-aleatorios

🚀 Cómo Usar la Aplicación

1. Abre el archivo index.html en tu navegador web (Chrome, Firefox, etc.).
2. Haz clic en el botón "Generate".
3. ¡Disfruta del número aleatorio que aparece con animación!

No requiere instalación ni servidor; es completamente cliente-side.