Comment System (Add / Edit / Delete) | HTML, CSS & JavaScript

Comment System (Add / Edit / Delete) with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #12

Project Overview

The Comment System is a beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to add new comments, edit existing comments, and delete comments directly from the webpage without refreshing it. When a user writes a comment and clicks the Add Comment button, JavaScript dynamically creates a new comment element and displays it on the page.

This project is useful for beginners who want to practice DOM manipulation, event listeners, user input handling, conditional statements, and dynamically creating HTML elements. It also demonstrates how JavaScript can update webpage content instantly and create interactive features commonly used in real-world websites.

Key Features

Add New Comments: Users can write a comment in the text area and add it to the comment list instantly by clicking the Add Comment button.
Edit Existing Comments: Every comment includes an Edit button that allows users to load the existing comment back into the text area and update its content.
Update Comment Button: When a user chooses to edit a comment, the Add Comment button changes to Update Comment, clearly indicating that the selected comment is being modified.
Delete Comments: Users can remove unwanted comments by clicking the Delete button. The selected comment is immediately removed from the webpage.
Empty Comment Validation: JavaScript checks whether the text area contains valid text before adding a comment and prevents users from submitting empty comments.
Dynamic Comment Creation: JavaScript dynamically creates new comment elements using the information provided by the user and displays them on the webpage.
Real-Time UI Updates: Due to the use of JavaScript in the application, the user will not have to refresh the page after creating, editing, or deleting a comment.
Edit State Management: The script keeps track of the comment currently being edited, allowing JavaScript to update the correct comment when the user saves the changes.
Interactive Action Buttons: Each dynamically created comment contains separate Edit and Delete buttons with event listeners that provide the required functionality.
Clean and Simple Interface: The project will use a simple and clean design that will make it easy for the user to comment, edit, and delete their comments.
Responsive Design: The Comment System can be adapted to different screen sizes, allowing the interface to remain comfortable to use on desktops, tablets, and mobile devices.
Easy to Extend: The project can be easily extended to have more features like usernames, timestamps, replies, likes, or even use a database to store the information instead of using JavaScript.

What You'll Learn

Understand how to select HTML elements using JavaScript.
Learn how to read user input from a <textarea>.
Practice using .trim() to remove unnecessary spaces.
Understand how click event listeners work.
Learn how to create HTML elements dynamically.
Practice using document.createElement().
Understand how appendChild() adds elements to the webpage.
Learn how to update existing HTML content dynamically.
Practice removing elements using .remove().
Understand how conditional statements manage add and edit operations.
Learn how JavaScript can track the currently edited element.

HTML Code

HTML creates the basic structure of the Comment System. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the application. The main content is placed inside the .comment-container, which contains the project heading, comment input area, Add Comment button, and comment list. The <textarea> element with the ID commentInput allows users to write their comments.

The button with the ID addCommentBtn is used to add a new comment or update an existing comment when the application is in edit mode. Additionally, the <ul> element with the ID commentList acts as the container where JavaScript dynamically adds new comments.

Finally, the script.js file is loaded at the bottom of the <body> so JavaScript can access the HTML elements and handle adding, editing, and deleting comments.

<!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 rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="comment-container">
    <h2>Comment System</h2>

    <textarea id="commentInput" placeholder="Write a comment..."></textarea>
    <button id="addCommentBtn">Add Comment</button>

    <ul id="commentList"></ul>
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

CSS controls the appearance and layout of the Comment System. The body uses Flexbox to center the .comment-container on the page. The main container uses a background, padding, rounded corners, and a shadow to create a clean card-style interface. The <textarea> has a fixed height, padding, a border, and rounded corners. Therefore, users have a comfortable area for writing comments.

The main button uses a background color, padding, and a cursor effect. As a result, users can easily identify and use it. Also the main button is styled with a background color, padding, and cursor effect to make it easy to identify and use, <ul> and <li> elements organize the dynamically created comments into a clean list.

Each comment has its own background, spacing, and rounded corners, .comment-text class styles the displayed comment content, while the .actions section controls the Edit and Delete buttons. Finally, the .edit and .delete classes give the buttons different styles. As a result, users can quickly distinguish between the editing and deleting actions.

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.comment-container {
  background: #ffffff;
  width: 400px;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

h2 {
  text-align: center;
  margin-bottom: 15px;
}

textarea {
  width: 100%;
  height: 70px;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  resize: none;
}

button {
  margin-top: 10px;
  padding: 10px;
  width: 100%;
  border: none;
  border-radius: 6px;
  background: #4f46e5;
  color: white;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
  margin-top: 15px;
}

li {
  background: #f9fafb;
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.comment-text {
  margin-bottom: 8px;
  font-size: 14px;
}

.actions button {
  width: auto;
  padding: 5px 10px;
  font-size: 12px;
  margin-right: 5px;
}

.edit {
  background: #22c55e;
}

.delete {
  background: #ef4444;
}

Javascript Code

JavaScript provides the main functionality of the Comment System. First, it selects the comment input, Add Comment button, and comment list using document.getElementById(). The editTarget variable is used to keep track of the comment that is currently being edited. When the user clicks the Add Comment button, JavaScript reads the text from the input and uses .trim() to remove unnecessary spaces. If the input is empty, the application displays an alert message and prevents an empty comment from being added.

If the user is editing an existing comment, JavaScript updates the selected comment’s text and changes the button back to Add Comment. Otherwise, the addNewComment() function creates a new <li> element containing the comment text along with Edit and Delete buttons. The Edit button loads the selected comment back into the text area and stores that comment inside editTarget. The Delete button removes the selected comment using .remove(). If a comment being edited is deleted, JavaScript also resets the edit state and clears the input.

Finally, the new comment element is added to the commentList using appendChild(), allowing users to manage comments dynamically without refreshing the webpage.

const commentInput = document.getElementById("commentInput");
const addCommentBtn = document.getElementById("addCommentBtn");
const commentList = document.getElementById("commentList");

let editTarget = null;

// Add Comment
addCommentBtn.addEventListener("click", () => {
  const text = commentInput.value.trim();
  if (!text) return alert("Comment cannot be empty");

  if (editTarget) {
    editTarget.querySelector(".comment-text").innerText = text;
    editTarget = null;
    addCommentBtn.innerText = "Add Comment";
  } else {
    addNewComment(text);
  }

  commentInput.value = "";
});

// Create Comment
function addNewComment(text) {
  const li = document.createElement("li");

  li.innerHTML = `
    <div class="comment-text">${text}</div>
    <div class="actions">
      <button class="edit">Edit</button>
      <button class="delete">Delete</button>
    </div>
  `;

  li.querySelector(".edit").addEventListener("click", () => {
    commentInput.value = li.querySelector(".comment-text").innerText;
    editTarget = li;
    addCommentBtn.innerText = "Update Comment";
  });

  li.querySelector(".delete").addEventListener("click", () => {
    li.remove();
    if (editTarget === li) {
      editTarget = null;
      addCommentBtn.innerText = "Add Comment";
      commentInput.value = "";
    }
  });

  commentList.appendChild(li);
}