• Constructors / Prototypes or ES6 Classes
• Callbacks
• DOM Manipulation
• Events and Event Handlers

We're building out a commenting feature in our application with no persistence. A user should be able to create a new comment and have that comment be added into a comment list. The comment list can be filtered via keyword.

Note When creating constructors and prototypes, you may use ES6 classes or just create the constructor function separately. Your choice.

1. Create a working solution in solution.js

• The input field for comments/filter has been provided for you.

• When submit button is clicked, comments should be added to a comment list. A new comment's text should appear in the ul with the id of "comments-list"

• In a second input field, a user should be able to type a keyword and filter the same comments list based on that provided keyword.

  • filtering comments: if a comment does not contain the search term it should NOT be visible in the comment list

1. Create new files comment.js anad commentList.js
2. Create a JS class / constructor for a Comment. New comments should initialize with some text.
3. Instances of comments should have a prototype method called 'render' that returns a string of an li with that comment's text inside.
4. Create a class / constructor for a CommentList. New comment lists should have a comments array. The initializer should be able to take an array of strings and convert them to comments
5. Instances of CommentList should have a method called 'render' that returns a string of a ul. Inside of the ul, the comment list should include the return value of the render method of all of it's comments.
6. Instances of CommentList should have a method called 'addComment' that takes in a string. It should instantiate a new Comment and add it to the CommentList's array of comments.