benatkin/jsbin.humifabu.html

## jsbin.humifabu.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[add your bin description]" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <script>
  </script>
</body>
</html>

## jsbin.humifabu.js
(function() {

  var task = window.task = {};
  task.TaskList = TaskList;
  task.Task = Task;

  function TaskList(tasks) {
    if (typeof tasks != 'object' || tasks === null) {
      tasks = [];
    }
    this.tasks = [];
    for (var i=0; i < tasks.length; i++) {
      this.tasks[i] = new Task(tasks[i]);
    }
  }

  TaskList.prototype.renderForm = function() {
    var form = document.createElement('form');
    var taskInput = document.createElement('input');
    taskInput.type = 'text';
    taskInput.placeholder = 'Enter task name...';
    taskInput.className = 'summary';
    form.appendChild(taskInput);
    var addTaskButton = document.createElement('input');
    addTaskButton.type = 'submit';
    addTaskButton.value = 'Add Task';
    form.appendChild(addTaskButton);
    return form;
  };

  TaskList.prototype.renderList = function() {
    var list = document.createElement('ul');
    for (var i=0; i < this.tasks.length; i++) {
      var item = this.tasks[i].render();
      list.appendChild(item);
    }
    return list;
  };

  TaskList.prototype.render = function() {
    this.el = document.getElementsByTagName('body')[0];
    var h1 = document.createElement('h1');
    h1.innerText = 'Tasks';
    this.el.appendChild(h1);

    var list = this.renderList();
    this.el.appendChild(list);

    var form = this.renderForm();
    this.el.appendChild(form);
  };

  TaskList.prototype.addTask = function(task) {
    var newTask = new Task(task);
    this.tasks.push(newTask);
    var list = this.el.getElementsByTagName('ul')[0];
    var taskEl = newTask.render();
    list.appendChild(taskEl);
  }

  TaskList.prototype.listen = function() {
    var form = this.el.getElementsByTagName('form')[0];
    var taskList = this;
    form.addEventListener('submit', function(e) {
      e.preventDefault();
      var summaryEl = taskList.el.getElementsByClassName('summary')[0];
      taskList.addTask({summary: summaryEl.value});
      summaryEl.value = '';
    });
  };

  TaskList.prototype.start = function() {
    this.render();
    this.listen();
  };

  function Task(task) {
    this.summary = task.summary;
  }

  Task.prototype.render = function() {
    var item = document.createElement('li');
    item.innerText = this.summary;
    return item;
  };

  var taskList = window.taskList = new task.TaskList([{summary: 'test'}]);
  taskList.start();

})();
	<!DOCTYPE html>
	<html>
	<head>
	<meta name="description" content="[add your bin description]" />
	<meta charset="utf-8">
	<title>JS Bin</title>
	</head>
	<body>
	<script>
	</script>
	</body>
	</html>
	(function() {

	var task = window.task = {};
	task.TaskList = TaskList;
	task.Task = Task;

	function TaskList(tasks) {
	if (typeof tasks != 'object' \|\| tasks === null) {
	tasks = [];
	}
	this.tasks = [];
	for (var i=0; i < tasks.length; i++) {
	this.tasks[i] = new Task(tasks[i]);
	}
	}

	TaskList.prototype.renderForm = function() {
	var form = document.createElement('form');
	var taskInput = document.createElement('input');
	taskInput.type = 'text';
	taskInput.placeholder = 'Enter task name...';
	taskInput.className = 'summary';
	form.appendChild(taskInput);
	var addTaskButton = document.createElement('input');
	addTaskButton.type = 'submit';
	addTaskButton.value = 'Add Task';
	form.appendChild(addTaskButton);
	return form;
	};

	TaskList.prototype.renderList = function() {
	var list = document.createElement('ul');
	for (var i=0; i < this.tasks.length; i++) {
	var item = this.tasks[i].render();
	list.appendChild(item);
	}
	return list;
	};

	TaskList.prototype.render = function() {
	this.el = document.getElementsByTagName('body')[0];
	var h1 = document.createElement('h1');
	h1.innerText = 'Tasks';
	this.el.appendChild(h1);

	var list = this.renderList();
	this.el.appendChild(list);

	var form = this.renderForm();
	this.el.appendChild(form);
	};

	TaskList.prototype.addTask = function(task) {
	var newTask = new Task(task);
	this.tasks.push(newTask);
	var list = this.el.getElementsByTagName('ul')[0];
	var taskEl = newTask.render();
	list.appendChild(taskEl);
	}

	TaskList.prototype.listen = function() {
	var form = this.el.getElementsByTagName('form')[0];
	var taskList = this;
	form.addEventListener('submit', function(e) {
	e.preventDefault();
	var summaryEl = taskList.el.getElementsByClassName('summary')[0];
	taskList.addTask({summary: summaryEl.value});
	summaryEl.value = '';
	});
	};

	TaskList.prototype.start = function() {
	this.render();
	this.listen();
	};

	function Task(task) {
	this.summary = task.summary;
	}

	Task.prototype.render = function() {
	var item = document.createElement('li');
	item.innerText = this.summary;
	return item;
	};

	var taskList = window.taskList = new task.TaskList([{summary: 'test'}]);
	taskList.start();

	})();