Our todo-list-app is an application using MVC architecture.

MVC stands for MODEL - VIEW - CONTROLLER.

MODEL, VIEW and CONTROLLER are three different entities separate from each other.

MODEL and VIEW never interacts together. They can do it only through CONTROLLER. MODEL and VIEW can interact only with CONTROLLER. CONTROLLER is only one entity which can interact with MODEL and VIEW and it acts like connection between them.

1. MODEL
   Model is responsible for managing the data of the application. It receives user input from the controller. He is responsible for CRUD (create, read, update and delete) operations. Our model is using local storage to save our todos.

2. VIEW
   View is a presentation of the model in a particular format - in our case displaying All, Active or Completed todos (route). It also let user to interact with displayed data.

3. CONTROLLER
   Controller responds to the user input from View and performs interactions with Model. It also reading data from Model and passing it to the view.

By using MVC architecture our application works like Single Page Application (SPA) - that means user can interact with todos without reloading webpage.

---

Files and methods

.HTML FILES

index.html - Our application starting file (in other words - It is the application entry point.)

---

.CSS FILES

index.css - Defines our application CSS styles

---

.JS FILES

app.js - Sets up a brand new Todo list.

model.js - Creates a new Model instance and hooks up the storage.

Methods:

• create - Creates a new todo model
• read - Finds and returns a model in storage
• update - Updates a model
• remove - Removes a model from storage
• removeAll - Removs all data from storage
• getCount - Returns a count of all todos

controller.js - Takes a model and view and acts as the controller between them.

Methods:

• setView - Loads and initialises the view.
• showAll - Will get all items and display them in the todo-list.
• showActive - Renders all active tasks.
• showCompleted - Renders all completed tasks.
• addItem - Adding new item to our todos list.
• editItem - Triggers the item editing mode.
• editItemSave - Finishes the item editing mode.
• editItemCancel - Cancels the item editing mode.
• removeItem - Remove item from the DOM and also remove it from storage.
• removeCompletedItems - Will remove all completed items from the DOM and storage.
• toggleComplete - Toggles item between completed and not completed (active).
• toggleAll - Will take all todos and make them complete or incomplete.
• _updateCount - Update number of todos remaining as incomplete (active).
• _filter - Re-filters the todo items, based on the active route.
• _updateFilterState - Simply updates the filter nav's selected states.

helpers.js - It functions are:

• Getting element by CSS selector and attaching event listener to it.
• Attaching a handler to event for all elements that match the selector.
• Finding the element's parent with the given tag name.
• Allowing for looping on nodes by chaining forEach method.

store.js - Creates a new client side storage object.

Methods:

• find - Finds items based on a query given as a JS object.
• findAll - Will retrieve all data from the collection.
• save - Will save the given data to the DB.
• remove - Will remove an item from the Store based on its ID.
• drop - Will drop all storage and start fresh.

template.js - Sets up defaults for all Template methods such as a default template.

Methods:

• show - Creates an <li> HTML string and returns it for placement in our app.
• itemCounter - Displays a counter of how many to dos are left to complete.
• clearCompletedButton - Updates the text within the "Clear completed" button.

view.js - View that abstracts away the browser's DOM completely. It has two simple entry points:

• bind(eventName, handler) - Takes a todo application event and registers the handler.
• render(command, parameterObject) - Renders the given command with the options.

---