Assignment: Narcissist's Comment Board

A fool takes no pleasure in understanding, but only in expressing his opinion.

Amazingly, that was written thousands of years before the internet. For this assignment, you're going to create a client-side only comment board where you only talk with the people who matter.

A mocked-up comment page is in the repository for you to work with. Do not rename or move posting.html! I expect it to be there to open when I am grading.

GitHub invite link to the repo:

https://classroom.github.com/a/QAEWmW2K

Faker, Faker

Follow good process!

Mock-up the components and the look first. For this assignment, I did most of the mock-up for you in posting.html and style.css, so you can focus on the functional part. I didn't mock-up what possible errors should look like (see the requirements in the two sections below) so that's something you need to do. Display work should be done mostly in the css file.

Create and link an external .js file to do most of your work in. Once it's been mocked-up, changes to the html should mostly be limited to adding ids and classes to elements, perhaps adding divs/spans to structure things.

Hang On My Every Word

When the user types in a name and comment and clicks the button, their comment should be added to the top of the list of comments. Note that you need to add a date as well. This is all client-side, the comment never goes to the server.

If the comment does not follow the rules below, indicate the error on the page (not with an alert) rather than adding it to the list.

  • The name cannot be blank, and must consist of all alphanumeric characters (0-9, a-z, A-Z, no spaces!)
  • The comment cannot be blank

Important note! Buttons have a default behavior that reloads the page. When you hook your event handler onto the button to post a comment, you need to suppress that default behavior by returning false at the end of your function.

Use jQuery functionality to insert the new comment into the list. Be neat and use css to change appearances (and use javascript to change css classes) rather than changing attributes ad hoc. Do not embed html in your javascript code. Also, don't forget to get rid of the mocked-up fake comment when you're done.

Your Feedback Really Matters

Comments that disagree with me are crap. Add a delete button to each comment. Give some thought to the multiple ways that you can make the button on each comment delete that comment specifically.