Creación de un sistema de comentarios simple con HTML, Tailwind CSS y JavaScript

Un sistema de comentarios es una característica esencial en muchas aplicaciones web, permitiendo a los usuarios interactuar y compartir sus opiniones. En este artículo, aprenderás a crear un sistema de comentarios simple utilizando HTML para la estructura, Tailwind CSS para el estilo y JavaScript para la funcionalidad. Este enfoque es ideal para principiantes que deseen mejorar sus habilidades en desarrollo web.

¿Qué vamos a construir?

Crearemos un sistema de comentarios que permitirá a los usuarios:

Escribir un comentario.
Ver los comentarios ya existentes.
Eliminar comentarios.

Requisitos previos

Antes de comenzar, deberías tener un conocimiento básico de:

HTML
CSS
JavaScript

Estructura del proyecto

Vamos a estructurar nuestro proyecto de la siguiente manera:

/comentarios
|-- index.html
|-- styles.css
|-- script.js

1. Configuración del archivo HTML

Comencemos creando el archivo index.html. Este archivo contendrá la estructura HTML básica y enlazará los archivos CSS y JavaScript.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sistema de Comentarios</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-5">
        <h1 class="text-3xl font-bold mb-5">Sistema de Comentarios</h1>
        <div id="comment-form" class="mb-5">
            <textarea id="comment-input" class="w-full h-24 p-2 border border-gray-300 rounded" placeholder="Escribe tu comentario..."></textarea>
            <button id="submit-comment-btn" class="mt-2 bg-blue-500 text-white p-2 rounded">Enviar</button>
        </div>
        <div id="comments-section" class="mt-5">
            <h2 class="text-xl font-semibold">Comentarios</h2>
            <ul id="comments-list" class="list-none p-0"></ul>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. Estilo con Tailwind CSS

Con la configuración anterior, ya tenemos un diseño básico. Tailwind CSS nos permite aplicar estilos rápidamente utilizando clases utilitarias. No necesitas crear un archivo CSS adicional a menos que desees personalizar aún más el diseño.

3. Agregando funcionalidad con JavaScript

Ahora, vamos a crear el archivo script.js, donde implementaremos la lógica para agregar y eliminar comentarios.

document.addEventListener("DOMContentLoaded", () => {
    const submitButton = document.getElementById("submit-comment-btn");
    const commentInput = document.getElementById("comment-input");
    const commentsList = document.getElementById("comments-list");

    const addComment = () => {
        const commentText = commentInput.value.trim();
        if (commentText) {
            const li = document.createElement("li");
            li.className = "bg-white p-3 border rounded my-2";
            li.innerHTML = `
                <p>${commentText}</p>
                <button class="text-red-500 mt-2">Eliminar</button>
            `;
            commentsList.appendChild(li);
            commentInput.value = ""; // Limpiar el campo de entrada
        } else {
            alert("Por favor, escribe un comentario.");
        }
    };

    // Delegación de eventos: un solo event listener para los botones de eliminar
    commentsList.addEventListener("click", (event) => {
        if (event.target.tagName === 'BUTTON' && event.target.textContent === 'Eliminar') {
            const comment = event.target.parentElement;
            commentsList.removeChild(comment);
        }
    });

    submitButton.addEventListener("click", addComment);
});

4. Explicación del código JavaScript

DOM Manipulation: Escuchamos el evento DOMContentLoaded para asegurarnos de que el DOM esté completamente cargado antes de agregar nuestras funcionalidades.
Agregar Comentarios:
- Tomamos el texto del comentario desde el input.
- Creamos un nuevo elemento de lista (<li>) que contiene el texto del comentario y un botón para eliminarlo.
Eliminar Comentarios: Cuando se hace clic en el botón "Eliminar", se llama a la función removeComment, que elimina el comentario correspondiente.

Prueba de la Aplicación

Ahora que todo está configurado, abre el archivo index.html en tu navegador. Deberías ser capaz de escribir un comentario y visualizarlo en la lista. También podrás eliminar comentarios utilizando el botón correspondiente.

Optimización para SEO

Para optimizar este artículo para SEO, asegúrate de incluir las siguientes buenas prácticas:

Utiliza títulos y subtítulos relevantes (h1, h2, h3).
Asegúrate de que las imágenes y multimedia tengan atributos alt.
Incluye enlaces internos y externos que añadan valor al contenido.
Utiliza palabras clave relacionadas con "sistema de comentarios", "HTML", "JavaScript" y "Tailwind CSS".

Conclusión

En este artículo, hemos creado un sistema de comentarios simple utilizando HTML, Tailwind CSS y JavaScript. Este proyecto es excelente para practicar y mejorar tus habilidades de desarrollo web. Puedes expandir esta funcionalidad integrando almacenamiento en local o conectándote a una API para almacenar comentarios en un servidor.

¡Espero que encuentres útil esta guía y que la pongas en práctica!