Cómo programar un contador de palabras en JavaScript y Tailwind css

La programación de un contador de palabras es una excelente manera de aprender y practicar JavaScript mientras se utiliza Tailwind CSS para el estilo. En este artículo, te mostraremos cómo crear un contador de palabras simple que cuente las palabras ingresadas en un área de texto y las muestre en tiempo real. Además, optimizaremos el diseño con Tailwind CSS.

Introducción a JavaScript y Tailwind CSS

JavaScript es un lenguaje de programación que permite agregar interactividad a las páginas web. Por otro lado, Tailwind CSS es un framework CSS utilitario que facilita el diseño responsivo de una manera rápida y eficiente. Juntos, podemos crear aplicaciones web interactivas y atractivas.

Configuración del Proyecto

Para este proyecto, necesitas un entorno básico de desarrollo web. Puedes usar cualquier editor de código y un navegador web. Para usar Tailwind CSS, puedes incluirlo a través de una CDN o instalarlo en tu proyecto.

Opción 1: Usar CDN

Agrega el siguiente enlace a la sección <head> de tu archivo HTML:

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">

Opción 2: Instalación Local

Si prefieres usar Tailwind CSS en un proyecto local, puedes instalarlo a través de npm con los siguientes comandos:

npm install -D tailwindcss
npx tailwindcss init

Luego, configura Tailwind para que compile tus estilos.

Estructura HTML

Ahora que tienes Tailwind CSS configurado, vamos a crear la estructura básica del HTML. Crea un archivo index.html y añade el siguiente código:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Contador de Palabras</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100 flex items-center justify-center h-screen">
    <div class="bg-white p-6 rounded-lg shadow-lg w-96">
        <h1 class="text-2xl font-bold mb-4">Contador de Palabras</h1>
        <textarea id="textArea" class="border rounded-md p-2 w-full h-32 resize-none" placeholder="Escribe algo..."></textarea>
        <div class="mt-4">
            <span id="wordCount" class="font-semibold">Palabras: 0</span>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Descripción del HTML

Utilizamos flex para centrar el contenido.
Creamos un área de texto donde el usuario puede escribir.
Un contenedor para mostrar el conteo de palabras.

Estilos con Tailwind CSS

Usamos clases de Tailwind CSS para el diseño, como bg-white, shadow-lg, rounded-lg, y muchas más. Si deseas modificar los estilos, puedes ajustar estas clases según sea necesario.

Implementación de JavaScript

Ahora, crea un archivo llamado script.js y añade el siguiente código para contar las palabras:

const textArea = document.getElementById('textArea');
const wordCount = document.getElementById('wordCount');

textArea.addEventListener('input', () => {
    const text = textArea.value.trim();
    const words = text ? text.split(/\s+/) : [];
    wordCount.textContent = `Palabras: ${words.length}`;
});

Descripción del Código JavaScript

Seleccionamos el área de texto y el elemento donde se mostrará el conteo de palabras.
Añadimos un evento input al área de texto que se activa cada vez que el usuario escribe.
Contamos las palabras al dividir el texto en función de los espacios y actualizamos el conteo.

Conclusión

Has creado un contador de palabras simple utilizando JavaScript y Tailwind CSS. Este proyecto no solo es útil como herramienta de conteo de palabras, sino que también te permite practicar tus habilidades en JavaScript y mejorar tu comprensión de Tailwind CSS. Si deseas expandir este proyecto, considera añadir características como un contador de caracteres o límites de palabras.

Esperamos que este artículo te haya sido de ayuda. ¡Ahora es tu turno de jugar con el código y crear algo aún más impresionante!