nicco88/todoList.js

## todoList.js
// VERSION 1 - Arrays

// 1 It should have a place to store todos
// 2 It should have a way to display todos
// 3 It should have a way to add new todos
// 4 It should have a way to change a todo
// 5 It should have a way to delete a todo

/*-------------------------------------*/

// 1 - It should have a place to store todos

// We just make a list of items, like a list
// ["item 1", "item 2", "item 3"]
// We then want to give a name to the list, that is a variable (var)

// ACTION var todos = ["item 1", "item 2", "item 3"]

// It should have a place to store todos → (DONE)

/*-------------------------------------*/

// 2 - It should have a way to display todos
// We print with the console.log() function

// ACTION console.log("My todos:", todos)

// we don't need quotations because we want the array to be printed, not the string
// It should have a way to display todos → (DONE)

/*-------------------------------------*/

// 3 - It should have a way to add new todos

// With the "push" command, we add an item at the end of an array

// ACTION todos.push("item 4")

// It should have a way to add new todos → (DONE)

/*-------------------------------------*/

// 4 - It should have a way to change a todo

// To change an array, we first look inside the array, to know the position of the item we wanna change
// Then we put the position in the square brackets

// To see the first item: todos[0]
// ACTION todos[0] = "changed item"

// It should have a way to change a todo → (DONE)

/*-------------------------------------*/

// 5 - It should have a way to delete todos

// We delete items with the "splice" command;
// we need 2 things: the position, the amount of items to be deleted

// ACTION todos.splice(0, 1) | It'll delete the first item

// It should have a way to delete todos → (DONE)

/*-------------------------------------*/
/*-------------------------------------*/
/*-------------------------------------*/

// VERSION 2 - Functions

// 6 - Functions are just recipes

/*
  makeTurkeySandwich
    get one slice of bread
    add turkey
    put a slice of bread on top
*/

/*

Structure of a javascript function

function makeTurkeySandwich() {
    get one slice of bread;
    add turkey;
    put a slice of bread on top;
  }
*/

// To run the function: makeTurkeySandwich()

/*-------------------------------------*/

// 7 - Customizing functions

/*
  makeSandwichWith _____
    get one slice of bread
    add _____
    put a slice of bread on top
*/


// Structure of a javascript function
/*
function makeSandwichWith(filling) {
    get one slice of bread;
    add filling;
    put a slice of bread on top;
  }
  */
// makeSandwichWith("ham")

/*-------------------------------------*/

// 8 - Requirements

/*
  - It should have a function to display todos
  - It should have a function to add todos
  - It should have a function to change todos
  - It should have a function to delete todos
*/

/*-------------------------------------*/

// 9 - It should have a function to display todos

var todos = ["item 1", "item 2", "item 3"]

function displayTodos() {
  console.log("My todos", todos);
}

/*-------------------------------------*/

// 10 - It should have a function to add todos

// The way you add items is through the "push" command

function addTodo(todo) {
  todos.push(todo);
  displayTodos(); // this way we can see what's in the list
}

/*-------------------------------------*/

// 11 - It should have a function to change todos

function changeTodo(position, newValue) {
  todos[position] = newValue;
  displayTodos();
}

// Running example: changeTodo(0, "newItem")

// 12 - It should have a function to delete todos

function deleteTodo(position) {
  todos.splice(position, 1);
  // first item gives the position of the item, the second gives the quantity to be deleted
  displayTodos();
}

// to run the function: deleteTodo(2)

/*-------------------------------------*/
/*-------------------------------------*/
/*-------------------------------------*/

// VERSION 3 - Objects

// 13 - What is an object

// An object is group of data surrounded by curly braces
 // We assign it a variable
var myComputer = {
  // all these are properties: name: value,
  operatingSystem: "linux",
  screenSize: "15 inches",
  purchaseYear: 2011,
};

// to see the entire object we just call it: myComputer
// to see a specific part of it we write a dot and then the specific part: myComputer.screenSize

/*-------------------------------------*/

// 14 - Objects and Functions

/*
  var nicco = {
    name: "Nicco",
    sayName: function sayName() {
      console.log(this.name); // It'll display only "name"
  }
*/

/*-------------------------------------*/

// 15 - Requirements

/*
  - It should store the todos array on an object
  - It should have a displayTodos method
  - It should have a addTodo method
  - It should have a changeTodo method
  - It should have a delete method
*/

/*-------------------------------------*/

// 16 - It should store the todos array on an object

var todoList = {
  todos: ["item 1", "item 2", "item 3"],
  displayTodos: function() { // when functions are method (inside an object), they don't need to be named
    console.log("My todos:", this.todos);
  },
  addtodo: function(todo) { // addTodo method
    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();
  }
};

// What's great is that all these functions are grouped just in one object


/*-------------------------------------*/
/*-------------------------------------*/
/*-------------------------------------*/

