1- make a page that has a hardcoded array of objects like below. (create a couple more of this object)
[{
id: 1,
name: "x",
desc: "...",
isShy: true
}, ...]
2- a Person module (class) that gets the above object. Person class should have the below function:
b whatIsYourName: function() {
return this.isShy ? "hmmm" : this.name
}
3- create a widget that has a template representing a Person (details of data populations are below)
4- using the object array, list all Person with your widget
5- the widget should have
|_ plain text name & desc fields inside DOM nodes.
|_ a "what?" button in front of name that shows the returning value of whatIsYourName() inside a popup.
|_ a remove button that removes the widget from the list.
| |_ click event should be binded via template
|- "shy" class on it's root DOM node based on the person.isShy
|_ an edit button that changes the name & desc fields to text boxes. and shows a save/cancel button.
|_ textboxes should have some validation on the user's input.
|_ put a DOM node below the name text box, and say "{name} is a nice name too!" while the user is typing.
|_ pressing "enter" on form fields should work like save button.
6- below the list, write a comma separated plain text list of not shy persons.
7- a DifferentPerson class that inherits Person with below additions:
isRude: true,
whatIsYourName: function() {
return "not in your business";
}
8- update whatIsYourName of the DifferentPerson to return the base class' value if this.isRude
9- programmatically add a couple DifferentPerson to the list.