JS-Project---JS-Major-Project

I have a say(Comment Section)

Problem statement:

Today we will create a comment section using pure Vanilla JavaScript and HTML. Many companies like Swiggy, Uber, Flipkart, Ola, Cred, etc. use the machine coding rounds as their primary filters to eliminate candidates. And any machine coding round wouldn’t allow you to use dependencies or libraries such as React, Lodash, jQuery, Bootstrap, etc. Hence, you should solve some problems using Vanilla JavaScript and HTML to improve your speed, gain comfort around these lines and finally, ace this particular round.

As I always say, divide your problem into subsets, then address each subset one by one.

SUBSETS —

1. The page is always launched with one static textarea at the top and an add button that allows the user to add comments.
2. Every comment added will have a reply, a like, and a delete button.
3. A reply button will launch a new text area below the parent comment, allowing the user to either add a reply or cancel the addition.
4. A like button will keep incrementing the number of likes on the respective comment at every click.
5. A delete button will delete the entire comment chain.
6. Comments can be chained resembling a tree-like structure wherein every child comment will be aligned some pixels left to the parent comment.
7. Comments once added should be persisted on page re-load — this is an enhancement, it can be attended to in the end if you have time.

Before you jump into the code, step back for a few minutes, look at your requirements and assess which parts could use the same piece of code

Problem Solution :

Demo

Click on the link below

I have a say

ADD COMMENT :

ADD NESTED COMMENT :

Reply / Delete / Add / Cancel buttons :

On Re-Load comment is visible, as it is stored in localStorage:

RESET BUTTON :

Re-loads the page and removes the saved HTML element from LocalStorage