gilbertwat/todo_list.html

## todo_list.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

  <style>
  html {
    padding: 5mm;
    background-color: #e9e9e9;
    font-family: 'Indie Flower', cursive;
  }

  .container {
    background-color: #fff;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.24);
    margin: 0 auto;
    max-width: 100mm;
  }

  .container > header {
    padding: 7mm;
    font-size: 2.2em;
    text-align: center;
    color: #fff;
    background-color: #009688;
  }

  .container > footer {
    padding: 2mm;
  }

  .task {
    font-size: 1.5em;
    padding: 3mm 7mm;
  }

  .task.complete {
    text-decoration: line-through;
  }

  #task-list {
    min-height: 100mm;
    padding: 2mm 0mm;
  }

  #task-list *:nth-child(even) {
    background: #f9f9f9;
  }

  #task-list .banner {
    background: #fff;
    text-align: center;
    font-size: 1.65em;
    padding-top: 8mm;
  }

  #task-input {
    width: 100%;
    box-sizing: border-box;
    padding: 2mm;
    font-size: 1em;
  }
  </style>
</head>

<body>

  <div class="container">
    <header>My TO-DO List</header>
    <div id="task-list"></div>
    <footer>
      <input id="task-input" placeholder="Add New Task" />
    </footer>
  </div>

  <script>
  var tasks = [];

  var taskList = document.getElementById('task-list');
  var taskInput = document.getElementById('task-input');

  // remove and append all
  function refresh() {
    while (taskList.firstChild) taskList.removeChild(taskList.firstChild);

    if (tasks.length === 0) {
      taskList.appendChild(makeBanner('Empty Task List'));
    }
    for (var i = 0; i < tasks.length; i++) {
      var task = tasks[i];
      var node = makeTask(i + 1, task);
      taskList.appendChild(node)
    }
    if (tasks.length > 0 && tasks.every(function(x){ return x.complete }) ) {
      taskList.appendChild(makeBanner('~ Well Done ~'));
    }
  }

  function makeBanner(text){
    var elem = document.createElement('div');
    elem.textContent  = text;
    elem.classList.add('banner');
    return elem;
  }

  function makeTask(i, task) {
    var elem = document.createElement('div');
    elem.textContent  = '' + i + ' ' + task.name;
    elem.classList.add('task');
    if (task.complete) elem.classList.add('complete');
    elem.onclick = function() {
      task.complete = !task.complete;
      refresh();
    };
    return elem;
  }

  // enter to append task
  taskInput.onkeydown = function(event) {
    if (event.keyCode === 13) {
      var name = taskInput.value;
      if (name === null || name === '') return;
      taskInput.value = '';
      tasks.push({
        name: name,
        complete: false
      });
      refresh();
    }
  };

  refresh();
  </script>
</body>

</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link href='http://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>

	<style>
	html {
	padding: 5mm;
	background-color: #e9e9e9;
	font-family: 'Indie Flower', cursive;
	}

	.container {
	background-color: #fff;
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.24);
	margin: 0 auto;
	max-width: 100mm;
	}

	.container > header {
	padding: 7mm;
	font-size: 2.2em;
	text-align: center;
	color: #fff;
	background-color: #009688;
	}

	.container > footer {
	padding: 2mm;
	}

	.task {
	font-size: 1.5em;
	padding: 3mm 7mm;
	}

	.task.complete {
	text-decoration: line-through;
	}

	#task-list {
	min-height: 100mm;
	padding: 2mm 0mm;
	}

	#task-list *:nth-child(even) {
	background: #f9f9f9;
	}

	#task-list .banner {
	background: #fff;
	text-align: center;
	font-size: 1.65em;
	padding-top: 8mm;
	}

	#task-input {
	width: 100%;
	box-sizing: border-box;
	padding: 2mm;
	font-size: 1em;
	}
	</style>
	</head>

	<body>

	<div class="container">
	<header>My TO-DO List</header>
	<div id="task-list"></div>
	<footer>
	<input id="task-input" placeholder="Add New Task" />
	</footer>
	</div>

	<script>
	var tasks = [];

	var taskList = document.getElementById('task-list');
	var taskInput = document.getElementById('task-input');

	// remove and append all
	function refresh() {
	while (taskList.firstChild) taskList.removeChild(taskList.firstChild);

	if (tasks.length === 0) {
	taskList.appendChild(makeBanner('Empty Task List'));
	}
	for (var i = 0; i < tasks.length; i++) {
	var task = tasks[i];
	var node = makeTask(i + 1, task);
	taskList.appendChild(node)
	}
	if (tasks.length > 0 && tasks.every(function(x){ return x.complete }) ) {
	taskList.appendChild(makeBanner('~ Well Done ~'));
	}
	}

	function makeBanner(text){
	var elem = document.createElement('div');
	elem.textContent = text;
	elem.classList.add('banner');
	return elem;
	}

	function makeTask(i, task) {
	var elem = document.createElement('div');
	elem.textContent = '' + i + ' ' + task.name;
	elem.classList.add('task');
	if (task.complete) elem.classList.add('complete');
	elem.onclick = function() {
	task.complete = !task.complete;
	refresh();
	};
	return elem;
	}

	// enter to append task
	taskInput.onkeydown = function(event) {
	if (event.keyCode === 13) {
	var name = taskInput.value;
	if (name === null \|\| name === '') return;
	taskInput.value = '';
	tasks.push({
	name: name,
	complete: false
	});
	refresh();
	}
	};

	refresh();
	</script>
	</body>

	</html>