4.How to use the app - dkapexhiu/to-do-app GitHub Wiki
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);
});
};