iankit3/css-style.css

## css-style.css
body{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*{
    box-sizing: border-box;
}

.main{
    width: 75%;
    margin: auto;
}

.comment-box{
    /* border: 1px solid; */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* width: 60%; */
    border-radius: 2px;
    box-shadow: 1px 0 5px #6a6a6a;
    margin-top: 8px;
}
.comment-wrapper{
    margin-left: 15px;
    border-left: 1px solid;
}

.comment{
    height: 60px;
    padding: 10px 5px;
    border-radius: 2px;
    border-bottom: 1px solid;
}

.actions{
    background: #efefef;
}

.btn{
    border-radius: 2px;
    border: 0;
    padding: 5px 10px;
    outline: 0;
    cursor: pointer;
    background: #6a6a6a;
    color: #fff;
}
.btn:hover{
    background: #fefefe;
    border: 1px solid;
    color: #222;
}

.hidden{
    display: none;
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div class="main">
        <template id="t_comment">
            <div class="comment-box">
                <div class="comment"></div>
                <div class="actions">
                    <button class="btn reply">Reply</button>
                </div>
                <div class="reply-box hidden">
                    <input type="text" placeholder="Add a reply"/>
                </div>
            </div>
        </template>
    </div>
    <script src="./scripts/script.js"></script>
</body>
</html>

## scripts-script.js
(function() {
  var data = {
    comments: [
      { text: "Some mean comment :) that attracts more people", comments: [] },
      {
        text: "Lorem, ipsum",
        comments: [
          {
            text: "none1",
            comments: [
              { text: "none11", comments: [{ text: "none111", comments: [] }] }
            ]
          },
          { text: "none2", comments: [] }
        ]
      },
      { text: "some", comments: [] }
    ]
  };

  function handleAddComment(targetText, newText) {
    search({ ...data, text: "" }, targetText, newText);
    init();
  }

  function search(data, targetText, newText) {
    if (data.text == targetText) {
      data.comments = [...data.comments, { text: newText, comments: [] }];
    }

    if (data.comments.length <= 0) return;

    data.comments.forEach(d => {
      return search(d, targetText, newText);
    });
  }

  var c_template = document.getElementById("t_comment");

  function createCommentNode(e) {
    var div = document.createElement("div");
    div.classList.add("comment-wrapper");
    var node = c_template.content.cloneNode(true);
    node.querySelector(".comment").innerText = e.text;
    node.querySelector(".reply-box input").dataset.parent_text = e.text;

    div.appendChild(node);
    return div;
  }

  function dfs(elem, node) {
    var n = node;
    if (elem.text) {
      n = createCommentNode(elem);
      node.appendChild(n);
    }

    if (elem.comments.length <= 0) return;

    elem.comments.forEach(e => {
      return dfs(e, n);
    });
  }

  function main() {
    var div = document.createElement("div");
    div.classList.add("wrapper");
    dfs(data, div);
    var main = document.querySelector(".main");
    main.innerHTML = "";
    main.appendChild(div);
  }

  function init() {
    main();
    document.querySelectorAll(".reply").forEach(e => {
      e.addEventListener("click", ev => {
        ev.target.parentNode.nextElementSibling.classList.toggle("hidden");
      });
    });
    document.querySelectorAll(".reply-box input").forEach(e => {
      e.addEventListener("keydown", ev => {
        if (ev.keyCode == "13") {
          handleAddComment(ev.target.dataset.parent_text, ev.target.value);
        }
      });
    });
  }

  document.addEventListener("DOMContentLoaded", _ => {
    init();
  });
})();
	body{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	*{
	box-sizing: border-box;
	}

	.main{
	width: 75%;
	margin: auto;
	}

	.comment-box{
	/* border: 1px solid; */
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* width: 60%; */
	border-radius: 2px;
	box-shadow: 1px 0 5px #6a6a6a;
	margin-top: 8px;
	}
	.comment-wrapper{
	margin-left: 15px;
	border-left: 1px solid;
	}

	.comment{
	height: 60px;
	padding: 10px 5px;
	border-radius: 2px;
	border-bottom: 1px solid;
	}

	.actions{
	background: #efefef;
	}

	.btn{
	border-radius: 2px;
	border: 0;
	padding: 5px 10px;
	outline: 0;
	cursor: pointer;
	background: #6a6a6a;
	color: #fff;
	}
	.btn:hover{
	background: #fefefe;
	border: 1px solid;
	color: #222;
	}

	.hidden{
	display: none;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" href="./css/style.css">
	</head>
	<body>
	<div class="main">
	<template id="t_comment">
	<div class="comment-box">
	<div class="comment"></div>
	<div class="actions">
	<button class="btn reply">Reply</button>
	</div>
	<div class="reply-box hidden">
	<input type="text" placeholder="Add a reply"/>
	</div>
	</div>
	</template>
	</div>
	<script src="./scripts/script.js"></script>
	</body>
	</html>
	(function() {
	var data = {
	comments: [
	{ text: "Some mean comment :) that attracts more people", comments: [] },
	{
	text: "Lorem, ipsum",
	comments: [
	{
	text: "none1",
	comments: [
	{ text: "none11", comments: [{ text: "none111", comments: [] }] }
	]
	},
	{ text: "none2", comments: [] }
	]
	},
	{ text: "some", comments: [] }
	]
	};

	function handleAddComment(targetText, newText) {
	search({ ...data, text: "" }, targetText, newText);
	init();
	}

	function search(data, targetText, newText) {
	if (data.text == targetText) {
	data.comments = [...data.comments, { text: newText, comments: [] }];
	}

	if (data.comments.length <= 0) return;

	data.comments.forEach(d => {
	return search(d, targetText, newText);
	});
	}

	var c_template = document.getElementById("t_comment");

	function createCommentNode(e) {
	var div = document.createElement("div");
	div.classList.add("comment-wrapper");
	var node = c_template.content.cloneNode(true);
	node.querySelector(".comment").innerText = e.text;
	node.querySelector(".reply-box input").dataset.parent_text = e.text;

	div.appendChild(node);
	return div;
	}

	function dfs(elem, node) {
	var n = node;
	if (elem.text) {
	n = createCommentNode(elem);
	node.appendChild(n);
	}

	if (elem.comments.length <= 0) return;

	elem.comments.forEach(e => {
	return dfs(e, n);
	});
	}

	function main() {
	var div = document.createElement("div");
	div.classList.add("wrapper");
	dfs(data, div);
	var main = document.querySelector(".main");
	main.innerHTML = "";
	main.appendChild(div);
	}

	function init() {
	main();
	document.querySelectorAll(".reply").forEach(e => {
	e.addEventListener("click", ev => {
	ev.target.parentNode.nextElementSibling.classList.toggle("hidden");
	});
	});
	document.querySelectorAll(".reply-box input").forEach(e => {
	e.addEventListener("keydown", ev => {
	if (ev.keyCode == "13") {
	handleAddComment(ev.target.dataset.parent_text, ev.target.value);
	}
	});
	});
	}

	document.addEventListener("DOMContentLoaded", _ => {
	init();
	});
	})();