Creating a Simple Comment System with HTML, Tailwind CSS, and JavaScript

A comment system is an essential feature in many web applications, allowing users to interact and share their opinions. In this article, you will learn how to create a simple comment system using HTML for structure, Tailwind CSS for styling, and JavaScript for functionality. This approach is ideal for beginners looking to improve their web development skills.

What are we going to build?

We will create a comment system that allows users to:

Write a comment.
View existing comments.
Delete comments.

Prerequisites

Before we begin, you should have a basic understanding of:

HTML
CSS
JavaScript

Project Structure

We will structure our project as follows:

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

1. Setting Up the HTML File

Let's start by creating the index.html file. This file will contain the basic HTML structure and link to the CSS and JavaScript files.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Comment System</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">Comment System</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="Write your comment..."></textarea>
            <button id="submit-comment-btn" class="mt-2 bg-blue-500 text-white p-2 rounded">Submit</button>
        </div>
        <div id="comments-section" class="mt-5">
            <h2 class="text-xl font-semibold">Comments</h2>
            <ul id="comments-list" class="list-none p-0"></ul>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. Styling with Tailwind CSS

With the above setup, we already have a basic design. Tailwind CSS allows us to quickly apply styles using utility classes. You don't need to create an additional CSS file unless you want to further customize the design.

3. Adding Functionality with JavaScript

Now, let's create the script.js file, where we will implement the logic to add and remove comments.

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">Delete</button>
            `;
            commentsList.appendChild(li);
            commentInput.value = ""; // Clear the input field
        } else {
            alert("Please write a comment.");
        }
    };

    // Event delegation: a single event listener for the delete buttons
    commentsList.addEventListener("click", (event) => {
        if (event.target.tagName === 'BUTTON' && event.target.textContent === 'Delete') {
            const comment = event.target.parentElement;
            commentsList.removeChild(comment);
        }
    });

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

4. Explanation of the JavaScript Code

DOM Manipulation: We listen for the DOMContentLoaded event to ensure that the DOM is fully loaded before adding our functionalities.
Adding Comments:
- We take the text from the input.
- We create a new list item (<li>) that contains the comment text and a button to delete it.
Removing Comments: When the "Delete" button is clicked, the removeComment function is called, which removes the corresponding comment.

Testing the Application

Now that everything is set up, open the index.html file in your browser. You should be able to write a comment and see it displayed in the list. You will also be able to delete comments using the respective button.

SEO Optimization

To optimize this article for SEO, be sure to include the following best practices:

Use relevant headings and subheadings (h1, h2, h3).
Ensure images and multimedia have alt attributes.
Include internal and external links that add value to the content.
Use keywords related to "comment system," "HTML," "JavaScript," and "Tailwind CSS."

Conclusion

In this article, we created a simple comment system using HTML, Tailwind CSS, and JavaScript. This project is great for practicing and improving your web development skills. You can expand this functionality by integrating local storage or connecting to an API to store comments on a server.

I hope you find this guide useful and put it into practice!