Initial commit for the comments and reply repository

README.md

@@ -0,0 +1,29 @@
+# Comments and Reply 
+
+
+-------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<video src="/Screen Recording 2021-12-28 at 2.29.26 PM.mov" width="1000" />
+
+-------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<img src="/comments-reply.png" width="1000" />
+
+-------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+
+## From Developer
+
+You can get in touch with me on my LinkedIn Profile: [![LinkedIn Link](https://img.shields.io/badge/Connect-Pranam%20Bhat-blue.svg?logo=linkedin&longCache=true&style=social&label=Connect
+)](https://www.linkedin.com/in/pranam-bhat-11670689/)
+
+You can also follow me on GitHub to stay updated about my latest projects: [![GitHub Follow](https://img.shields.io/badge/Connect-Pranam%20Bhat-blue.svg?logo=Github&longCache=true&style=social&label=Follow)](https://github.com/PranamBhat)
+
+If you liked the repo then kindly support it by giving it a star ⭐
+
+### Contact
+
+Made with :heart: by Pranam Bhat. Connect me on https://www.linkedin.com/in/pranam-bhat-11670689/
+
+For any queries : pranam707@gmail.com
+

index.html

@@ -0,0 +1,9 @@
+<h1 style="font-size: small;">Enter your comment here . .</h1>
+
+<input id="main-input" type="text" />
+
+<button id="main-button">Comment</button>
+
+<ul id="comments"></ul>
+
+<script src="./script.js"></script>

script.js

@@ -0,0 +1,80 @@
+const comments = [
+    { id: 1, message: "Comment 1", parent: 0 },
+    { id: 2, message: "Comment 2", parent: 0 },
+    { id: 3, message: "Comment 3", parent: 0 },
+    { id: 4, message: "Reply 1", parent: 1 }
+];
+const commentsSection = document.querySelector("#comments");
+document.querySelector("#main-button").addEventListener("click", (event) => {
+    comments.push({
+        id: comments.length + 1,
+        message: document.querySelector(`#main-input`).value,
+        parent: 0
+    });
+    drawLine({
+        id: comments.length + 1,
+        message: document.querySelector(`#main-input`).value,
+        parent: 0
+    });
+    document.querySelector(`#main-input`).value = "";
+});
+function drawLine(e) {
+    const commentLine = document.createElement("li");
+    commentLine.className = `comment-${e.id}`;
+    const commentText = document.createElement("p");
+    commentText.innerText = e.message;
+    commentLine.appendChild(commentText);
+    const commentReaction = document.createElement("div");
+    commentReaction.className = `reaction-${e.id}`;
+    const commentButton = document.createElement("button");
+    commentButton.innerText = "REPLY";
+    commentButton.addEventListener("click", (event) => {
+        const reaction = document.querySelector(`.reaction-${e.id}`);
+        reaction.removeChild(event.target);
+        const input = document.createElement("input");
+        input.type = "text";
+        input.className = `input-${e.id}`;
+        const submit = document.createElement("button");
+        submit.className = `submit-${e.id}`;
+        submit.innerText = "SUBMIT";
+        submit.addEventListener("click", (event2) => {
+            comments.push({
+                id: comments.length + 1,
+                message: document.querySelector(`.input-${e.id}`).value,
+                parent: e.id
+            });
+            drawLine({
+                id: comments.length + 1,
+                message: document.querySelector(`.input-${e.id}`).value,
+                parent: e.id
+            });
+            while (reaction.lastChild) {
+                reaction.lastChild.remove();
+            }
+            reaction.appendChild(event.target);
+        });
+        reaction.appendChild(input);
+        reaction.appendChild(submit);
+        input.focus();
+    });
+    commentReaction.appendChild(commentButton);
+    commentLine.appendChild(commentReaction);
+    const commentResponses = document.createElement("ul");
+    commentLine.appendChild(commentResponses);
+    if (e.parent === 0) commentsSection.appendChild(commentLine);
+    if (e.parent !== 0) {
+        const commentParent = document
+            .querySelector(`.comment-${e.parent}`)
+            .querySelector("ul");
+        commentParent?.appendChild(commentLine);
+    }
+}
+function drawComments() {
+    while (commentsSection.lastChild) {
+        commentsSection.lastChild.remove();
+    }
+    comments.map((e) => {
+        drawLine(e);
+    });
+}
+drawComments();