[ ] todoList.changeTodo should change the todo Text property
[ ] todoList.toggleCompleted should change the completed property
Introduction
We are going to start working with Booleans and our todo array is now going to become an object. Boolean essentially toggles between a true or a false. With that in mind, let’s map out the requirements.
We base this version off of our previous version which is indicated below.
[version 03]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var todoList = {
todos: ['item 1', 'item 2', 'item 3'],
displayTodos: function() {
console.log('My Todos: ', this.todos);
},
addTodo: function(todo) {
this.todos.push(todo);
this.displayTodos();
},
changeTodo: function(position, newValue) {
this.todos[position] = newValue;
this.displayTodos();
},
deleteTodo: function(position) {
this.todos.splice(position, 1);
this.displayTodos();
}
};
Let’s first map out what properties we want to add -
[new properties for object]
1
2
3
4
{
todoText: 'item 1',
completed: false // Boolean true or false
}
Adding a TODO object
Let’s change our existing code to reflect the idea discussed in the previous section.
[adding a todo object]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var todoList = {
todos: [],
displayTodos: function() {
console.log('My Todos: ', this.todos);
},
addTodo: function(todoText) {
this.todos.push({
todoText: todoText,
completed: false
});
this.displayTodos();
},
changeTodo: function(position, newValue) {
this.todos[position] = newValue;
this.displayTodos();
},
deleteTodo: function(position) {
this.todos.splice(position, 1);
this.displayTodos();
}
};
Note that line number 9 - todoText: todoText, - can be confusing. The left todoText is going to remain todoText no matter what happens as it is the text property but the right todoText is referring to the parameter and might change based on the argument you supply. For example, if you call todoList.addTodo('hi'), then the right hand todoText is going to be 'hi'.
Note that after changing our addTodo function, our displayTodos function acts weird. We can fix that later.
Updated requirements
[X] todoList.addTodo should add objects
[ ] todoList.changeTodo should change the todo Text property
[ ] todoList.toggleCompleted should change the completed property
Changing a TODO
Following a similar logic as the previous section, we end up with this piece of code. While we are at it, let’s also go ahead and change the variable newValue to todoText as it’s more descriptive.
[changing a todo object]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var todoList = {
todos: [],
displayTodos: function() {
console.log('My Todos: ', this.todos);
},
addTodo: function(todoText) {
this.todos.push({
todoText: todoText,
completed: false
});
this.displayTodos();
},
changeTodo: function(position, todoText) {
// this.todos[position] = newValue; // this will no longer work
[X] todoList.changeTodo should change the todo Text property
[X] todoList.toggleCompleted should change the completed property
Version 4 conclusions
In this version, we changed our app to use objects instead of arrays with the help of booleans. As usual, the complete code version of this can be found in version04.js