// VERSION 4 - Booleans

// 17 - Requirements

/*
//  todoList.addTodo should add objects
//  todoList.changeTodo should should change the todoText property
//  todoList.toggleCompleted should change the completed property
*/

/*-------------------------------------*/

var todoList = {
  todos: [], // Preset items removed, substituted by objects added by addTodo below
  displayTodos: function() { // when functions are method (inside an object), they don't need to be named
    console.log("My todos:", this.todos);
  },
  addTodo: function(todoText) { // insted of todo, we are adding todoText, reffered to the object below
  this.todos.push({
    todoText: todoText, // The first is property, the second is a parameter, which can change
    completed: false //It's a boolean value and it's false by default
  }); // instead of todo, we are going to add an object{} with 2 properties
  // to run: todoList.addTodo("some text") → It'll display an object inside of an array
    this.displayTodos();
  },
  changeTodo: function(position, todoText) {
    this.todos[position].todoText = todoText; // This'll change just the todoText property, rather than the whole parameter
    this.displayTodos();
  },
  deleteTodo: function(position) {
    this.todos.splice(position, 1);
    this.displayTodos();
  },
  toggleCompleted: function(position) { // It needs a position to direct to
    var todo = this.todos[position]; // it's a shortcut, insted of writing: this.todos[position].completed
    todo.completed = !todo.completed; // we want the opposite
    this.displayTodos();
    //running ex.: todoList.toggleCompleted(0) → it'll switch true and false
  }
};


/*-------------------------------------*/
/*-------------------------------------*/
/*-------------------------------------*/

// VERSION 5 - Loops of logic

// 18 - For loop

/*
  i = 0
  Say "hey" if i < 3
  Increase i by 1

  0 "hey"
  1 "hey"
  2 "hey"
*/


/*
  for (initialization; condition; final-expression) {
    console.log("hey");
    }

  for (var i = 0; i < 3; i++) {
    console.log(i);
  }
*/

/*-------------------------------------*/

// 19 - Looping over arrays

/*

  var testArray = ["item 1", "item 2", "item 3"];

  for (var i = 0; i < 3; i++) {
    console.log(testArray[i]);
  }
*/

// BUT using "3" works just in our case; better use testArray.length
// The length property will automatically change when n. of items changes

/*
  So...
  for (var i = 0; i < testArray.length; i++) {
    console.log(testArray[i]);
  }
*/

/*-------------------------------------*/

// 20 - Requirements

// .displayTodos should show .todoText
// .displayTodos should tell you if .todos is empty
// .displayTodos should show .completed

/*-------------------------------------*/

// 21 - .displayTodos should show .todoText

/*
  .displayTodos should show .todoText property on each object in the .todos array
  So we have to do some processing on each object in our .todos array
  This is a perfect task for a "for loop"
*/

var todoList = {
  todos: [], // Preset items removed, substituted by objects added by addTodo below
  displayTodos: function() {

    /*for(var i = 0; i < this.todos.length; i++) { // we want to continue for n. times al long as the array (this.todos) length
      NB when we are on an array, we access very easily with []
      we want to access the todoText property on each item in the array (inside addTodo())
      console.log(this.todos[i].todoText); // to see it, we just console.log
    }*/

    // if there are no todos
    // → if this.todos.length === 0;
    if (this.todos.length === 0) {
      console.log("Your todo list is empty!");
    } else {
        console.log("My todos:"); // this.todos eliminated, not so useful to see
        // print todos as normal
        // moved from above
        for(var i = 0; i < this.todos.length; i++) {
          // console.log(this.todos[i].todoText); removed to be put in the if statement

          // check if .completed is true
          if (this.todos[i].completed === true) {
            // print with (x)
            console.log("(x)", this.todos[i].todoText);
          } else {
            // print with ( )
            console.log("( )", this.todos[i].todoText);
          }
      }
    }
  },

  addTodo: function(todoText) { // insted of todo, we are adding todoText, reffered to the object below
  this.todos.push({
    todoText: todoText, // The first is property, the second is a parameter, which can change
    completed: false //It's a boolean value and it's false by default
  }); // instead of todo, we are going to add an object{} with 2 properties
  // to run: todoList.addTodo("some text") → It'll display an object inside of an array
    this.displayTodos();
  },
  changeTodo: function(position, todoText) {
    this.todos[position].todoText = todoText; // This'll change just the todoText property, rather than the whole parameter
    this.displayTodos();
  },
  deleteTodo: function(position) {
    this.todos.splice(position, 1);
    this.displayTodos();
  },
  toggleCompleted: function(position) { // It needs a position to direct to
    var todo = this.todos[position]; // it's a shortcut, insted of writing: this.todos[position].completed
    todo.completed = !todo.completed; // we want the opposite
    this.displayTodos();
    //running ex.: todoList.toggleCompleted(0) → it'll switch true and false
  }
};


