3_Program specification - MoSanogo/Project-8- GitHub Wiki

The app is mainly divided into different modules:

  • HTML module
  • CSS modules
  • JavaScript modules

HTML modules

index.htm is the only HTML file in project. It is the application entry point.

CSS module

  1. index.css - defines all application CSS styles.
  2. base.css - defines common styles.

JavaScript modules

  1. app.js creates an instance of the todo app using Model, View and Controller.
  2. Model.js defines the core functionality and data.
  3. view.js defines templates and methods for displaying the information to the user.
  4. Controller.js defines methods for handling the input from the user.

Additional modules and helpers

  1. store.js delivers sample data storage solution
  2. template.js delivers template function to display list items, change button states, escape characters
  3. helpers.js deliver helper functions for DOM elements - querying, wrapping, delegating events

Controller

  • Type:

Function constructor to generate an object instance of controller.

  • Parameters: An instance of model object and an instance of view object.

  • Methods:

  1. setView :Loads and initialises the view.
  2. showAll:GetS all items and display them in the todo-list.
  3. showActive:Renders all active tasks which are not yet finished.
  4. showCompleted:Displays all completed tasks which are finished.
  5. addItem: Adds an item to the todoes list.
  6. removeItem:Removes item from the todoes list (clearing it up from the DOM and storage).
  7. removeCompletedItems:Removes all completed items the todoes list (clearing them up from the DOM and storage).
  8. toggleComplete:Provides features to mark a todo list item completed when it has been completed.
  9. toggleAll: Toggles all checkboxes' on/off state and completeness of models.
  10. _updateCount:Updates the elements on the page, which change with each completed todo.
  11. _filter: Re-filters the todo items, based on the active route.
  12. _updateFilterState:Simply updates the filter nav's selected states.
  13. editItem:Triggers the item editing mode.
  14. editItemSave :Finishes the item editing mode successfully.
  15. editItemCancel :Cancels the item editing mode.

Model:

  • Type:

Function constructor to create an instance of Model and to hook up the storage.

  • Parameters: An {object} storage which is a reference to the client side storage class.
  • Methods:
  1. create : Creates a new todo model.
  2. read :Fetches todo data from storage.
  3. update:Updates todo data in the storage on the client side storage.
  4. remove:Removes a todo model from storage.
  5. removeAll:Removes all data from storage.
  6. getCount:Gets a count of all todos.

View

  • Type:

Function constructor to create an instance of view which abstracts away the browser's DOM completely.

  • Parameters: An instance of the Function Template constructor.

  • Methods: 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

Template

  • Type:

Function constructor to create an instance of Template and to set up defaults for all the Template methods such as a default template.

  • Parameters: None.
  • Methods: 1.show:Creates an HTML string and returns it for placement in the app.
  1. itemCounter :Displays a counter of how many to dos are left to complete.
  2. clearCompletedButton :Updates the text within the "Clear completed" button.

Store

  • Type:

Function constructor to create an instance of client side storage object.

  • Parameters: The name of a database or collection to be used and callbacks.

  • Methods:

  1. find :Finds items based on a query given as a JS object.
  2. findAll:Retrieves all data from the collection(database).
  3. save:Saves the given data to the database or collection.
  4. remove:Removes an item from the Store based on its ID.
  5. drop :Drop a given database or collection from the client side storage.

Helpers

Provides a bunch of utilities to work with DOM elements such selecting an HTML element , dispatching an event,etc.