JSFiddle - React, Tailwind, and code Playground

by Rajdeep Chandra

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.min.css">
<div class="container mt-5">

  <div class="row">
    <div class="col-md-7">
      <input type="text" id="myInput" class="form-control" placeholder="Enter comment here...">
    </div>
    <div class="col-md-2">
      <button class="btn btn-success" onclick="addComment()">Add Comment</button>
    </div>
    <div class="col-md-2">
      <button class="btn btn-warning" onclick="deleteComments()">Delete All Comments</button>
    </div>
  </div>

</div>
<div class="container" id="commentList">

</div>

CSS

body {
  background-image: linear-gradient(to right,#131414, #ece5ee);
}

#myInput {
    background-position: 10px 12px;
    background-repeat: no-repeat;
    width: 100%;
    font-size: 16px;
    border: 1px solid rgb(12, 230, 238);
    margin-bottom: 12px;
    border-radius: 5px;
  }

  .parent {
    padding: 10px;
  }

  .child {
    padding: 20px;
  }

JavaScript

const mainComment = document.getElementById("myInput");
const commentList = document.getElementById("commentList");

//add a new comment
let addComment = () => {
  if (!localStorage.getItem("comments")) {
    let comments = [];
    localStorage.setItem("comments", JSON.stringify(comments));
  }

  comments = JSON.parse(localStorage.getItem("comments"));
  comments.push({
    parentCommentId: null,
    commentId: Math.random()
      .toString()
      .substr(2, 7),
    commentText: mainComment.value,
    childComments: []
  });
  localStorage.setItem("comments", JSON.stringify(comments));
  finalComments();
  mainComment.value = "";
};
let deleteComments = () => {
  localStorage.clear();
  location.reload();
};
// create a reply option
let createReplyButtonCommentView = (id, operationType) => {
  let div = document.createElement("div");
  div.setAttribute("data-parentId", id);
  div.innerHTML = `<input type="text"> <a href="#" class="btn btn-primary">${operationType}</a>`;

  return div;
};
// genarate a single comment card
let singleCommentCard = (obj, padding) => `
    <div class="card border-dark mt-2 mb-3 col-md-5"style="margin-left: ${padding}px;" data-parentId="${
	obj.parentCommentId
	}" id="${obj.commentId}">
	<div class="card-header text-white bg-dark mt-2 mb-2 ">${obj.commentText}</div>
        <a href="#" class="btn btn-danger col-2">Reply</a><span style="color: green;"> ${
					obj.childComments.length === 0 ? "0 replies to this comment" : obj.childComments.length + " replies to this answer"
				}</span>
	
    </div>
    `;
// a recursive method to generate a collection of comments if there are nested comment childrens
let createRecusiveComments = (commentList, padding = 0) => {
  let fullView = "";
  for (let i of commentList) {
    console.log(i);
    fullView += singleCommentCard(i, padding);
    if (i.childComments.length > 0) {
      fullView += createRecusiveComments(i.childComments, (padding += 20));
      padding -= 20;
    }
  }
  return...