📝 Live Word Counter

¡Bienvenido a Live Word Counter! Esta es una aplicación web sencilla y elegante que te permite contar palabras y caracteres en tiempo real mientras escribes. 🚀

✨ Características

• Conteo en tiempo real: Actualiza automáticamente el número de palabras y caracteres a medida que escribes.
• Interfaz intuitiva: Un diseño minimalista con un área de texto amplia y contadores claros.
• Responsive: Funciona perfectamente en dispositivos móviles y de escritorio gracias a su diseño adaptable.
• Sin dependencias: Construida únicamente con HTML, CSS y JavaScript puro, sin necesidad de frameworks externos.

🔧 Cómo funciona

La aplicación consta de tres archivos principales: index.html para la estructura, style.css para el estilo y script.js para la lógica interactiva.

Estructura HTML

El archivo index.html define la interfaz básica:

• Un <textarea> donde el usuario escribe el texto.
• Dos contadores (<h5> y <p>) para mostrar las palabras y caracteres.

Estilos CSS

El style.css proporciona un diseño moderno y centrado:

• Un contenedor principal (.wrapper) posicionado absolutamente en el centro de la pantalla.
• Colores oscuros para un aspecto profesional y fácil de leer.
• Sombras y bordes redondeados para un toque elegante.

Lógica JavaScript

El corazón de la aplicación está en script.js. Aquí se explica el código clave:

const inputTextArea = document.getElementById("input-textarea");
const characterCount = document.getElementById("character-count");
const wordCount = document.getElementById("word-count");

inputTextArea.addEventListener("input", function () {
    characterCount.textContent = inputTextArea.value.length;

    const txt = inputTextArea.value.trim();
    const wordArray = txt.split(/\s+/);

    let wordCountValue = 0;
    for (let i = 0; i < wordArray.length; i++) {
        if (wordArray[i] !== "") {
            wordCountValue++;
        }
    }
    wordCount.textContent = wordCountValue;
});

Conceptos aplicados:

• Manipulación del DOM: Se utilizan document.getElementById() para seleccionar elementos HTML (como el textarea y los contadores) y textContent para actualizar dinámicamente el contenido de los elementos en la página.
• Eventos: El addEventListener("input", ...) escucha cambios en el textarea y ejecuta la función cada vez que el usuario escribe o borra texto, permitiendo el conteo en tiempo real.
• Procesamiento de texto:
  • Para caracteres: Simplemente se cuenta la longitud del valor del textarea con inputTextArea.value.length.
  • Para palabras: Se usa trim() para eliminar espacios al inicio y final, luego split(/\s+/) divide el texto en un array usando expresiones regulares (que manejan múltiples espacios como uno solo). Un bucle for recorre el array y cuenta solo las palabras no vacías, evitando contar espacios extras como palabras.

Esta implementación es eficiente y precisa, manejando casos como texto con espacios múltiples o al inicio/final.

🛠️ Tecnologías utilizadas

• HTML5: Estructura semántica de la página.
• CSS3: Estilos modernos con flexbox para el layout y propiedades como box-sizing para un diseño consistente.
• JavaScript (ES6+): Lógica interactiva sin dependencias externas.

📖 Cómo usar la aplicación

1. Descarga el código: Clona este repositorio desde GitHub o descarga los archivos ZIP.

   git clone https://github.com/Seb-RM/Javascript_Html_Css-Live-Word-Counter.git
   

2. Abre el archivo: Navega al directorio del proyecto y abre index.html en tu navegador web favorito.

3. ¡Empieza a escribir!: Escribe en el área de texto y observa cómo los contadores se actualizan automáticamente.

4. Sin instalación: No necesitas servidores ni herramientas adicionales; funciona directamente en el navegador.