[Epic] TodoMVC Feature List

[nelsonic]

Todo List Basic Functionality

A todo list has only 2 basic functions:

• [x] Add a new item to the list
  • [x] new list item created when the [Enter] key is pressed https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/55
• [x] Check-off an item as "completed" (done/finished)
  • [x] Click/tap on checkbox next to todo item

Add item and Check-off is exactly the "functionality" you would have in a paper-based Todo List.

TodoMVC "Advanced" Functionality

In addition to these basic functions, TodoMVC has the ability to:

• [x] Un-check an item as to make it "active" (still to be done)
• [x] Double-click/tap on todo item description to edit it.
• [x] Mark all as complete
• [x] Click X on item row to remove from list.

<footer> Menu > GOTO: https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/53

below the main interface there is a <footer> with a count, 3 view toggles and one action:

• [x] "{count} item(s) left":
  {store.items.filter(complete==false)} item{store.items.length > 1 ? 's' : '' } left
• [x] Show All
• [x] Show Active
• [x] Show Completed
• [x] Clear Completed > delete item.done === true

Routing / Navigation

Finally, if you click around the <footer> toggle menu, you will notice that the Web Bowser Address bar changes to reflect the chosen view.

When a route link is clicked

• [x] update invokes route(model, title, hash) function which updates model.hash to the value of hash

• [x] filter view based on model.hash

  • [x] set <footer> view button as active
  • [x] filter todo items based on selected view:
  • [x] ALL: no filter
  • [x] active: !item.done
  • [x] complete: item.done === true

• [x] Subscriptions for event handling e.g: keyboard press & navigation changes #57

[nelsonic]

[nelsonic]

[nelsonic]

[nelsonic]

View works:

[nelsonic]

[nelsonic]