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

A Comment System built using HTML, CSS, and JavaScript that allows users to manage comments in real time.
The project enables adding, editing, and deleting comments dynamically without page reloads, demonstrating interactive content handling and smooth UI updates.

Key Features

Add new comments instantly through user input.
Edit existing comments with inline updates.
Delete comments with immediate UI refresh.
Dynamic rendering of comments in real time.
Prevents empty comment submissions.
Clean, responsive, and user-friendly interface.
Easy to extend with features like timestamps or replies.

HTML Code

<!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

* {
  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

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);
}