Before we attempt to understand the different ways to implement TodoMVC, let’s understand the functionality!
- Visit https://todomvc.com/
- Click on any of the links under ‘Examples’. You should see a ‘todos’ header, a ‘what needs to be done?’ input field, and a sidebar with some explanation and links.
- Add some tasks by typing into the main input field and hitting enter
- Click to mark some tasks complete or incomplete
- Double-click to edit some tasks
- Hover over a task, and click the X to delete it
- Try out the ‘All’, ‘Active’, ‘Completed’ filters
- Use the ‘Clear Completed’ link to delete completed tasks
- Finally, refresh the page and note whether the application state has persisted. Some examples implement persistence, and some do not.
That’s it! There are enough features to add a little bit of complexity, but it’s simple enough that you might be able to implement it in an afternoon or less