Technical description

Installation and setup

Before the installation of the project, you will need to set up node.js to have npm which is a package manager needed for this project. (Will be used to install dependencies). You can download the latest version of node here

• Download the latest version of the project from the GitHub repository or clone it on your machine with the command "git clone https://github.com/FotieMConstant/Todo-list-app.git".
• Once the files are on your local machine, go to the root directory and run npm install to install the dependencies needed for the project.
• Launch the index.html file which is located in the root directory.

Overview

Before we get started we need to know what each file does in our project. Go to Program specification to get an overview of the files

Todo

Set up a new Todo list

Parameters

• name: string The name of the new to-do list.

Controller

Takes a model and view and acts as the intermediate between them.

• Controller: Creates a link between the model and the view.
• Controller.prototype.setView: Loads and initializes the view.
• Controller.prototype.showAll: Will get all items and display them in the todo-list.
• Controller.prototype.showActive: Renders all active tasks.
• Controller.prototype.showCompleted: Renders all completed tasks.
• Controller.prototype.addItem: An event to call whenever you want to add an item. Pass in the event object and it'll handle the DOM insertion and saving of the new item (Todo).
• Controller.prototype.editItem: Modifies the title of a todo.
• Controller.prototype.editItemSave: Save a todo whose title has been modified.
• Controller.prototype.editItemCancel: Cancels the modification of the title of a todo.
• Controller.prototype.removeItem: By passing in an ID as param it'll find the DOM element matching that ID, remove it from the DOM and also remove it from storage.
• Controller.prototype.removeCompletedItems: Removes all completed todos.
• Controller.prototype.toggleComplete: Check or uncheck a particular todo.
• Controller.prototype.toggleAll: Check or uncheck all todos.
• Controller.prototype._updateCount: Updates the number of todos in the list.
• Controller.prototype._filter: filters the todo items, based on the active route.
• Controller.prototype._updateFilterState: updates the filter nav's selected states

Model

This file Initialize the model

Parameters

• storage: object A reference to the client side storage class

• Model: Creates a new Model instance.

• Model.prototype.create: Create a new todo model.

• Model.prototype.read: Finds and returns existing storage models.

• Model.prototype.update: Updates a model. by giving it an ID, data to be updated, and a callback to fire when the update is complete.

• Model.prototype.remove: Removes a model from storage.

• Model.prototype.removeAll: Removes all models from storage.

• Model.prototype.getCount: Returns a count of all todos.

Store

This file will create new objects which will act as the database of our app and stores in the client-storage

• Store: Creates a new client-side storage object and will initialize to an empty collection if no collection exists.
• Store.prototype.find: Used to finds items based on a query given as a JS object.
• Store.prototype.findAll: Will retrieve all data from the collection.
• Store.prototype.save: Save a new item, or update an already existing item in the collection.
• Store.prototype.remove: Will remove an item from the Store based on the item's ID.
• Store.prototype.drop: Will drop all storage.

Template

Like its name says contains the template of our app. The HTML code is not managed in the view but in the template.js file

• Template: Provides a default template of our app.
• Template.prototype.show: Creates an HTML string and returns it for placement in your app.
• Template.prototype.itemCounter: Displays a counter of how many to-dos are left to complete.
• Template.prototype.clearCompletedButton: Updates the text within the "Clear completed" button.

View

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

• View: Defines the template of the app.
• View.prototype._removeItem: Remove a todo.
• View.prototype._clearCompletedButton: Show or hide the "Clear completed" button.
• View.prototype._setFilter: Visually "activates" the selected filter button.
• View.prototype._elementComplete: Crosses or derails a todo.
• View.prototype._editItem: Manage the display when editing the title of an existing todo.
• View.prototype._editItemDone: Resets a normal display to the todo which has just been modified.
• View.prototype.render: Will, depending on the parameters used, run one of the following functions.
• showEntries: displays the todos.
• removeItem: remove a todo.
• updateElementCount: update the number of todos.
• clearCompletedButton: update the Clear completed button.
• contentBlockVisibility: show or hide the "footer" of the todo-list.
• toggleAll: Check all items.
• setFilter: Controls the display of filters.
• clearNewTodo: Empty the main text field of the todo-list.
• elementComplete: Manage the display of a completed todo.
• editItem: Manage the display of a todo being edited.
• editItemDone: Manage the display of a todo whose modification has just been done.
• View.prototype._itemId: Get the ID of a todo.
• View.prototype._bindItemEditDone: Manage the display when the focus of the todo being edited is lost.
• View.prototype._bindItemEditCancel: Manage the display of the todo whose modification is canceled.
• View.prototype.bind: Attach an event handler, with associated javascript events that will allow rendering.