- 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.
- 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
- Create new files
comment.js
anadcommentList.js
- Create a JS class / constructor for a
Comment
. New comments should initialize with some text. - Instances of comments should have a prototype method called 'render' that returns a string of an
li
with that comment's text inside. - 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 - 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. - 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.