Commit c6ab567

committed

create nested comments

Signed-off-by: Amit Amrutiya <amitamrutiya2210@gmail.com>

1 parent 5b79fe6 commit c6ab567Copy full SHA for c6ab567

File tree

+116

-0

lines changed

+116

-0

lines changed

Lines changed: 24 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,24 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+ <head>`
	`4`	`+ <meta charset="UTF-8" />`
	`5`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />`
	`6`	`+ <meta http-equiv="X-UA-Compatible" content="ie=edge" />`
	`7`	`+ <title>Nested Comments</title>`
	`8`	`+ <link rel="stylesheet" href="styles.css" />`
	`9`	`+ </head>`
	`10`	`+`
	`11`	`+ <body>`
	`12`	`+ <div class="container">`
	`13`	`+ <div id="comment-container" class="comment-container">`
	`14`	`+ <div class="all-comment">`
	`15`	`+ <div class="card">`
	`16`	`+ <span class="text">First Commenter</span>`
	`17`	`+ <span id="reply" class="reply">Add Reply</span>`
	`18`	`+ </div>`
	`19`	`+ </div>`
	`20`	`+ </div>`
	`21`	`+ </div>`
	`22`	`+ <script src="index.js"></script>`
	`23`	`+ </body>`
	`24`	`+</html>`

Lines changed: 45 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,45 @@`
	`1`	`+let commentContainer = document.getElementById("comment-container");`
	`2`	`+`
	`3`	`+function createInputBox() {`
	`4`	`+ let div = document.createElement("div");`
	`5`	`+ div.setAttribute("class", "comment-details");`
	`6`	`+`
	`7`	+ div.innerHTML += `
	`8`	`+ <input type="text" placeholder="add text here" class="input" />`
	`9`	+ <button class="btn submit">Submit</button>`;
	`10`	`+`
	`11`	`+ return div;`
	`12`	`+}`
	`13`	`+`
	`14`	`+function addReply(text) {`
	`15`	`+ let div = document.createElement("div");`
	`16`	`+ div.setAttribute("class", "all-comment");`
	`17`	`+`
	`18`	+ div.innerHTML += `
	`19`	`+ <div class="card">`
	`20`	`+ <span class="text">${text}</span>`
	`21`	`+ <span id="reply" class="reply">`
	`22`	`+ Add Reply`
	`23`	`+ </span>`
	`24`	+ </div>`;
	`25`	`+`
	`26`	`+ return div;`
	`27`	`+}`
	`28`	`+`
	`29`	`+commentContainer.addEventListener("click", function (e) {`
	`30`	`+ let replyClicked = e.target.classList.contains("reply");`
	`31`	`+ let submitClicked = e.target.classList.contains("submit");`
	`32`	`+ let closestCard = e.target.closest(".all-comment");`
	`33`	`+`
	`34`	`+ if (replyClicked) {`
	`35`	`+ closestCard.appendChild(createInputBox());`
	`36`	`+ }`
	`37`	`+`
	`38`	`+ if (submitClicked) {`
	`39`	`+ const commentDetails = e.target.closest(".comment-details");`
	`40`	`+ if (commentDetails.children[0].value) {`
	`41`	`+ closestCard.appendChild(addReply(commentDetails.children[0].value));`
	`42`	`+ commentDetails.remove();`
	`43`	`+ }`
	`44`	`+ }`
	`45`	`+});`

Lines changed: 47 additions & 0 deletions

Comments

(0)