The goal of this exercise is to familiarize yourself with some of the javascript libraries we use. You will be recreating This todo list app. You may look at the source but you may not copy & paste any code.
To get started:
- In a terminal, navigate to the directory where this README.md file is located and run this command: python -m SimpleHTTPServer 8000
- In a web browser, visit this link: http://localhost:8000
What you are seeing is the contents of index.html. You’re now ready to start editing index.html and adding more files as needed. Any changes you make will be reflected when you refresh your browser.
Complete these goals in order:
- Re-create the application. Again, looking at the source code is ok, but copy-and-pasting is not ok. The goal is to go through it and understand how everything works. The Backbone documentation will be your best friend. You might also want to keep the documentation for jQuery and Underscore handy too, since they are dependencies of Backbone.
- If you haven't already, separate your js source code into separate files (one class per file is usually good). Now take a look at requirejs and Bower. Integrate them into your app to load js files and manage packages, respectively. Here’s a handy requirejs tutorial. And here is a decent video about how Bower works and why it's cool.
- Now we're going to expand the application. Instead of having just one list for all items, modify the application to have a "To Do" list and a separate "Done" list. When you check off a "To Do" item, it moves to "Done". When you uncheck a "Done" item, it moves to "To Do".