/*-------------------------------------*/

// 22 - displayTodos should tell you if todos is empty
// 23 - displayTodos should show .completed

var todoList = {
  todos: [], // the array here is empty, so that the user can fill it up
  displayTodos: function() {
    // displayTodos should tell you if todos is empty
    if (this.todos.length === 0) { // if there are no todos
      console.log("Your todo list is empty!");
    } else {
        console.log("My todos:");
      // for (initialization; condition; final expression)
      // displayTodos should show .completed
        for (var i = 0; i < this.todos.length; i++) {
          if (this.todos[i].completed === true) {
            console.log("(x)", this.todos[i].todoText);
          } else {
            console.log("( )", this.todos[i].todoText);
          }
        }
    }
      //print todos as normal
  },
  addTodo: function(todoText) {
    this.todos.push({ // we are pushing an object, inside a function, inside an object
      todoText: todoText, // we have the parameter and the argument that user is going to write
      completed: false // it's false by default
    });
    this.displayTodos();
  },
  changeTodo: function(position, todoText) {
    this.todos[position].todoText = todoText; // we want the todoText property to be changed, not the whole object, so we put ".todoText"
    this.displayTodos();
  },
  deleteTodo: function (position) {
    this.todos.splice(position, 1);
    this.displayTodos();
  },
  toggleCompleted: function(position) {
    var todo = this.todos[position];
    todo.completed = !todo.completed;
    this.displayTodos();
  }
};

/*-------------------------------------*/
/*-------------------------------------*/
/*-------------------------------------*/

// VERSION 6 - Thinking in code

// Requirements
// .toggleAll: if everything is true, make everything false
// toggleAll: otherwise make everything true

var todoList = {
  todos: [], // the array here is empty, so that the user can fill it up
  displayTodos: function() {
    // displayTodos should tell you if todos is empty
    if (this.todos.length === 0) { // if there are no todos
      console.log("Your todo list is empty!");
    } else {
        console.log("My todos:");
      // for (initialization; condition; final expression)
      // displayTodos should show .completed
        for (var i = 0; i < this.todos.length; i++) {
          if (this.todos[i].completed === true) {
            console.log("(x)", this.todos[i].todoText);
          } else {
            console.log("( )", this.todos[i].todoText);
          }
        }
    }
      //print todos as normal
  },
  addTodo: function(todoText) {
    this.todos.push({ // we are pushing an object, inside a function, inside an object
      todoText: todoText, // we have the parameter and the argument that user is going to write
      completed: false // it's false by default
    });
    this.displayTodos();
  },
  changeTodo: function(position, todoText) {
    this.todos[position].todoText = todoText; // we want the todoText property to be changed, not the whole object, so we put ".todoText"
    this.displayTodos();
  },
  deleteTodo: function (position) {
    this.todos.splice(position, 1);
    this.displayTodos();
  },
  toggleCompleted: function(position) {
    var todo = this.todos[position];
    todo.completed = !todo.completed;
    this.displayTodos();
  },
  toggleAll: function(){
    var totalTodos = this.todos.length;
    var completedTodos = 0; // that's a safe assumption

    // get number of completed todos
    for (var i = 0; i < totalTodos; i++) {
      if (this.todos[i].completed === true) {
        completedTodos++;
      }
    }

  // Case 1: if everything is true, make everything false
    if(completedTodos === totalTodos) {
      // make everything false
      for (var i = 0; i < totalTodos; i++) {
        this.todos[i].completed = false;
      }
    } else {
    // Case 2: otherwise make everything true
      for (var i = 0; i < totalTodos; i++) {
        this.todos[i].completed = true;
      }
    }
    this.displayTodos();
  }
};

// we want to get access to the display todos button
var displayTodosButton = document.getElementById("displayTodosButton");
// we want to run displayTodos method, when someone clicks the "Display Todos" button
displayTodosButton.addEventListener("click", function(){
  todoList.displayTodos();
});


/*-------------------------------------*/
/*-------------------------------------*/
/*-------------------------------------*/

// INTERLUDE - Data Types Overview

/*
- Objects
  {} arrays, functions
- Primitives (bulding blocks)
  String
  Number
  Boolean
  Undefined → value that hasn't been set
  Null → nothing

  Comparison with primitives (values)
  1 === 1 → true
  "blu" === "blu" → true
  ...

  Comparison with objects (references)
  {} === {} → false
  [1,2,3] === [1,2,3] → false
  It's like comparing the same houses with different addresses.
  Memory addresses are always different.

*/

/*-------------------------------------*/
/*-------------------------------------*/
/*-------------------------------------*/

// VERSION 7 - HTML and the DOM

// Requirements
// There should be a displayTodo button and a toggleAll button in the app
// Clicking "Display Todos" should run todoList.displayTodos
// Clicking "Toggle All" should run todoList.toggleAll

