Facebook comment box using Vanila JS

One of the most famous UI question asked by almost every company looking for a Good UI developer.I was asked this question when i interview for Flipkart for junior UI developer.

Problems statement that i have to cover for this problem:

• User should be able to comment on a post
• User should be able to reply comments on the most
• Atmost 2 comments should be visible unless show more are clicked

The first problem that came into my mind how to keep track for which reply is of which comment.So i started thinking of what can be done in regards with that while i was thinking about that i started working on html structure.so i made a basic structure like this.

First Initial structure needed and all the html we needed

And thats the all html you will need in for comment box.

First i decided the structure of the comments added.

this structure should be added to the div with class= commentList

So we’ll be solving this problem step by step as we know what things we have to add in commentList . so let’s start

Add Comment function

function addComment(id){
let root = document.getElementById(id)
let input = root.getElementsByTagName("input")[0].value.trim();
if(input.length !==0){
   // createCommentBox is the function that is creating our comment        structure that has to be appended //
    let commentList =root.getElementsByClassName("commentList");
    commentList[0].appendChild(createCommentBox(input));
    }
}

In this we are getting the input value and then we are checking for it’s value not equal to 0 because then only we want to add that comment.

Comment structure Function

function createCommentBox(text){
 let id = giveId();
 let root = createComponents("div",{class:"comments",id:id})
 let add = createComponents("div",{class:"add"})
 let input = createComponents("input",{type:"text"})
 let button = createComponents("button",{onclick:`addComment(${id})`})
 let list = createComponents("div", {class:"commentList"});
 let commentNode = document.createTextNode("comment");
 button.appendChild(commentNode);
 let textNode = document.createTextNode(text);
 add.appendChild(input);
 add.appendChild(button);
 root.appendChild(textNode);
 root.appendChild(add);
 root.appendChild(list);
return root;
}

//Helper function for creating each element
function createComponents(value,attr){
 let element = document.createElement(value);
 Object.keys(attr).forEach(at => {
 element.setAttribute(at,attr[at])})
return element;
}

//unique id generating function
function giveId(){
let id = parseInt(Math.random()*10000);
let val = document.getElementById(id);
if (val === null){
return id;
    }
else{
giveId();
    }
}

Here are 2 function that helped in making each component and adding it to hiearchy and the main task is done by createComponents doing as it is making an element and returning the element made with required attributes and giveId function is making sure that we are getting a unique id.

Thats pretty much completed the comment box . After this i have to implement the hidden functionality and that was easy as i also needed to implement a class that will make it appear that it is not visible.

so by doing some minor tweeks i was able to do this.

above is the complete code for all the features and i was able to do all this within 2 hours.

Above is the complete working sanbox example of the solution.Hope this have given you some perspective.