Adding a task to the to-do list

• Click to input field titled "What needs to be done?"
• Enter the title of the task that needs doing
• Pres Enter to add the task to the list

Insertion of the new item is being in controller.js file:

Controller.prototype.addItem = function (title) {
		var self = this;

		if (title.trim() === '') {
			return;
		}

		self.model.create(title, function () {
			self.view.render('clearNewTodo');
			self._filter(true);
		});
};

Marking a task as completed

• Make sure the filter section is set to either "All" or "Active"
• Click the checkbox to the left of the task that should be marked as completed

Marking a taks as completed is being in controller.js:

Controller.prototype.toggleComplete = function (id, completed, silent) {
		var self = this;
		self.model.update(id, { completed: completed }, function () {
			self.view.render('elementComplete', {
				id: id,
				completed: completed
			});
		});

		if (!silent) {
			self._filter();
		}
};

Marking a task as active

• Make sure the filter section is set to either "All" or "Completed"
• Click the checkbox to the left of the task that should be marked as active.

Marking all tasks as completed or active

• Click the check mark to the left of the "What needs to be done?" input field.

Marking all tasks as completed or active is done in controller.js:

Controller.prototype.toggleAll = function (completed) {
		var self = this;
		self.model.read({ completed: !completed }, function (data) {
			data.forEach(function (item) {
				self.toggleComplete(item.id, completed, true);
			});
		});

		self._filter();
};

Clearing completed tasks

The link referred to below, is not visible if no tasks has been marked as completed.

• Click the link in the lower left corner titled "Clear completed"

Clearing completed tasks is done in controller.js:

Controller.prototype.removeCompletedItems = function () {
		var self = this;
		self.model.read({ completed: true }, function (data) {
			data.forEach(function (item) {
				self.removeItem(item.id);
			});
		});

		self._filter();
};

Editing the title of a task

• Double click the title of a task - the title will then change to an input field.
• Edit the title and press Enter or simply click outside the input field to save.

Editing the title of a task is done in controller.js:

Controller.prototype.editItem = function (id) {
		var self = this;
		self.model.read(id, function (data) {
			self.view.render('editItem', {id: id, title: data[0].title});
		});
};

Displaying all, completed, or active tasks

Choose a filter in the filter section (located at the bottom of the list) to filter the tasks being displayed. Possible values are:

• "All": Displays all tasks - completed and active
• "Active": Displays only active tasks
• "Completed": Displays only completed tasks

Showing all, completed or active tasks is done in controller.js:

Controller.prototype.showAll = function () {
		var self = this;
		self.model.read(function (data) {
			self.view.render('showEntries', data);
		});
};

Controller.prototype.showActive = function () {
		var self = this;
		self.model.read({ completed: false }, function (data) {
			self.view.render('showEntries', data);
		});
};

Controller.prototype.showCompleted = function () {
		var self = this;
		self.model.read({ completed: true }, function (data) {
			self.view.render('showEntries', data);
		});
};