How To Create A Complete Comment Section Like Blogger Using HTML CSS JavaScript

U-GINE MEDIA February 14, 2025

Welcome to my website U-GINE MEDIA. In this website I teach tutorials and share source code on some programming (HTML, CSS & JavaScript) tutorials. 

Before we get started, do well to subscribe to my channel to never miss out on any update that I post every single day.

You can also visit my GitHub where I upload all the code I have.

In this tutorial topic "How To Create A Complete Comment Section Like Blogger Using HTML CSS JavaScript", we will learn how to create it following these simple easy steps.

Share this to your programmer friends. If y'all learnt something today, make sure to let me in the comments. 

Get Source Code.

If interested in watching the video before running the code below, you can click the play button to get started.


Code Begins

  1. First, create a folder with any name you like. Then, make the necessary files inside it.
  2. Create a file called index.html to serve as the main file.
  3. Create a file called style.css for the CSS code.
  4. Create a file called script.js for the JavaScript code.

To start, add the following HTML codes to your index.html file. These codes include essential HTML markup with different semantic tags, such as div, form, input, button, image, etc., to build the website layout. 

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 procted by reCAPTCHA and the Google <a href="">privacy policy</a> and <a href="">Terms of Service</a> apply.</p>
            </div>
        </div>
    </div>

Next, add the following CSS codes to your style.css file to make your AI image generator website beautiful and user-friendly. You can customize the different CSS properties, such as color, background, font, etc., to give a personalized touch to your website. 

CSS

* {
    margin: 0;
    padding: 0;
}


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

.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;
}


/* .policy {
    width: 100px;
} */

/* body::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background: #F88379;
} */

/* body::after {
    content: "";
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    right: 0;
    transform: skew(20deg);
    background: #F2D2BD;
    z-index: -1;
} */

/* 
F88379 !IMPORTANT
F2D2BD !IMPORTANT
#9F2B68
F2D2BD
DE3163
*/


/* .comment {
    width: 400px;
    background: #fff;
    padding: 10px;
    border-left: 3px solid purple;
}

.comment div {
    width: 100%;
    margin: 20px 0;
}

.comment div input {
    width: 100%;
    outline: none;
    border: none;
}

.comment div textarea {
    width: 100%;
    outline: none;
    border: none;
    resize: none;
    font-family: Arial, sans-serif;
}

.comment div:nth-child(2) {
    margin-bottom: 0;
}

.comment div:last-child {
    margin: 0;
    text-align: right;
}

.comment div button {
    padding: 5px 15px;
    background: purple;
    color: #fff;
    border: none;
    outline: none;
    border-radius: 4px;
    cursor: pointer;
}

.posts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 50px;
}

.parent {
    background: #fff;
    padding: 10px;
    width: 400px;
} */

/* 

#36454F
#023
#353935
28282B




*/

Finally, add the following JavaScript code to your script.js file to make your work functional. This code handles various functions, even listeners, input handling, etc.
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);

Conclusion and Final word

Now, we have reached the end of our code, for any information, you can comment any problem or code-not-working issues to resolve it, am always with you. You can also visit my YouTube Channel for more updates on HTML, CSS & JavaScript Designs. I believe you can create "A Complete Comment Section Like Blogger Using HTML CSS JavaScript". and do so much more with codes. Go extremely far in exploring the world of HTML, CSS & JavaScript, its gonna be fun, trust me 😃.

Happy Coding Journey 🚀
U-GINE MEDIA

Posted by U-GINE MEDIA

Post a Comment

3 Comments

We are happy to hear from you.

Close Menu