const vm = new Vue({
  // The DOM element to bootstrap our Vue
  el: '#app',
  
  // Kick off with some initial state
  data: {
    
    newTodo: '',
    
    todos: [
      {text: 'drink coffee', completed: true},
      {text: 'eat breakkie', completed: false},
      {text: 'check e-mails', completed: false},
      {text: 'hang in slack', completed: false},
      {text: 'do some work', completed: false},
      {text: 'check twitter', completed: false},
      {text: 'seriously dude, work!', completed: false},
      {text: 'drink coffee', completed: false},
      {text: 'play in CodePen', completed: false}
    ]
  },
  
  // keeping track of done / todo items
  computed: {
    
    itemsDone() {
      return this.todos.filter(todo => todo.completed)
    },
    
    itemsTodo() {
      return this.todos.filter(todo => !todo.completed)
    }
  },
  
  // Let's implement our functionality in methods
  methods: {
    
    addTodo() {
      // create new todo object
      const newEntry = {
        text: this.newTodo,
        completed: false
      }
      // if input field not empty...
      if (this.newTodo.length) {
        // ...push to todos array 
        this.todos.push(newEntry)
        // ...reset input field
        this.newTodo = '' 
      }
    },
    
    removeTodo(index) {
      // remove todo item
      this.todos.splice(index, 1)
    },
    
    clearCompleted() {
      // only keep todo items not completed (see computed data)
      this.todos = this.itemsTodo
    }
  }
})