JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="App">
  <div id="blog-container"></div>
  <div class="comment-section">
    <input type="text" id="comment-input" placeholder="Enter your comment...">
    <button onclick="addComment()">Add</button>
  </div>
  <hr>
  <div id="comment-container"></div>
</div>

CSS

body {
  font-family: Arial, sans-serif;
  text-align: center;
}

.comment-section {
  margin-top: 10px;
}

.comment {
  margin-top: 10px;
}

JavaScript

const blogContainer = document.getElementById("blog-container");
  const commentInput = document.getElementById("comment-input");
  const commentContainer = document.getElementById("comment-container");
  let uniqueCommentId = 1;

  const blogData = [{
    blogId: 0,
    blogContent: "This is a sample blog post."
  }];

  function renderBlog() {
    blogContainer.innerHTML = blogData.map(blog => `<p>${blog.blogContent}</p>`).join("");
  }

  function renderComments(blogId) {
    const comments = commentData[blogId] || [];
    commentContainer.innerHTML = comments.map(comment => `
      <div class="comment">
        <p>${comment.comment}</p>
        <button onclick="deleteComment(${blogId}, ${comment.id})">Delete</button>
      </div>
    `).join("");
  }

  function addComment() {
    const blogId = 0; // Assuming there is only one blog post in this example
    const message = commentInput.value.trim();
    if (message) {
      const comment = { id: uniqueCommentId, comment: message };
      commentData[blogId] = commentData[blogId] || [];
      commentData[blogId].push(comment);
      uniqueCommentId++;
      renderComments(blogId);
      commentInput.value = "";
    }
  }

  function deleteComment(blogId, commentId) {
    commentData[blogId] = (commentData[blogId] || []).filter(comment => comment.id !== commentId);
    renderComments(blogId);
  }

  const commentData = {};
  renderBlog();