In the last few pages, we have set the manifest file and created the style sheets and the HTML skeleton of the different views. Now, we can finally dive deep into the actual application logic. The main.js file is nothing more than a wrapper that defines the namespace and initializes the different parts of the application:

var myApp = {};
myApp.init = function () {
  // Instance the DB
  myApp.db = new PouchDB('todos');
  // Init the todo App
  myApp.todos.init();
};
$(window).load(myApp.init);

As illustrated, we are initializing the application on window load in order to make sure that everything is loaded before declaring any logics. In the myApp.init() function, we're instancing a PouchDB database object, which we'll be using later to access and store our to-do lists.

As you can find on its website, PouchDB is an open source JavaScript database inspired by Apache CouchDB that is designed to run well within the browser. Its peculiarity is that it...