var todoList = {
  todos: [], // the array here is empty, so that the user can fill it up
  displayTodos: function() {
    // displayTodos should tell you if todos is empty
    if (this.todos.length === 0) { // if there are no todos
      console.log("Your todo list is empty!");
    } else {
        console.log("My todos:");
      // for (initialization; condition; final expression)
      // displayTodos should show .completed
        for (var i = 0; i < this.todos.length; i++) {
          if (this.todos[i].completed === true) {
            console.log("(x)", this.todos[i].todoText);
          } else {
            console.log("( )", this.todos[i].todoText);
          }
        }
    }
      //print todos as normal
  },
  addTodo: function(todoText) {
    this.todos.push({ // we are pushing an object, inside a function, inside an object
      todoText: todoText, // we have the parameter and the argument that user is going to write
      completed: false // it's false by default
    });
    this.displayTodos();
  },
  changeTodo: function(position, todoText) {
    this.todos[position].todoText = todoText; // we want the todoText property to be changed, not the whole object, so we put ".todoText"
    this.displayTodos();
  },
  deleteTodo: function (position) {
    this.todos.splice(position, 1);
    this.displayTodos();
  },
  toggleCompleted: function(position) {
    var todo = this.todos[position];
    todo.completed = !todo.completed;
    this.displayTodos();
  },
  toggleAll: function() {
    var totalTodos = this.todos.length;
    var completedTodos = 0; // that's a safe assumption

    // get number of completed todos
    for (var i = 0; i < totalTodos; i++) {
      if (this.todos[i].completed === true) {
        completedTodos++;
      }
    }

  // Case 1: if everything is true, make everything false
    if(completedTodos === totalTodos) {
      // make everything false
      for (var i = 0; i < totalTodos; i++) {
        this.todos[i].completed = false;
      }
    } else {
    // Case 2: otherwise make everything true
      for (var i = 0; i < totalTodos; i++) {
        this.todos[i].completed = true;
      }
    }
    this.displayTodos();
  }
};

// we want to get access to the display todos button
var displayTodosButton = document.getElementById("displayTodosButton");
// we want to run displayTodos method, when someone clicks the "Display Todos" button
displayTodosButton.addEventListener("click", function(){
  todoList.displayTodos();
});

var toggleAllButton = document.getElementById("toggleAllButton");

toggleAllButton.addEventListener("click", function(){
  todoList.toggleAll();
});

/*-------------------------------------*/
/*-------------------------------------*/
/*-------------------------------------*/

// VERSION 8

var todoList = {
  todos: [], // the array here is empty, so that the user can fill it up
  displayTodos: function() {
    // displayTodos should tell you if todos is empty
    if (this.todos.length === 0) { // if there are no todos
      console.log("Your todo list is empty!");
    } else {
        console.log("My todos:");
      // for (initialization; condition; final expression)
      // displayTodos should show .completed
        for (var i = 0; i < this.todos.length; i++) {
          if (this.todos[i].completed === true) {
            console.log("(x)", this.todos[i].todoText);
          } else {
            console.log("( )", this.todos[i].todoText);
          }
        }
    }
      //print todos as normal
  },
  addTodo: function(todoText) {
    this.todos.push({ // we are pushing an object, inside a function, inside an object
      todoText: todoText, // we have the parameter and the argument that user is going to write
      completed: false // it's false by default
    });
    this.displayTodos();
  },
  changeTodo: function(position, todoText) {
    this.todos[position].todoText = todoText; // we want the todoText property to be changed, not the whole object, so we put ".todoText"
    this.displayTodos();
  },
  deleteTodo: function (position) {
    this.todos.splice(position, 1);
    this.displayTodos();
  },
  toggleCompleted: function(position) {
    var todo = this.todos[position];
    todo.completed = !todo.completed;
    this.displayTodos();
  },
  toggleAll: function() {
    var totalTodos = this.todos.length;
    var completedTodos = 0; // that's a safe assumption

    // get number of completed todos
    for (var i = 0; i < totalTodos; i++) {
      if (this.todos[i].completed === true) {
        completedTodos++;
      }
    }

  // Case 1: if everything is true, make everything false
    if(completedTodos === totalTodos) {
      // make everything false
      for (var i = 0; i < totalTodos; i++) {
        this.todos[i].completed = false;
      }
    } else {
    // Case 2: otherwise make everything true
      for (var i = 0; i < totalTodos; i++) {
        this.todos[i].completed = true;
      }
    }
    this.displayTodos();
  }
};

