(function() {
  // object literal
  var todolist = {
    list: ['first todo.'],
    init: function() {
      this.cacheDOM();
      this.bindEvents();
      this.render();
    },
    cacheDOM: function() {
      this.input = document.getElementById('input');
      this.submit = document.getElementById('submit');
      this.uli = document.getElementById('list');
    },
    bindEvents: function() {
      this.submit.addEventListener('click', this.handleSubmit.bind(this));
    },
    handleSubmit: function(e) {
      e.preventDefault();
      var value = this.input.value;
      this.list.push(value);
      this.render();
    },
    render: function() {
      var ul = this.uli;
      ul.innerHTML = '';

      this.list.forEach(function(todo) {
        var li = document.createElement('li');
        var text = document.createTextNode(todo);
        li.appendChild(text);
        ul.appendChild(li);
      });

      this.input.value = '';
    }
  }

  todolist.init();
})()