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.
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.
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.
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">
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.
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>
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.
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}`; });
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!
Page loaded in 23.57 ms