使用HTML CSS和JavaScript设计嵌套聊天评论

在本篇文章中，我们将学习如何使用JavaScript创建嵌套评论。我们应该已经在社交媒体如Facebook，Instagram，Youtube，Twitter等上看到过它。我们在这些社交网站的评论部分中看到了嵌套评论的使用。

方法：

在本地机器上创建一个名为 nested-comments 的文件夹，并进入该文件夹。
在该文件夹中创建3个文件 index.html ， style.css ， script.js
示例： 在这个例子中，我们将使用JavaScript创建嵌套评论。

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <link rel="stylesheet" href="styles.css" /> 
    <title>Nested Comments</title> 
</head> 
  
<body> 
    <div class="container"> 
        <div id="comment-container" 
             class="comment-container"> 
            <div class="all-comment"> 
                <div class="card"> 
                    <span class="text">GFG</span> 
                    <span id="reply" 
                          class="reply"> 
                          Add Reply 
                      </span> 
                </div> 
            </div> 
        </div> 
    </div> 
    
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

.card { 
    height: auto; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
    border-radius: 10px; 
    padding: 10px; 
    background-color: rgb(222, 222, 222); 
    margin-top: 10px; 
} 
.text { 
    display: block; 
    font-size: 20px; 
    font-weight: bold; 
} 
.reply { 
    color: rgb(84, 84, 233); 
    cursor: pointer; 
    margin-top: 5px; 
} 
.comment-details { 
    margin-left: 4rem; 
    display: flex; 
    align-items: center; 
    margin-top: 10px; 
} 
.input { 
    height: 30px; 
    border-radius: 10px; 
} 
.btn { 
    color: white; 
    margin-left: 5px; 
    background-color: rgb(135, 135, 235); 
    border: 0px; 
    border-radius: 10px; 
    height: 30px; 
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
    cursor: pointer; 
} 
.all-comment:not(:first-child) { 
    margin-left: 4rem; 
}

Javascript

let commentContainer =  
    document.getElementById("comment-container"); 
  
function createInputBox() { 
    let div = document.createElement("div"); 
  
    div.setAttribute("class", "comment-details"); 
  
    div.innerHTML += `<input type="text"
                             placeholder="add text here"
                             class="input" /> 
                      <button class="btn submit"> 
                           Submit 
                      </button>`; 
    return div; 
} 
  
function addReply(text) { 
    let div = document.createElement("div"); 
  
    div.setAttribute("class", "all-comment"); 
      
    div.innerHTML += `<div class="card"> 
                      <span class="text"> 
                      ${text} 
                      </span> 
                      <span id="reply" class="reply"> 
                      Add Reply 
                      </span></div>`; 
    return div; 
} 
  
commentContainer.addEventListener("click", function (e) { 
    let replyClicked = 
        e.target.classList.contains("reply"); 
    let submitClicked = 
        e.target.classList.contains("submit"); 
    let closestCard = 
        e.target.closest(".all-comment"); 
  
    if (replyClicked) { 
        closestCard.appendChild(createInputBox()); 
    } 
  
    if (submitClicked) { 
        const commentDetails = 
            e.target.closest(".comment-details"); 
        if (commentDetails.children[0].value) { 
            closestCard.appendChild( 
                addReply(commentDetails.children[0].value)); 
            commentDetails.remove(); 
        } 
    } 
});

输出：

使用HTML CSS和JavaScript设计嵌套聊天评论