📝 Generador de Párrafos

Una aplicación web sencilla y elegante desarrollada con HTML, CSS y JavaScript que permite generar párrafos aleatorios de texto relacionados con conceptos de JavaScript. Ideal para desarrolladores que necesitan contenido con texto educativo y significativo.

✨ Características

• Generación Dinámica de Párrafos: Ingresa un número para generar la cantidad exacta de párrafos que necesites.
• Contenido Aleatorio: Utiliza un algoritmo de mezcla para ofrecer resultados variados en cada uso.
• Diseño Responsivo: Interfaz con diseño tipo "card" que se adapta a diferentes tamaños de pantalla.
• Validación de Entrada: Evita valores inválidos como cero o números excesivos.
• Contenido Educativo: Todos los párrafos generados contienen información relevante sobre conceptos de JavaScript.

🚀 ¿Cómo Funciona?

La aplicación cuenta con una interfaz intuitiva donde puedes especificar la cantidad de párrafos a generar. Al hacer clic en el botón "Generar", la aplicación selecciona y muestra aleatoriamente el número solicitado de párrafos de una colección predefinida de conceptos de JavaScript.

Elementos Clave

• Campo de Entrada: Acepta un número entero positivo que indica la cantidad de párrafos.
• Botón Generar: Inicia el proceso de generación de párrafos.
• Área de Resultados: Muestra los párrafos generados en un formato legible.

🛠 Tecnologías Utilizadas

• HTML5: Estructura y marcado semántico.
• CSS3: Estilos con características modernas como gradientes y flexbox.
• JavaScript Puro: Manipulación del DOM y lógica, sin uso de librerías externas.

📖 Instrucciones de Uso

1. Abre index.html en tu navegador web.
2. Ingresa el número deseado de párrafos en el campo de entrada (ej: 3).
3. Haz clic en el botón "Generar".
4. Visualiza los párrafos generados aleatoriamente en la sección inferior.

👩🏻‍💻 Fragmentos de Código Destacados

Conceptos de JavaScript Aplicados

Manipulación del DOM:

const items = document.getElementById('items');
const dataContainer = document.getElementById('data');

Estas líneas demuestran la selección de elementos usando getElementById(), un método fundamental del API del DOM para acceder a elementos HTML mediante su atributo ID.

Algoritmo de Mezcla (Shuffle):

function shuffle(array) {
    let currentIndex = array.length, randomIndex;
    // Algoritmo Fisher-Yates para mezclar el array de manera aleatoria
    while (currentIndex !== 0) {
        // Genera un índice aleatorio entre 0 y currentIndex - 1
        randomIndex = Math.floor(Math.random() * currentIndex);
        currentIndex--;
        // Intercambia el elemento actual con el elemento aleatorio usando destructuración
        [array[currentIndex], randomIndex] = [array[randomIndex], array[currentIndex]];
    }
    return array;
}

Implementa el algoritmo Fisher-Yates para asegurar una selección verdaderamente aleatoria de párrafos. Utiliza intercambio de elementos mediante destructuración de arrays.

Lógica Principal de Generación:

function generate() {
    // Valida si el valor ingresado es 0, muestra alerta y detiene la ejecución
    if (items.value == 0) {
        alert("¡El valor no puede ser cero!");
        return;
    // Si el valor es mayor que el número de párrafos disponibles, genera uno aleatorio
    } else if (items.value > paragraphs.length) {
        const randomIndex = Math.floor(Math.random() * paragraphs.length);
        dataContainer.innerHTML = `<p>${paragraphs[randomIndex]}</p>`;
    // Caso normal: mezcla el array, selecciona los primeros N párrafos y los agrega al DOM
    } else {
        const shuffledParagraphs = paragraphs;
        shuffle(paragraphs);
        const selectedParagraphs = shuffledParagraphs.slice(0, items.value);
        // Agrega los párrafos al DOM usando innerHTML, formateando cada uno en <p> y concatenándolos
        dataContainer.innerHTML = selectedParagraphs.map(paragraph => `<p>${paragraph}</p>`).join('');
    }
}

Esta función maneja:

• Validación de entrada

• Selección aleatoria

• Actualización del DOM

Ejemplifica:

• Uso de condicionales para diferentes escenarios

• Métodos de array como slice() y map()

• Literales de plantilla para generación dinámica de HTML

• Manipulación de innerHTML para actualizaciones eficientes del DOM

📥 Instalación y Descarga

1. Clona el repositorio:

   git clone https://github.com/Seb-RM/Javascript_Html_Css-Paragraph-Generator.git
   

2. Navega al directorio del proyecto:

   cd generador-parrafos
   

3. Abre index.html en tu navegador web preferido.

¡No se requieren dependencias adicionales ni pasos de compilación!

🎯 Estructura del Proyecto

generador-parrafos/
├── index.html      # Archivo HTML principal
├── style.css       # Estilos CSS
├── script.js       # Lógica de JavaScript
└── README.md       # Este archivo