var handlers = {
  displayTodos: function(){
  todoList.displayTodos();
  },
  toggleAll: function(){
  todoList.toggleAll();
  }
};
	// VERSION 1 - Arrays

	// 1 It should have a place to store todos
	// 2 It should have a way to display todos
	// 3 It should have a way to add new todos
	// 4 It should have a way to change a todo
	// 5 It should have a way to delete a todo

	/-------------------------------------/

	// 1 - It should have a place to store todos

	// We just make a list of items, like a list
	// ["item 1", "item 2", "item 3"]
	// We then want to give a name to the list, that is a variable (var)

	// ACTION var todos = ["item 1", "item 2", "item 3"]

	// It should have a place to store todos → (DONE)

	/-------------------------------------/

	// 2 - It should have a way to display todos
	// We print with the console.log() function

	// ACTION console.log("My todos:", todos)

	// we don't need quotations because we want the array to be printed, not the string
	// It should have a way to display todos → (DONE)

	/-------------------------------------/

	// 3 - It should have a way to add new todos

	// With the "push" command, we add an item at the end of an array

	// ACTION todos.push("item 4")

	// It should have a way to add new todos → (DONE)

	/-------------------------------------/

	// 4 - It should have a way to change a todo

	// To change an array, we first look inside the array, to know the position of the item we wanna change
	// Then we put the position in the square brackets

	// To see the first item: todos[0]
	// ACTION todos[0] = "changed item"

	// It should have a way to change a todo → (DONE)

	/-------------------------------------/

	// 5 - It should have a way to delete todos

	// We delete items with the "splice" command;
	// we need 2 things: the position, the amount of items to be deleted

	// ACTION todos.splice(0, 1) \| It'll delete the first item

	// It should have a way to delete todos → (DONE)

	/-------------------------------------/
	/-------------------------------------/
	/-------------------------------------/

	// VERSION 2 - Functions

	// 6 - Functions are just recipes

	/*
	makeTurkeySandwich
	get one slice of bread
	add turkey
	put a slice of bread on top
	*/

	/*

	Structure of a javascript function

	function makeTurkeySandwich() {
	get one slice of bread;
	add turkey;
	put a slice of bread on top;
	}
	*/

	// To run the function: makeTurkeySandwich()

	/-------------------------------------/

	// 7 - Customizing functions

	/*
	makeSandwichWith _____
	get one slice of bread
	add _____
	put a slice of bread on top
	*/



	// Structure of a javascript function
	/*
	function makeSandwichWith(filling) {
	get one slice of bread;
	add filling;
	put a slice of bread on top;
	}
	*/
	// makeSandwichWith("ham")

	/-------------------------------------/

	// 8 - Requirements

	/*
	- It should have a function to display todos
	- It should have a function to add todos
	- It should have a function to change todos
	- It should have a function to delete todos
	*/

	/-------------------------------------/

	// 9 - It should have a function to display todos

	var todos = ["item 1", "item 2", "item 3"]

	function displayTodos() {
	console.log("My todos", todos);
	}

	/-------------------------------------/

	// 10 - It should have a function to add todos

	// The way you add items is through the "push" command

	function addTodo(todo) {
	todos.push(todo);
	displayTodos(); // this way we can see what's in the list
	}

	/-------------------------------------/

	// 11 - It should have a function to change todos

	function changeTodo(position, newValue) {
	todos[position] = newValue;
	displayTodos();
	}

	// Running example: changeTodo(0, "newItem")

	// 12 - It should have a function to delete todos

	function deleteTodo(position) {
	todos.splice(position, 1);
	// first item gives the position of the item, the second gives the quantity to be deleted
	displayTodos();
	}

	// to run the function: deleteTodo(2)

	/-------------------------------------/
	/-------------------------------------/
	/-------------------------------------/

	// VERSION 3 - Objects

	// 13 - What is an object

	// An object is group of data surrounded by curly braces
	// We assign it a variable
	var myComputer = {
	// all these are properties: name: value,
	operatingSystem: "linux",
	screenSize: "15 inches",
	purchaseYear: 2011,
	};

	// to see the entire object we just call it: myComputer
	// to see a specific part of it we write a dot and then the specific part: myComputer.screenSize

	/-------------------------------------/

	// 14 - Objects and Functions

	/*
	var nicco = {
	name: "Nicco",
	sayName: function sayName() {
	console.log(this.name); // It'll display only "name"
	}
	*/

	/-------------------------------------/

	// 15 - Requirements

	/*
	- It should store the todos array on an object
	- It should have a displayTodos method
	- It should have a addTodo method
	- It should have a changeTodo method
	- It should have a delete method
	*/

	/-------------------------------------/

	// 16 - It should store the todos array on an object

	var todoList = {
	todos: ["item 1", "item 2", "item 3"],
	displayTodos: function() { // when functions are method (inside an object), they don't need to be named
	console.log("My todos:", this.todos);
	},
	addtodo: function(todo) { // addTodo method
	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();
	}
	};

	// What's great is that all these functions are grouped just in one object


	/-------------------------------------/
	/-------------------------------------/
	/-------------------------------------/

	// VERSION 4 - Booleans

	// 17 - Requirements

	/*
	// todoList.addTodo should add objects
	// todoList.changeTodo should should change the todoText property
	// todoList.toggleCompleted should change the completed property
	*/

	/-------------------------------------/

	var todoList = {
	todos: [], // Preset items removed, substituted by objects added by addTodo below
	displayTodos: function() { // when functions are method (inside an object), they don't need to be named
	console.log("My todos:", this.todos);
	},
	addTodo: function(todoText) { // insted of todo, we are adding todoText, reffered to the object below
	this.todos.push({
	todoText: todoText, // The first is property, the second is a parameter, which can change
	completed: false //It's a boolean value and it's false by default
	}); // instead of todo, we are going to add an object{} with 2 properties
	// to run: todoList.addTodo("some text") → It'll display an object inside of an array
	this.displayTodos();
	},
	changeTodo: function(position, todoText) {
	this.todos[position].todoText = todoText; // This'll change just the todoText property, rather than the whole parameter
	this.displayTodos();
	},
	deleteTodo: function(position) {
	this.todos.splice(position, 1);
	this.displayTodos();
	},
	toggleCompleted: function(position) { // It needs a position to direct to
	var todo = this.todos[position]; // it's a shortcut, insted of writing: this.todos[position].completed
	todo.completed = !todo.completed; // we want the opposite
	this.displayTodos();
	//running ex.: todoList.toggleCompleted(0) → it'll switch true and false
	}
	};



	/-------------------------------------/
	/-------------------------------------/
	/-------------------------------------/

	// VERSION 5 - Loops of logic

	// 18 - For loop

	/*
	i = 0
	Say "hey" if i < 3
	Increase i by 1

	0 "hey"
	1 "hey"
	2 "hey"
	*/


	/*
	for (initialization; condition; final-expression) {
	console.log("hey");
	}

	for (var i = 0; i < 3; i++) {
	console.log(i);
	}
	*/

	/-------------------------------------/

	// 19 - Looping over arrays

	/*

	var testArray = ["item 1", "item 2", "item 3"];

	for (var i = 0; i < 3; i++) {
	console.log(testArray[i]);
	}
	*/

	// BUT using "3" works just in our case; better use testArray.length
	// The length property will automatically change when n. of items changes

	/*
	So...
	for (var i = 0; i < testArray.length; i++) {
	console.log(testArray[i]);
	}
	*/

	/-------------------------------------/

	// 20 - Requirements

	// .displayTodos should show .todoText
	// .displayTodos should tell you if .todos is empty
	// .displayTodos should show .completed

	/-------------------------------------/

	// 21 - .displayTodos should show .todoText

	/*
	.displayTodos should show .todoText property on each object in the .todos array
	So we have to do some processing on each object in our .todos array
	This is a perfect task for a "for loop"
	*/

	var todoList = {
	todos: [], // Preset items removed, substituted by objects added by addTodo below
	displayTodos: function() {

	/*for(var i = 0; i < this.todos.length; i++) { // we want to continue for n. times al long as the array (this.todos) length
	NB when we are on an array, we access very easily with []
	we want to access the todoText property on each item in the array (inside addTodo())
	console.log(this.todos[i].todoText); // to see it, we just console.log
	}*/

	// if there are no todos
	// → if this.todos.length === 0;
	if (this.todos.length === 0) {
	console.log("Your todo list is empty!");
	} else {
	console.log("My todos:"); // this.todos eliminated, not so useful to see
	// print todos as normal
	// moved from above
	for(var i = 0; i < this.todos.length; i++) {
	// console.log(this.todos[i].todoText); removed to be put in the if statement

	// check if .completed is true
	if (this.todos[i].completed === true) {
	// print with (x)
	console.log("(x)", this.todos[i].todoText);
	} else {
	// print with ( )
	console.log("( )", this.todos[i].todoText);
	}
	}
	}
	},

	addTodo: function(todoText) { // insted of todo, we are adding todoText, reffered to the object below
	this.todos.push({
	todoText: todoText, // The first is property, the second is a parameter, which can change
	completed: false //It's a boolean value and it's false by default
	}); // instead of todo, we are going to add an object{} with 2 properties
	// to run: todoList.addTodo("some text") → It'll display an object inside of an array
	this.displayTodos();
	},
	changeTodo: function(position, todoText) {
	this.todos[position].todoText = todoText; // This'll change just the todoText property, rather than the whole parameter
	this.displayTodos();
	},
	deleteTodo: function(position) {
	this.todos.splice(position, 1);
	this.displayTodos();
	},
	toggleCompleted: function(position) { // It needs a position to direct to
	var todo = this.todos[position]; // it's a shortcut, insted of writing: this.todos[position].completed
	todo.completed = !todo.completed; // we want the opposite
	this.displayTodos();
	//running ex.: todoList.toggleCompleted(0) → it'll switch true and false
	}
	};


	/-------------------------------------/

	// 22 - displayTodos should tell you if todos is empty
	// 23 - displayTodos should show .completed

	var todoList = {
	todos: [], // the array here is empty, so that the user can fill it up
	displayTodos: function() {
	// displayTodos should tell you if todos is empty
	if (this.todos.length === 0) { // if there are no todos
	console.log("Your todo list is empty!");
	} else {
	console.log("My todos:");
	// for (initialization; condition; final expression)
	// displayTodos should show .completed
	for (var i = 0; i < this.todos.length; i++) {
	if (this.todos[i].completed === true) {
	console.log("(x)", this.todos[i].todoText);
	} else {
	console.log("( )", this.todos[i].todoText);
	}
	}
	}
	//print todos as normal
	},
	addTodo: function(todoText) {
	this.todos.push({ // we are pushing an object, inside a function, inside an object
	todoText: todoText, // we have the parameter and the argument that user is going to write
	completed: false // it's false by default
	});
	this.displayTodos();
	},
	changeTodo: function(position, todoText) {
	this.todos[position].todoText = todoText; // we want the todoText property to be changed, not the whole object, so we put ".todoText"
	this.displayTodos();
	},
	deleteTodo: function (position) {
	this.todos.splice(position, 1);
	this.displayTodos();
	},
	toggleCompleted: function(position) {
	var todo = this.todos[position];
	todo.completed = !todo.completed;
	this.displayTodos();
	}
	};

	/-------------------------------------/
	/-------------------------------------/
	/-------------------------------------/

	// VERSION 6 - Thinking in code

	// Requirements
	// .toggleAll: if everything is true, make everything false
	// toggleAll: otherwise make everything true

	var todoList = {
	todos: [], // the array here is empty, so that the user can fill it up
	displayTodos: function() {
	// displayTodos should tell you if todos is empty
	if (this.todos.length === 0) { // if there are no todos
	console.log("Your todo list is empty!");
	} else {
	console.log("My todos:");
	// for (initialization; condition; final expression)
	// displayTodos should show .completed
	for (var i = 0; i < this.todos.length; i++) {
	if (this.todos[i].completed === true) {
	console.log("(x)", this.todos[i].todoText);
	} else {
	console.log("( )", this.todos[i].todoText);
	}
	}
	}
	//print todos as normal
	},
	addTodo: function(todoText) {
	this.todos.push({ // we are pushing an object, inside a function, inside an object
	todoText: todoText, // we have the parameter and the argument that user is going to write
	completed: false // it's false by default
	});
	this.displayTodos();
	},
	changeTodo: function(position, todoText) {
	this.todos[position].todoText = todoText; // we want the todoText property to be changed, not the whole object, so we put ".todoText"
	this.displayTodos();
	},
	deleteTodo: function (position) {
	this.todos.splice(position, 1);
	this.displayTodos();
	},
	toggleCompleted: function(position) {
	var todo = this.todos[position];
	todo.completed = !todo.completed;
	this.displayTodos();
	},
	toggleAll: function(){
	var totalTodos = this.todos.length;
	var completedTodos = 0; // that's a safe assumption

	// get number of completed todos
	for (var i = 0; i < totalTodos; i++) {
	if (this.todos[i].completed === true) {
	completedTodos++;
	}
	}

	// Case 1: if everything is true, make everything false
	if(completedTodos === totalTodos) {
	// make everything false
	for (var i = 0; i < totalTodos; i++) {
	this.todos[i].completed = false;
	}
	} else {
	// Case 2: otherwise make everything true
	for (var i = 0; i < totalTodos; i++) {
	this.todos[i].completed = true;
	}
	}
	this.displayTodos();
	}
	};

	// we want to get access to the display todos button
	var displayTodosButton = document.getElementById("displayTodosButton");
	// we want to run displayTodos method, when someone clicks the "Display Todos" button
	displayTodosButton.addEventListener("click", function(){
	todoList.displayTodos();
	});



	/-------------------------------------/
	/-------------------------------------/
	/-------------------------------------/

	// INTERLUDE - Data Types Overview

	/*
	- Objects
	{} arrays, functions
	- Primitives (bulding blocks)
	String
	Number
	Boolean
	Undefined → value that hasn't been set
	Null → nothing

	Comparison with primitives (values)
	1 === 1 → true
	"blu" === "blu" → true
	...

	Comparison with objects (references)
	{} === {} → false
	[1,2,3] === [1,2,3] → false
	It's like comparing the same houses with different addresses.
	Memory addresses are always different.

	*/

	/-------------------------------------/
	/-------------------------------------/
	/-------------------------------------/

	// VERSION 7 - HTML and the DOM

	// Requirements
	// There should be a displayTodo button and a toggleAll button in the app
	// Clicking "Display Todos" should run todoList.displayTodos
	// Clicking "Toggle All" should run todoList.toggleAll

	var todoList = {
	todos: [], // the array here is empty, so that the user can fill it up
	displayTodos: function() {
	// displayTodos should tell you if todos is empty
	if (this.todos.length === 0) { // if there are no todos
	console.log("Your todo list is empty!");
	} else {
	console.log("My todos:");
	// for (initialization; condition; final expression)
	// displayTodos should show .completed
	for (var i = 0; i < this.todos.length; i++) {
	if (this.todos[i].completed === true) {
	console.log("(x)", this.todos[i].todoText);
	} else {
	console.log("( )", this.todos[i].todoText);
	}
	}
	}
	//print todos as normal
	},
	addTodo: function(todoText) {
	this.todos.push({ // we are pushing an object, inside a function, inside an object
	todoText: todoText, // we have the parameter and the argument that user is going to write
	completed: false // it's false by default
	});
	this.displayTodos();
	},
	changeTodo: function(position, todoText) {
	this.todos[position].todoText = todoText; // we want the todoText property to be changed, not the whole object, so we put ".todoText"
	this.displayTodos();
	},
	deleteTodo: function (position) {
	this.todos.splice(position, 1);
	this.displayTodos();
	},
	toggleCompleted: function(position) {
	var todo = this.todos[position];
	todo.completed = !todo.completed;
	this.displayTodos();
	},
	toggleAll: function() {
	var totalTodos = this.todos.length;
	var completedTodos = 0; // that's a safe assumption

	// get number of completed todos
	for (var i = 0; i < totalTodos; i++) {
	if (this.todos[i].completed === true) {
	completedTodos++;
	}
	}

	// Case 1: if everything is true, make everything false
	if(completedTodos === totalTodos) {
	// make everything false
	for (var i = 0; i < totalTodos; i++) {
	this.todos[i].completed = false;
	}
	} else {
	// Case 2: otherwise make everything true
	for (var i = 0; i < totalTodos; i++) {
	this.todos[i].completed = true;
	}
	}
	this.displayTodos();
	}
	};

	// we want to get access to the display todos button
	var displayTodosButton = document.getElementById("displayTodosButton");
	// we want to run displayTodos method, when someone clicks the "Display Todos" button
	displayTodosButton.addEventListener("click", function(){
	todoList.displayTodos();
	});

	var toggleAllButton = document.getElementById("toggleAllButton");

	toggleAllButton.addEventListener("click", function(){
	todoList.toggleAll();
	});

	/-------------------------------------/
	/-------------------------------------/
	/-------------------------------------/

	// VERSION 8

	var todoList = {
	todos: [], // the array here is empty, so that the user can fill it up
	displayTodos: function() {
	// displayTodos should tell you if todos is empty
	if (this.todos.length === 0) { // if there are no todos
	console.log("Your todo list is empty!");
	} else {
	console.log("My todos:");
	// for (initialization; condition; final expression)
	// displayTodos should show .completed
	for (var i = 0; i < this.todos.length; i++) {
	if (this.todos[i].completed === true) {
	console.log("(x)", this.todos[i].todoText);
	} else {
	console.log("( )", this.todos[i].todoText);
	}
	}
	}
	//print todos as normal
	},
	addTodo: function(todoText) {
	this.todos.push({ // we are pushing an object, inside a function, inside an object
	todoText: todoText, // we have the parameter and the argument that user is going to write
	completed: false // it's false by default
	});
	this.displayTodos();
	},
	changeTodo: function(position, todoText) {
	this.todos[position].todoText = todoText; // we want the todoText property to be changed, not the whole object, so we put ".todoText"
	this.displayTodos();
	},
	deleteTodo: function (position) {
	this.todos.splice(position, 1);
	this.displayTodos();
	},
	toggleCompleted: function(position) {
	var todo = this.todos[position];
	todo.completed = !todo.completed;
	this.displayTodos();
	},
	toggleAll: function() {
	var totalTodos = this.todos.length;
	var completedTodos = 0; // that's a safe assumption

	// get number of completed todos
	for (var i = 0; i < totalTodos; i++) {
	if (this.todos[i].completed === true) {
	completedTodos++;
	}
	}

	// Case 1: if everything is true, make everything false
	if(completedTodos === totalTodos) {
	// make everything false
	for (var i = 0; i < totalTodos; i++) {
	this.todos[i].completed = false;
	}
	} else {
	// Case 2: otherwise make everything true
	for (var i = 0; i < totalTodos; i++) {
	this.todos[i].completed = true;
	}
	}
	this.displayTodos();
	}
	};

	var handlers = {
	displayTodos: function(){
	todoList.displayTodos();
	},
	toggleAll: function(){
	todoList.toggleAll();
	}
	};