Question
Create a class to be stored in a separate javascript file, Comment that represents both the data and affordances of a comment made by a
Create a class to be stored in a separate javascript file, Comment that represents both the data and affordances of a comment made by a visitor.
Just like how our examples have been previously, make sure you have two .js files. One scripts.js that utilizes the data from Comment.js.
The class should have the following properties:
- email (not displayed)
- datePosted (Date object, created from a compatible string)
- userName (displayed)
- comment (displayed)
- author (boolean) if true, the comment should be displayed with a distinct format.
The class should also have the following methods:
- post (this will add the comment to the end of a list of comments)
- postComments (this will accept an array of comments and display them on the page. The comments must be in reverse-chronoligical order, no matter what)
A sample array of comments to be passed in to postComments is:
[{ email: "jack@ibm.com", datePosted: "2022-09-14T19:08:33.107Z", userName: "Jack", comment: "This was a great post", author: false }, { email: "jill@hotmail.com", datePosted: "2022-08-14T19:08:33.107Z", userName: "Jill", comment: "I wanted to clarify that this was written before the event", author: true }, ]
Comments should accept a constructor with the five values passed in as parameters and create a comment accordingly.
Add a comment form that will call the post method of the comment class to add the comment to the page. You can use the HTMLFormElement submit event to record the data provided by the user.
The comment form should have fields for userName, email and comment, but the date should be generated by the current time.
Your event handler should use the comment class above to directly add the contents of the form to the DOM.
Provide all of the above in index.html with a short blog entry of your own design, index.js and comments.js. Use an array to populate the page with a set of initial comments. You do not need to add any logic or functions to the blog page itself, just the comments.
Step by Step Solution
There are 3 Steps involved in it
Step: 1
Get Instant Access to Expert-Tailored Solutions
See step-by-step solutions with expert insights and AI powered tools for academic success
Step: 2
Step: 3
Ace Your Homework with AI
Get the answers you need in no time with our AI-driven, step-by-step assistance
Get Started