How To Create A Comment Section Using HTML CSS & JavaScript

Welcome! In todays episode, we will discuss how to create a comment section using HTML, CSS & JavaScript. 

Hope you have your code editor ready!

I will break down the essential steps, discuss best practices in user interface design, and delve into the scripting required to make the comment section not only visually appealing but also fully functional. 

By the end of this tutorial, you'll have the knowledge and skills to integrate a dynamic and user-friendly comment section into your own web projects, enriching the online experience for your audience and fostering meaningful discussions. 

So, let's get started on the path to crafting an engaging comment section for your website!

I have already setup a video tutorial for this? So you can watch the video tutorial to know more or scroll ahead and view the code.

Lets dive in.

HTML

    	<div class="container">
        <div class="head"><h1>Post a Comment</h1></div>
        <div><span id="comment">0</span> Comments</div>
        <div class="text"><p>We are happy to hear from you</p></div>
        <div class="comments"></div>
        <div class="commentbox">
            <img src="user1.png" alt="">
            <div class="content">
                <h2>Comment as: </h2>
                <input type="text" value="Anonymous" class="user">

                <div class="commentinput">
                    <input type="text" placeholder="Enter comment" class="usercomment">
                    <div class="buttons">
                        <button type="submit" disabled id="publish">Publish</button>
                        <div class="notify">
                            <input type="checkbox" class="notifyinput"> <span>Notify me</span>
                        </div>
                    </div>
                </div>
                <p class="policy">This site is protected by reCAPTCHA and the Google <a href="">privacy policy</a> and <a href="">Terms of Service</a> apply.</p>
            </div>
        </div>
    </div>
    

Result

Not cool right? Now is time to establish the power of CSS. To learn more about CSS and all features used for creating a website, click the link

CSS

* {
    margin: 0;
    padding: 0;
}


body {
    position: relative;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2f2f2;
    /* background: #353935; */
}

.container {
    background: #fff;
    padding: 20px;
    font-family: monospace;
    width: 500px;
    box-shadow: 0 0 5px #000;
}

.head {
    text-transform: uppercase;
    margin-bottom: 20px;
}

.text {
    margin: 10px 0;
    font-family: sans-serif;
    font-size: 0.9em;
}

.commentbox {
    display: flex;
    justify-content: space-around;
    padding: 10px;
}

.commentbox > img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    /* float: left; */
    margin-right: 20px;
    object-fit: cover;
    object-position: center;
}

.content {
    width: 100%;
}

.user {
    border: none;
    outline: none;
    margin: 5px 0;
    color: #808080;
    margin-left: 20px;
    padding: 10px;
}

.commentinput > input {
    border: none;
    padding: 10px;
    padding-left: 0;
    outline: none;
    border-bottom: 2px solid blue;
    margin-bottom: 10px;
    width: 95%;
}

.buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #808080;
}

.buttons > button {
    padding: 5px 10px;
    background: lightgrey;
    color: #808080;
    text-transform: uppercase;
    border: none;
    outline: none;
    border-radius: 3px;
    cursor: pointer;
}

.buttons > button.abled {
    background: blue;
    color: #fff;
}

.policy {
    margin: 20px 0;
    font-size: 0.8em;
    font-family: Arial, sans-serif;
    color: #808080;
}

.policy a {
    text-decoration: none;
    color: blue;
}

.notify {
    margin-right: 10px;
    display: flex;
    align-items: center;
}

.notify > input {
    margin-right: 5px;
    border: 2px solid #808080;
}

.parents {
    font-family: Arial, sans-serif;
    display: flex;
    margin-bottom: 30px;
}

.parents h1 {
    font-size: 0.9em;
}

.parents p {
    margin: 10px 0;
    font-size: 0.9em;
}

.parents > img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 20px;
    object-fit: cover;
    object-position: center;
}

.engagements {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.engagements img {
    width: 20px;

}

.engagements img:nth-child(1) {
    margin-right: 10px;
    width: 25px;
}

.date {
    color: #808080;
    font-size: 0.8em;
}
    

Compare the first the result; that is the result before CSS is applied to it and now CSS is used to it.

Let's apply functionality to the created comment section. 

JavaScript

	
const USERID = {
    name: null,
    identity: null,
    image: null,
    message: null,
    date: null
}

const userComment = document.querySelector(".usercomment");
const publishBtn = document.querySelector("#publish");
const comments = document.querySelector(".comments");
const userName = document.querySelector(".user");
const notify = document.querySelector(".notifyinput");

    userComment.addEventListener("input", e => {
        if(!userComment.value) {
            publishBtn.setAttribute("disabled", "disabled");
            publishBtn.classList.remove("abled")
        }else {
            publishBtn.removeAttribute("disabled");
            publishBtn.classList.add("abled")
        }
    })

    function addPost() {
        if(!userComment.value) return;
        USERID.name = userName.value;
        if(USERID.name === "Anonymous") {
            USERID.identity = false;
            USERID.image = "anonymous.png"
        }else {
            USERID.identity = true;
            USERID.image = "user.png"
        }

        USERID.message = userComment.value;
        USERID.date = new Date().toLocaleString();
        let published = 
        `<div class="parents">
            <img src="${USERID.image}">
            <div>
                <h1>${USERID.name}</h1>
                <p>${USERID.message}</p>
                <div class="engagements"><img src="like.png" id="like"><img src="share.png" alt=""></div>
                <span class="date">${USERID.date}</span>
            </div>    
        </div>`

        comments.innerHTML += published;
        userComment.value = "";
        publishBtn.classList.remove("abled")

        let commentsNum = document.querySelectorAll(".parents").length;
        document.getElementById("comment").textContent = commentsNum;

    }

    publishBtn.addEventListener("click", addPost);
        
    

With all the code applied, you can create a full comment section and embed them on your website. Remember to study the code carefully to know each functionality of every code used. 

Happy Coding!