From 6db982a601f50bd600ddefc589afd328ae91a567 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 5 Jul 2018 22:32:46 +0100
Subject: [PATCH 001/164] create basic files for "elmish" Todo List #44

---
 examples/todo-list/app.js     | 89 +++++++++++++++++++++++++++++++++++
 examples/todo-list/elmish.js  | 89 +++++++++++++++++++++++++++++++++++
 examples/todo-list/index.html | 29 ++++++++++++
 examples/todo-list/test.js    | 74 +++++++++++++++++++++++++++++
 todo-list.md                  |  0
 5 files changed, 281 insertions(+)
 create mode 100644 examples/todo-list/app.js
 create mode 100644 examples/todo-list/elmish.js
 create mode 100644 examples/todo-list/index.html
 create mode 100644 examples/todo-list/test.js
 create mode 100644 todo-list.md

diff --git a/examples/todo-list/app.js b/examples/todo-list/app.js
new file mode 100644
index 00000000..a28d87c4
--- /dev/null
+++ b/examples/todo-list/app.js
@@ -0,0 +1,89 @@
+// Define the Component's Actions:
+var Inc = 'inc';                     // increment the counter
+var Dec = 'dec';                     // decrement the counter
+var Res = 'reset';                   // reset counter: git.io/v9KJk
+
+function update(model, action) {     // Update function takes the current state
+  var parts = action ? action.split('-') : []; // e.g: inc-0 where 0 is the counter "id"
+  var act = parts[0];
+  var index = parts[1] || 0;
+  var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
+  switch(act) {                   // and an action (String) runs a switch
+    case Inc:
+      new_model.counters[index] = model.counters[index] + 1;
+      break;
+    case Dec:
+      new_model.counters[index] = model.counters[index] - 1;
+      break;
+    case Res: // use ES6 Array.fill to create a new array with values set to 0:
+      new_model.counters[index] = 0;
+      break;
+    default: return model; // if action not defined, return curent state.
+  }
+  return new_model;
+}
+
+function view(signal, model, root) {
+  empty(root); // clear root element before re-rendering the App (DOM).
+  model.counters.map(function(counter, index) {
+    return container(index, [                // wrap DOM nodes in an "container"
+      button('+', signal, Inc + '-' + index),    // append index to action
+      div('count', counter),       // create div w/ count as text
+      button('-', signal, Dec + '-' + index),    // decrement counter
+      button('Reset', signal, Res + '-' + index) // reset counter
+    ]);
+  }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+
+}
+
+// Mount Function receives all MUV and mounts the app in the "root" DOM Element
+function mount(model, update, view, root_element_id) {
+  var root = document.getElementById(root_element_id); // root DOM element
+  function signal(action) {   // signal function takes action
+    return function callback() {     // and returns callback
+      model = update(model, action); // update model according to action
+      view(signal, model, root);     // subsequent re-rendering
+    };
+  };
+  view(signal, model, root);         // render initial model (once)
+}
+
+// The following are "Helper" Functions which each "Do ONLY One Thing" and are
+// used in the "View" function to render the Model (State) to the Browser DOM:
+
+// empty the contents of a given DOM element "node" (before re-rendering)
+function empty(node) {
+  while (node.firstChild) {
+    node.removeChild(node.firstChild);
+  }
+} // Inspired by: stackoverflow.com/a/3955238/1148249
+
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
+function container(index, elements) {
+  var con = document.createElement('section');
+  con.id = index;
+  con.className = 'counter';
+  elements.forEach(function(el) { con.appendChild(el) });
+  return con;
+}
+
+function button(text, signal, action) {
+  var button = document.createElement('button');
+  var text = document.createTextNode(text);    // human-readable button text
+  button.appendChild(text);                    // text goes *inside* not attrib
+  button.className = action.split('-')[0];                   // use action as CSS class
+  button.id = action;
+  // console.log(signal, ' action:', action)
+  button.onclick = signal(action);             // onclick tells how to process
+  return button;                               // return the DOM node(s)
+} // how to create a button in JavaScript: stackoverflow.com/a/8650996/1148249
+
+function div(divid, text) {
+  var div = document.createElement('div');
+  div.id = divid;
+  div.className = divid;
+  if(text !== undefined) { // if text is passed in render it in a "Text Node"
+    var txt = document.createTextNode(text);
+    div.appendChild(txt);
+  }
+  return div;
+}
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
new file mode 100644
index 00000000..a28d87c4
--- /dev/null
+++ b/examples/todo-list/elmish.js
@@ -0,0 +1,89 @@
+// Define the Component's Actions:
+var Inc = 'inc';                     // increment the counter
+var Dec = 'dec';                     // decrement the counter
+var Res = 'reset';                   // reset counter: git.io/v9KJk
+
+function update(model, action) {     // Update function takes the current state
+  var parts = action ? action.split('-') : []; // e.g: inc-0 where 0 is the counter "id"
+  var act = parts[0];
+  var index = parts[1] || 0;
+  var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
+  switch(act) {                   // and an action (String) runs a switch
+    case Inc:
+      new_model.counters[index] = model.counters[index] + 1;
+      break;
+    case Dec:
+      new_model.counters[index] = model.counters[index] - 1;
+      break;
+    case Res: // use ES6 Array.fill to create a new array with values set to 0:
+      new_model.counters[index] = 0;
+      break;
+    default: return model; // if action not defined, return curent state.
+  }
+  return new_model;
+}
+
+function view(signal, model, root) {
+  empty(root); // clear root element before re-rendering the App (DOM).
+  model.counters.map(function(counter, index) {
+    return container(index, [                // wrap DOM nodes in an "container"
+      button('+', signal, Inc + '-' + index),    // append index to action
+      div('count', counter),       // create div w/ count as text
+      button('-', signal, Dec + '-' + index),    // decrement counter
+      button('Reset', signal, Res + '-' + index) // reset counter
+    ]);
+  }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+
+}
+
+// Mount Function receives all MUV and mounts the app in the "root" DOM Element
+function mount(model, update, view, root_element_id) {
+  var root = document.getElementById(root_element_id); // root DOM element
+  function signal(action) {   // signal function takes action
+    return function callback() {     // and returns callback
+      model = update(model, action); // update model according to action
+      view(signal, model, root);     // subsequent re-rendering
+    };
+  };
+  view(signal, model, root);         // render initial model (once)
+}
+
+// The following are "Helper" Functions which each "Do ONLY One Thing" and are
+// used in the "View" function to render the Model (State) to the Browser DOM:
+
+// empty the contents of a given DOM element "node" (before re-rendering)
+function empty(node) {
+  while (node.firstChild) {
+    node.removeChild(node.firstChild);
+  }
+} // Inspired by: stackoverflow.com/a/3955238/1148249
+
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
+function container(index, elements) {
+  var con = document.createElement('section');
+  con.id = index;
+  con.className = 'counter';
+  elements.forEach(function(el) { con.appendChild(el) });
+  return con;
+}
+
+function button(text, signal, action) {
+  var button = document.createElement('button');
+  var text = document.createTextNode(text);    // human-readable button text
+  button.appendChild(text);                    // text goes *inside* not attrib
+  button.className = action.split('-')[0];                   // use action as CSS class
+  button.id = action;
+  // console.log(signal, ' action:', action)
+  button.onclick = signal(action);             // onclick tells how to process
+  return button;                               // return the DOM node(s)
+} // how to create a button in JavaScript: stackoverflow.com/a/8650996/1148249
+
+function div(divid, text) {
+  var div = document.createElement('div');
+  div.id = divid;
+  div.className = divid;
+  if(text !== undefined) { // if text is passed in render it in a "Text Node"
+    var txt = document.createTextNode(text);
+    div.appendChild(txt);
+  }
+  return div;
+}
diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
new file mode 100644
index 00000000..3d78a4d9
--- /dev/null
+++ b/examples/todo-list/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang=”en-GB”>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport"
+  content="width=device-width, initial-scale=1.0, user-scalable=yes">
+  <title>Elm Architecture in JS - Counter Reset</title>
+  <link rel="shortcut icon"
+  href="http://www.dwyl.io/images/favicon.ico" type="image/x-icon">
+  <!-- CSS Styles are 100% optional. but they make it look *much* nicer -->
+  <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script src="counter.js" data-cover></script> <!-- load counter  -->
+  <script> mount({counters:[0, 1, 2]}, update, view, 'app'); </script>
+  <!-- Below this point is all related to the Tests for the App -->
+  <div id="test-app"></div> <!-- Create a test-app div to mount the app -->
+  <div id="qunit"></div>    <!-- test results are displayed here -->
+  <!-- Load the QUnit CSS file from CDN - require to display our tests -->
+  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.18.0.css">
+  <!-- Load the QUnit Testing Framework from CDN - to run the tests -->
+  <script src="https://code.jquery.com/qunit/qunit-1.18.0.js"></script>
+  <!-- Load Blanket.js from CDN - for test coverage stats -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/blanket.js/1.1.4/blanket.js">
+  </script>
+  <script src="test.js"></script>  <!-- always load test.js last -->
+</body>
+</html>
diff --git a/examples/todo-list/test.js b/examples/todo-list/test.js
new file mode 100644
index 00000000..7768095c
--- /dev/null
+++ b/examples/todo-list/test.js
@@ -0,0 +1,74 @@
+var id = 'test-app';
+
+test('update({counters:[0]}) returns {counters:[0]} (current state unmodified)',
+    function(assert) {
+  var result = update({counters:[0]});
+  assert.equal(result.counters[0], 0);
+});
+
+test('Test Update increment: update(1, "inc") returns 2', function(assert) {
+  var result = update({counters: [1] }, "inc");
+  console.log('result', result);
+  assert.equal(result.counters[0], 2);
+});
+
+
+test('Test Update decrement: update(1, "dec") returns 0', function(assert) {
+  var result = update({counters: [1] }, "dec");
+  assert.equal(result.counters[0], 0);
+});
+
+test('Test negative state: update(-9, "inc") returns -8', function(assert) {
+  var result = update({counters: [-9] }, "inc");
+  assert.equal(result.counters[0], -8);
+});
+
+test('mount({model: 7, update: update, view: view}, "'
+  + id +'") sets initial state to 7', function(assert) {
+  mount({counters:[7]}, update, view, id);
+  var state = document.getElementById(id)
+    .getElementsByClassName('count')[0].textContent;
+  assert.equal(state, 7);
+});
+
+test('empty("test-app") should clear DOM in root node', function(assert) {
+  empty(document.getElementById(id));
+  mount({counters:[7]}, update, view, id);
+  empty(document.getElementById(id));
+  var result = document.getElementById(id).innerHtml
+  assert.equal(result, undefined);
+});
+
+test('click on "+" button to re-render state (increment model by 1)',
+function(assert) {
+  document.body.appendChild(div(id));
+  mount({counters:[7]}, update, view, id);
+  document.getElementById(id).getElementsByClassName('inc')[0].click();
+  var state = document.getElementById(id)
+    .getElementsByClassName('count')[0].textContent;
+  assert.equal(state, 8); // model was incremented successfully
+  empty(document.getElementById(id)); // clean up after tests
+});
+
+// Reset Functionality
+
+test('Test reset counter when model/state is 6 returns 0', function(assert) {
+  var result = update({counters:[7]}, "reset");
+  assert.equal(result.counters[0], 0);
+});
+
+test('reset button should be present on page', function(assert) {
+  var reset = document.getElementsByClassName('reset');
+  assert.equal(reset.length, 3);
+});
+
+test('Click reset button resets state to 0', function(assert) {
+  mount({counters:[7]}, update, view, id);
+  var root = document.getElementById(id);
+  assert.equal(root.getElementsByClassName('count')[0].textContent, 7);
+  var btn = root.getElementsByClassName("reset")[0]; // click reset button
+  btn.click(); // Click the Reset button!
+  var state = root.getElementsByClassName('count')[0].textContent;
+  assert.equal(state, 0); // state was successfully reset to 0!
+  empty(root); // clean up after tests
+});
diff --git a/todo-list.md b/todo-list.md
new file mode 100644
index 00000000..e69de29b

From cc1b8b8135022ac14d922f39c111a3e0600150cd Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 9 Jul 2018 23:16:25 +0100
Subject: [PATCH 002/164] adds todo-list.md (outline) for #44

---
 examples/todo-list/{app.js => todo-app.js} |  0
 todo-list.md                               | 40 ++++++++++++++++++++++
 2 files changed, 40 insertions(+)
 rename examples/todo-list/{app.js => todo-app.js} (100%)

diff --git a/examples/todo-list/app.js b/examples/todo-list/todo-app.js
similarity index 100%
rename from examples/todo-list/app.js
rename to examples/todo-list/todo-app.js
diff --git a/todo-list.md b/todo-list.md
index e69de29b..0c7d5a71 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -0,0 +1,40 @@
+# Elm(ish) Todo List (TodoMVC) Mini App
+
+If you've made it this far, give yourself a pat on the back!
+
+## Why?
+
+Practice your understanding of The Elm Architecture (TEA)
+by creating a "real world" useable App.
+
+## What?
+
+Use our "TEA" knowledge to build a simple "Todo List" Application
+in 30 mins or less!
+
+### Todo List?
+
+If you are _unfamiliar_ with Todo lists,
+
+### TodoMVC?
+
+If you have
+
++ Website: http://todomvc.com
++ GitHub project: https://github.com/tastejs/todomvc
+
+## _Who?_
+
+This tutorial is for everyone who wants to _apply_ their "TEA" knowledge
+and _think_ about the basics of a Todo List Application.
+
+
+## _How?_
+
+
+### Todo List Basics
+
+> Thinking about a challenge from
+["first principals"](https://en.wikipedia.org/wiki/First_principle)
+is a great way to understanding it.
+This is the "physics" approach. see:

From 8908312f3b760592b155a24d0a022f1a23850e33 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 10 Jul 2018 20:56:39 +0100
Subject: [PATCH 003/164] add base TodoMVC CSS file from
 https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanillajs for #44

---
 examples/todo-list/index.html              |  11 +-
 examples/todo-list/todo.html               |  51 +++
 examples/todo-list/todomvc-app.css         | 379 +++++++++++++++++++++
 examples/todo-list/todomvc-common-base.css | 141 ++++++++
 4 files changed, 578 insertions(+), 4 deletions(-)
 create mode 100644 examples/todo-list/todo.html
 create mode 100644 examples/todo-list/todomvc-app.css
 create mode 100644 examples/todo-list/todomvc-common-base.css

diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
index 3d78a4d9..e34391b0 100644
--- a/examples/todo-list/index.html
+++ b/examples/todo-list/index.html
@@ -1,18 +1,21 @@
 <!DOCTYPE html>
-<html lang=”en-GB”>
+<html lang=”en-GB” data-framework="javascript">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport"
   content="width=device-width, initial-scale=1.0, user-scalable=yes">
-  <title>Elm Architecture in JS - Counter Reset</title>
+  <title>Elm(ish) Todo List!</title>
   <link rel="shortcut icon"
   href="http://www.dwyl.io/images/favicon.ico" type="image/x-icon">
   <!-- CSS Styles are 100% optional. but they make it look *much* nicer -->
-  <link rel="stylesheet" href="../style.css">
+  <link rel="stylesheet" href="todomvc-common-base.css">
+  <link rel="stylesheet" href="todomvc-common-base.css">
+  
 </head>
 <body>
   <div id="app"></div>
-  <script src="counter.js" data-cover></script> <!-- load counter  -->
+
+  <script src="todo-app.js" data-cover></script> <!-- load counter  -->
   <script> mount({counters:[0, 1, 2]}, update, view, 'app'); </script>
   <!-- Below this point is all related to the Tests for the App -->
   <div id="test-app"></div> <!-- Create a test-app div to mount the app -->
diff --git a/examples/todo-list/todo.html b/examples/todo-list/todo.html
new file mode 100644
index 00000000..73b59069
--- /dev/null
+++ b/examples/todo-list/todo.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en" data-framework="javascript">
+	<head>
+		<meta charset="utf-8">
+		<title>VanillaJS • TodoMVC</title>
+		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
+		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
+	</head>
+	<body>
+		<section class="todoapp">
+			<header class="header">
+				<h1>todos</h1>
+				<input class="new-todo" placeholder="What needs to be done?" autofocus>
+			</header>
+			<section class="main">
+				<input id="toggle-all" class="toggle-all" type="checkbox">
+				<label for="toggle-all">Mark all as complete</label>
+				<ul class="todo-list"></ul>
+			</section>
+			<footer class="footer">
+				<span class="todo-count"></span>
+				<ul class="filters">
+					<li>
+						<a href="#/" class="selected">All</a>
+					</li>
+					<li>
+						<a href="#/active">Active</a>
+					</li>
+					<li>
+						<a href="#/completed">Completed</a>
+					</li>
+				</ul>
+				<button class="clear-completed">Clear completed</button>
+			</footer>
+		</section>
+		<footer class="info">
+			<p>Double-click to edit a todo</p>
+			<p>Created by <a href="http://twitter.com/oscargodson">Oscar Godson</a></p>
+			<p>Refactored by <a href="https://github.com/cburgmer">Christoph Burgmer</a></p>
+			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+		</footer>
+		<script src="node_modules/todomvc-common/base.js"></script>
+		<script src="js/helpers.js"></script>
+		<script src="js/store.js"></script>
+		<script src="js/model.js"></script>
+		<script src="js/template.js"></script>
+		<script src="js/view.js"></script>
+		<script src="js/controller.js"></script>
+		<script src="js/app.js"></script>
+	</body>
+</html>
diff --git a/examples/todo-list/todomvc-app.css b/examples/todo-list/todomvc-app.css
new file mode 100644
index 00000000..3ac79f05
--- /dev/null
+++ b/examples/todo-list/todomvc-app.css
@@ -0,0 +1,379 @@
+html,
+body {
+	margin: 0;
+	padding: 0;
+}
+
+button {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	background: none;
+	font-size: 100%;
+	vertical-align: baseline;
+	font-family: inherit;
+	font-weight: inherit;
+	color: inherit;
+	-webkit-appearance: none;
+	appearance: none;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+body {
+	font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	line-height: 1.4em;
+	background: #f5f5f5;
+	color: #4d4d4d;
+	min-width: 230px;
+	max-width: 550px;
+	margin: 0 auto;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	font-weight: 300;
+}
+
+:focus {
+	outline: 0;
+}
+
+.hidden {
+	display: none;
+}
+
+.todoapp {
+	background: #fff;
+	margin: 130px 0 40px 0;
+	position: relative;
+	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
+	            0 25px 50px 0 rgba(0, 0, 0, 0.1);
+}
+
+.todoapp input::-webkit-input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::-moz-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp input::input-placeholder {
+	font-style: italic;
+	font-weight: 300;
+	color: #e6e6e6;
+}
+
+.todoapp h1 {
+	position: absolute;
+	top: -155px;
+	width: 100%;
+	font-size: 100px;
+	font-weight: 100;
+	text-align: center;
+	color: rgba(175, 47, 47, 0.15);
+	-webkit-text-rendering: optimizeLegibility;
+	-moz-text-rendering: optimizeLegibility;
+	text-rendering: optimizeLegibility;
+}
+
+.new-todo,
+.edit {
+	position: relative;
+	margin: 0;
+	width: 100%;
+	font-size: 24px;
+	font-family: inherit;
+	font-weight: inherit;
+	line-height: 1.4em;
+	border: 0;
+	color: inherit;
+	padding: 6px;
+	border: 1px solid #999;
+	box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
+	box-sizing: border-box;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+}
+
+.new-todo {
+	padding: 16px 16px 16px 60px;
+	border: none;
+	background: rgba(0, 0, 0, 0.003);
+	box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
+}
+
+.main {
+	position: relative;
+	z-index: 2;
+	border-top: 1px solid #e6e6e6;
+}
+
+.toggle-all {
+	width: 1px;
+	height: 1px;
+	border: none; /* Mobile Safari */
+	opacity: 0;
+	position: absolute;
+	right: 100%;
+	bottom: 100%;
+}
+
+.toggle-all + label {
+	width: 60px;
+	height: 34px;
+	font-size: 0;
+	position: absolute;
+	top: -52px;
+	left: -13px;
+	-webkit-transform: rotate(90deg);
+	transform: rotate(90deg);
+}
+
+.toggle-all + label:before {
+	content: '❯';
+	font-size: 22px;
+	color: #e6e6e6;
+	padding: 10px 27px 10px 27px;
+}
+
+.toggle-all:checked + label:before {
+	color: #737373;
+}
+
+.todo-list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}
+
+.todo-list li {
+	position: relative;
+	font-size: 24px;
+	border-bottom: 1px solid #ededed;
+}
+
+.todo-list li:last-child {
+	border-bottom: none;
+}
+
+.todo-list li.editing {
+	border-bottom: none;
+	padding: 0;
+}
+
+.todo-list li.editing .edit {
+	display: block;
+	width: 506px;
+	padding: 12px 16px;
+	margin: 0 0 0 43px;
+}
+
+.todo-list li.editing .view {
+	display: none;
+}
+
+.todo-list li .toggle {
+	text-align: center;
+	width: 40px;
+	/* auto, since non-WebKit browsers doesn't support input styling */
+	height: auto;
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	margin: auto 0;
+	border: none; /* Mobile Safari */
+	-webkit-appearance: none;
+	appearance: none;
+}
+
+.todo-list li .toggle {
+	opacity: 0;
+}
+
+.todo-list li .toggle + label {
+	/*
+		Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
+		IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
+	*/
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
+	background-repeat: no-repeat;
+	background-position: center left;
+}
+
+.todo-list li .toggle:checked + label {
+	background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
+}
+
+.todo-list li label {
+	word-break: break-all;
+	padding: 15px 15px 15px 60px;
+	display: block;
+	line-height: 1.2;
+	transition: color 0.4s;
+}
+
+.todo-list li.completed label {
+	color: #d9d9d9;
+	text-decoration: line-through;
+}
+
+.todo-list li .destroy {
+	display: none;
+	position: absolute;
+	top: 0;
+	right: 10px;
+	bottom: 0;
+	width: 40px;
+	height: 40px;
+	margin: auto 0;
+	font-size: 30px;
+	color: #cc9a9a;
+	margin-bottom: 11px;
+	transition: color 0.2s ease-out;
+}
+
+.todo-list li .destroy:hover {
+	color: #af5b5e;
+}
+
+.todo-list li .destroy:after {
+	content: '×';
+}
+
+.todo-list li:hover .destroy {
+	display: block;
+}
+
+.todo-list li .edit {
+	display: none;
+}
+
+.todo-list li.editing:last-child {
+	margin-bottom: -1px;
+}
+
+.footer {
+	color: #777;
+	padding: 10px 15px;
+	height: 20px;
+	text-align: center;
+	border-top: 1px solid #e6e6e6;
+}
+
+.footer:before {
+	content: '';
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 50px;
+	overflow: hidden;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+	            0 8px 0 -3px #f6f6f6,
+	            0 9px 1px -3px rgba(0, 0, 0, 0.2),
+	            0 16px 0 -6px #f6f6f6,
+	            0 17px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+.todo-count {
+	float: left;
+	text-align: left;
+}
+
+.todo-count strong {
+	font-weight: 300;
+}
+
+.filters {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	position: absolute;
+	right: 0;
+	left: 0;
+}
+
+.filters li {
+	display: inline;
+}
+
+.filters li a {
+	color: inherit;
+	margin: 3px;
+	padding: 3px 7px;
+	text-decoration: none;
+	border: 1px solid transparent;
+	border-radius: 3px;
+}
+
+.filters li a:hover {
+	border-color: rgba(175, 47, 47, 0.1);
+}
+
+.filters li a.selected {
+	border-color: rgba(175, 47, 47, 0.2);
+}
+
+.clear-completed,
+html .clear-completed:active {
+	float: right;
+	position: relative;
+	line-height: 20px;
+	text-decoration: none;
+	cursor: pointer;
+}
+
+.clear-completed:hover {
+	text-decoration: underline;
+}
+
+.info {
+	margin: 65px auto 0;
+	color: #bfbfbf;
+	font-size: 10px;
+	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+	text-align: center;
+}
+
+.info p {
+	line-height: 1;
+}
+
+.info a {
+	color: inherit;
+	text-decoration: none;
+	font-weight: 400;
+}
+
+.info a:hover {
+	text-decoration: underline;
+}
+
+/*
+	Hack to remove background from Mobile Safari.
+	Can't use it globally since it destroys checkboxes in Firefox
+*/
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+	.toggle-all,
+	.todo-list li .toggle {
+		background: none;
+	}
+
+	.todo-list li .toggle {
+		height: 40px;
+	}
+}
+
+@media (max-width: 430px) {
+	.footer {
+		height: 50px;
+	}
+
+	.filters {
+		bottom: 10px;
+	}
+}
diff --git a/examples/todo-list/todomvc-common-base.css b/examples/todo-list/todomvc-common-base.css
new file mode 100644
index 00000000..da65968a
--- /dev/null
+++ b/examples/todo-list/todomvc-common-base.css
@@ -0,0 +1,141 @@
+hr {
+	margin: 20px 0;
+	border: 0;
+	border-top: 1px dashed #c5c5c5;
+	border-bottom: 1px dashed #f7f7f7;
+}
+
+.learn a {
+	font-weight: normal;
+	text-decoration: none;
+	color: #b83f45;
+}
+
+.learn a:hover {
+	text-decoration: underline;
+	color: #787e7e;
+}
+
+.learn h3,
+.learn h4,
+.learn h5 {
+	margin: 10px 0;
+	font-weight: 500;
+	line-height: 1.2;
+	color: #000;
+}
+
+.learn h3 {
+	font-size: 24px;
+}
+
+.learn h4 {
+	font-size: 18px;
+}
+
+.learn h5 {
+	margin-bottom: 0;
+	font-size: 14px;
+}
+
+.learn ul {
+	padding: 0;
+	margin: 0 0 30px 25px;
+}
+
+.learn li {
+	line-height: 20px;
+}
+
+.learn p {
+	font-size: 15px;
+	font-weight: 300;
+	line-height: 1.3;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+#issue-count {
+	display: none;
+}
+
+.quote {
+	border: none;
+	margin: 20px 0 60px 0;
+}
+
+.quote p {
+	font-style: italic;
+}
+
+.quote p:before {
+	content: '“';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	top: -20px;
+	left: 3px;
+}
+
+.quote p:after {
+	content: '”';
+	font-size: 50px;
+	opacity: .15;
+	position: absolute;
+	bottom: -42px;
+	right: 3px;
+}
+
+.quote footer {
+	position: absolute;
+	bottom: -40px;
+	right: 0;
+}
+
+.quote footer img {
+	border-radius: 3px;
+}
+
+.quote footer a {
+	margin-left: 5px;
+	vertical-align: middle;
+}
+
+.speech-bubble {
+	position: relative;
+	padding: 10px;
+	background: rgba(0, 0, 0, .04);
+	border-radius: 5px;
+}
+
+.speech-bubble:after {
+	content: '';
+	position: absolute;
+	top: 100%;
+	right: 30px;
+	border: 13px solid transparent;
+	border-top-color: rgba(0, 0, 0, .04);
+}
+
+.learn-bar > .learn {
+	position: absolute;
+	width: 272px;
+	top: 8px;
+	left: -300px;
+	padding: 10px;
+	border-radius: 5px;
+	background-color: rgba(255, 255, 255, .6);
+	transition-property: left;
+	transition-duration: 500ms;
+}
+
+@media (min-width: 899px) {
+	.learn-bar {
+		width: auto;
+		padding-left: 300px;
+	}
+
+	.learn-bar > .learn {
+		left: 8px;
+	}
+}

From 7813efd5cb22166f5ff52b61ac5f8f9e1c61fb9d Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 11 Jul 2018 22:44:41 +0100
Subject: [PATCH 004/164] adds complete TodoMVC requirements to todo-list.md
 for #44

---
 todo-list.md | 152 ++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 143 insertions(+), 9 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index 0c7d5a71..ead26ed4 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1,40 +1,174 @@
 # Elm(ish) Todo List (TodoMVC) Mini App
 
 If you've made it this far, give yourself a pat on the back!
+You are about to "_level up_" your JavaScript and "TEA" skills!
+
 
 ## Why?
 
-Practice your understanding of The Elm Architecture (TEA)
-by creating a "real world" useable App.
+Consolidate your understanding of The Elm Architecture (TEA)
+by creating a "real world" _useable_ App.
 
 ## What?
 
-Use our "TEA" knowledge to build a simple "Todo List" Application
-in 30 mins or less!
+_Use_ our "TEA" knowledge to build a simple "Todo List" Application. <br />
+Along the way we will touch upon:
+
++ [x] The Document Object Model (DOM)
++ [x] Browser Routing/Navigation
++ [x] Local Storage for Offline Support
+
+We will be abstracting all "TEA" related code
+into a file called `elmish.js`
+so that our Todo List application can be as simple as possible.
 
 ### Todo List?
 
 If you are _unfamiliar_ with Todo lists,
+they are a way of keeping a list of the tasks that need to be done.
+see: https://en.wikipedia.org/wiki/Time_management#Setting_priorities_and_goals
+
+Todo Lists or "Checklists" are the _best_ way of tracking tasks.
+Atul Gawande wrote a _fantastic_ book on this subject:
+https://www.amazon.com/Checklist-Manifesto-How-Things-Right/dp/0312430000
+Watch: https://www.youtube.com/results?search_query=checklist+manifesto
 
 ### TodoMVC?
 
-If you have
+If you have not come across TodoMVC before,
+it's a sample application to showcase various "frontend" frameworks.
+![TodoMVC-intro](https://user-images.githubusercontent.com/194400/42624420-4528a3c6-85bd-11e8-8b92-9b1c8951ba35.png)
+
+
+We highly recommend checking out the following links:
 
 + Website: http://todomvc.com
 + GitHub project: https://github.com/tastejs/todomvc
 
+For our purposes we will simply be re-using the **`CSS`**
+to make our TEA Todo List _look_ nice.
+All the JavaScript code will be written "_from scratch_"
+to ensure that everything is clear.
+
 ## _Who?_
 
 This tutorial is for everyone who wants to _apply_ their "TEA" knowledge
 and _think_ about the basics of a Todo List Application.
 
+> As always, if you get "stuck", _please_ open an issue:
+https://github.com/dwyl/learn-elm-architecture-in-javascript/issues
+by opening a question you help _everyone_ learn more effectively!
+
 
 ## _How?_
 
+Our _first_ step is to _analyse_ the required functionality of a Todo List.
+
+### Todo List _Basic_ Functionality
+
+A todo list has only 2 basic functions:
+
+1. **Add** a `new` item to the list when the **`[Enter]`** key is pressed
+2. **Check-off** an item as "**completed**" (_done/finished_)
+
+> **Add** item and **Check-off** is _exactly_ the "functionality"
+you would have in a _paper_-based Todo List.
+
+#### TodoMVC "Advanced" Functionality
+
+In _addition_ to these basic functions,
+**TodoMVC** has the ability to:
++ **Un-check** an item as to make it "**active**" (_still to be done_)
++ **Double-click/tap** on todo **item description** to **`edit` it**.
++ **Mark _all_ as complete**
++ **Click `X`** on item row to remove from list.
 
-### Todo List Basics
+#### `<footer>` Menu
 
-> Thinking about a challenge from
+below the main interface there is a `<footer>`
+with a **count**, **3 view toggles** and **one action**:
+![image](https://user-images.githubusercontent.com/194400/42633421-5eb20f24-85d8-11e8-94ad-bb653dd93ab0.png)
++ "{cont} item(s) left": <br />
+  `{store.items.filter(complete==false)}` item`{store.items.length > 1 ? 's' : '' }` left
++ Show **`All`**
++ Show **`Active`**
++ Show **`Completed`**
++ **_Clear_ `Completed`**
+
+#### Routing / Navigation
+
+Finally, if you click around the `<footer>` toggle menu,
+you will notice that the Web Bowser Address bar
+changes to reflect the chosen view.
+
+![tea-todomvc-routing](https://user-images.githubusercontent.com/194400/42633291-edef3082-85d7-11e8-93c4-5e5f2a5264a1.png)
+
+> Thinking about a task or challenge from
 ["first principals"](https://en.wikipedia.org/wiki/First_principle)
-is a great way to understanding it.
-This is the "physics" approach. see:
+is ~~a great~~ the best way to _understand_ it. <br />
+This is the "physics" approach. see: https://youtu.be/L-s_3b5fRd8?t=22m37s
+
+
+### _Recommended_ Background Reading: TodoMVC "_Vanilla_" JS
+
+By _far_ the best place to start for _understanding_ TodoMVC's layout/format,
+is the "Vanilla" JavaScript (_no "framework"_) implementation:
+https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanillajs
+
+Run it locally with:
+```
+git clone https://github.com/tastejs/todomvc.git
+cd todomvc/examples/vanillajs
+python -m SimpleHTTPServer 8000
+```
+Open your web browser to: http://localhost:8000
+
+![vanillajs-localhost](https://user-images.githubusercontent.com/194400/42632838-6e68c20c-85d6-11e8-8ae4-d688f5977704.png)
+
+_Play_ with the app by adding a few items,
+checking-off and toggling the views in the footer.
+
+> _**Note**: IMO the "**Vanilla**" **JS** implementation
+is quite complex and insufficiently documented_
+(_very few code comments and sparse_
+[`README.md`](https://github.com/tastejs/todomvc/tree/25a9e31eb32db752d959df18e4d214295a2875e8/examples/vanillajs)),
+_so don't expect to **understand** it all the first time without study._
+_Don't worry, we will walk through building each feature in detail._
+
+
+
+## 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+<!--
+
+## What _Next_?
+
+If you feel _confident_ with your "TEA" skills you can _either_:
++ **`try`** and use them to **create your _own_ App** using "TEA"
++ **Learn Elm**: https://github.com/dwyl/learn-elm
++ (Join the herd and) learn React/Redux.
+
+-->

From f6b7e6ed542ade82e53663a3ca62ace22e4e95e8 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 11 Jul 2018 22:45:16 +0100
Subject: [PATCH 005/164] add link to todo-list.md in README.md #44

---
 README.md | 35 +++++++++++++++++++++++++----------
 1 file changed, 25 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index d57cbe5c..559047cc 100644
--- a/README.md
+++ b/README.md
@@ -716,12 +716,27 @@ using the `var model = { counters: [0] }` approach. <br />
 **3.** **Write tests** for the scenario where there
 are multiple counters on the same page.
 
-Once you have had a go, checkout our solutions: `examples/multiple-counters`
+Once you have had a go, checkout our solutions:
+[`examples/multiple-counters`](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/multiple-counters)
+<br />
 and corresponding writeup:
 [**multiple-counters.md**](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/multiple-counters.md)
 
 
-<br /> <br />
+<br />
+
+### 11. Todo List!
+
+The _ultimate_ test of whether you _learned/understood_ something is
+applying it to _different_ context to the one you learned in.
+
+Let's "_turn this up to eleven_" and build something "_useful_"!
+
+GOTO:
+[`todo-list.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/todo-list.md)
+
+<br />
+
 
 ## Futher/Background Reading
 
@@ -734,7 +749,7 @@ http://stackoverflow.com/questions/18666821/what-does-the-term-reason-about-mean
 + Elm Architecture with JQuery by @steos:
 https://medium.com/javascript-inside/elm-architecture-with-jquery-152cb98a62f
 (_written in JQuery and no Tests so
-  not great for teaching beginners good habits, but still a v. good post!_)
+  not ideal for teaching beginners good habits, but still a v. good post!_)
 + Pure functions: https://en.wikipedia.org/wiki/Pure_function
 + Higher Order Functions in JavaScript:
 http://eloquentjavascript.net/05_higher_order.html
@@ -742,7 +757,7 @@ http://eloquentjavascript.net/05_higher_order.html
 https://youtu.be/BMUiFMZr7vk
 
 
-<br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br /><br /> <br />
+<br /> <br /><br />
 # tl;dr
 
 
@@ -764,12 +779,12 @@ the (Core) _Elm **Language**_... <br />
 This is a _fair_ assumption given the _ordering_ of the Guide _however_
 ... we have a _different_ idea:
 
-### Hypothesis: Learn (& Practice) Elm Architecture `before` Learning Elm?
+### Hypothesis: Learn (& Practice) Elm Architecture _`before`_ Learning Elm?
 
 We ***hypothesize*** that if we _**explain** the **Elm Architecture**_
 (_**in detail**_) using a **language** <br />
 people are _**already familiar**_ with (_i.e **JavaScript**_)
-`before` diving into the Elm Language <br />
+_`before`_ diving into the Elm Language <br />
 it will
 ["***flatten***"](https://english.stackexchange.com/questions/6212/whats-the-opposite-for-steep-learning-curve)
 the **learning curve**.
@@ -790,7 +805,7 @@ part of any "**client-side**" web app. <br />
 (including **Elm**, React and Vue.js) now use a "**Virtual DOM**".
 > For the purposes of `this` tutorial, and for **most small apps**
 Virtual DOM is total **overkill**! <br />
-It's akin to putting a Ferrari engine in a gocart!_
+It's akin to putting a **jet engine** in a **go kart**!_
 
 ### What is "_Plain_" JavaScript?
 
@@ -807,10 +822,10 @@ to build something full-featured and easy/fast to read!!
 If you can build with "ES5" JavaScript: <br />
 a) you side-step the
 [_noise_](https://twitter.com/iamdevloper/status/610191865216786432)
-and focus on core skills that _already_ work everywhere!
+and focus on core skills that **_already_ work everywhere**! <br />
 (_don't worry you can always "top-up" your
-JS knowledge later with ES6, etc!)<br />
-b) you don't need to waste time installing
+JS knowledge later with ES6, etc!_)<br />
+b) you **don't** need to **waste time** installing
 [_**Two Hundred Megabytes**_](https://cloud.githubusercontent.com/assets/194400/13321493/39fcfa30-dbc7-11e5-8b05-f046675f9cb6.png)
 of dependencies just to run a simple project! <br />
 c) You ***save time*** (_for yourself, your team and end-users!_)

From 45ece77c15cd3638ca84be19090b53e530c07e04 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 12 Jul 2018 14:28:00 +0100
Subject: [PATCH 006/164] add sample html code for TodoMVC
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/44#issuecomment-404510360
 for reverse-engineering the DOM

---
 examples/todo-list/index.html | 46 +++++++++++++++++--
 package.json                  |  2 +-
 todo-list.md                  | 84 +++++++++++++++++++++++++++++++----
 3 files changed, 119 insertions(+), 13 deletions(-)

diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
index e34391b0..b33390c5 100644
--- a/examples/todo-list/index.html
+++ b/examples/todo-list/index.html
@@ -9,13 +9,53 @@
   href="http://www.dwyl.io/images/favicon.ico" type="image/x-icon">
   <!-- CSS Styles are 100% optional. but they make it look *much* nicer -->
   <link rel="stylesheet" href="todomvc-common-base.css">
-  <link rel="stylesheet" href="todomvc-common-base.css">
-  
+  <link rel="stylesheet" href="todomvc-app.css">
+
 </head>
 <body>
-  <div id="app"></div>
+  <section class="todoapp">
+    <header class="header">
+      <h1>todos</h1>
+      <input class="new-todo" placeholder="What needs to be done?" autofocus>
+    </header>
+    <section class="main">
+      <input id="toggle-all" class="toggle-all" type="checkbox">
+      <label for="toggle-all">Mark all as complete</label>
+      <ul class="todo-list"></ul>
+    </section>
+    <footer class="footer">
+      <span class="todo-count"></span>
+      <ul class="filters">
+        <li>
+          <a href="#/" class="selected">All</a>
+        </li>
+        <li>
+          <a href="#/active">Active</a>
+        </li>
+        <li>
+          <a href="#/completed">Completed</a>
+        </li>
+      </ul>
+      <button class="clear-completed">Clear completed</button>
+    </footer>
+  </section>
+  <footer class="info">
+    <p>Double-click to edit a todo</p>
+    <p>Created by <a href="https://github.com/nelsonic">@nelsonic</a></p>
+    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
+  </footer>
+  <!-- <script src="node_modules/todomvc-common/base.js"></script>
+  <script src="js/helpers.js"></script>
+  <script src="js/store.js"></script>
+  <script src="js/model.js"></script>
+  <script src="js/template.js"></script>
+  <script src="js/view.js"></script>
+  <script src="js/controller.js"></script>
+  <script src="js/app.js"></script> -->
+
 
   <script src="todo-app.js" data-cover></script> <!-- load counter  -->
+
   <script> mount({counters:[0, 1, 2]}, update, view, 'app'); </script>
   <!-- Below this point is all related to the Tests for the App -->
   <div id="test-app"></div> <!-- Create a test-app div to mount the app -->
diff --git a/package.json b/package.json
index 6f2fc527..31153527 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "learn-elm-architecture-in-javascript",
-  "description": "Learn how to use The Elm Architcture in JavaScript to create functional and fast UI!",
+  "description": "Learn how to use The Elm Architecture in JavaScript to create functional and fast UI!",
   "version": "1.0.1",
   "homepage": "https://github.com/dwyl/learn-elm-architecture-in-javascript",
   "main": "examples/01-counter-basic.html",
diff --git a/todo-list.md b/todo-list.md
index ead26ed4..dd869173 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -136,20 +136,86 @@ _so don't expect to **understand** it all the first time without study._
 _Don't worry, we will walk through building each feature in detail._
 
 
-
-## 
-
-
-
-
-
-
-
+## Elm(_ish_)
+
+Our **first step** is to _abstract_ and _generalise_
+the Elm Architecture (`mount`) and HTML ("DOM") functions
+we used in the "counter" example.
+
+Recall that there are **3 parts** to "TEA": `model`, `update` and `view`. <br />
+These correspond to the `M`odel, `C`ontroller and `V`iew of "**MVC**".
+The _reason_ Elm refers to the "Controller" as "Update" is because
+this name _more accurately_ reflects what the function _does_:
+it updates the _state_ of the application.
+
+Our `update` and `view` functions form
+the "business logic" of our Todo List App,
+so we cannot abstract these. <br />
+The `update` function is a simple `switch` statement
+that "decides" how to to _update_ the app's `model`
+each `case` is functionality that is _specific_ to the Todo List App. <br />
+The `view` function _invokes_ several "helper" functions
+which create HTML elements e.g: `div` & `<button>`; these _can_ be generalised.
+
+The _requirements_ for the HTML elements we _need_ for a Todo List
+can be _gathered_ by viewing the source code of the VanillaJS TodoMVC
+in a web browser:
+
+![todomvc-elements-browser-devtools](https://user-images.githubusercontent.com/194400/42635773-daa1ccae-85de-11e8-9f41-51d8b552ebd2.png)
+
+This is a "copy-paste" of the _generated_ code including the Todo items:
+
+```html
+<section class="todoapp">
+  <header class="header">
+    <h1>todos</h1>
+    <input class="new-todo" placeholder="What needs to be done?" autofocus="">
+  </header>
+  <section class="main" style="display: block;">
+    <input id="toggle-all" class="toggle-all" type="checkbox">
+    <label for="toggle-all">Mark all as complete</label>
+    <ul class="todo-list">
+      <li data-id="1531397960010" class="completed">
+        <div class="view">
+          <input class="toggle" type="checkbox" checked="">
+          <label>Learn The Elm Architecture ("TEA")</label>
+          <button class="destroy"></button>
+        </div>
+      </li>
+      <li data-id="1531397981603" class="">
+        <div class="view">
+          <input class="toggle" type="checkbox">
+          <label>Build TEA Todo List App</label>
+          <button class="destroy">
+          </button>
+        </div>
+      </li>
+    </ul>
+  </section>
+  <footer class="footer" style="display: block;">
+    <span class="todo-count"><strong>1</strong> item left</span>
+    <ul class="filters">
+      <li>
+        <a href="#/" class="selected">All</a>
+      </li>
+      <li>
+        <a href="#/active" class="">Active</a>
+      </li>
+      <li>
+        <a href="#/completed">Completed</a>
+      </li>
+    </ul>
+    <button class="clear-completed" style="display: block;">Clear completed</button>
+  </footer>
+</section>
+```
 
 
 
 
+### `mount`
 
+### ``
 
 
 

From 54516198a4c564d0f64871ae75dc7746bdb59d3a Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 13 Jul 2018 10:31:24 +0100
Subject: [PATCH 007/164] refactor counter-reset tests to use tape (cleaner)!

---
 package.json               |   3 +-
 test/counter-reset.test.js | 100 +++++++++++++++++++++++++++++++++++++
 2 files changed, 102 insertions(+), 1 deletion(-)
 create mode 100644 test/counter-reset.test.js

diff --git a/package.json b/package.json
index 31153527..e01cf340 100644
--- a/package.json
+++ b/package.json
@@ -16,7 +16,8 @@
     "nodemon": "^1.11.0",
     "pre-commit": "^1.2.2",
     "qunit-tap": "^1.5.1",
-    "qunitjs": "^2.3.2"
+    "qunitjs": "^2.3.2",
+    "tape": "^4.9.1"
   },
   "scripts": {
     "check-coverage": "istanbul cover test/test.js && istanbul check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
diff --git a/test/counter-reset.test.js b/test/counter-reset.test.js
new file mode 100644
index 00000000..b579cf99
--- /dev/null
+++ b/test/counter-reset.test.js
@@ -0,0 +1,100 @@
+const test = require('tape'); // assign the tape library to the variable "test"
+const fs = require('fs');
+const path = require('path');
+const { JSDOM } = require("jsdom"); // https://github.com/jsdom/jsdom
+
+const html = fs.readFileSync(path.resolve(__dirname,
+  '../examples/counter-reset/index.html'));
+const DOM = new JSDOM(html); // create DOM based on HTML
+const id = 'test-app';
+const document = DOM.window.document; // shortcut to JSDOM document
+const counter = require(path.resolve(__dirname,
+  '../examples/counter-reset/counter.js'));
+const { view, mount, update, div, button, empty, init} = counter;
+init(document); // pass the JSDOM into counter.js
+
+test('Mount app expect state to be Zero', function (t) {
+  mount(0, update, view, id);
+  var actual = document.getElementById(id).textContent;
+  var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
+  var expected = 0;
+  t.equal(expected, actual_stripped, "Inital state set to 0.");
+  t.end()
+});
+
+test('Test Update update(0) returns 0 (current state)', function (t) {
+  var result = update(0);
+  t.equal(result, 0, "Initial state: 0, No Action, Final state: 0");
+  t.end();
+});
+
+test('Test Update increment: update(1, "inc") returns 2', function (t) {
+  var result = update(1, "inc");
+  t.equal(result, 2, "Initial state: 1, Increment once, Final state: 2");
+  t.end();
+});
+
+test('Test Update decrement: update(3, "dec") returns 2', function (t) {
+  var result = update(1, "dec");
+  t.equal(result, 0, "Initial state: 1, Decrement once, Final state: 0");
+  t.end();
+});
+
+
+test('click on "+" button (increment model by 1)', function (t) {
+  document.body.appendChild(div(id));
+  mount(7, update, view, id);
+
+  // see: http://stackoverflow.com/questions/27557624/simulating-click-jsdom
+  // var evt = document.createEvent("HTMLEvents");
+  const evt = document.createEvent("MouseEvents");
+  evt.initEvent("click", false, true);
+  var btn = document.getElementById('inc');
+
+  btn.addEventListener('click', function() {
+    console.log('increment button CLICKed!!');
+    var state = parseInt( document.getElementById(id)
+      .getElementsByClassName('count')[0].innerHTML, 10);
+    console.log('state:', state, 'typeof state:', typeof state);
+    t.equal(state, 8,
+    "End State is 8 after incrementing 7 by 1 (as expected)"); // incremented
+    t.end();
+  });
+
+  btn.dispatchEvent(evt);
+});
+
+test('Click reset button resets state to 0', function (t) {
+  mount(7, update, view, id);
+  var root = document.getElementById(id);
+  var state7 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
+  t.equal(state7, 7, "State is 7 after mounting with initial state=7");
+  var btn = root.getElementsByClassName("reset")[0]; // click reset button
+  btn.click(); // Click the Reset button!
+  var state0 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
+  t.equal(state0, 0, "State is 0 (Zero) after reset."); // state reset to 0!
+  empty(root); // clean up after tests
+  // console.log('STATE:', state);
+  t.end()
+});
+
+// Reset Functionality
+
+test('Test reset counter when model/state is 6 returns 0', function(t) {
+  var result = update(6, "reset");
+  t.equal(result, 0);
+  t.end()
+});
+
+test('Click reset button resets state to 0', function(t) {
+  mount(7, update, view, id);
+  var root = document.getElementById(id);
+  var state7 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
+  t.equal(state7, 7, "initial state is 7 as expected");
+  var btn = root.getElementsByClassName("reset")[0]; // click reset button
+  btn.click(); // Click the Reset button!
+  var state = parseInt(root.getElementsByClassName('count')[0].textContent, 10);
+  t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
+  empty(root); // clean up after tests
+  t.end()
+});

From 94bbbbf58142abf35b062ebf65c08658df610bda Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 13 Jul 2018 20:05:26 +0100
Subject: [PATCH 008/164] run tape tests in pre-commit and on CI (faster and
 simpler)

---
 package.json               | 5 +++--
 test/counter-reset.test.js | 2 +-
 test/test.js               | 8 ++++----
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index e01cf340..7ca6e665 100644
--- a/package.json
+++ b/package.json
@@ -20,11 +20,11 @@
     "tape": "^4.9.1"
   },
   "scripts": {
-    "check-coverage": "istanbul cover test/test.js && istanbul check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
+    "check-coverage": "istanbul check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
     "postinstall": "npm test",
     "retest": "PORT=8000 node_modules/.bin/nodemon ./test/*.js",
     "start": "live-server --port=8000 --open=./examples",
-    "test": "istanbul cover test/test.js"
+    "test": "istanbul cover tape ./test/*.test.js"
   },
   "keywords": [
     "Elm",
@@ -38,6 +38,7 @@
   ],
   "license": "ISC",
   "pre-commit": [
+    "test",
     "check-coverage"
   ]
 }
diff --git a/test/counter-reset.test.js b/test/counter-reset.test.js
index b579cf99..18450357 100644
--- a/test/counter-reset.test.js
+++ b/test/counter-reset.test.js
@@ -1,4 +1,4 @@
-const test = require('tape'); // assign the tape library to the variable "test"
+const test = require('tape'); // see: https://github.com/dwyl/learn-tape
 const fs = require('fs');
 const path = require('path');
 const { JSDOM } = require("jsdom"); // https://github.com/jsdom/jsdom
diff --git a/test/test.js b/test/test.js
index 01498c20..c155a65a 100644
--- a/test/test.js
+++ b/test/test.js
@@ -27,7 +27,7 @@ var { view, mount, update, div, button, empty, init} = counter;
 init(document); // pass the JSDOM into counter.js
 // console.log(update.toString());
 // console.log(counter.view);
-mount(0, update, view, 'test-app');
+mount(0, update, view, id);
 update(0);
 update(1, "inc");
 update(1, "dec");
@@ -82,7 +82,7 @@ function(assert) {
     var state = document.getElementById(id)
       .getElementsByClassName('count')[0].innerHTML;
     console.log('state:', state);
-    assert.equal(state, 8, 
+    assert.equal(state, 8,
     "End State is 8 after incrementing 7 by 1 (as expected)"); // model was incremented successfully
     done();
   });
@@ -122,12 +122,12 @@ test('Test reset counter when model/state is 6 returns 0', function(assert) {
 test('Click reset button resets state to 0', function(assert) {
   mount(7, update, view, id);
   var root = document.getElementById(id);
-  assert.equal(root.getElementsByClassName('count')[0].textContent, 7, 
+  assert.equal(root.getElementsByClassName('count')[0].textContent, 7,
     "initial state is 7 as expected");
   var btn = root.getElementsByClassName("reset")[0]; // click reset button
   btn.click(); // Click the Reset button!
   var state = root.getElementsByClassName('count')[0].textContent;
-  assert.equal(state, 0, 
+  assert.equal(state, 0,
     "State is 0 (Zero) after reset."); // state was successfully reset to 0!
   empty(root); // clean up after tests
 });

From 8aafc999cd029ab030d9bd04b96a464aaa5cb331 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 13 Jul 2018 21:42:36 +0100
Subject: [PATCH 009/164] add link to https://github.com/dwyl/learn-tape as
 using Tape in Todo List App example #44

---
 test/elmish.test.js |  29 ++++++++++
 test/test.js        | 135 --------------------------------------------
 todo-list.md        |  61 +++++++++++++++++++-
 3 files changed, 88 insertions(+), 137 deletions(-)
 create mode 100644 test/elmish.test.js
 delete mode 100644 test/test.js

diff --git a/test/elmish.test.js b/test/elmish.test.js
new file mode 100644
index 00000000..322efe43
--- /dev/null
+++ b/test/elmish.test.js
@@ -0,0 +1,29 @@
+const test = require('tape'); // see: https://github.com/dwyl/learn-tape
+const fs = require('fs');
+const path = require('path');
+const { JSDOM } = require("jsdom"); // https://github.com/jsdom/jsdom
+
+// const html = fs.readFileSync(path.resolve(__dirname,
+//   '../examples/counter-reset/index.html'));
+// const DOM = new JSDOM(html); // create DOM based on HTML
+// const id = 'test-app';
+// const document = DOM.window.document; // shortcut to JSDOM document
+// const counter = require(path.resolve(__dirname,
+//   '../examples/counter-reset/counter.js'));
+// const { view, mount, update, div, button, empty, init} = counter;
+// init(document); // pass the JSDOM into counter.js
+
+// test('Mount app expect state to be Zero', function (t) {
+//   mount(0, update, view, id);
+//   var actual = document.getElementById(id).textContent;
+//   var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
+//   var expected = 0;
+//   t.equal(expected, actual_stripped, "Inital state set to 0.");
+//   t.end()
+// });
+//
+// test('Test Update update(0) returns 0 (current state)', function (t) {
+//   var result = update(0);
+//   t.equal(result, 0, "Initial state: 0, No Action, Final state: 0");
+//   t.end();
+// });
diff --git a/test/test.js b/test/test.js
deleted file mode 100644
index c155a65a..00000000
--- a/test/test.js
+++ /dev/null
@@ -1,135 +0,0 @@
-var QUnit = require('qunitjs'); // require QUnit node.js module
-// alias the QUnit.test method so we don't have to change all our tests
-var test = QUnit.test; // stores a copy of QUnit.test
-require('qunit-tap')(QUnit, console.log); // use console.log for test output
-
-var jsdom = require("jsdom"); // https://github.com/tmpvar/jsdom
-var { JSDOM } = jsdom;
-var path = require('path');
-var fs = require('fs');
-var html = fs.readFileSync(path.resolve(__dirname,
-  '../examples/counter-reset/index.html'));
-var DOM = new JSDOM(html);
-var id = 'test-app'
-// var DOM = new JSDOM(`<!DOCTYPE html><div id="${id}">Hello world</div>`);
-var document = DOM.window.document; // shortcut to JSDOM document
-
-test('Mount app expect state to be Zero', function(assert){
-  var actual = document.getElementById(id).textContent;
-  var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
-  var expected = 0;
-  assert.equal(expected, actual_stripped, "Inital state set to 0.");
-});
-
-var counter = require(path.resolve(__dirname,
-  '../examples/counter-reset/counter.js'));
-var { view, mount, update, div, button, empty, init} = counter;
-init(document); // pass the JSDOM into counter.js
-// console.log(update.toString());
-// console.log(counter.view);
-mount(0, update, view, id);
-update(0);
-update(1, "inc");
-update(1, "dec");
-update(1, "reset");
-// document.getElementById(id).getElementsByClassName('inc')[0].click();
-const evt = document.createEvent("MouseEvents");
-evt.initEvent("click", false, true);
-
-var btn = document.getElementById('inc');
-// console.log('>> inc', btn);
-btn.addEventListener('click', function() { // I'm not a JSDOM "Expert"
-  console.log('increment button CLICKed!!');
-  var state = document.getElementById(id)
-    .getElementsByClassName('count')[0].textContent;
-  // console.log('state:', state);
-});
-
-// btn.dispatchEvent(evt);
-
-
-test('Test Update update(0) returns 0 (current state)', function(assert) {
-  var result = update(0);
-  assert.equal(result, 0, "Initial state: 0, No Action, Final state: 0");
-});
-
-test('Test Update increment: update(1, "inc") returns 2', function(assert) {
-  var result = update(1, "inc");
-  assert.equal(result, 2, "Initial state: 1, Increment once, Final state: 2");
-});
-
-test('Test Update decrement: update(3, "dec") returns 2', function(assert) {
-  var result = update(1, "dec");
-  assert.equal(result, 0, "Initial state: 1, Decrement once, Final state: 0");
-});
-
-
-test('click on "+" button to re-render state (increment model by 1)',
-function(assert) {
-  var done = assert.async(); // assertion will be inside click even callback
-  document.body.appendChild(div(id));
-  mount(7, update, view, id);
-
-  // see: http://stackoverflow.com/questions/27557624/simulating-click-on-document-reactjs-jsdom
-  // var evt = document.createEvent("HTMLEvents");
-  const evt = document.createEvent("MouseEvents");
-  evt.initEvent("click", false, true);
-
-  var btn = document.getElementById('inc');
-  // console.log('>> inc', btn);
-  btn.addEventListener('click', function() {
-    console.log('increment button CLICKed!!');
-    var state = document.getElementById(id)
-      .getElementsByClassName('count')[0].innerHTML;
-    console.log('state:', state);
-    assert.equal(state, 8,
-    "End State is 8 after incrementing 7 by 1 (as expected)"); // model was incremented successfully
-    done();
-  });
-
-  btn.dispatchEvent(evt);
-  // document.getElementById(id).getElementsByClassName('inc')[0].click();
-});
-
-test('Click reset button resets state to 0', function(assert) {
-  mount(7, update, view, id);
-  var root = document.getElementById(id);
-  assert.equal(root.getElementsByClassName('count')[0].textContent, 7);
-  var btn = root.getElementsByClassName("reset")[0]; // click reset button
-  btn.click(); // Click the Reset button!
-  var state = root.getElementsByClassName('count')[0].textContent;
-  assert.equal(state, 0, "State is 0 (Zero) after reset."); // state was successfully reset to 0!
-  empty(root); // clean up after tests
-  // console.log('STATE:', state);
-});
-
-// Reset Functionality
-
-test('Test reset counter when model/state is 6 returns 0', function(assert) {
-  var result = update(6, "reset");
-  assert.equal(result, 0);
-});
-
-// please make this test pass if you know how! thanks! :-)
-// test('reset button should be present on page', function(assert) {
-//   var reset = document.getElementsByClassName('reset');
-//   console.log(reset);
-//   assert.equal(reset.length, 1);
-// });
-
-
-
-test('Click reset button resets state to 0', function(assert) {
-  mount(7, update, view, id);
-  var root = document.getElementById(id);
-  assert.equal(root.getElementsByClassName('count')[0].textContent, 7,
-    "initial state is 7 as expected");
-  var btn = root.getElementsByClassName("reset")[0]; // click reset button
-  btn.click(); // Click the Reset button!
-  var state = root.getElementsByClassName('count')[0].textContent;
-  assert.equal(state, 0,
-    "State is 0 (Zero) after reset."); // state was successfully reset to 0!
-  empty(root); // clean up after tests
-});
-
-QUnit.load(); // run the tests
diff --git a/todo-list.md b/todo-list.md
index dd869173..292bac03 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -62,6 +62,23 @@ by opening a question you help _everyone_ learn more effectively!
 
 ## _How?_
 
+### Testing?
+
+_Before_ diving into _building_ the Todo List App,
+we need to consider how we are going to _test_ it.
+By ensuring that we follow **TDD** from the _start_ of an App,
+we won't need to "correct" any "**bad habits**".
+
+We will be using **Tape** and **JSDOM** for testing
+both our functions and the final application.
+If you are `new` to either of these tools,
+please see:
+[https://github.com/dwyl/**learn-tape**](https://github.com/dwyl/learn-tape)
+and
+[front-end-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
+
+### _Analyse_
+
 Our _first_ step is to _analyse_ the required functionality of a Todo List.
 
 ### Todo List _Basic_ Functionality
@@ -157,6 +174,9 @@ each `case` is functionality that is _specific_ to the Todo List App. <br />
 The `view` function _invokes_ several "helper" functions
 which create HTML elements e.g: `div` & `<button>`; these _can_ be generalised.
 
+
+### HTML Elements (Functions)
+
 The _requirements_ for the HTML elements we _need_ for a Todo List
 can be _gathered_ by viewing the source code of the VanillaJS TodoMVC
 in a web browser:
@@ -210,17 +230,54 @@ This is a "copy-paste" of the _generated_ code including the Todo items:
 </section>
 ```
 
+Let's split each one of these elements into it's own `function`
+(_with any necessary "helpers"_) in the order they appear.
 
+#### `<section>`
 
+The _first_ HTML we encounter in the TodoMVC app is
+`<section>`.
+`<section>` represents a standalone section — which doesn't have
+a more specific semantic element to represent it —
+it's an alternative way to group elements to a `<div>`.
+
+> info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section <br />
+> difference:
+https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div
+
+As with other "grouping" or "container" HTML elements,
+our `section` function (_which will create the_ `<section>` _DOM node_)
+will be a function with _two_ arguments:
++ `attributes` - a list (Array) of HTML attributes/properties
+  e.g: `id` or `class`.
++ `children` - a list (Array) of child HTML elements
+(_nested within the_ `<section>`)
+
+Each of these function arguments will be "_applied_" to the HTML element.
+We therefore need a pair of "helper" functions (_one for each argument_).
 
-### `mount`
 
-### ``
 
 
 
 
 
+Section in Elm: http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
+<br />
+Demo: https://ellie-app.com/LTtNVQjfWVa1
+![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)
+
+
+
+
+### `mount`
+
+The `mount` function is the "glue" or "wiring" function that
+connects the `model`, `update` and `view`; we _can_ `generalise` it.
+
+
+
+
 
 
 

From c5101d9405215b232b0dcf9343ee66bf7a322076 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 14 Jul 2018 11:32:20 +0100
Subject: [PATCH 010/164] add empty function with JSDOC & test for #44

---
 examples/todo-list/elmish.js | 112 ++++++++++++-----------------------
 test/elmish.test.js          |  41 +++++++++----
 2 files changed, 67 insertions(+), 86 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index a28d87c4..a6c76801 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -1,89 +1,51 @@
-// Define the Component's Actions:
-var Inc = 'inc';                     // increment the counter
-var Dec = 'dec';                     // decrement the counter
-var Res = 'reset';                   // reset counter: git.io/v9KJk
 
-function update(model, action) {     // Update function takes the current state
-  var parts = action ? action.split('-') : []; // e.g: inc-0 where 0 is the counter "id"
-  var act = parts[0];
-  var index = parts[1] || 0;
-  var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
-  switch(act) {                   // and an action (String) runs a switch
-    case Inc:
-      new_model.counters[index] = model.counters[index] + 1;
-      break;
-    case Dec:
-      new_model.counters[index] = model.counters[index] - 1;
-      break;
-    case Res: // use ES6 Array.fill to create a new array with values set to 0:
-      new_model.counters[index] = 0;
-      break;
-    default: return model; // if action not defined, return curent state.
-  }
-  return new_model;
-}
 
-function view(signal, model, root) {
-  empty(root); // clear root element before re-rendering the App (DOM).
-  model.counters.map(function(counter, index) {
-    return container(index, [                // wrap DOM nodes in an "container"
-      button('+', signal, Inc + '-' + index),    // append index to action
-      div('count', counter),       // create div w/ count as text
-      button('-', signal, Dec + '-' + index),    // decrement counter
-      button('Reset', signal, Res + '-' + index) // reset counter
-    ]);
-  }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+
+
+
+/**
+ * `empty` the contents of a given DOM element "node" (before re-rendering).
+ * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
+ * @param  {Object} node the exact DOM node you want to empty
+ * @return {Boolean} returns true once the DOM node is empty.
+ * @example
+ * // returns true (once the 'app' node is emptied)
+ * const node = document.getElementById('app');
+ * empty(node);
+ */
+function empty(node) {
+  while (node.lastChild) {
+    node.removeChild(node.lastChild);
+  }
+  return true;
 }
 
 // Mount Function receives all MUV and mounts the app in the "root" DOM Element
 function mount(model, update, view, root_element_id) {
   var root = document.getElementById(root_element_id); // root DOM element
-  function signal(action) {   // signal function takes action
-    return function callback() {     // and returns callback
-      model = update(model, action); // update model according to action
-      view(signal, model, root);     // subsequent re-rendering
+  function signal(action) {                     // signal function takes action
+    return function callback() {                // and returns callback
+      var updatedModel = update(model, action); // update model for the action
+      empty(root);                              // clear root el before rerender
+      view(signal, updatedModel, root);         // subsequent re-rendering
     };
   };
-  view(signal, model, root);         // render initial model (once)
+  view(signal, model, root);                    // render initial model (once)
 }
 
-// The following are "Helper" Functions which each "Do ONLY One Thing" and are
-// used in the "View" function to render the Model (State) to the Browser DOM:
-
-// empty the contents of a given DOM element "node" (before re-rendering)
-function empty(node) {
-  while (node.firstChild) {
-    node.removeChild(node.firstChild);
-  }
-} // Inspired by: stackoverflow.com/a/3955238/1148249
-
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
-function container(index, elements) {
-  var con = document.createElement('section');
-  con.id = index;
-  con.className = 'counter';
-  elements.forEach(function(el) { con.appendChild(el) });
-  return con;
+function init(doc){
+  document = doc; // this is used for instantiating JSDOM. ignore!
 }
 
-function button(text, signal, action) {
-  var button = document.createElement('button');
-  var text = document.createTextNode(text);    // human-readable button text
-  button.appendChild(text);                    // text goes *inside* not attrib
-  button.className = action.split('-')[0];                   // use action as CSS class
-  button.id = action;
-  // console.log(signal, ' action:', action)
-  button.onclick = signal(action);             // onclick tells how to process
-  return button;                               // return the DOM node(s)
-} // how to create a button in JavaScript: stackoverflow.com/a/8650996/1148249
-
-function div(divid, text) {
-  var div = document.createElement('div');
-  div.id = divid;
-  div.className = divid;
-  if(text !== undefined) { // if text is passed in render it in a "Text Node"
-    var txt = document.createTextNode(text);
-    div.appendChild(txt);
+/* The code block below ONLY Applies to tests run using Node.js */
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    // view: view,
+    mount: mount,
+    // update: update,
+    // div: div,
+    // button: button,
+    empty: empty,
+    init: init
   }
-  return div;
-}
+} else { init(document); }
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 322efe43..02b92d32 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -1,17 +1,36 @@
-const test = require('tape'); // see: https://github.com/dwyl/learn-tape
+const test = require('tape');         // https://github.com/dwyl/learn-tape
 const fs = require('fs');
 const path = require('path');
-const { JSDOM } = require("jsdom"); // https://github.com/jsdom/jsdom
-
-// const html = fs.readFileSync(path.resolve(__dirname,
-//   '../examples/counter-reset/index.html'));
-// const DOM = new JSDOM(html); // create DOM based on HTML
-// const id = 'test-app';
-// const document = DOM.window.document; // shortcut to JSDOM document
-// const counter = require(path.resolve(__dirname,
-//   '../examples/counter-reset/counter.js'));
+require('decache')('jsdom');          // https://github.com/dwyl/decache
+const JSDOM = require("jsdom").JSDOM; // https://github.com/jsdom/jsdom
+const elmish = require(path.resolve(__dirname,
+  '../examples/todo-list/elmish.js'))
+const html = fs.readFileSync(path.resolve(__dirname,
+  '../examples/todo-list/index.html'));
+const DOM = new JSDOM(html); // create DOM based on HTML
+const id = 'test-app';
+const document = DOM.window.document; // shortcut to JSDOM document
+elmish.init(document); // pass the JSDOM into counter.js
 // const { view, mount, update, div, button, empty, init} = counter;
-// init(document); // pass the JSDOM into counter.js
+
+test('empty("root") removes DOM elements from container', function (t) {
+  // setup the test div:
+  const text = 'Hello World!'
+  const root = document.getElementById(id);
+  const div = document.createElement('div');
+  div.id = 'mydiv';
+  const txt = document.createTextNode(text);
+  div.appendChild(txt);
+  root.appendChild(div);
+  // check text of the div:
+  const actual = document.getElementById('mydiv').textContent;
+  t.equal(actual, text, "Contents of mydiv is: " + actual + ' == ' + text);
+  t.equal(root.childElementCount, 1, "Root element " + id + " has 1 child el");
+  // empty the root DOM node:
+  elmish.empty(root);
+  t.equal(root.childElementCount, 0, "After empty(root) has 0 child elements!")
+  t.end();
+});
 
 // test('Mount app expect state to be Zero', function (t) {
 //   mount(0, update, view, id);

From 08723c933c30c038b5bfb566871ca88c71ac0598 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 14 Jul 2018 15:16:06 +0100
Subject: [PATCH 011/164] use jsdom-global instead of *manually* instantiating
 JSDOM! for #44

---
 examples/counter-reset/counter.js |    5 +-
 package-lock.json                 | 4209 +++++++++++++++++++++++++++++
 package.json                      |    2 +
 test/counter-reset.test.js        |   13 +-
 test/elmish.test.js               |    8 +-
 todo-list.md                      |    5 +-
 6 files changed, 4228 insertions(+), 14 deletions(-)
 create mode 100644 package-lock.json

diff --git a/examples/counter-reset/counter.js b/examples/counter-reset/counter.js
index dc0944ee..1a918af2 100644
--- a/examples/counter-reset/counter.js
+++ b/examples/counter-reset/counter.js
@@ -20,11 +20,14 @@ function view(signal, model, root) {
     button('-', signal, Dec),                  // decrement counter
     button('Reset', signal, Res)               // reset counter
   ].forEach(function(el){ root.appendChild(el) }); // forEach is ES5 so IE9+
+  console.log(">> root.childElementCount:", root.childElementCount);
 } // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
 
 // Mount Function receives all MUV and mounts the app in the "root" DOM Element
 function mount(model, update, view, root_element_id) {
+  console.log('>> root_element_id:', root_element_id)
   var root = document.getElementById(root_element_id); // root DOM element
+  console.log('>> root:', root)
   function signal(action) {          // signal function takes action
     return function callback() {     // and returns callback
       model = update(model, action); // update model according to action
@@ -72,7 +75,7 @@ function init(doc){
 
 /* The code block below ONLY Applies to tests run using Node.js */
 /* istanbul ignore next */
-if (typeof module !== 'undefined' && module.exports) { 
+if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     view: view,
     mount: mount,
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 00000000..72a0ea5a
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,4209 @@
+{
+  "name": "learn-elm-architecture-in-javascript",
+  "version": "1.0.1",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@types/node": {
+      "version": "6.0.78",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.78.tgz",
+      "integrity": "sha1-XUo/V5wVJOAe4hv0dOb7oJGY9HA=",
+      "dev": true
+    },
+    "abab": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.3.tgz",
+      "integrity": "sha1-uB3l9ydOxOdW15fNg08wNkJyTl0=",
+      "dev": true
+    },
+    "abbrev": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
+      "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU=",
+      "dev": true
+    },
+    "accepts": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.3.tgz",
+      "integrity": "sha1-w8p0NJOGSMPg2cHjKN1otiLChMo=",
+      "dev": true,
+      "requires": {
+        "mime-types": "~2.1.11",
+        "negotiator": "0.6.1"
+      }
+    },
+    "acorn": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
+      "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
+      "dev": true
+    },
+    "acorn-globals": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.1.0.tgz",
+      "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=",
+      "dev": true,
+      "requires": {
+        "acorn": "^4.0.4"
+      }
+    },
+    "ajv": {
+      "version": "4.11.8",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
+      "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
+      "dev": true,
+      "requires": {
+        "co": "^4.6.0",
+        "json-stable-stringify": "^1.0.1"
+      }
+    },
+    "align-text": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
+      "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2",
+        "longest": "^1.0.1",
+        "repeat-string": "^1.5.2"
+      }
+    },
+    "amdefine": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
+      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
+      "dev": true
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "dev": true
+    },
+    "ansi-styles": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+      "dev": true
+    },
+    "anymatch": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.0.tgz",
+      "integrity": "sha1-o+Uvo5FoyCX/V7AkgSbOWo/5VQc=",
+      "dev": true,
+      "requires": {
+        "arrify": "^1.0.0",
+        "micromatch": "^2.1.5"
+      }
+    },
+    "apache-crypt": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/apache-crypt/-/apache-crypt-1.2.1.tgz",
+      "integrity": "sha1-1vxyqm0n2ZyVqU/RiNcx7v/6Zjw=",
+      "dev": true,
+      "requires": {
+        "unix-crypt-td-js": "^1.0.0"
+      }
+    },
+    "apache-md5": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/apache-md5/-/apache-md5-1.1.2.tgz",
+      "integrity": "sha1-7klza2ObTxCLbp5ibG2pkwa0FpI=",
+      "dev": true
+    },
+    "argparse": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz",
+      "integrity": "sha1-c9g7wmP4bpf4zE9rrhsOkKfSLIY=",
+      "dev": true,
+      "requires": {
+        "sprintf-js": "~1.0.2"
+      }
+    },
+    "arr-diff": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
+      "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
+      "dev": true,
+      "requires": {
+        "arr-flatten": "^1.0.1"
+      }
+    },
+    "arr-flatten": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.0.3.tgz",
+      "integrity": "sha1-onTthawIhJtr14R8RYB0XcUa37E=",
+      "dev": true
+    },
+    "array-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
+      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
+      "dev": true
+    },
+    "array-unique": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
+      "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
+      "dev": true
+    },
+    "arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
+      "dev": true
+    },
+    "asn1": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
+      "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=",
+      "dev": true
+    },
+    "assert-plus": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
+      "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
+      "dev": true
+    },
+    "async": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+      "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
+      "dev": true
+    },
+    "async-each": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.1.tgz",
+      "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=",
+      "dev": true
+    },
+    "asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+      "dev": true
+    },
+    "aws-sign2": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+      "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
+      "dev": true
+    },
+    "aws4": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
+      "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
+      "dev": true
+    },
+    "balanced-match": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+      "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
+      "dev": true
+    },
+    "basic-auth": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.1.0.tgz",
+      "integrity": "sha1-RSIe5Cn37h5QNb4/UVM/HN/SmIQ=",
+      "dev": true
+    },
+    "batch": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
+      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
+      "dev": true
+    },
+    "bcrypt-pbkdf": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
+      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "tweetnacl": "^0.14.3"
+      }
+    },
+    "bcryptjs": {
+      "version": "2.4.3",
+      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
+      "integrity": "sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms=",
+      "dev": true
+    },
+    "binary-extensions": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.8.0.tgz",
+      "integrity": "sha1-SOyNFt9Dd+rl+liEaCSAr02Vx3Q=",
+      "dev": true
+    },
+    "boom": {
+      "version": "2.10.1",
+      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
+      "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
+      "dev": true,
+      "requires": {
+        "hoek": "2.x.x"
+      }
+    },
+    "brace-expansion": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.7.tgz",
+      "integrity": "sha1-Pv/DxQ4ABTH7cg6v+A8K6O8jz1k=",
+      "dev": true,
+      "requires": {
+        "balanced-match": "^0.4.1",
+        "concat-map": "0.0.1"
+      }
+    },
+    "braces": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
+      "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
+      "dev": true,
+      "requires": {
+        "expand-range": "^1.8.1",
+        "preserve": "^0.2.0",
+        "repeat-element": "^1.1.2"
+      }
+    },
+    "callsite": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
+      "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA=",
+      "dev": true
+    },
+    "camelcase": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+      "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
+      "dev": true,
+      "optional": true
+    },
+    "caseless": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
+      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
+      "dev": true
+    },
+    "center-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+      "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "align-text": "^0.1.3",
+        "lazy-cache": "^1.0.3"
+      }
+    },
+    "chalk": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+      "dev": true,
+      "requires": {
+        "ansi-styles": "^2.2.1",
+        "escape-string-regexp": "^1.0.2",
+        "has-ansi": "^2.0.0",
+        "strip-ansi": "^3.0.0",
+        "supports-color": "^2.0.0"
+      },
+      "dependencies": {
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true
+        }
+      }
+    },
+    "chokidar": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
+      "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=",
+      "dev": true,
+      "requires": {
+        "anymatch": "^1.3.0",
+        "async-each": "^1.0.0",
+        "fsevents": "^1.0.0",
+        "glob-parent": "^2.0.0",
+        "inherits": "^2.0.1",
+        "is-binary-path": "^1.0.0",
+        "is-glob": "^2.0.0",
+        "path-is-absolute": "^1.0.0",
+        "readdirp": "^2.0.0"
+      }
+    },
+    "cliui": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+      "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "center-align": "^0.1.1",
+        "right-align": "^0.1.1",
+        "wordwrap": "0.0.2"
+      },
+      "dependencies": {
+        "wordwrap": {
+          "version": "0.0.2",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+          "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "co": {
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
+      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
+      "dev": true
+    },
+    "colors": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
+      "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
+      "dev": true
+    },
+    "combined-stream": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
+      "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
+      "dev": true,
+      "requires": {
+        "delayed-stream": "~1.0.0"
+      }
+    },
+    "commander": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
+      "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
+      "dev": true,
+      "requires": {
+        "graceful-readlink": ">= 1.0.0"
+      }
+    },
+    "concat-map": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+      "dev": true
+    },
+    "concat-stream": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.0.tgz",
+      "integrity": "sha1-CqxmL9Ur54lk1VMvaUeE5wEQrPc=",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.3",
+        "readable-stream": "^2.2.2",
+        "typedarray": "^0.0.6"
+      }
+    },
+    "configstore": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/configstore/-/configstore-1.4.0.tgz",
+      "integrity": "sha1-w1eB0FAdJowlxUuLF/YkDopPsCE=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "mkdirp": "^0.5.0",
+        "object-assign": "^4.0.1",
+        "os-tmpdir": "^1.0.0",
+        "osenv": "^0.1.0",
+        "uuid": "^2.0.1",
+        "write-file-atomic": "^1.1.2",
+        "xdg-basedir": "^2.0.0"
+      },
+      "dependencies": {
+        "uuid": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
+          "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=",
+          "dev": true
+        }
+      }
+    },
+    "connect": {
+      "version": "3.5.1",
+      "resolved": "https://registry.npmjs.org/connect/-/connect-3.5.1.tgz",
+      "integrity": "sha1-bTDXpjx/FwhXprOqazY9lz3KWI4=",
+      "dev": true,
+      "requires": {
+        "debug": "~2.2.0",
+        "finalhandler": "0.5.1",
+        "parseurl": "~1.3.1",
+        "utils-merge": "1.0.0"
+      }
+    },
+    "content-type-parser": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/content-type-parser/-/content-type-parser-1.0.1.tgz",
+      "integrity": "sha1-w+VpiMU8ZRJ/tG1AMqOpACRv3JQ=",
+      "dev": true
+    },
+    "core-util-is": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+      "dev": true
+    },
+    "cors": {
+      "version": "2.8.3",
+      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.3.tgz",
+      "integrity": "sha1-TPeOHSMymnSWsvwiJbd8pbteuAI=",
+      "dev": true,
+      "requires": {
+        "object-assign": "^4",
+        "vary": "^1"
+      }
+    },
+    "cross-spawn": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
+      "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
+      "dev": true,
+      "requires": {
+        "lru-cache": "^4.0.1",
+        "shebang-command": "^1.2.0",
+        "which": "^1.2.9"
+      }
+    },
+    "cryptiles": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+      "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
+      "dev": true,
+      "requires": {
+        "boom": "2.x.x"
+      }
+    },
+    "cssom": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.2.tgz",
+      "integrity": "sha1-uANhcMefB6kP8vFuIihAJ6JDhIs=",
+      "dev": true
+    },
+    "cssstyle": {
+      "version": "0.2.37",
+      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.37.tgz",
+      "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=",
+      "dev": true,
+      "requires": {
+        "cssom": "0.3.x"
+      }
+    },
+    "dashdash": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        }
+      }
+    },
+    "debug": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
+      "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
+      "dev": true,
+      "requires": {
+        "ms": "0.7.1"
+      }
+    },
+    "decache": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/decache/-/decache-4.4.0.tgz",
+      "integrity": "sha1-b232uF1+fEQQqTL/wmSJt46azRM=",
+      "dev": true,
+      "requires": {
+        "callsite": "^1.0.0"
+      }
+    },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
+      "dev": true,
+      "optional": true
+    },
+    "deep-equal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
+      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
+      "dev": true
+    },
+    "deep-extend": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
+      "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=",
+      "dev": true
+    },
+    "deep-is": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
+      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
+      "dev": true
+    },
+    "define-properties": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.2.tgz",
+      "integrity": "sha1-g6c/L+pWmJj7c3GTyPhzyvbUXJQ=",
+      "dev": true,
+      "requires": {
+        "foreach": "^2.0.5",
+        "object-keys": "^1.0.8"
+      }
+    },
+    "defined": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
+      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "dev": true
+    },
+    "delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+      "dev": true
+    },
+    "depd": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.0.tgz",
+      "integrity": "sha1-4b2Cxqq2ztlluXuIsX7T5SjKGMM=",
+      "dev": true
+    },
+    "destroy": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
+      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
+      "dev": true
+    },
+    "detect-file": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-0.1.0.tgz",
+      "integrity": "sha1-STXe39lIhkjgBrASlWbpOGcR6mM=",
+      "dev": true,
+      "requires": {
+        "fs-exists-sync": "^0.1.0"
+      }
+    },
+    "duplexer": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
+      "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
+      "dev": true
+    },
+    "duplexify": {
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.5.0.tgz",
+      "integrity": "sha1-GqdzAC4VeEV+nZ1KULDMquvL1gQ=",
+      "dev": true,
+      "requires": {
+        "end-of-stream": "1.0.0",
+        "inherits": "^2.0.1",
+        "readable-stream": "^2.0.0",
+        "stream-shift": "^1.0.0"
+      }
+    },
+    "ecc-jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
+      "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "jsbn": "~0.1.0"
+      }
+    },
+    "ee-first": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
+      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
+      "dev": true
+    },
+    "encodeurl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.1.tgz",
+      "integrity": "sha1-eePVhlU0aQn+bw9Fpd5oEDspTSA=",
+      "dev": true
+    },
+    "end-of-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.0.0.tgz",
+      "integrity": "sha1-1FlucCc0qT5A6a+GQxnqvZn/Lw4=",
+      "dev": true,
+      "requires": {
+        "once": "~1.3.0"
+      },
+      "dependencies": {
+        "once": {
+          "version": "1.3.3",
+          "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
+          "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=",
+          "dev": true,
+          "requires": {
+            "wrappy": "1"
+          }
+        }
+      }
+    },
+    "ensure-posix-path": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/ensure-posix-path/-/ensure-posix-path-1.0.2.tgz",
+      "integrity": "sha1-pls+QtC3HPxYXrd0+ZQ8jZuRsMI=",
+      "dev": true
+    },
+    "es-abstract": {
+      "version": "1.12.0",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.12.0.tgz",
+      "integrity": "sha512-C8Fx/0jFmV5IPoMOFPA9P9G5NtqW+4cOPit3MIuvR2t7Ag2K15EJTpxnHAYTzL+aYQJIESYeXZmDBfOBE1HcpA==",
+      "dev": true,
+      "requires": {
+        "es-to-primitive": "^1.1.1",
+        "function-bind": "^1.1.1",
+        "has": "^1.0.1",
+        "is-callable": "^1.1.3",
+        "is-regex": "^1.0.4"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.1.1.tgz",
+      "integrity": "sha1-RTVSSKiJeQNLZ5Lhm7gfK3l13Q0=",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.1",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.1"
+      }
+    },
+    "es6-promise": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
+      "integrity": "sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=",
+      "dev": true
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
+      "dev": true
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
+    },
+    "escodegen": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.8.1.tgz",
+      "integrity": "sha1-WltTr0aTEQvrsIZ6o0MN07cKEBg=",
+      "dev": true,
+      "requires": {
+        "esprima": "^2.7.1",
+        "estraverse": "^1.9.1",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1",
+        "source-map": "~0.2.0"
+      }
+    },
+    "esprima": {
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
+      "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=",
+      "dev": true
+    },
+    "estraverse": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.9.3.tgz",
+      "integrity": "sha1-r2fy3JIlgkFZUJJgkaQAXSnJu0Q=",
+      "dev": true
+    },
+    "esutils": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
+      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
+      "dev": true
+    },
+    "etag": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.0.tgz",
+      "integrity": "sha1-b2Ma7zNtbEY2K1F2QETOIWvjwFE=",
+      "dev": true
+    },
+    "event-stream": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
+      "integrity": "sha1-SrTJoPWlTbkzi0w02Gv86PSzVXE=",
+      "dev": true,
+      "requires": {
+        "duplexer": "~0.1.1",
+        "from": "~0",
+        "map-stream": "~0.1.0",
+        "pause-stream": "0.0.11",
+        "split": "0.3",
+        "stream-combiner": "~0.0.4",
+        "through": "~2.3.1"
+      }
+    },
+    "exists-stat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/exists-stat/-/exists-stat-1.0.0.tgz",
+      "integrity": "sha1-BmDjUlouidnkRhKUQMJy7foktSk=",
+      "dev": true
+    },
+    "expand-brackets": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
+      "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
+      "dev": true,
+      "requires": {
+        "is-posix-bracket": "^0.1.0"
+      }
+    },
+    "expand-range": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
+      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
+      "dev": true,
+      "requires": {
+        "fill-range": "^2.1.0"
+      }
+    },
+    "expand-tilde": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz",
+      "integrity": "sha1-C4HrqJflo9MdHD0QL48BRB5VlEk=",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.1"
+      }
+    },
+    "extend": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
+      "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=",
+      "dev": true
+    },
+    "extglob": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
+      "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^1.0.0"
+      }
+    },
+    "extsprintf": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz",
+      "integrity": "sha1-4QgOBljjALBilJkMxw4VAiNf1VA=",
+      "dev": true
+    },
+    "fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
+      "dev": true
+    },
+    "faye-websocket": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz",
+      "integrity": "sha1-8O/hjE9W5PQK/H4Gxxn9XuYYjzg=",
+      "dev": true,
+      "requires": {
+        "websocket-driver": ">=0.5.1"
+      }
+    },
+    "filename-regex": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
+      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
+      "dev": true
+    },
+    "fill-range": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
+      "integrity": "sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=",
+      "dev": true,
+      "requires": {
+        "is-number": "^2.1.0",
+        "isobject": "^2.0.0",
+        "randomatic": "^1.1.3",
+        "repeat-element": "^1.1.2",
+        "repeat-string": "^1.5.2"
+      }
+    },
+    "finalhandler": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.5.1.tgz",
+      "integrity": "sha1-LEANjUUwk1vCMlScX6OF7Afeb80=",
+      "dev": true,
+      "requires": {
+        "debug": "~2.2.0",
+        "escape-html": "~1.0.3",
+        "on-finished": "~2.3.0",
+        "statuses": "~1.3.1",
+        "unpipe": "~1.0.0"
+      }
+    },
+    "findup-sync": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.4.3.tgz",
+      "integrity": "sha1-QAQ5Kee8YK3wt/SCfExudaDeyhI=",
+      "dev": true,
+      "requires": {
+        "detect-file": "^0.1.0",
+        "is-glob": "^2.0.1",
+        "micromatch": "^2.3.7",
+        "resolve-dir": "^0.1.0"
+      }
+    },
+    "for-each": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
+      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.3"
+      }
+    },
+    "for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
+      "dev": true
+    },
+    "for-own": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
+      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
+      "dev": true,
+      "requires": {
+        "for-in": "^1.0.1"
+      }
+    },
+    "foreach": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
+      "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=",
+      "dev": true
+    },
+    "forever-agent": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+      "dev": true
+    },
+    "form-data": {
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
+      "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
+      "dev": true,
+      "requires": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.5",
+        "mime-types": "^2.1.12"
+      }
+    },
+    "fresh": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.0.tgz",
+      "integrity": "sha1-9HTKXmqSRtb9jglTz6m5yAWvp44=",
+      "dev": true
+    },
+    "from": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
+      "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=",
+      "dev": true
+    },
+    "fs-exists-sync": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
+      "integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=",
+      "dev": true
+    },
+    "fs.realpath": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+      "dev": true
+    },
+    "fsevents": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.1.tgz",
+      "integrity": "sha1-8Z/Sj0Pur3YWgOUZogPE0LPTGv8=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "nan": "^2.3.0",
+        "node-pre-gyp": "^0.6.29"
+      },
+      "dependencies": {
+        "abbrev": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
+          "integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8=",
+          "dev": true,
+          "optional": true
+        },
+        "ansi-regex": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+          "dev": true
+        },
+        "ansi-styles": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
+          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
+          "dev": true,
+          "optional": true
+        },
+        "aproba": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.1.tgz",
+          "integrity": "sha1-ldNgDwdxCqDpKYxyatXs8urLq6s=",
+          "dev": true,
+          "optional": true
+        },
+        "are-we-there-yet": {
+          "version": "1.1.2",
+          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz",
+          "integrity": "sha1-gORw6VoIR5T+GJkmLFZnxuiN4bM=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "delegates": "^1.0.0",
+            "readable-stream": "^2.0.0 || ^1.1.13"
+          }
+        },
+        "asn1": {
+          "version": "0.2.3",
+          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
+          "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=",
+          "dev": true,
+          "optional": true
+        },
+        "assert-plus": {
+          "version": "0.2.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
+          "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
+          "dev": true,
+          "optional": true
+        },
+        "asynckit": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+          "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
+          "dev": true,
+          "optional": true
+        },
+        "aws-sign2": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
+          "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
+          "dev": true,
+          "optional": true
+        },
+        "aws4": {
+          "version": "1.6.0",
+          "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
+          "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
+          "dev": true,
+          "optional": true
+        },
+        "balanced-match": {
+          "version": "0.4.2",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
+          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
+          "dev": true
+        },
+        "bcrypt-pbkdf": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
+          "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "tweetnacl": "^0.14.3"
+          }
+        },
+        "block-stream": {
+          "version": "0.0.9",
+          "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
+          "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
+          "dev": true,
+          "requires": {
+            "inherits": "~2.0.0"
+          }
+        },
+        "boom": {
+          "version": "2.10.1",
+          "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
+          "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
+          "dev": true,
+          "requires": {
+            "hoek": "2.x.x"
+          }
+        },
+        "brace-expansion": {
+          "version": "1.1.6",
+          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.6.tgz",
+          "integrity": "sha1-cZfX6qm4fmSDkOph/GbIRCdCDfk=",
+          "dev": true,
+          "requires": {
+            "balanced-match": "^0.4.1",
+            "concat-map": "0.0.1"
+          }
+        },
+        "buffer-shims": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz",
+          "integrity": "sha1-mXjOMXOIxkmth5MCjDR37wRKi1E=",
+          "dev": true
+        },
+        "caseless": {
+          "version": "0.11.0",
+          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
+          "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=",
+          "dev": true,
+          "optional": true
+        },
+        "chalk": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
+          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-styles": "^2.2.1",
+            "escape-string-regexp": "^1.0.2",
+            "has-ansi": "^2.0.0",
+            "strip-ansi": "^3.0.0",
+            "supports-color": "^2.0.0"
+          }
+        },
+        "code-point-at": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+          "dev": true
+        },
+        "combined-stream": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
+          "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
+          "dev": true,
+          "requires": {
+            "delayed-stream": "~1.0.0"
+          }
+        },
+        "commander": {
+          "version": "2.9.0",
+          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
+          "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "graceful-readlink": ">= 1.0.0"
+          }
+        },
+        "concat-map": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
+          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
+          "dev": true
+        },
+        "console-control-strings": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+          "dev": true
+        },
+        "core-util-is": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
+          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
+          "dev": true
+        },
+        "cryptiles": {
+          "version": "2.0.5",
+          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
+          "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "boom": "2.x.x"
+          }
+        },
+        "dashdash": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
+          "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "^1.0.0"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+              "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "debug": {
+          "version": "2.2.0",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
+          "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ms": "0.7.1"
+          }
+        },
+        "deep-extend": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.1.tgz",
+          "integrity": "sha1-7+QRPQgIX05vlod1mBD4B0aeIlM=",
+          "dev": true,
+          "optional": true
+        },
+        "delayed-stream": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+          "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
+          "dev": true
+        },
+        "delegates": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+          "dev": true,
+          "optional": true
+        },
+        "ecc-jsbn": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
+          "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "~0.1.0"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+          "dev": true,
+          "optional": true
+        },
+        "extend": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.0.tgz",
+          "integrity": "sha1-WkdDU7nzNT3dgXbf03uRyDpG8dQ=",
+          "dev": true,
+          "optional": true
+        },
+        "extsprintf": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz",
+          "integrity": "sha1-4QgOBljjALBilJkMxw4VAiNf1VA=",
+          "dev": true
+        },
+        "forever-agent": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
+          "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
+          "dev": true,
+          "optional": true
+        },
+        "form-data": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.2.tgz",
+          "integrity": "sha1-icNTQAi5fq2ky7FX1Y9vXfAl6uQ=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.5",
+            "mime-types": "^2.1.12"
+          }
+        },
+        "fs.realpath": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
+          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
+          "dev": true
+        },
+        "fstream": {
+          "version": "1.0.10",
+          "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.10.tgz",
+          "integrity": "sha1-YE6Kkv4m/9n2+uMDmdSYThqyKCI=",
+          "dev": true,
+          "requires": {
+            "graceful-fs": "^4.1.2",
+            "inherits": "~2.0.0",
+            "mkdirp": ">=0.5 0",
+            "rimraf": "2"
+          }
+        },
+        "fstream-ignore": {
+          "version": "1.0.5",
+          "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz",
+          "integrity": "sha1-nDHa40dnAY/h0kmyTa2mfQktoQU=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "fstream": "^1.0.0",
+            "inherits": "2",
+            "minimatch": "^3.0.0"
+          }
+        },
+        "gauge": {
+          "version": "2.7.3",
+          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.3.tgz",
+          "integrity": "sha1-HCOFX5YvF7OtPQ3HRD8wRULt/gk=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "aproba": "^1.0.3",
+            "console-control-strings": "^1.0.0",
+            "has-unicode": "^2.0.0",
+            "object-assign": "^4.1.0",
+            "signal-exit": "^3.0.0",
+            "string-width": "^1.0.1",
+            "strip-ansi": "^3.0.1",
+            "wide-align": "^1.1.0"
+          }
+        },
+        "generate-function": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
+          "integrity": "sha1-aFj+fAlpt9TpCTM3ZHrHn2DfvnQ=",
+          "dev": true,
+          "optional": true
+        },
+        "generate-object-property": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
+          "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "is-property": "^1.0.0"
+          }
+        },
+        "getpass": {
+          "version": "0.1.6",
+          "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.6.tgz",
+          "integrity": "sha1-KD/9n8ElaECHUxHBtg6MQBhxEOY=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "^1.0.0"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+              "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "glob": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
+          "integrity": "sha1-gFIR3wT6rxxjo2ADBs31reULLsg=",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.2",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "graceful-fs": {
+          "version": "4.1.11",
+          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+          "dev": true
+        },
+        "graceful-readlink": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+          "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
+          "dev": true,
+          "optional": true
+        },
+        "har-validator": {
+          "version": "2.0.6",
+          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
+          "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "chalk": "^1.1.1",
+            "commander": "^2.9.0",
+            "is-my-json-valid": "^2.12.4",
+            "pinkie-promise": "^2.0.0"
+          }
+        },
+        "has-ansi": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+          "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "has-unicode": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+          "dev": true,
+          "optional": true
+        },
+        "hawk": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+          "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "boom": "2.x.x",
+            "cryptiles": "2.x.x",
+            "hoek": "2.x.x",
+            "sntp": "1.x.x"
+          }
+        },
+        "hoek": {
+          "version": "2.16.3",
+          "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
+          "dev": true
+        },
+        "http-signature": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+          "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "assert-plus": "^0.2.0",
+            "jsprim": "^1.2.2",
+            "sshpk": "^1.7.0"
+          }
+        },
+        "inflight": {
+          "version": "1.0.6",
+          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+          "dev": true,
+          "requires": {
+            "once": "^1.3.0",
+            "wrappy": "1"
+          }
+        },
+        "inherits": {
+          "version": "2.0.3",
+          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+          "dev": true
+        },
+        "ini": {
+          "version": "1.3.4",
+          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
+          "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=",
+          "dev": true,
+          "optional": true
+        },
+        "is-fullwidth-code-point": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+          "dev": true,
+          "requires": {
+            "number-is-nan": "^1.0.0"
+          }
+        },
+        "is-my-json-valid": {
+          "version": "2.15.0",
+          "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz",
+          "integrity": "sha1-k27do8o8IR/ZjzstPgjaQ/eykVs=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "generate-function": "^2.0.0",
+            "generate-object-property": "^1.1.0",
+            "jsonpointer": "^4.0.0",
+            "xtend": "^4.0.0"
+          }
+        },
+        "is-property": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
+          "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=",
+          "dev": true,
+          "optional": true
+        },
+        "is-typedarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+          "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+          "dev": true,
+          "optional": true
+        },
+        "isarray": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+          "dev": true
+        },
+        "isstream": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+          "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+          "dev": true,
+          "optional": true
+        },
+        "jodid25519": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz",
+          "integrity": "sha1-BtSRIlUJNBlHfUJWM2BuDpB4KWc=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "jsbn": "~0.1.0"
+          }
+        },
+        "jsbn": {
+          "version": "0.1.1",
+          "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+          "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+          "dev": true,
+          "optional": true
+        },
+        "json-schema": {
+          "version": "0.2.3",
+          "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+          "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+          "dev": true,
+          "optional": true
+        },
+        "json-stringify-safe": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+          "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+          "dev": true,
+          "optional": true
+        },
+        "jsonpointer": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
+          "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
+          "dev": true,
+          "optional": true
+        },
+        "jsprim": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.3.1.tgz",
+          "integrity": "sha1-KnJW9wQSop7jZwqspiWZTE3P8lI=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "extsprintf": "1.0.2",
+            "json-schema": "0.2.3",
+            "verror": "1.3.6"
+          }
+        },
+        "mime-db": {
+          "version": "1.26.0",
+          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.26.0.tgz",
+          "integrity": "sha1-6v/NDk/Gk1z4E02iRuLmw1MFrf8=",
+          "dev": true
+        },
+        "mime-types": {
+          "version": "2.1.14",
+          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.14.tgz",
+          "integrity": "sha1-9+99l1g/yvO30oK2+LVnnaselO4=",
+          "dev": true,
+          "requires": {
+            "mime-db": "~1.26.0"
+          }
+        },
+        "minimatch": {
+          "version": "3.0.3",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz",
+          "integrity": "sha1-Kk5AkLlrLbBqnX3wEFWmKnfJt3Q=",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^1.0.0"
+          }
+        },
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "dev": true
+        },
+        "mkdirp": {
+          "version": "0.5.1",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+          "dev": true,
+          "requires": {
+            "minimist": "0.0.8"
+          }
+        },
+        "ms": {
+          "version": "0.7.1",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
+          "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
+          "dev": true,
+          "optional": true
+        },
+        "node-pre-gyp": {
+          "version": "0.6.33",
+          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.33.tgz",
+          "integrity": "sha1-ZArFUZj2qSWXLgwWxKwmoDTV7Mk=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "mkdirp": "~0.5.1",
+            "nopt": "~3.0.6",
+            "npmlog": "^4.0.1",
+            "rc": "~1.1.6",
+            "request": "^2.79.0",
+            "rimraf": "~2.5.4",
+            "semver": "~5.3.0",
+            "tar": "~2.2.1",
+            "tar-pack": "~3.3.0"
+          }
+        },
+        "nopt": {
+          "version": "3.0.6",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+          "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "abbrev": "1"
+          }
+        },
+        "npmlog": {
+          "version": "4.0.2",
+          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.0.2.tgz",
+          "integrity": "sha1-0DlQ4OeM4VJ7om0qdZLpNIrD518=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "are-we-there-yet": "~1.1.2",
+            "console-control-strings": "~1.1.0",
+            "gauge": "~2.7.1",
+            "set-blocking": "~2.0.0"
+          }
+        },
+        "number-is-nan": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+          "dev": true
+        },
+        "oauth-sign": {
+          "version": "0.8.2",
+          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
+          "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
+          "dev": true,
+          "optional": true
+        },
+        "object-assign": {
+          "version": "4.1.1",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+          "dev": true,
+          "optional": true
+        },
+        "once": {
+          "version": "1.4.0",
+          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+          "dev": true,
+          "requires": {
+            "wrappy": "1"
+          }
+        },
+        "path-is-absolute": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+          "dev": true
+        },
+        "pinkie": {
+          "version": "2.0.4",
+          "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+          "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
+          "dev": true,
+          "optional": true
+        },
+        "pinkie-promise": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+          "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "pinkie": "^2.0.0"
+          }
+        },
+        "process-nextick-args": {
+          "version": "1.0.7",
+          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+          "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
+          "dev": true
+        },
+        "punycode": {
+          "version": "1.4.1",
+          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+          "dev": true,
+          "optional": true
+        },
+        "qs": {
+          "version": "6.3.1",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.1.tgz",
+          "integrity": "sha1-kYwLO802Z5dyuvE1say0wWUe150=",
+          "dev": true,
+          "optional": true
+        },
+        "rc": {
+          "version": "1.1.7",
+          "resolved": "https://registry.npmjs.org/rc/-/rc-1.1.7.tgz",
+          "integrity": "sha1-xepWS7B6/5/TpbMukGwdOmWUD+o=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "deep-extend": "~0.4.0",
+            "ini": "~1.3.0",
+            "minimist": "^1.2.0",
+            "strip-json-comments": "~2.0.1"
+          },
+          "dependencies": {
+            "minimist": {
+              "version": "1.2.0",
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "readable-stream": {
+          "version": "2.2.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz",
+          "integrity": "sha1-qeb+w8fdqF+LsbO6cChgRVb8gl4=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "buffer-shims": "^1.0.0",
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~1.0.6",
+            "string_decoder": "~0.10.x",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "request": {
+          "version": "2.79.0",
+          "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz",
+          "integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "aws-sign2": "~0.6.0",
+            "aws4": "^1.2.1",
+            "caseless": "~0.11.0",
+            "combined-stream": "~1.0.5",
+            "extend": "~3.0.0",
+            "forever-agent": "~0.6.1",
+            "form-data": "~2.1.1",
+            "har-validator": "~2.0.6",
+            "hawk": "~3.1.3",
+            "http-signature": "~1.1.0",
+            "is-typedarray": "~1.0.0",
+            "isstream": "~0.1.2",
+            "json-stringify-safe": "~5.0.1",
+            "mime-types": "~2.1.7",
+            "oauth-sign": "~0.8.1",
+            "qs": "~6.3.0",
+            "stringstream": "~0.0.4",
+            "tough-cookie": "~2.3.0",
+            "tunnel-agent": "~0.4.1",
+            "uuid": "^3.0.0"
+          }
+        },
+        "rimraf": {
+          "version": "2.5.4",
+          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.5.4.tgz",
+          "integrity": "sha1-loAAk8vxoMhr2VtGJUZ1NcKd+gQ=",
+          "dev": true,
+          "requires": {
+            "glob": "^7.0.5"
+          }
+        },
+        "semver": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
+          "dev": true,
+          "optional": true
+        },
+        "set-blocking": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+          "dev": true,
+          "optional": true
+        },
+        "signal-exit": {
+          "version": "3.0.2",
+          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
+          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
+          "dev": true,
+          "optional": true
+        },
+        "sntp": {
+          "version": "1.0.9",
+          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+          "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "hoek": "2.x.x"
+          }
+        },
+        "sshpk": {
+          "version": "1.10.2",
+          "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.10.2.tgz",
+          "integrity": "sha1-1agEziJpVRVjjnmNviMnPeBwpfo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "asn1": "~0.2.3",
+            "assert-plus": "^1.0.0",
+            "bcrypt-pbkdf": "^1.0.0",
+            "dashdash": "^1.12.0",
+            "ecc-jsbn": "~0.1.1",
+            "getpass": "^0.1.1",
+            "jodid25519": "^1.0.0",
+            "jsbn": "~0.1.0",
+            "tweetnacl": "~0.14.0"
+          },
+          "dependencies": {
+            "assert-plus": {
+              "version": "1.0.0",
+              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+              "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+              "dev": true,
+              "optional": true
+            }
+          }
+        },
+        "string-width": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+          "dev": true,
+          "requires": {
+            "code-point-at": "^1.0.0",
+            "is-fullwidth-code-point": "^1.0.0",
+            "strip-ansi": "^3.0.0"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
+          "dev": true
+        },
+        "stringstream": {
+          "version": "0.0.5",
+          "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
+          "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
+          "dev": true,
+          "optional": true
+        },
+        "strip-ansi": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^2.0.0"
+          }
+        },
+        "strip-json-comments": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+          "dev": true,
+          "optional": true
+        },
+        "supports-color": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
+          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
+          "dev": true,
+          "optional": true
+        },
+        "tar": {
+          "version": "2.2.1",
+          "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
+          "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
+          "dev": true,
+          "requires": {
+            "block-stream": "*",
+            "fstream": "^1.0.2",
+            "inherits": "2"
+          }
+        },
+        "tar-pack": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.3.0.tgz",
+          "integrity": "sha1-MJMYFkGPVa/E0hd1r91nIM7kXa4=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "debug": "~2.2.0",
+            "fstream": "~1.0.10",
+            "fstream-ignore": "~1.0.5",
+            "once": "~1.3.3",
+            "readable-stream": "~2.1.4",
+            "rimraf": "~2.5.1",
+            "tar": "~2.2.1",
+            "uid-number": "~0.0.6"
+          },
+          "dependencies": {
+            "once": {
+              "version": "1.3.3",
+              "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
+              "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "wrappy": "1"
+              }
+            },
+            "readable-stream": {
+              "version": "2.1.5",
+              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.1.5.tgz",
+              "integrity": "sha1-ZvqLcg4UOLNkaB8q0aY8YYRIydA=",
+              "dev": true,
+              "optional": true,
+              "requires": {
+                "buffer-shims": "^1.0.0",
+                "core-util-is": "~1.0.0",
+                "inherits": "~2.0.1",
+                "isarray": "~1.0.0",
+                "process-nextick-args": "~1.0.6",
+                "string_decoder": "~0.10.x",
+                "util-deprecate": "~1.0.1"
+              }
+            }
+          }
+        },
+        "tough-cookie": {
+          "version": "2.3.2",
+          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
+          "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "punycode": "^1.4.1"
+          }
+        },
+        "tunnel-agent": {
+          "version": "0.4.3",
+          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
+          "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=",
+          "dev": true,
+          "optional": true
+        },
+        "tweetnacl": {
+          "version": "0.14.5",
+          "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+          "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+          "dev": true,
+          "optional": true
+        },
+        "uid-number": {
+          "version": "0.0.6",
+          "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
+          "integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=",
+          "dev": true,
+          "optional": true
+        },
+        "util-deprecate": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+          "dev": true
+        },
+        "uuid": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
+          "integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE=",
+          "dev": true,
+          "optional": true
+        },
+        "verror": {
+          "version": "1.3.6",
+          "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
+          "integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "extsprintf": "1.0.2"
+          }
+        },
+        "wide-align": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.0.tgz",
+          "integrity": "sha1-QO3egCpx/qHwcNo+YtzaLnrdlq0=",
+          "dev": true,
+          "optional": true,
+          "requires": {
+            "string-width": "^1.0.1"
+          }
+        },
+        "wrappy": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+          "dev": true
+        },
+        "xtend": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
+          "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "function-bind": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
+      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
+      "dev": true
+    },
+    "getpass": {
+      "version": "0.1.7",
+      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
+      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^1.0.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        }
+      }
+    },
+    "glob": {
+      "version": "5.0.15",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
+      "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=",
+      "dev": true,
+      "requires": {
+        "inflight": "^1.0.4",
+        "inherits": "2",
+        "minimatch": "2 || 3",
+        "once": "^1.3.0",
+        "path-is-absolute": "^1.0.0"
+      }
+    },
+    "glob-base": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
+      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
+      "dev": true,
+      "requires": {
+        "glob-parent": "^2.0.0",
+        "is-glob": "^2.0.0"
+      }
+    },
+    "glob-parent": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
+      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
+      "dev": true,
+      "requires": {
+        "is-glob": "^2.0.0"
+      }
+    },
+    "global-modules": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz",
+      "integrity": "sha1-6lo77ULG1s6ZWk+KEmm12uIjgo0=",
+      "dev": true,
+      "requires": {
+        "global-prefix": "^0.1.4",
+        "is-windows": "^0.2.0"
+      }
+    },
+    "global-prefix": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz",
+      "integrity": "sha1-jTvGuNo8qBEqFg2NSW/wRiv+948=",
+      "dev": true,
+      "requires": {
+        "homedir-polyfill": "^1.0.0",
+        "ini": "^1.3.4",
+        "is-windows": "^0.2.0",
+        "which": "^1.2.12"
+      }
+    },
+    "got": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/got/-/got-3.3.1.tgz",
+      "integrity": "sha1-5dDtSvVfw+701WAHdp2YGSvLLso=",
+      "dev": true,
+      "requires": {
+        "duplexify": "^3.2.0",
+        "infinity-agent": "^2.0.0",
+        "is-redirect": "^1.0.0",
+        "is-stream": "^1.0.0",
+        "lowercase-keys": "^1.0.0",
+        "nested-error-stacks": "^1.0.0",
+        "object-assign": "^3.0.0",
+        "prepend-http": "^1.0.0",
+        "read-all-stream": "^3.0.0",
+        "timed-out": "^2.0.0"
+      },
+      "dependencies": {
+        "object-assign": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
+          "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=",
+          "dev": true
+        }
+      }
+    },
+    "graceful-fs": {
+      "version": "4.1.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
+      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
+      "dev": true
+    },
+    "graceful-readlink": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
+      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
+      "dev": true
+    },
+    "handlebars": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.10.tgz",
+      "integrity": "sha1-PTDHGLCaPZbyPqTMH0A8TTup/08=",
+      "dev": true,
+      "requires": {
+        "async": "^1.4.0",
+        "optimist": "^0.6.1",
+        "source-map": "^0.4.4",
+        "uglify-js": "^2.6"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.4.4",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+          "dev": true,
+          "requires": {
+            "amdefine": ">=0.0.4"
+          }
+        }
+      }
+    },
+    "har-schema": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
+      "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=",
+      "dev": true
+    },
+    "har-validator": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
+      "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
+      "dev": true,
+      "requires": {
+        "ajv": "^4.9.1",
+        "har-schema": "^1.0.5"
+      }
+    },
+    "has": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
+      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
+      "dev": true,
+      "requires": {
+        "function-bind": "^1.1.1"
+      }
+    },
+    "has-ansi": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
+      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "has-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
+      "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
+      "dev": true
+    },
+    "hawk": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
+      "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
+      "dev": true,
+      "requires": {
+        "boom": "2.x.x",
+        "cryptiles": "2.x.x",
+        "hoek": "2.x.x",
+        "sntp": "1.x.x"
+      }
+    },
+    "hoek": {
+      "version": "2.16.3",
+      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
+      "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
+      "dev": true
+    },
+    "homedir-polyfill": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz",
+      "integrity": "sha1-TCu8inWJmP7r9e1oWA921GdotLw=",
+      "dev": true,
+      "requires": {
+        "parse-passwd": "^1.0.0"
+      }
+    },
+    "html-encoding-sniffer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz",
+      "integrity": "sha1-eb96eF6klf5mFl5zQVPzY/9UN9o=",
+      "dev": true,
+      "requires": {
+        "whatwg-encoding": "^1.0.1"
+      }
+    },
+    "http-auth": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/http-auth/-/http-auth-3.1.3.tgz",
+      "integrity": "sha1-lFz63WZSHq+PfISRPTd9exXyTjE=",
+      "dev": true,
+      "requires": {
+        "apache-crypt": "^1.1.2",
+        "apache-md5": "^1.0.6",
+        "bcryptjs": "^2.3.0",
+        "uuid": "^3.0.0"
+      }
+    },
+    "http-errors": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.1.tgz",
+      "integrity": "sha1-X4uO2YrKVFZWv1cplzh/kEpyIlc=",
+      "dev": true,
+      "requires": {
+        "depd": "1.1.0",
+        "inherits": "2.0.3",
+        "setprototypeof": "1.0.3",
+        "statuses": ">= 1.3.1 < 2"
+      }
+    },
+    "http-signature": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
+      "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "^0.2.0",
+        "jsprim": "^1.2.2",
+        "sshpk": "^1.7.0"
+      }
+    },
+    "iconv-lite": {
+      "version": "0.4.13",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz",
+      "integrity": "sha1-H4irpKsLFQjoMSrMOTRfNumS4vI=",
+      "dev": true
+    },
+    "ignore-by-default": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
+      "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
+      "dev": true
+    },
+    "imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
+      "dev": true
+    },
+    "infinity-agent": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/infinity-agent/-/infinity-agent-2.0.3.tgz",
+      "integrity": "sha1-ReDi/3qesDCyfWK3SzdEt6esQhY=",
+      "dev": true
+    },
+    "inflight": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
+      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
+      "dev": true,
+      "requires": {
+        "once": "^1.3.0",
+        "wrappy": "1"
+      }
+    },
+    "inherits": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
+      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
+      "dev": true
+    },
+    "ini": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
+      "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=",
+      "dev": true
+    },
+    "is-binary-path": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
+      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
+      "dev": true,
+      "requires": {
+        "binary-extensions": "^1.0.0"
+      }
+    },
+    "is-buffer": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz",
+      "integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=",
+      "dev": true
+    },
+    "is-callable": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
+      "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==",
+      "dev": true
+    },
+    "is-date-object": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
+      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
+      "dev": true
+    },
+    "is-dotfile": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
+      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
+      "dev": true
+    },
+    "is-equal-shallow": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
+      "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=",
+      "dev": true,
+      "requires": {
+        "is-primitive": "^2.0.0"
+      }
+    },
+    "is-extendable": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
+      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
+      "dev": true
+    },
+    "is-extglob": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
+      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
+      "dev": true
+    },
+    "is-finite": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
+      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
+      "dev": true,
+      "requires": {
+        "number-is-nan": "^1.0.0"
+      }
+    },
+    "is-glob": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
+      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
+      "dev": true,
+      "requires": {
+        "is-extglob": "^1.0.0"
+      }
+    },
+    "is-npm": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
+      "integrity": "sha1-8vtjpl5JBbQGyGBydloaTceTufQ=",
+      "dev": true
+    },
+    "is-number": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
+      "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
+      "dev": true,
+      "requires": {
+        "kind-of": "^3.0.2"
+      }
+    },
+    "is-posix-bracket": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
+      "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=",
+      "dev": true
+    },
+    "is-primitive": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
+      "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
+      "dev": true
+    },
+    "is-redirect": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
+      "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=",
+      "dev": true
+    },
+    "is-regex": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
+      "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.1"
+      }
+    },
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
+      "dev": true
+    },
+    "is-symbol": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.1.tgz",
+      "integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI=",
+      "dev": true
+    },
+    "is-typedarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
+      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
+      "dev": true
+    },
+    "is-windows": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
+      "integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=",
+      "dev": true
+    },
+    "is-wsl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
+      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
+      "dev": true
+    },
+    "isarray": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
+      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
+      "dev": true
+    },
+    "isexe": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
+      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
+      "dev": true
+    },
+    "isobject": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
+      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
+      "dev": true,
+      "requires": {
+        "isarray": "1.0.0"
+      }
+    },
+    "isstream": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
+      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
+      "dev": true
+    },
+    "istanbul": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/istanbul/-/istanbul-0.4.5.tgz",
+      "integrity": "sha1-ZcfXPUxNqE1POsMQuRj7C4Azczs=",
+      "dev": true,
+      "requires": {
+        "abbrev": "1.0.x",
+        "async": "1.x",
+        "escodegen": "1.8.x",
+        "esprima": "2.7.x",
+        "glob": "^5.0.15",
+        "handlebars": "^4.0.1",
+        "js-yaml": "3.x",
+        "mkdirp": "0.5.x",
+        "nopt": "3.x",
+        "once": "1.x",
+        "resolve": "1.1.x",
+        "supports-color": "^3.1.0",
+        "which": "^1.1.1",
+        "wordwrap": "^1.0.0"
+      }
+    },
+    "js-reporters": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/js-reporters/-/js-reporters-1.2.0.tgz",
+      "integrity": "sha1-fPLLaYGWaEeQNQ0MTKB/Su2ewX4=",
+      "dev": true
+    },
+    "js-yaml": {
+      "version": "3.8.4",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.8.4.tgz",
+      "integrity": "sha1-UgtFZPhlc7qWZir4Woyvp7S1pvY=",
+      "dev": true,
+      "requires": {
+        "argparse": "^1.0.7",
+        "esprima": "^3.1.1"
+      },
+      "dependencies": {
+        "esprima": {
+          "version": "3.1.3",
+          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
+          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
+          "dev": true
+        }
+      }
+    },
+    "jsbn": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
+      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
+      "dev": true,
+      "optional": true
+    },
+    "jsdom": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.0.0.tgz",
+      "integrity": "sha1-HuUHyywLFsh1ACR2sahVfZUTU+U=",
+      "dev": true,
+      "requires": {
+        "abab": "^1.0.3",
+        "acorn": "^4.0.4",
+        "acorn-globals": "^3.1.0",
+        "array-equal": "^1.0.0",
+        "content-type-parser": "^1.0.1",
+        "cssom": ">= 0.3.2 < 0.4.0",
+        "cssstyle": ">= 0.2.37 < 0.3.0",
+        "escodegen": "^1.6.1",
+        "html-encoding-sniffer": "^1.0.1",
+        "nwmatcher": ">= 1.3.9 < 2.0.0",
+        "parse5": "^3.0.2",
+        "pn": "^1.0.0",
+        "request": "^2.79.0",
+        "request-promise-native": "^1.0.3",
+        "sax": "^1.2.1",
+        "symbol-tree": "^3.2.1",
+        "tough-cookie": "^2.3.2",
+        "webidl-conversions": "^4.0.0",
+        "whatwg-encoding": "^1.0.1",
+        "whatwg-url": "^4.3.0",
+        "xml-name-validator": "^2.0.1"
+      }
+    },
+    "jsdom-global": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/jsdom-global/-/jsdom-global-3.0.2.tgz",
+      "integrity": "sha1-a9KZwTsMRiay2iwDk81DhdYGrLk=",
+      "dev": true
+    },
+    "json-schema": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
+      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
+      "dev": true
+    },
+    "json-stable-stringify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
+      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
+      "dev": true,
+      "requires": {
+        "jsonify": "~0.0.0"
+      }
+    },
+    "json-stringify-safe": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
+      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
+      "dev": true
+    },
+    "jsonify": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
+      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
+      "dev": true
+    },
+    "jsprim": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
+      "integrity": "sha1-o7h+QCmNjDgFUtjMdiigu5WiKRg=",
+      "dev": true,
+      "requires": {
+        "assert-plus": "1.0.0",
+        "extsprintf": "1.0.2",
+        "json-schema": "0.2.3",
+        "verror": "1.3.6"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        }
+      }
+    },
+    "kind-of": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+      "dev": true,
+      "requires": {
+        "is-buffer": "^1.1.5"
+      }
+    },
+    "latest-version": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-1.0.1.tgz",
+      "integrity": "sha1-cs/Ebj6NG+ZR4eu1Tqn26pbzdLs=",
+      "dev": true,
+      "requires": {
+        "package-json": "^1.0.0"
+      }
+    },
+    "lazy-cache": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+      "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
+      "dev": true,
+      "optional": true
+    },
+    "levn": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
+      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2"
+      }
+    },
+    "live-server": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/live-server/-/live-server-1.2.0.tgz",
+      "integrity": "sha1-RJhkS7+Bpm8Y3Y3/3vYcTBw3TKM=",
+      "dev": true,
+      "requires": {
+        "chokidar": "^1.6.0",
+        "colors": "^1.1.2",
+        "connect": "3.5.x",
+        "cors": "^2.8.3",
+        "event-stream": "^3.3.4",
+        "faye-websocket": "0.11.x",
+        "http-auth": "3.1.x",
+        "morgan": "^1.6.1",
+        "object-assign": "^4.1.1",
+        "opn": "^5.1.0",
+        "proxy-middleware": "^0.15.0",
+        "send": "^0.15.3",
+        "serve-index": "^1.7.2"
+      }
+    },
+    "lodash": {
+      "version": "4.17.4",
+      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
+      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
+      "dev": true
+    },
+    "lodash._baseassign": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz",
+      "integrity": "sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=",
+      "dev": true,
+      "requires": {
+        "lodash._basecopy": "^3.0.0",
+        "lodash.keys": "^3.0.0"
+      }
+    },
+    "lodash._basecopy": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
+      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
+      "dev": true
+    },
+    "lodash._bindcallback": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz",
+      "integrity": "sha1-5THCdkTPi1epnhftlbNcdIeJOS4=",
+      "dev": true
+    },
+    "lodash._createassigner": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz",
+      "integrity": "sha1-g4pbri/aymOsIt7o4Z+k5taXCxE=",
+      "dev": true,
+      "requires": {
+        "lodash._bindcallback": "^3.0.0",
+        "lodash._isiterateecall": "^3.0.0",
+        "lodash.restparam": "^3.0.0"
+      }
+    },
+    "lodash._getnative": {
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
+      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
+      "dev": true
+    },
+    "lodash._isiterateecall": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
+      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
+      "dev": true
+    },
+    "lodash.assign": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-3.2.0.tgz",
+      "integrity": "sha1-POnwI0tLIiPilrj6CsH+6OvKZPo=",
+      "dev": true,
+      "requires": {
+        "lodash._baseassign": "^3.0.0",
+        "lodash._createassigner": "^3.0.0",
+        "lodash.keys": "^3.0.0"
+      }
+    },
+    "lodash.defaults": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-3.1.2.tgz",
+      "integrity": "sha1-xzCLGNv4vJNy1wGnNJPGEZK9Liw=",
+      "dev": true,
+      "requires": {
+        "lodash.assign": "^3.0.0",
+        "lodash.restparam": "^3.0.0"
+      }
+    },
+    "lodash.isarguments": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
+      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
+      "dev": true
+    },
+    "lodash.isarray": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
+      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
+      "dev": true
+    },
+    "lodash.keys": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
+      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
+      "dev": true,
+      "requires": {
+        "lodash._getnative": "^3.0.0",
+        "lodash.isarguments": "^3.0.0",
+        "lodash.isarray": "^3.0.0"
+      }
+    },
+    "lodash.restparam": {
+      "version": "3.6.1",
+      "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
+      "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=",
+      "dev": true
+    },
+    "longest": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
+      "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
+      "dev": true
+    },
+    "lowercase-keys": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
+      "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=",
+      "dev": true
+    },
+    "lru-cache": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.0.tgz",
+      "integrity": "sha1-Wb5JpoO42YapOfHKYP22mJ9LIEY=",
+      "dev": true,
+      "requires": {
+        "pseudomap": "^1.0.1",
+        "yallist": "^2.0.0"
+      }
+    },
+    "map-stream": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
+      "integrity": "sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=",
+      "dev": true
+    },
+    "matcher-collection": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/matcher-collection/-/matcher-collection-1.0.4.tgz",
+      "integrity": "sha1-L2auCGmZbynkPQtiyD3R1D5YF1U=",
+      "dev": true,
+      "requires": {
+        "minimatch": "^3.0.2"
+      }
+    },
+    "micromatch": {
+      "version": "2.3.11",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
+      "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
+      "dev": true,
+      "requires": {
+        "arr-diff": "^2.0.0",
+        "array-unique": "^0.2.1",
+        "braces": "^1.8.2",
+        "expand-brackets": "^0.1.4",
+        "extglob": "^0.3.1",
+        "filename-regex": "^2.0.0",
+        "is-extglob": "^1.0.0",
+        "is-glob": "^2.0.1",
+        "kind-of": "^3.0.2",
+        "normalize-path": "^2.0.1",
+        "object.omit": "^2.0.0",
+        "parse-glob": "^3.0.4",
+        "regex-cache": "^0.4.2"
+      }
+    },
+    "mime": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz",
+      "integrity": "sha1-EV+eO2s9rylZmDyzjxSaLUDrXVM=",
+      "dev": true
+    },
+    "mime-db": {
+      "version": "1.27.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.27.0.tgz",
+      "integrity": "sha1-gg9XIpa70g7CXtVeW13oaeVDbrE=",
+      "dev": true
+    },
+    "mime-types": {
+      "version": "2.1.15",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.15.tgz",
+      "integrity": "sha1-pOv1BkCUVpI3uM9wBGd20J/JKu0=",
+      "dev": true,
+      "requires": {
+        "mime-db": "~1.27.0"
+      }
+    },
+    "minimatch": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
+      "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
+      "dev": true,
+      "requires": {
+        "brace-expansion": "^1.1.7"
+      }
+    },
+    "minimist": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
+      "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
+      "dev": true
+    },
+    "mkdirp": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
+      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+      "dev": true,
+      "requires": {
+        "minimist": "0.0.8"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "0.0.8",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
+          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
+          "dev": true
+        }
+      }
+    },
+    "morgan": {
+      "version": "1.8.2",
+      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.8.2.tgz",
+      "integrity": "sha1-eErHc05KRTqcbm6GgKkyknXItoc=",
+      "dev": true,
+      "requires": {
+        "basic-auth": "~1.1.0",
+        "debug": "2.6.8",
+        "depd": "~1.1.0",
+        "on-finished": "~2.3.0",
+        "on-headers": "~1.0.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.8",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
+          "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "ms": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
+      "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
+      "dev": true
+    },
+    "nan": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.6.2.tgz",
+      "integrity": "sha1-5P805slf37WuzAjeZZb0NgWn20U=",
+      "dev": true,
+      "optional": true
+    },
+    "negotiator": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
+      "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
+      "dev": true
+    },
+    "nested-error-stacks": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-1.0.2.tgz",
+      "integrity": "sha1-GfYZWRUZ8JZ2mlupqG5u7sgjw88=",
+      "dev": true,
+      "requires": {
+        "inherits": "~2.0.1"
+      }
+    },
+    "nodemon": {
+      "version": "1.11.0",
+      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-1.11.0.tgz",
+      "integrity": "sha1-ImxWK9KnsT09dRi0mtSCijYj0Gw=",
+      "dev": true,
+      "requires": {
+        "chokidar": "^1.4.3",
+        "debug": "^2.2.0",
+        "es6-promise": "^3.0.2",
+        "ignore-by-default": "^1.0.0",
+        "lodash.defaults": "^3.1.2",
+        "minimatch": "^3.0.0",
+        "ps-tree": "^1.0.1",
+        "touch": "1.0.0",
+        "undefsafe": "0.0.3",
+        "update-notifier": "0.5.0"
+      }
+    },
+    "nopt": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
+      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
+      "dev": true,
+      "requires": {
+        "abbrev": "1"
+      }
+    },
+    "normalize-path": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
+      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
+      "dev": true,
+      "requires": {
+        "remove-trailing-separator": "^1.0.1"
+      }
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "dev": true
+    },
+    "nwmatcher": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.0.tgz",
+      "integrity": "sha1-tDiTYhcOfvl5jDx3FtgOvAEG/M8=",
+      "dev": true
+    },
+    "oauth-sign": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
+      "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
+      "dev": true
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
+      "dev": true
+    },
+    "object-inspect": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz",
+      "integrity": "sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==",
+      "dev": true
+    },
+    "object-keys": {
+      "version": "1.0.12",
+      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
+      "integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==",
+      "dev": true
+    },
+    "object.omit": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
+      "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=",
+      "dev": true,
+      "requires": {
+        "for-own": "^0.1.4",
+        "is-extendable": "^0.1.1"
+      }
+    },
+    "on-finished": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
+      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
+      "dev": true,
+      "requires": {
+        "ee-first": "1.1.1"
+      }
+    },
+    "on-headers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.1.tgz",
+      "integrity": "sha1-ko9dD0cNSTQmUepnlLCFfBAGk/c=",
+      "dev": true
+    },
+    "once": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
+      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
+      "dev": true,
+      "requires": {
+        "wrappy": "1"
+      }
+    },
+    "opn": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/opn/-/opn-5.1.0.tgz",
+      "integrity": "sha1-cs4jBqF9vqWP8QQYUzUrSo/HdRk=",
+      "dev": true,
+      "requires": {
+        "is-wsl": "^1.1.0"
+      }
+    },
+    "optimist": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
+      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
+      "dev": true,
+      "requires": {
+        "minimist": "~0.0.1",
+        "wordwrap": "~0.0.2"
+      },
+      "dependencies": {
+        "wordwrap": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
+          "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
+          "dev": true
+        }
+      }
+    },
+    "optionator": {
+      "version": "0.8.2",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
+      "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
+      "dev": true,
+      "requires": {
+        "deep-is": "~0.1.3",
+        "fast-levenshtein": "~2.0.4",
+        "levn": "~0.3.0",
+        "prelude-ls": "~1.1.2",
+        "type-check": "~0.3.2",
+        "wordwrap": "~1.0.0"
+      }
+    },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "dev": true
+    },
+    "os-shim": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/os-shim/-/os-shim-0.1.3.tgz",
+      "integrity": "sha1-a2LDeRz3kJ6jXtRuF2WLtBfLORc=",
+      "dev": true
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "dev": true
+    },
+    "osenv": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz",
+      "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
+    "package-json": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/package-json/-/package-json-1.2.0.tgz",
+      "integrity": "sha1-yOysCUInzfdqMWh07QXifMk5oOA=",
+      "dev": true,
+      "requires": {
+        "got": "^3.2.0",
+        "registry-url": "^3.0.0"
+      }
+    },
+    "parse-glob": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
+      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
+      "dev": true,
+      "requires": {
+        "glob-base": "^0.3.0",
+        "is-dotfile": "^1.0.0",
+        "is-extglob": "^1.0.0",
+        "is-glob": "^2.0.0"
+      }
+    },
+    "parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
+      "dev": true
+    },
+    "parse5": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.2.tgz",
+      "integrity": "sha1-Be/1fw70V3+xRKefi5qWemzERRA=",
+      "dev": true,
+      "requires": {
+        "@types/node": "^6.0.46"
+      }
+    },
+    "parseurl": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.1.tgz",
+      "integrity": "sha1-yKuMkiO6NIiKpkopeyiFO+wY2lY=",
+      "dev": true
+    },
+    "path-is-absolute": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
+      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
+      "dev": true
+    },
+    "path-parse": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz",
+      "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=",
+      "dev": true
+    },
+    "pause-stream": {
+      "version": "0.0.11",
+      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
+      "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=",
+      "dev": true,
+      "requires": {
+        "through": "~2.3"
+      }
+    },
+    "performance-now": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
+      "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=",
+      "dev": true
+    },
+    "pinkie": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
+      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
+      "dev": true
+    },
+    "pinkie-promise": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
+      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
+      "dev": true,
+      "requires": {
+        "pinkie": "^2.0.0"
+      }
+    },
+    "pn": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/pn/-/pn-1.0.0.tgz",
+      "integrity": "sha1-HPWjCw2AbNGPiPxBprXUrWFbO6k=",
+      "dev": true
+    },
+    "pre-commit": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/pre-commit/-/pre-commit-1.2.2.tgz",
+      "integrity": "sha1-287g7p3nI15X95xW186UZBpp7sY=",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^5.0.1",
+        "spawn-sync": "^1.0.15",
+        "which": "1.2.x"
+      }
+    },
+    "prelude-ls": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
+      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
+      "dev": true
+    },
+    "prepend-http": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
+      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
+      "dev": true
+    },
+    "preserve": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
+      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
+      "dev": true
+    },
+    "process-nextick-args": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
+      "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
+      "dev": true
+    },
+    "proxy-middleware": {
+      "version": "0.15.0",
+      "resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.15.0.tgz",
+      "integrity": "sha1-o/3xvvtzD5UZZYcqwvYHTGFHelY=",
+      "dev": true
+    },
+    "ps-tree": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/ps-tree/-/ps-tree-1.1.0.tgz",
+      "integrity": "sha1-tCGyQUDWID8e08dplrRCewjowBQ=",
+      "dev": true,
+      "requires": {
+        "event-stream": "~3.3.0"
+      }
+    },
+    "pseudomap": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
+      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
+      "dev": true
+    },
+    "punycode": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
+      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
+      "dev": true
+    },
+    "qs": {
+      "version": "6.4.0",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
+      "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=",
+      "dev": true
+    },
+    "qunit-tap": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/qunit-tap/-/qunit-tap-1.5.1.tgz",
+      "integrity": "sha1-KflRnFb6ne8y+WgXEVFcQe0jHpE=",
+      "dev": true
+    },
+    "qunitjs": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/qunitjs/-/qunitjs-2.3.3.tgz",
+      "integrity": "sha1-RWaWvdYaLItbyPBT8A4g11pz1Tk=",
+      "dev": true,
+      "requires": {
+        "chokidar": "1.6.1",
+        "commander": "2.9.0",
+        "exists-stat": "1.0.0",
+        "findup-sync": "0.4.3",
+        "js-reporters": "1.2.0",
+        "resolve": "1.3.2",
+        "walk-sync": "0.3.1"
+      },
+      "dependencies": {
+        "chokidar": {
+          "version": "1.6.1",
+          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.6.1.tgz",
+          "integrity": "sha1-L0RHq16W5Q+z14n9kNTHLg5McMI=",
+          "dev": true,
+          "requires": {
+            "anymatch": "^1.3.0",
+            "async-each": "^1.0.0",
+            "fsevents": "^1.0.0",
+            "glob-parent": "^2.0.0",
+            "inherits": "^2.0.1",
+            "is-binary-path": "^1.0.0",
+            "is-glob": "^2.0.0",
+            "path-is-absolute": "^1.0.0",
+            "readdirp": "^2.0.0"
+          }
+        },
+        "resolve": {
+          "version": "1.3.2",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.3.2.tgz",
+          "integrity": "sha1-HwRCyeDLuBNuh7kwX5MvRsfygjU=",
+          "dev": true,
+          "requires": {
+            "path-parse": "^1.0.5"
+          }
+        }
+      }
+    },
+    "randomatic": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",
+      "integrity": "sha1-x6vpzIuHwLqodrGf3oP9RkeX44w=",
+      "dev": true,
+      "requires": {
+        "is-number": "^3.0.0",
+        "kind-of": "^4.0.0"
+      },
+      "dependencies": {
+        "is-number": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
+          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
+          "dev": true,
+          "requires": {
+            "kind-of": "^3.0.2"
+          },
+          "dependencies": {
+            "kind-of": {
+              "version": "3.2.2",
+              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+              "dev": true,
+              "requires": {
+                "is-buffer": "^1.1.5"
+              }
+            }
+          }
+        },
+        "kind-of": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
+          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
+          "dev": true,
+          "requires": {
+            "is-buffer": "^1.1.5"
+          }
+        }
+      }
+    },
+    "range-parser": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
+      "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
+      "dev": true
+    },
+    "rc": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.1.tgz",
+      "integrity": "sha1-LgPo5C7kULjLPc5lvhv4l04d/ZU=",
+      "dev": true,
+      "requires": {
+        "deep-extend": "~0.4.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      },
+      "dependencies": {
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "dev": true
+        }
+      }
+    },
+    "read-all-stream": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz",
+      "integrity": "sha1-NcPhd/IHjveJ7kv6+kNzB06u9Po=",
+      "dev": true,
+      "requires": {
+        "pinkie-promise": "^2.0.0",
+        "readable-stream": "^2.0.0"
+      }
+    },
+    "readable-stream": {
+      "version": "2.2.11",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.11.tgz",
+      "integrity": "sha1-B5azH412iAB/8Lk6gIjTSqF8D3I=",
+      "dev": true,
+      "requires": {
+        "core-util-is": "~1.0.0",
+        "inherits": "~2.0.1",
+        "isarray": "~1.0.0",
+        "process-nextick-args": "~1.0.6",
+        "safe-buffer": "~5.0.1",
+        "string_decoder": "~1.0.0",
+        "util-deprecate": "~1.0.1"
+      }
+    },
+    "readdirp": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.1.0.tgz",
+      "integrity": "sha1-TtCtBg3zBzMAxIRANz9y0cxkLXg=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.2",
+        "minimatch": "^3.0.2",
+        "readable-stream": "^2.0.2",
+        "set-immediate-shim": "^1.0.1"
+      }
+    },
+    "regex-cache": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.3.tgz",
+      "integrity": "sha1-mxpsNdTQ3871cRrmUejp09cRQUU=",
+      "dev": true,
+      "requires": {
+        "is-equal-shallow": "^0.1.3",
+        "is-primitive": "^2.0.0"
+      }
+    },
+    "registry-url": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
+      "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=",
+      "dev": true,
+      "requires": {
+        "rc": "^1.0.1"
+      }
+    },
+    "remove-trailing-separator": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.0.2.tgz",
+      "integrity": "sha1-abBi2XhyetFNxrVrpKt3L9jXBRE=",
+      "dev": true
+    },
+    "repeat-element": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
+      "integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=",
+      "dev": true
+    },
+    "repeat-string": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
+      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
+      "dev": true
+    },
+    "repeating": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/repeating/-/repeating-1.1.3.tgz",
+      "integrity": "sha1-PUEUIYh3U3SU+X93+Xhfq4EPpKw=",
+      "dev": true,
+      "requires": {
+        "is-finite": "^1.0.0"
+      }
+    },
+    "request": {
+      "version": "2.81.0",
+      "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
+      "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
+      "dev": true,
+      "requires": {
+        "aws-sign2": "~0.6.0",
+        "aws4": "^1.2.1",
+        "caseless": "~0.12.0",
+        "combined-stream": "~1.0.5",
+        "extend": "~3.0.0",
+        "forever-agent": "~0.6.1",
+        "form-data": "~2.1.1",
+        "har-validator": "~4.2.1",
+        "hawk": "~3.1.3",
+        "http-signature": "~1.1.0",
+        "is-typedarray": "~1.0.0",
+        "isstream": "~0.1.2",
+        "json-stringify-safe": "~5.0.1",
+        "mime-types": "~2.1.7",
+        "oauth-sign": "~0.8.1",
+        "performance-now": "^0.2.0",
+        "qs": "~6.4.0",
+        "safe-buffer": "^5.0.1",
+        "stringstream": "~0.0.4",
+        "tough-cookie": "~2.3.0",
+        "tunnel-agent": "^0.6.0",
+        "uuid": "^3.0.0"
+      }
+    },
+    "request-promise-core": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.1.tgz",
+      "integrity": "sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=",
+      "dev": true,
+      "requires": {
+        "lodash": "^4.13.1"
+      }
+    },
+    "request-promise-native": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.4.tgz",
+      "integrity": "sha1-hpiOyO7kCORVefzoO/0Fs635oVU=",
+      "dev": true,
+      "requires": {
+        "request-promise-core": "1.1.1",
+        "stealthy-require": "^1.1.0",
+        "tough-cookie": ">=2.3.0"
+      }
+    },
+    "resolve": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
+      "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
+      "dev": true
+    },
+    "resolve-dir": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz",
+      "integrity": "sha1-shklmlYC+sXFxJatiUpujMQwJh4=",
+      "dev": true,
+      "requires": {
+        "expand-tilde": "^1.2.2",
+        "global-modules": "^0.2.3"
+      }
+    },
+    "resumer": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/resumer/-/resumer-0.0.0.tgz",
+      "integrity": "sha1-8ej0YeQGS6Oegq883CqMiT0HZ1k=",
+      "dev": true,
+      "requires": {
+        "through": "~2.3.4"
+      }
+    },
+    "right-align": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+      "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "align-text": "^0.1.1"
+      }
+    },
+    "safe-buffer": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz",
+      "integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c=",
+      "dev": true
+    },
+    "sax": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.2.tgz",
+      "integrity": "sha1-/YYxojvHgmvvXYcb24c3jJVkeCg=",
+      "dev": true
+    },
+    "semver": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
+      "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
+      "dev": true
+    },
+    "semver-diff": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz",
+      "integrity": "sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=",
+      "dev": true,
+      "requires": {
+        "semver": "^5.0.3"
+      }
+    },
+    "send": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/send/-/send-0.15.3.tgz",
+      "integrity": "sha1-UBP5+ZAj31DRvZiSwZ4979HVMwk=",
+      "dev": true,
+      "requires": {
+        "debug": "2.6.7",
+        "depd": "~1.1.0",
+        "destroy": "~1.0.4",
+        "encodeurl": "~1.0.1",
+        "escape-html": "~1.0.3",
+        "etag": "~1.8.0",
+        "fresh": "0.5.0",
+        "http-errors": "~1.6.1",
+        "mime": "1.3.4",
+        "ms": "2.0.0",
+        "on-finished": "~2.3.0",
+        "range-parser": "~1.2.0",
+        "statuses": "~1.3.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.7.tgz",
+          "integrity": "sha1-krrR9tBbu2u6Isyoi80OyJTChh4=",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "serve-index": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.0.tgz",
+      "integrity": "sha1-0rKA/FYNYW7oG0i/D6gqvtJIXOc=",
+      "dev": true,
+      "requires": {
+        "accepts": "~1.3.3",
+        "batch": "0.6.1",
+        "debug": "2.6.8",
+        "escape-html": "~1.0.3",
+        "http-errors": "~1.6.1",
+        "mime-types": "~2.1.15",
+        "parseurl": "~1.3.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "2.6.8",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
+          "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
+          "dev": true,
+          "requires": {
+            "ms": "2.0.0"
+          }
+        },
+        "ms": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
+          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
+          "dev": true
+        }
+      }
+    },
+    "set-immediate-shim": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
+      "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=",
+      "dev": true
+    },
+    "setprototypeof": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
+      "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=",
+      "dev": true
+    },
+    "shebang-command": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
+      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
+      "dev": true,
+      "requires": {
+        "shebang-regex": "^1.0.0"
+      }
+    },
+    "shebang-regex": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
+      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
+      "dev": true
+    },
+    "slide": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
+      "integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=",
+      "dev": true
+    },
+    "sntp": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
+      "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
+      "dev": true,
+      "requires": {
+        "hoek": "2.x.x"
+      }
+    },
+    "source-map": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.2.0.tgz",
+      "integrity": "sha1-2rc/vPwrqBm03gO9b26qSBZLP50=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "amdefine": ">=0.0.4"
+      }
+    },
+    "spawn-sync": {
+      "version": "1.0.15",
+      "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz",
+      "integrity": "sha1-sAeZVX63+wyDdsKdROih6mfldHY=",
+      "dev": true,
+      "requires": {
+        "concat-stream": "^1.4.7",
+        "os-shim": "^0.1.2"
+      }
+    },
+    "split": {
+      "version": "0.3.3",
+      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
+      "integrity": "sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=",
+      "dev": true,
+      "requires": {
+        "through": "2"
+      }
+    },
+    "sprintf-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
+      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
+      "dev": true
+    },
+    "sshpk": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz",
+      "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
+      "dev": true,
+      "requires": {
+        "asn1": "~0.2.3",
+        "assert-plus": "^1.0.0",
+        "bcrypt-pbkdf": "^1.0.0",
+        "dashdash": "^1.12.0",
+        "ecc-jsbn": "~0.1.1",
+        "getpass": "^0.1.1",
+        "jsbn": "~0.1.0",
+        "tweetnacl": "~0.14.0"
+      },
+      "dependencies": {
+        "assert-plus": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
+          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
+          "dev": true
+        }
+      }
+    },
+    "statuses": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
+      "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=",
+      "dev": true
+    },
+    "stealthy-require": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
+      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
+      "dev": true
+    },
+    "stream-combiner": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
+      "integrity": "sha1-TV5DPBhSYd3mI8o/RMWGvPXErRQ=",
+      "dev": true,
+      "requires": {
+        "duplexer": "~0.1.1"
+      }
+    },
+    "stream-shift": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
+      "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=",
+      "dev": true
+    },
+    "string-length": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
+      "integrity": "sha1-VpcPscOFWOnnC3KL894mmsRa36w=",
+      "dev": true,
+      "requires": {
+        "strip-ansi": "^3.0.0"
+      }
+    },
+    "string.prototype.trim": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz",
+      "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.2",
+        "es-abstract": "^1.5.0",
+        "function-bind": "^1.0.2"
+      }
+    },
+    "string_decoder": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.2.tgz",
+      "integrity": "sha1-sp4fThEl+pehA4K4pTNze3SR4Xk=",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "~5.0.1"
+      }
+    },
+    "stringstream": {
+      "version": "0.0.5",
+      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
+      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
+      "dev": true
+    },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "dev": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "dev": true
+    },
+    "supports-color": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
+      "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
+      "dev": true,
+      "requires": {
+        "has-flag": "^1.0.0"
+      }
+    },
+    "symbol-tree": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
+      "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=",
+      "dev": true
+    },
+    "tape": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/tape/-/tape-4.9.1.tgz",
+      "integrity": "sha512-6fKIXknLpoe/Jp4rzHKFPpJUHDHDqn8jus99IfPnHIjyz78HYlefTGD3b5EkbQzuLfaEvmfPK3IolLgq2xT3kw==",
+      "dev": true,
+      "requires": {
+        "deep-equal": "~1.0.1",
+        "defined": "~1.0.0",
+        "for-each": "~0.3.3",
+        "function-bind": "~1.1.1",
+        "glob": "~7.1.2",
+        "has": "~1.0.3",
+        "inherits": "~2.0.3",
+        "minimist": "~1.2.0",
+        "object-inspect": "~1.6.0",
+        "resolve": "~1.7.1",
+        "resumer": "~0.0.0",
+        "string.prototype.trim": "~1.1.2",
+        "through": "~2.3.8"
+      },
+      "dependencies": {
+        "glob": {
+          "version": "7.1.2",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
+          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
+          "dev": true,
+          "requires": {
+            "fs.realpath": "^1.0.0",
+            "inflight": "^1.0.4",
+            "inherits": "2",
+            "minimatch": "^3.0.4",
+            "once": "^1.3.0",
+            "path-is-absolute": "^1.0.0"
+          }
+        },
+        "minimist": {
+          "version": "1.2.0",
+          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
+          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+          "dev": true
+        },
+        "resolve": {
+          "version": "1.7.1",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz",
+          "integrity": "sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==",
+          "dev": true,
+          "requires": {
+            "path-parse": "^1.0.5"
+          }
+        }
+      }
+    },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
+      "dev": true
+    },
+    "timed-out": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-2.0.0.tgz",
+      "integrity": "sha1-84sK6B03R9YoAB9B2vxlKs5nHAo=",
+      "dev": true
+    },
+    "touch": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/touch/-/touch-1.0.0.tgz",
+      "integrity": "sha1-RJy+LbrlqMgDjjDXH6D/RklHxN4=",
+      "dev": true,
+      "requires": {
+        "nopt": "~1.0.10"
+      },
+      "dependencies": {
+        "nopt": {
+          "version": "1.0.10",
+          "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
+          "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
+          "dev": true,
+          "requires": {
+            "abbrev": "1"
+          }
+        }
+      }
+    },
+    "tough-cookie": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
+      "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=",
+      "dev": true,
+      "requires": {
+        "punycode": "^1.4.1"
+      }
+    },
+    "tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
+      "dev": true
+    },
+    "tunnel-agent": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
+      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
+      "dev": true,
+      "requires": {
+        "safe-buffer": "^5.0.1"
+      }
+    },
+    "tweetnacl": {
+      "version": "0.14.5",
+      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
+      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
+      "dev": true,
+      "optional": true
+    },
+    "type-check": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
+      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
+      "dev": true,
+      "requires": {
+        "prelude-ls": "~1.1.2"
+      }
+    },
+    "typedarray": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
+      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
+      "dev": true
+    },
+    "uglify-js": {
+      "version": "2.8.28",
+      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.28.tgz",
+      "integrity": "sha1-4zUDLfm7INy5GPFkWJ1a9H84g0o=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "source-map": "~0.5.1",
+        "uglify-to-browserify": "~1.0.0",
+        "yargs": "~3.10.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
+          "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
+          "dev": true,
+          "optional": true
+        }
+      }
+    },
+    "uglify-to-browserify": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+      "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
+      "dev": true,
+      "optional": true
+    },
+    "undefsafe": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-0.0.3.tgz",
+      "integrity": "sha1-7Mo6A+VrmvFzhbqsgSrIO5lKli8=",
+      "dev": true
+    },
+    "unix-crypt-td-js": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unix-crypt-td-js/-/unix-crypt-td-js-1.0.0.tgz",
+      "integrity": "sha1-HAgkFQSBvHoB1J6Y8exmjYJBLzs=",
+      "dev": true
+    },
+    "unpipe": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
+      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
+      "dev": true
+    },
+    "update-notifier": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-0.5.0.tgz",
+      "integrity": "sha1-B7XcIGazYnqztPUwEw9+3doHpMw=",
+      "dev": true,
+      "requires": {
+        "chalk": "^1.0.0",
+        "configstore": "^1.0.0",
+        "is-npm": "^1.0.0",
+        "latest-version": "^1.0.0",
+        "repeating": "^1.1.2",
+        "semver-diff": "^2.0.0",
+        "string-length": "^1.0.0"
+      }
+    },
+    "util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
+      "dev": true
+    },
+    "utils-merge": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
+      "integrity": "sha1-ApT7kiu5N1FTVBxPcJYjHyh8ivg=",
+      "dev": true
+    },
+    "uuid": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
+      "integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE=",
+      "dev": true
+    },
+    "vary": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.1.tgz",
+      "integrity": "sha1-Z1Neu2lMHVIldFeYRmUyP1h+jTc=",
+      "dev": true
+    },
+    "verror": {
+      "version": "1.3.6",
+      "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
+      "integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=",
+      "dev": true,
+      "requires": {
+        "extsprintf": "1.0.2"
+      }
+    },
+    "walk-sync": {
+      "version": "0.3.1",
+      "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-0.3.1.tgz",
+      "integrity": "sha1-VYoWrqyMDbWcAotzxm85doTs5GU=",
+      "dev": true,
+      "requires": {
+        "ensure-posix-path": "^1.0.0",
+        "matcher-collection": "^1.0.0"
+      }
+    },
+    "webidl-conversions": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.1.tgz",
+      "integrity": "sha1-gBWherg+fhsxFjhIas6B2mziBqA=",
+      "dev": true
+    },
+    "websocket-driver": {
+      "version": "0.6.5",
+      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",
+      "integrity": "sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=",
+      "dev": true,
+      "requires": {
+        "websocket-extensions": ">=0.1.1"
+      }
+    },
+    "websocket-extensions": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.1.tgz",
+      "integrity": "sha1-domUmcGEtu91Q3fC27DNbLVdKec=",
+      "dev": true
+    },
+    "whatwg-encoding": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.1.tgz",
+      "integrity": "sha1-PGxFGhmO567FWx7GHQkgxngBpfQ=",
+      "dev": true,
+      "requires": {
+        "iconv-lite": "0.4.13"
+      }
+    },
+    "whatwg-url": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-4.8.0.tgz",
+      "integrity": "sha1-0pgaqRSMHgCkHFphMRZqtGg7vMA=",
+      "dev": true,
+      "requires": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      },
+      "dependencies": {
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
+          "dev": true
+        }
+      }
+    },
+    "which": {
+      "version": "1.2.14",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.2.14.tgz",
+      "integrity": "sha1-mofEN48D6CfOyvGs31bHNsAcFOU=",
+      "dev": true,
+      "requires": {
+        "isexe": "^2.0.0"
+      }
+    },
+    "window-size": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+      "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
+      "dev": true,
+      "optional": true
+    },
+    "wordwrap": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
+      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
+      "dev": true
+    },
+    "wrappy": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
+      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
+      "dev": true
+    },
+    "write-file-atomic": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-1.3.4.tgz",
+      "integrity": "sha1-+Aek8LHZ6ROuekgRLmzDrxmRtF8=",
+      "dev": true,
+      "requires": {
+        "graceful-fs": "^4.1.11",
+        "imurmurhash": "^0.1.4",
+        "slide": "^1.1.5"
+      }
+    },
+    "xdg-basedir": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",
+      "integrity": "sha1-7byQPMOF/ARSPZZqM1UEtVBNG9I=",
+      "dev": true,
+      "requires": {
+        "os-homedir": "^1.0.0"
+      }
+    },
+    "xml-name-validator": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz",
+      "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=",
+      "dev": true
+    },
+    "yallist": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
+      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
+      "dev": true
+    },
+    "yargs": {
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+      "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "camelcase": "^1.0.2",
+        "cliui": "^2.1.0",
+        "decamelize": "^1.0.0",
+        "window-size": "0.1.0"
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
index 7ca6e665..fe91a1e3 100644
--- a/package.json
+++ b/package.json
@@ -10,8 +10,10 @@
   },
   "author": "@dwyl & friends!",
   "devDependencies": {
+    "decache": "^4.4.0",
     "istanbul": "^0.4.5",
     "jsdom": "^11.0.0",
+    "jsdom-global": "^3.0.2",
     "live-server": "^1.2.0",
     "nodemon": "^1.11.0",
     "pre-commit": "^1.2.2",
diff --git a/test/counter-reset.test.js b/test/counter-reset.test.js
index 18450357..6ab9e196 100644
--- a/test/counter-reset.test.js
+++ b/test/counter-reset.test.js
@@ -1,24 +1,24 @@
 const test = require('tape'); // see: https://github.com/dwyl/learn-tape
 const fs = require('fs');
 const path = require('path');
-const { JSDOM } = require("jsdom"); // https://github.com/jsdom/jsdom
-
 const html = fs.readFileSync(path.resolve(__dirname,
   '../examples/counter-reset/index.html'));
-const DOM = new JSDOM(html); // create DOM based on HTML
-const id = 'test-app';
-const document = DOM.window.document; // shortcut to JSDOM document
+require('jsdom-global')(html);
 const counter = require(path.resolve(__dirname,
   '../examples/counter-reset/counter.js'));
 const { view, mount, update, div, button, empty, init} = counter;
 init(document); // pass the JSDOM into counter.js
+const id = 'test-app';
 
 test('Mount app expect state to be Zero', function (t) {
+  // console.log('mount', mount);
   mount(0, update, view, id);
+  console.log('document.getElementById(id)', document.getElementById(id), document.getElementById(id).childElementCount);
   var actual = document.getElementById(id).textContent;
+  console.log('actual:', actual);
   var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
   var expected = 0;
-  t.equal(expected, actual_stripped, "Inital state set to 0.");
+  t.equal(actual_stripped, expected, "Inital state set to 0.");
   t.end()
 });
 
@@ -42,6 +42,7 @@ test('Test Update decrement: update(3, "dec") returns 2', function (t) {
 
 
 test('click on "+" button (increment model by 1)', function (t) {
+  console.log('document', typeof document, document);
   document.body.appendChild(div(id));
   mount(7, update, view, id);
 
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 02b92d32..8e67c936 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -1,17 +1,13 @@
 const test = require('tape');         // https://github.com/dwyl/learn-tape
 const fs = require('fs');
 const path = require('path');
-require('decache')('jsdom');          // https://github.com/dwyl/decache
-const JSDOM = require("jsdom").JSDOM; // https://github.com/jsdom/jsdom
 const elmish = require(path.resolve(__dirname,
   '../examples/todo-list/elmish.js'))
 const html = fs.readFileSync(path.resolve(__dirname,
   '../examples/todo-list/index.html'));
-const DOM = new JSDOM(html); // create DOM based on HTML
-const id = 'test-app';
-const document = DOM.window.document; // shortcut to JSDOM document
+require('jsdom-global')(html); // https://github.com/rstacruz/jsdom-global
 elmish.init(document); // pass the JSDOM into counter.js
-// const { view, mount, update, div, button, empty, init} = counter;
+const id = 'test-app';
 
 test('empty("root") removes DOM elements from container', function (t) {
   // setup the test div:
diff --git a/todo-list.md b/todo-list.md
index 292bac03..f115c4f3 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -67,7 +67,7 @@ by opening a question you help _everyone_ learn more effectively!
 _Before_ diving into _building_ the Todo List App,
 we need to consider how we are going to _test_ it.
 By ensuring that we follow **TDD** from the _start_ of an App,
-we won't need to "correct" any "**bad habits**".
+we _avoid_ having to "correct" any "**bad habits**".
 
 We will be using **Tape** and **JSDOM** for testing
 both our functions and the final application.
@@ -77,6 +77,9 @@ please see:
 and
 [front-end-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
 
+
+
+
 ### _Analyse_
 
 Our _first_ step is to _analyse_ the required functionality of a Todo List.

From eeec661985e13d0546b5c7de7fa159f64782360e Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 14 Jul 2018 18:29:52 +0100
Subject: [PATCH 012/164] use view & update from counter-reset example to test
 elmish.mount generic function for #44

---
 examples/counter-reset/counter.js |    3 -
 examples/todo-list/elmish.js      |   10 +-
 package-lock.json                 | 4209 -----------------------------
 test/elmish.test.js               |   32 +-
 4 files changed, 32 insertions(+), 4222 deletions(-)
 delete mode 100644 package-lock.json

diff --git a/examples/counter-reset/counter.js b/examples/counter-reset/counter.js
index 1a918af2..40bba1dc 100644
--- a/examples/counter-reset/counter.js
+++ b/examples/counter-reset/counter.js
@@ -20,14 +20,11 @@ function view(signal, model, root) {
     button('-', signal, Dec),                  // decrement counter
     button('Reset', signal, Res)               // reset counter
   ].forEach(function(el){ root.appendChild(el) }); // forEach is ES5 so IE9+
-  console.log(">> root.childElementCount:", root.childElementCount);
 } // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
 
 // Mount Function receives all MUV and mounts the app in the "root" DOM Element
 function mount(model, update, view, root_element_id) {
-  console.log('>> root_element_id:', root_element_id)
   var root = document.getElementById(root_element_id); // root DOM element
-  console.log('>> root:', root)
   function signal(action) {          // signal function takes action
     return function callback() {     // and returns callback
       model = update(model, action); // update model according to action
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index a6c76801..72380046 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -19,7 +19,14 @@ function empty(node) {
   return true;
 }
 
-// Mount Function receives all MUV and mounts the app in the "root" DOM Element
+/**
+ * `mount` mounts the app in the "root" DOM Element.
+ * @param  {Object} model store of the application's state.
+ * @param  {Function} update how the application state is updated ("controller")
+ * @param  {Function} view function that renders HTML/DOM elements with model.
+ * @param  {String} root_element_id root DOM element in which the app is mounted
+ * @return {Boolean} returns true once app has been mounted.
+ */
 function mount(model, update, view, root_element_id) {
   var root = document.getElementById(root_element_id); // root DOM element
   function signal(action) {                     // signal function takes action
@@ -30,6 +37,7 @@ function mount(model, update, view, root_element_id) {
     };
   };
   view(signal, model, root);                    // render initial model (once)
+  return true;
 }
 
 function init(doc){
diff --git a/package-lock.json b/package-lock.json
deleted file mode 100644
index 72a0ea5a..00000000
--- a/package-lock.json
+++ /dev/null
@@ -1,4209 +0,0 @@
-{
-  "name": "learn-elm-architecture-in-javascript",
-  "version": "1.0.1",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@types/node": {
-      "version": "6.0.78",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-6.0.78.tgz",
-      "integrity": "sha1-XUo/V5wVJOAe4hv0dOb7oJGY9HA=",
-      "dev": true
-    },
-    "abab": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.3.tgz",
-      "integrity": "sha1-uB3l9ydOxOdW15fNg08wNkJyTl0=",
-      "dev": true
-    },
-    "abbrev": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.0.9.tgz",
-      "integrity": "sha1-kbR5JYinc4wl813W9jdSovh3YTU=",
-      "dev": true
-    },
-    "accepts": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/accepts/-/accepts-1.3.3.tgz",
-      "integrity": "sha1-w8p0NJOGSMPg2cHjKN1otiLChMo=",
-      "dev": true,
-      "requires": {
-        "mime-types": "~2.1.11",
-        "negotiator": "0.6.1"
-      }
-    },
-    "acorn": {
-      "version": "4.0.13",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-4.0.13.tgz",
-      "integrity": "sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=",
-      "dev": true
-    },
-    "acorn-globals": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/acorn-globals/-/acorn-globals-3.1.0.tgz",
-      "integrity": "sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=",
-      "dev": true,
-      "requires": {
-        "acorn": "^4.0.4"
-      }
-    },
-    "ajv": {
-      "version": "4.11.8",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
-      "integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
-      "dev": true,
-      "requires": {
-        "co": "^4.6.0",
-        "json-stable-stringify": "^1.0.1"
-      }
-    },
-    "align-text": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
-      "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2",
-        "longest": "^1.0.1",
-        "repeat-string": "^1.5.2"
-      }
-    },
-    "amdefine": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-      "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
-      "dev": true
-    },
-    "ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true
-    },
-    "ansi-styles": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-      "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-      "dev": true
-    },
-    "anymatch": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-1.3.0.tgz",
-      "integrity": "sha1-o+Uvo5FoyCX/V7AkgSbOWo/5VQc=",
-      "dev": true,
-      "requires": {
-        "arrify": "^1.0.0",
-        "micromatch": "^2.1.5"
-      }
-    },
-    "apache-crypt": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/apache-crypt/-/apache-crypt-1.2.1.tgz",
-      "integrity": "sha1-1vxyqm0n2ZyVqU/RiNcx7v/6Zjw=",
-      "dev": true,
-      "requires": {
-        "unix-crypt-td-js": "^1.0.0"
-      }
-    },
-    "apache-md5": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/apache-md5/-/apache-md5-1.1.2.tgz",
-      "integrity": "sha1-7klza2ObTxCLbp5ibG2pkwa0FpI=",
-      "dev": true
-    },
-    "argparse": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.9.tgz",
-      "integrity": "sha1-c9g7wmP4bpf4zE9rrhsOkKfSLIY=",
-      "dev": true,
-      "requires": {
-        "sprintf-js": "~1.0.2"
-      }
-    },
-    "arr-diff": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-2.0.0.tgz",
-      "integrity": "sha1-jzuCf5Vai9ZpaX5KQlasPOrjVs8=",
-      "dev": true,
-      "requires": {
-        "arr-flatten": "^1.0.1"
-      }
-    },
-    "arr-flatten": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/arr-flatten/-/arr-flatten-1.0.3.tgz",
-      "integrity": "sha1-onTthawIhJtr14R8RYB0XcUa37E=",
-      "dev": true
-    },
-    "array-equal": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/array-equal/-/array-equal-1.0.0.tgz",
-      "integrity": "sha1-jCpe8kcv2ep0KwTHenUJO6J1fJM=",
-      "dev": true
-    },
-    "array-unique": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/array-unique/-/array-unique-0.2.1.tgz",
-      "integrity": "sha1-odl8yvy8JiXMcPrc6zalDFiwGlM=",
-      "dev": true
-    },
-    "arrify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
-      "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
-      "dev": true
-    },
-    "asn1": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
-      "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=",
-      "dev": true
-    },
-    "assert-plus": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
-      "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
-      "dev": true
-    },
-    "async": {
-      "version": "1.5.2",
-      "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
-      "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=",
-      "dev": true
-    },
-    "async-each": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.1.tgz",
-      "integrity": "sha1-GdOGodntxufByF04iu28xW0zYC0=",
-      "dev": true
-    },
-    "asynckit": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
-    },
-    "aws-sign2": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
-      "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
-      "dev": true
-    },
-    "aws4": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
-      "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
-      "dev": true
-    },
-    "balanced-match": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
-      "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
-      "dev": true
-    },
-    "basic-auth": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/basic-auth/-/basic-auth-1.1.0.tgz",
-      "integrity": "sha1-RSIe5Cn37h5QNb4/UVM/HN/SmIQ=",
-      "dev": true
-    },
-    "batch": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/batch/-/batch-0.6.1.tgz",
-      "integrity": "sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=",
-      "dev": true
-    },
-    "bcrypt-pbkdf": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
-      "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "tweetnacl": "^0.14.3"
-      }
-    },
-    "bcryptjs": {
-      "version": "2.4.3",
-      "resolved": "https://registry.npmjs.org/bcryptjs/-/bcryptjs-2.4.3.tgz",
-      "integrity": "sha1-mrVie5PmBiH/fNrF2pczAn3x0Ms=",
-      "dev": true
-    },
-    "binary-extensions": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-1.8.0.tgz",
-      "integrity": "sha1-SOyNFt9Dd+rl+liEaCSAr02Vx3Q=",
-      "dev": true
-    },
-    "boom": {
-      "version": "2.10.1",
-      "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
-      "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
-      "dev": true,
-      "requires": {
-        "hoek": "2.x.x"
-      }
-    },
-    "brace-expansion": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.7.tgz",
-      "integrity": "sha1-Pv/DxQ4ABTH7cg6v+A8K6O8jz1k=",
-      "dev": true,
-      "requires": {
-        "balanced-match": "^0.4.1",
-        "concat-map": "0.0.1"
-      }
-    },
-    "braces": {
-      "version": "1.8.5",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-1.8.5.tgz",
-      "integrity": "sha1-uneWLhLf+WnWt2cR6RS3N4V79qc=",
-      "dev": true,
-      "requires": {
-        "expand-range": "^1.8.1",
-        "preserve": "^0.2.0",
-        "repeat-element": "^1.1.2"
-      }
-    },
-    "callsite": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/callsite/-/callsite-1.0.0.tgz",
-      "integrity": "sha1-KAOY5dZkvXQDi28JBRU+borxvCA=",
-      "dev": true
-    },
-    "camelcase": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
-      "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
-      "dev": true,
-      "optional": true
-    },
-    "caseless": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
-      "integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
-      "dev": true
-    },
-    "center-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
-      "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "align-text": "^0.1.3",
-        "lazy-cache": "^1.0.3"
-      }
-    },
-    "chalk": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-      "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-      "dev": true,
-      "requires": {
-        "ansi-styles": "^2.2.1",
-        "escape-string-regexp": "^1.0.2",
-        "has-ansi": "^2.0.0",
-        "strip-ansi": "^3.0.0",
-        "supports-color": "^2.0.0"
-      },
-      "dependencies": {
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-          "dev": true
-        }
-      }
-    },
-    "chokidar": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.7.0.tgz",
-      "integrity": "sha1-eY5ol3gVHIB2tLNg5e3SjNortGg=",
-      "dev": true,
-      "requires": {
-        "anymatch": "^1.3.0",
-        "async-each": "^1.0.0",
-        "fsevents": "^1.0.0",
-        "glob-parent": "^2.0.0",
-        "inherits": "^2.0.1",
-        "is-binary-path": "^1.0.0",
-        "is-glob": "^2.0.0",
-        "path-is-absolute": "^1.0.0",
-        "readdirp": "^2.0.0"
-      }
-    },
-    "cliui": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
-      "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "center-align": "^0.1.1",
-        "right-align": "^0.1.1",
-        "wordwrap": "0.0.2"
-      },
-      "dependencies": {
-        "wordwrap": {
-          "version": "0.0.2",
-          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
-          "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "co": {
-      "version": "4.6.0",
-      "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
-      "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
-      "dev": true
-    },
-    "colors": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/colors/-/colors-1.1.2.tgz",
-      "integrity": "sha1-FopHAXVran9RoSzgyXv6KMCE7WM=",
-      "dev": true
-    },
-    "combined-stream": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
-      "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
-      "dev": true,
-      "requires": {
-        "delayed-stream": "~1.0.0"
-      }
-    },
-    "commander": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
-      "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
-      "dev": true,
-      "requires": {
-        "graceful-readlink": ">= 1.0.0"
-      }
-    },
-    "concat-map": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-      "dev": true
-    },
-    "concat-stream": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.0.tgz",
-      "integrity": "sha1-CqxmL9Ur54lk1VMvaUeE5wEQrPc=",
-      "dev": true,
-      "requires": {
-        "inherits": "^2.0.3",
-        "readable-stream": "^2.2.2",
-        "typedarray": "^0.0.6"
-      }
-    },
-    "configstore": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/configstore/-/configstore-1.4.0.tgz",
-      "integrity": "sha1-w1eB0FAdJowlxUuLF/YkDopPsCE=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "mkdirp": "^0.5.0",
-        "object-assign": "^4.0.1",
-        "os-tmpdir": "^1.0.0",
-        "osenv": "^0.1.0",
-        "uuid": "^2.0.1",
-        "write-file-atomic": "^1.1.2",
-        "xdg-basedir": "^2.0.0"
-      },
-      "dependencies": {
-        "uuid": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-2.0.3.tgz",
-          "integrity": "sha1-Z+LoY3lyFVMN/zGOW/nc6/1Hsho=",
-          "dev": true
-        }
-      }
-    },
-    "connect": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/connect/-/connect-3.5.1.tgz",
-      "integrity": "sha1-bTDXpjx/FwhXprOqazY9lz3KWI4=",
-      "dev": true,
-      "requires": {
-        "debug": "~2.2.0",
-        "finalhandler": "0.5.1",
-        "parseurl": "~1.3.1",
-        "utils-merge": "1.0.0"
-      }
-    },
-    "content-type-parser": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/content-type-parser/-/content-type-parser-1.0.1.tgz",
-      "integrity": "sha1-w+VpiMU8ZRJ/tG1AMqOpACRv3JQ=",
-      "dev": true
-    },
-    "core-util-is": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-      "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-      "dev": true
-    },
-    "cors": {
-      "version": "2.8.3",
-      "resolved": "https://registry.npmjs.org/cors/-/cors-2.8.3.tgz",
-      "integrity": "sha1-TPeOHSMymnSWsvwiJbd8pbteuAI=",
-      "dev": true,
-      "requires": {
-        "object-assign": "^4",
-        "vary": "^1"
-      }
-    },
-    "cross-spawn": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-5.1.0.tgz",
-      "integrity": "sha1-6L0O/uWPz/b4+UUQoKVUu/ojVEk=",
-      "dev": true,
-      "requires": {
-        "lru-cache": "^4.0.1",
-        "shebang-command": "^1.2.0",
-        "which": "^1.2.9"
-      }
-    },
-    "cryptiles": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
-      "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
-      "dev": true,
-      "requires": {
-        "boom": "2.x.x"
-      }
-    },
-    "cssom": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.3.2.tgz",
-      "integrity": "sha1-uANhcMefB6kP8vFuIihAJ6JDhIs=",
-      "dev": true
-    },
-    "cssstyle": {
-      "version": "0.2.37",
-      "resolved": "https://registry.npmjs.org/cssstyle/-/cssstyle-0.2.37.tgz",
-      "integrity": "sha1-VBCXI0yyUTyDzu06zdwn/yeYfVQ=",
-      "dev": true,
-      "requires": {
-        "cssom": "0.3.x"
-      }
-    },
-    "dashdash": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-      "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "^1.0.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "debug": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
-      "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
-      "dev": true,
-      "requires": {
-        "ms": "0.7.1"
-      }
-    },
-    "decache": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/decache/-/decache-4.4.0.tgz",
-      "integrity": "sha1-b232uF1+fEQQqTL/wmSJt46azRM=",
-      "dev": true,
-      "requires": {
-        "callsite": "^1.0.0"
-      }
-    },
-    "decamelize": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-      "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-      "dev": true,
-      "optional": true
-    },
-    "deep-equal": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.0.1.tgz",
-      "integrity": "sha1-9dJgKStmDghO/0zbyfCK0yR0SLU=",
-      "dev": true
-    },
-    "deep-extend": {
-      "version": "0.4.2",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
-      "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=",
-      "dev": true
-    },
-    "deep-is": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
-      "integrity": "sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=",
-      "dev": true
-    },
-    "define-properties": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.2.tgz",
-      "integrity": "sha1-g6c/L+pWmJj7c3GTyPhzyvbUXJQ=",
-      "dev": true,
-      "requires": {
-        "foreach": "^2.0.5",
-        "object-keys": "^1.0.8"
-      }
-    },
-    "defined": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
-      "dev": true
-    },
-    "delayed-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
-    },
-    "depd": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.0.tgz",
-      "integrity": "sha1-4b2Cxqq2ztlluXuIsX7T5SjKGMM=",
-      "dev": true
-    },
-    "destroy": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
-      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=",
-      "dev": true
-    },
-    "detect-file": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-0.1.0.tgz",
-      "integrity": "sha1-STXe39lIhkjgBrASlWbpOGcR6mM=",
-      "dev": true,
-      "requires": {
-        "fs-exists-sync": "^0.1.0"
-      }
-    },
-    "duplexer": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
-      "integrity": "sha1-rOb/gIwc5mtX0ev5eXessCM0z8E=",
-      "dev": true
-    },
-    "duplexify": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/duplexify/-/duplexify-3.5.0.tgz",
-      "integrity": "sha1-GqdzAC4VeEV+nZ1KULDMquvL1gQ=",
-      "dev": true,
-      "requires": {
-        "end-of-stream": "1.0.0",
-        "inherits": "^2.0.1",
-        "readable-stream": "^2.0.0",
-        "stream-shift": "^1.0.0"
-      }
-    },
-    "ecc-jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
-      "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "jsbn": "~0.1.0"
-      }
-    },
-    "ee-first": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
-      "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
-      "dev": true
-    },
-    "encodeurl": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.1.tgz",
-      "integrity": "sha1-eePVhlU0aQn+bw9Fpd5oEDspTSA=",
-      "dev": true
-    },
-    "end-of-stream": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.0.0.tgz",
-      "integrity": "sha1-1FlucCc0qT5A6a+GQxnqvZn/Lw4=",
-      "dev": true,
-      "requires": {
-        "once": "~1.3.0"
-      },
-      "dependencies": {
-        "once": {
-          "version": "1.3.3",
-          "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-          "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=",
-          "dev": true,
-          "requires": {
-            "wrappy": "1"
-          }
-        }
-      }
-    },
-    "ensure-posix-path": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/ensure-posix-path/-/ensure-posix-path-1.0.2.tgz",
-      "integrity": "sha1-pls+QtC3HPxYXrd0+ZQ8jZuRsMI=",
-      "dev": true
-    },
-    "es-abstract": {
-      "version": "1.12.0",
-      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.12.0.tgz",
-      "integrity": "sha512-C8Fx/0jFmV5IPoMOFPA9P9G5NtqW+4cOPit3MIuvR2t7Ag2K15EJTpxnHAYTzL+aYQJIESYeXZmDBfOBE1HcpA==",
-      "dev": true,
-      "requires": {
-        "es-to-primitive": "^1.1.1",
-        "function-bind": "^1.1.1",
-        "has": "^1.0.1",
-        "is-callable": "^1.1.3",
-        "is-regex": "^1.0.4"
-      }
-    },
-    "es-to-primitive": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.1.1.tgz",
-      "integrity": "sha1-RTVSSKiJeQNLZ5Lhm7gfK3l13Q0=",
-      "dev": true,
-      "requires": {
-        "is-callable": "^1.1.1",
-        "is-date-object": "^1.0.1",
-        "is-symbol": "^1.0.1"
-      }
-    },
-    "es6-promise": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.3.1.tgz",
-      "integrity": "sha1-oIzd6EzNvzTQJ6FFG8kdS80ophM=",
-      "dev": true
-    },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=",
-      "dev": true
-    },
-    "escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-      "dev": true
-    },
-    "escodegen": {
-      "version": "1.8.1",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.8.1.tgz",
-      "integrity": "sha1-WltTr0aTEQvrsIZ6o0MN07cKEBg=",
-      "dev": true,
-      "requires": {
-        "esprima": "^2.7.1",
-        "estraverse": "^1.9.1",
-        "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.2.0"
-      }
-    },
-    "esprima": {
-      "version": "2.7.3",
-      "resolved": "https://registry.npmjs.org/esprima/-/esprima-2.7.3.tgz",
-      "integrity": "sha1-luO3DVd59q1JzQMmc9HDEnZ7pYE=",
-      "dev": true
-    },
-    "estraverse": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-1.9.3.tgz",
-      "integrity": "sha1-r2fy3JIlgkFZUJJgkaQAXSnJu0Q=",
-      "dev": true
-    },
-    "esutils": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.2.tgz",
-      "integrity": "sha1-Cr9PHKpbyx96nYrMbepPqqBLrJs=",
-      "dev": true
-    },
-    "etag": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/etag/-/etag-1.8.0.tgz",
-      "integrity": "sha1-b2Ma7zNtbEY2K1F2QETOIWvjwFE=",
-      "dev": true
-    },
-    "event-stream": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/event-stream/-/event-stream-3.3.4.tgz",
-      "integrity": "sha1-SrTJoPWlTbkzi0w02Gv86PSzVXE=",
-      "dev": true,
-      "requires": {
-        "duplexer": "~0.1.1",
-        "from": "~0",
-        "map-stream": "~0.1.0",
-        "pause-stream": "0.0.11",
-        "split": "0.3",
-        "stream-combiner": "~0.0.4",
-        "through": "~2.3.1"
-      }
-    },
-    "exists-stat": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/exists-stat/-/exists-stat-1.0.0.tgz",
-      "integrity": "sha1-BmDjUlouidnkRhKUQMJy7foktSk=",
-      "dev": true
-    },
-    "expand-brackets": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-0.1.5.tgz",
-      "integrity": "sha1-3wcoTjQqgHzXM6xa9yQR5YHRF3s=",
-      "dev": true,
-      "requires": {
-        "is-posix-bracket": "^0.1.0"
-      }
-    },
-    "expand-range": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/expand-range/-/expand-range-1.8.2.tgz",
-      "integrity": "sha1-opnv/TNf4nIeuujiV+x5ZE/IUzc=",
-      "dev": true,
-      "requires": {
-        "fill-range": "^2.1.0"
-      }
-    },
-    "expand-tilde": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-1.2.2.tgz",
-      "integrity": "sha1-C4HrqJflo9MdHD0QL48BRB5VlEk=",
-      "dev": true,
-      "requires": {
-        "os-homedir": "^1.0.1"
-      }
-    },
-    "extend": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
-      "integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=",
-      "dev": true
-    },
-    "extglob": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/extglob/-/extglob-0.3.2.tgz",
-      "integrity": "sha1-Lhj/PS9JqydlzskCPwEdqo2DSaE=",
-      "dev": true,
-      "requires": {
-        "is-extglob": "^1.0.0"
-      }
-    },
-    "extsprintf": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz",
-      "integrity": "sha1-4QgOBljjALBilJkMxw4VAiNf1VA=",
-      "dev": true
-    },
-    "fast-levenshtein": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
-      "integrity": "sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=",
-      "dev": true
-    },
-    "faye-websocket": {
-      "version": "0.11.1",
-      "resolved": "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.1.tgz",
-      "integrity": "sha1-8O/hjE9W5PQK/H4Gxxn9XuYYjzg=",
-      "dev": true,
-      "requires": {
-        "websocket-driver": ">=0.5.1"
-      }
-    },
-    "filename-regex": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/filename-regex/-/filename-regex-2.0.1.tgz",
-      "integrity": "sha1-wcS5vuPglyXdsQa3XB4wH+LxiyY=",
-      "dev": true
-    },
-    "fill-range": {
-      "version": "2.2.3",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-2.2.3.tgz",
-      "integrity": "sha1-ULd9/X5Gm8dJJHCWNpn+eoSFpyM=",
-      "dev": true,
-      "requires": {
-        "is-number": "^2.1.0",
-        "isobject": "^2.0.0",
-        "randomatic": "^1.1.3",
-        "repeat-element": "^1.1.2",
-        "repeat-string": "^1.5.2"
-      }
-    },
-    "finalhandler": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.5.1.tgz",
-      "integrity": "sha1-LEANjUUwk1vCMlScX6OF7Afeb80=",
-      "dev": true,
-      "requires": {
-        "debug": "~2.2.0",
-        "escape-html": "~1.0.3",
-        "on-finished": "~2.3.0",
-        "statuses": "~1.3.1",
-        "unpipe": "~1.0.0"
-      }
-    },
-    "findup-sync": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-0.4.3.tgz",
-      "integrity": "sha1-QAQ5Kee8YK3wt/SCfExudaDeyhI=",
-      "dev": true,
-      "requires": {
-        "detect-file": "^0.1.0",
-        "is-glob": "^2.0.1",
-        "micromatch": "^2.3.7",
-        "resolve-dir": "^0.1.0"
-      }
-    },
-    "for-each": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz",
-      "integrity": "sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==",
-      "dev": true,
-      "requires": {
-        "is-callable": "^1.1.3"
-      }
-    },
-    "for-in": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
-      "integrity": "sha1-gQaNKVqBQuwKxybG4iAMMPttXoA=",
-      "dev": true
-    },
-    "for-own": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/for-own/-/for-own-0.1.5.tgz",
-      "integrity": "sha1-UmXGgaTylNq78XyVCbZ2OqhFEM4=",
-      "dev": true,
-      "requires": {
-        "for-in": "^1.0.1"
-      }
-    },
-    "foreach": {
-      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/foreach/-/foreach-2.0.5.tgz",
-      "integrity": "sha1-C+4AUBiusmDQo6865ljdATbsG5k=",
-      "dev": true
-    },
-    "forever-agent": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-      "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-      "dev": true
-    },
-    "form-data": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
-      "integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
-      "dev": true,
-      "requires": {
-        "asynckit": "^0.4.0",
-        "combined-stream": "^1.0.5",
-        "mime-types": "^2.1.12"
-      }
-    },
-    "fresh": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/fresh/-/fresh-0.5.0.tgz",
-      "integrity": "sha1-9HTKXmqSRtb9jglTz6m5yAWvp44=",
-      "dev": true
-    },
-    "from": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/from/-/from-0.1.7.tgz",
-      "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=",
-      "dev": true
-    },
-    "fs-exists-sync": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/fs-exists-sync/-/fs-exists-sync-0.1.0.tgz",
-      "integrity": "sha1-mC1ok6+RjnLQjeyehnP/K1qNat0=",
-      "dev": true
-    },
-    "fs.realpath": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-      "dev": true
-    },
-    "fsevents": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.1.1.tgz",
-      "integrity": "sha1-8Z/Sj0Pur3YWgOUZogPE0LPTGv8=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "nan": "^2.3.0",
-        "node-pre-gyp": "^0.6.29"
-      },
-      "dependencies": {
-        "abbrev": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
-          "integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8=",
-          "dev": true,
-          "optional": true
-        },
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
-        },
-        "ansi-styles": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-2.2.1.tgz",
-          "integrity": "sha1-tDLdM1i2NM914eRmQ2gkBTPB3b4=",
-          "dev": true,
-          "optional": true
-        },
-        "aproba": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.1.tgz",
-          "integrity": "sha1-ldNgDwdxCqDpKYxyatXs8urLq6s=",
-          "dev": true,
-          "optional": true
-        },
-        "are-we-there-yet": {
-          "version": "1.1.2",
-          "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.2.tgz",
-          "integrity": "sha1-gORw6VoIR5T+GJkmLFZnxuiN4bM=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "delegates": "^1.0.0",
-            "readable-stream": "^2.0.0 || ^1.1.13"
-          }
-        },
-        "asn1": {
-          "version": "0.2.3",
-          "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
-          "integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=",
-          "dev": true,
-          "optional": true
-        },
-        "assert-plus": {
-          "version": "0.2.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
-          "integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
-          "dev": true,
-          "optional": true
-        },
-        "asynckit": {
-          "version": "0.4.0",
-          "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-          "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-          "dev": true,
-          "optional": true
-        },
-        "aws-sign2": {
-          "version": "0.6.0",
-          "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
-          "integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
-          "dev": true,
-          "optional": true
-        },
-        "aws4": {
-          "version": "1.6.0",
-          "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
-          "integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
-          "dev": true,
-          "optional": true
-        },
-        "balanced-match": {
-          "version": "0.4.2",
-          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
-          "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=",
-          "dev": true
-        },
-        "bcrypt-pbkdf": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
-          "integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "tweetnacl": "^0.14.3"
-          }
-        },
-        "block-stream": {
-          "version": "0.0.9",
-          "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
-          "integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
-          "dev": true,
-          "requires": {
-            "inherits": "~2.0.0"
-          }
-        },
-        "boom": {
-          "version": "2.10.1",
-          "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
-          "integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
-          "dev": true,
-          "requires": {
-            "hoek": "2.x.x"
-          }
-        },
-        "brace-expansion": {
-          "version": "1.1.6",
-          "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.6.tgz",
-          "integrity": "sha1-cZfX6qm4fmSDkOph/GbIRCdCDfk=",
-          "dev": true,
-          "requires": {
-            "balanced-match": "^0.4.1",
-            "concat-map": "0.0.1"
-          }
-        },
-        "buffer-shims": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz",
-          "integrity": "sha1-mXjOMXOIxkmth5MCjDR37wRKi1E=",
-          "dev": true
-        },
-        "caseless": {
-          "version": "0.11.0",
-          "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
-          "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=",
-          "dev": true,
-          "optional": true
-        },
-        "chalk": {
-          "version": "1.1.3",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
-          "integrity": "sha1-qBFcVeSnAv5NFQq9OHKCKn4J/Jg=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-styles": "^2.2.1",
-            "escape-string-regexp": "^1.0.2",
-            "has-ansi": "^2.0.0",
-            "strip-ansi": "^3.0.0",
-            "supports-color": "^2.0.0"
-          }
-        },
-        "code-point-at": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-          "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-          "dev": true
-        },
-        "combined-stream": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
-          "integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
-          "dev": true,
-          "requires": {
-            "delayed-stream": "~1.0.0"
-          }
-        },
-        "commander": {
-          "version": "2.9.0",
-          "resolved": "https://registry.npmjs.org/commander/-/commander-2.9.0.tgz",
-          "integrity": "sha1-nJkJQXbhIkDLItbFFGCYQA/g99Q=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "graceful-readlink": ">= 1.0.0"
-          }
-        },
-        "concat-map": {
-          "version": "0.0.1",
-          "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
-          "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
-          "dev": true
-        },
-        "console-control-strings": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
-          "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
-          "dev": true
-        },
-        "core-util-is": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
-          "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
-          "dev": true
-        },
-        "cryptiles": {
-          "version": "2.0.5",
-          "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
-          "integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "boom": "2.x.x"
-          }
-        },
-        "dashdash": {
-          "version": "1.14.1",
-          "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
-          "integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "assert-plus": "^1.0.0"
-          },
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-              "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "debug": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.2.0.tgz",
-          "integrity": "sha1-+HBX6ZWxofauaklgZkE3vFbwOdo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ms": "0.7.1"
-          }
-        },
-        "deep-extend": {
-          "version": "0.4.1",
-          "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.1.tgz",
-          "integrity": "sha1-7+QRPQgIX05vlod1mBD4B0aeIlM=",
-          "dev": true,
-          "optional": true
-        },
-        "delayed-stream": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-          "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-          "dev": true
-        },
-        "delegates": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
-          "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-          "dev": true,
-          "optional": true
-        },
-        "ecc-jsbn": {
-          "version": "0.1.1",
-          "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
-          "integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "jsbn": "~0.1.0"
-          }
-        },
-        "escape-string-regexp": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-          "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
-          "dev": true,
-          "optional": true
-        },
-        "extend": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.0.tgz",
-          "integrity": "sha1-WkdDU7nzNT3dgXbf03uRyDpG8dQ=",
-          "dev": true,
-          "optional": true
-        },
-        "extsprintf": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz",
-          "integrity": "sha1-4QgOBljjALBilJkMxw4VAiNf1VA=",
-          "dev": true
-        },
-        "forever-agent": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
-          "integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
-          "dev": true,
-          "optional": true
-        },
-        "form-data": {
-          "version": "2.1.2",
-          "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.2.tgz",
-          "integrity": "sha1-icNTQAi5fq2ky7FX1Y9vXfAl6uQ=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "asynckit": "^0.4.0",
-            "combined-stream": "^1.0.5",
-            "mime-types": "^2.1.12"
-          }
-        },
-        "fs.realpath": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
-          "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8=",
-          "dev": true
-        },
-        "fstream": {
-          "version": "1.0.10",
-          "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.10.tgz",
-          "integrity": "sha1-YE6Kkv4m/9n2+uMDmdSYThqyKCI=",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.1.2",
-            "inherits": "~2.0.0",
-            "mkdirp": ">=0.5 0",
-            "rimraf": "2"
-          }
-        },
-        "fstream-ignore": {
-          "version": "1.0.5",
-          "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz",
-          "integrity": "sha1-nDHa40dnAY/h0kmyTa2mfQktoQU=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "fstream": "^1.0.0",
-            "inherits": "2",
-            "minimatch": "^3.0.0"
-          }
-        },
-        "gauge": {
-          "version": "2.7.3",
-          "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.3.tgz",
-          "integrity": "sha1-HCOFX5YvF7OtPQ3HRD8wRULt/gk=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "aproba": "^1.0.3",
-            "console-control-strings": "^1.0.0",
-            "has-unicode": "^2.0.0",
-            "object-assign": "^4.1.0",
-            "signal-exit": "^3.0.0",
-            "string-width": "^1.0.1",
-            "strip-ansi": "^3.0.1",
-            "wide-align": "^1.1.0"
-          }
-        },
-        "generate-function": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/generate-function/-/generate-function-2.0.0.tgz",
-          "integrity": "sha1-aFj+fAlpt9TpCTM3ZHrHn2DfvnQ=",
-          "dev": true,
-          "optional": true
-        },
-        "generate-object-property": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/generate-object-property/-/generate-object-property-1.2.0.tgz",
-          "integrity": "sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "is-property": "^1.0.0"
-          }
-        },
-        "getpass": {
-          "version": "0.1.6",
-          "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.6.tgz",
-          "integrity": "sha1-KD/9n8ElaECHUxHBtg6MQBhxEOY=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "assert-plus": "^1.0.0"
-          },
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-              "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "glob": {
-          "version": "7.1.1",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.1.tgz",
-          "integrity": "sha1-gFIR3wT6rxxjo2ADBs31reULLsg=",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.2",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "graceful-fs": {
-          "version": "4.1.11",
-          "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-          "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-          "dev": true
-        },
-        "graceful-readlink": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-          "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
-          "dev": true,
-          "optional": true
-        },
-        "har-validator": {
-          "version": "2.0.6",
-          "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-2.0.6.tgz",
-          "integrity": "sha1-zcvAgYgmWtEZtqWnyKtw7s+10n0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "chalk": "^1.1.1",
-            "commander": "^2.9.0",
-            "is-my-json-valid": "^2.12.4",
-            "pinkie-promise": "^2.0.0"
-          }
-        },
-        "has-ansi": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-          "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "has-unicode": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
-          "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-          "dev": true,
-          "optional": true
-        },
-        "hawk": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
-          "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "boom": "2.x.x",
-            "cryptiles": "2.x.x",
-            "hoek": "2.x.x",
-            "sntp": "1.x.x"
-          }
-        },
-        "hoek": {
-          "version": "2.16.3",
-          "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-          "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
-          "dev": true
-        },
-        "http-signature": {
-          "version": "1.1.1",
-          "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
-          "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "assert-plus": "^0.2.0",
-            "jsprim": "^1.2.2",
-            "sshpk": "^1.7.0"
-          }
-        },
-        "inflight": {
-          "version": "1.0.6",
-          "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-          "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-          "dev": true,
-          "requires": {
-            "once": "^1.3.0",
-            "wrappy": "1"
-          }
-        },
-        "inherits": {
-          "version": "2.0.3",
-          "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-          "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-          "dev": true
-        },
-        "ini": {
-          "version": "1.3.4",
-          "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
-          "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=",
-          "dev": true,
-          "optional": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "is-my-json-valid": {
-          "version": "2.15.0",
-          "resolved": "https://registry.npmjs.org/is-my-json-valid/-/is-my-json-valid-2.15.0.tgz",
-          "integrity": "sha1-k27do8o8IR/ZjzstPgjaQ/eykVs=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "generate-function": "^2.0.0",
-            "generate-object-property": "^1.1.0",
-            "jsonpointer": "^4.0.0",
-            "xtend": "^4.0.0"
-          }
-        },
-        "is-property": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/is-property/-/is-property-1.0.2.tgz",
-          "integrity": "sha1-V/4cTkhHTt1lsJkR8msc1Ald2oQ=",
-          "dev": true,
-          "optional": true
-        },
-        "is-typedarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-          "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-          "dev": true,
-          "optional": true
-        },
-        "isarray": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-          "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-          "dev": true
-        },
-        "isstream": {
-          "version": "0.1.2",
-          "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-          "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-          "dev": true,
-          "optional": true
-        },
-        "jodid25519": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz",
-          "integrity": "sha1-BtSRIlUJNBlHfUJWM2BuDpB4KWc=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "jsbn": "~0.1.0"
-          }
-        },
-        "jsbn": {
-          "version": "0.1.1",
-          "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-          "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-          "dev": true,
-          "optional": true
-        },
-        "json-schema": {
-          "version": "0.2.3",
-          "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-          "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-          "dev": true,
-          "optional": true
-        },
-        "json-stringify-safe": {
-          "version": "5.0.1",
-          "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-          "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-          "dev": true,
-          "optional": true
-        },
-        "jsonpointer": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-4.0.1.tgz",
-          "integrity": "sha1-T9kss04OnbPInIYi7PUfm5eMbLk=",
-          "dev": true,
-          "optional": true
-        },
-        "jsprim": {
-          "version": "1.3.1",
-          "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.3.1.tgz",
-          "integrity": "sha1-KnJW9wQSop7jZwqspiWZTE3P8lI=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "extsprintf": "1.0.2",
-            "json-schema": "0.2.3",
-            "verror": "1.3.6"
-          }
-        },
-        "mime-db": {
-          "version": "1.26.0",
-          "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.26.0.tgz",
-          "integrity": "sha1-6v/NDk/Gk1z4E02iRuLmw1MFrf8=",
-          "dev": true
-        },
-        "mime-types": {
-          "version": "2.1.14",
-          "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.14.tgz",
-          "integrity": "sha1-9+99l1g/yvO30oK2+LVnnaselO4=",
-          "dev": true,
-          "requires": {
-            "mime-db": "~1.26.0"
-          }
-        },
-        "minimatch": {
-          "version": "3.0.3",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.3.tgz",
-          "integrity": "sha1-Kk5AkLlrLbBqnX3wEFWmKnfJt3Q=",
-          "dev": true,
-          "requires": {
-            "brace-expansion": "^1.0.0"
-          }
-        },
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
-        },
-        "mkdirp": {
-          "version": "0.5.1",
-          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-          "dev": true,
-          "requires": {
-            "minimist": "0.0.8"
-          }
-        },
-        "ms": {
-          "version": "0.7.1",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
-          "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
-          "dev": true,
-          "optional": true
-        },
-        "node-pre-gyp": {
-          "version": "0.6.33",
-          "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.33.tgz",
-          "integrity": "sha1-ZArFUZj2qSWXLgwWxKwmoDTV7Mk=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "mkdirp": "~0.5.1",
-            "nopt": "~3.0.6",
-            "npmlog": "^4.0.1",
-            "rc": "~1.1.6",
-            "request": "^2.79.0",
-            "rimraf": "~2.5.4",
-            "semver": "~5.3.0",
-            "tar": "~2.2.1",
-            "tar-pack": "~3.3.0"
-          }
-        },
-        "nopt": {
-          "version": "3.0.6",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-          "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "abbrev": "1"
-          }
-        },
-        "npmlog": {
-          "version": "4.0.2",
-          "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.0.2.tgz",
-          "integrity": "sha1-0DlQ4OeM4VJ7om0qdZLpNIrD518=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "are-we-there-yet": "~1.1.2",
-            "console-control-strings": "~1.1.0",
-            "gauge": "~2.7.1",
-            "set-blocking": "~2.0.0"
-          }
-        },
-        "number-is-nan": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-          "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-          "dev": true
-        },
-        "oauth-sign": {
-          "version": "0.8.2",
-          "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
-          "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
-          "dev": true,
-          "optional": true
-        },
-        "object-assign": {
-          "version": "4.1.1",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-          "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-          "dev": true,
-          "optional": true
-        },
-        "once": {
-          "version": "1.4.0",
-          "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-          "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-          "dev": true,
-          "requires": {
-            "wrappy": "1"
-          }
-        },
-        "path-is-absolute": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-          "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-          "dev": true
-        },
-        "pinkie": {
-          "version": "2.0.4",
-          "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-          "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
-          "dev": true,
-          "optional": true
-        },
-        "pinkie-promise": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-          "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "pinkie": "^2.0.0"
-          }
-        },
-        "process-nextick-args": {
-          "version": "1.0.7",
-          "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
-          "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
-          "dev": true
-        },
-        "punycode": {
-          "version": "1.4.1",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-          "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-          "dev": true,
-          "optional": true
-        },
-        "qs": {
-          "version": "6.3.1",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.3.1.tgz",
-          "integrity": "sha1-kYwLO802Z5dyuvE1say0wWUe150=",
-          "dev": true,
-          "optional": true
-        },
-        "rc": {
-          "version": "1.1.7",
-          "resolved": "https://registry.npmjs.org/rc/-/rc-1.1.7.tgz",
-          "integrity": "sha1-xepWS7B6/5/TpbMukGwdOmWUD+o=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "deep-extend": "~0.4.0",
-            "ini": "~1.3.0",
-            "minimist": "^1.2.0",
-            "strip-json-comments": "~2.0.1"
-          },
-          "dependencies": {
-            "minimist": {
-              "version": "1.2.0",
-              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "readable-stream": {
-          "version": "2.2.2",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.2.tgz",
-          "integrity": "sha1-qeb+w8fdqF+LsbO6cChgRVb8gl4=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "buffer-shims": "^1.0.0",
-            "core-util-is": "~1.0.0",
-            "inherits": "~2.0.1",
-            "isarray": "~1.0.0",
-            "process-nextick-args": "~1.0.6",
-            "string_decoder": "~0.10.x",
-            "util-deprecate": "~1.0.1"
-          }
-        },
-        "request": {
-          "version": "2.79.0",
-          "resolved": "https://registry.npmjs.org/request/-/request-2.79.0.tgz",
-          "integrity": "sha1-Tf5b9r6LjNw3/Pk+BLZVd3InEN4=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "aws-sign2": "~0.6.0",
-            "aws4": "^1.2.1",
-            "caseless": "~0.11.0",
-            "combined-stream": "~1.0.5",
-            "extend": "~3.0.0",
-            "forever-agent": "~0.6.1",
-            "form-data": "~2.1.1",
-            "har-validator": "~2.0.6",
-            "hawk": "~3.1.3",
-            "http-signature": "~1.1.0",
-            "is-typedarray": "~1.0.0",
-            "isstream": "~0.1.2",
-            "json-stringify-safe": "~5.0.1",
-            "mime-types": "~2.1.7",
-            "oauth-sign": "~0.8.1",
-            "qs": "~6.3.0",
-            "stringstream": "~0.0.4",
-            "tough-cookie": "~2.3.0",
-            "tunnel-agent": "~0.4.1",
-            "uuid": "^3.0.0"
-          }
-        },
-        "rimraf": {
-          "version": "2.5.4",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.5.4.tgz",
-          "integrity": "sha1-loAAk8vxoMhr2VtGJUZ1NcKd+gQ=",
-          "dev": true,
-          "requires": {
-            "glob": "^7.0.5"
-          }
-        },
-        "semver": {
-          "version": "5.3.0",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-          "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
-          "dev": true,
-          "optional": true
-        },
-        "set-blocking": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
-          "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
-          "dev": true,
-          "optional": true
-        },
-        "signal-exit": {
-          "version": "3.0.2",
-          "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
-          "integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
-          "dev": true,
-          "optional": true
-        },
-        "sntp": {
-          "version": "1.0.9",
-          "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-          "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "hoek": "2.x.x"
-          }
-        },
-        "sshpk": {
-          "version": "1.10.2",
-          "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.10.2.tgz",
-          "integrity": "sha1-1agEziJpVRVjjnmNviMnPeBwpfo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "asn1": "~0.2.3",
-            "assert-plus": "^1.0.0",
-            "bcrypt-pbkdf": "^1.0.0",
-            "dashdash": "^1.12.0",
-            "ecc-jsbn": "~0.1.1",
-            "getpass": "^0.1.1",
-            "jodid25519": "^1.0.0",
-            "jsbn": "~0.1.0",
-            "tweetnacl": "~0.14.0"
-          },
-          "dependencies": {
-            "assert-plus": {
-              "version": "1.0.0",
-              "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-              "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-              "dev": true,
-              "optional": true
-            }
-          }
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        },
-        "string_decoder": {
-          "version": "0.10.31",
-          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
-          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=",
-          "dev": true
-        },
-        "stringstream": {
-          "version": "0.0.5",
-          "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
-          "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
-          "dev": true,
-          "optional": true
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        },
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
-          "dev": true,
-          "optional": true
-        },
-        "supports-color": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
-          "integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc=",
-          "dev": true,
-          "optional": true
-        },
-        "tar": {
-          "version": "2.2.1",
-          "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
-          "integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
-          "dev": true,
-          "requires": {
-            "block-stream": "*",
-            "fstream": "^1.0.2",
-            "inherits": "2"
-          }
-        },
-        "tar-pack": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.3.0.tgz",
-          "integrity": "sha1-MJMYFkGPVa/E0hd1r91nIM7kXa4=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "debug": "~2.2.0",
-            "fstream": "~1.0.10",
-            "fstream-ignore": "~1.0.5",
-            "once": "~1.3.3",
-            "readable-stream": "~2.1.4",
-            "rimraf": "~2.5.1",
-            "tar": "~2.2.1",
-            "uid-number": "~0.0.6"
-          },
-          "dependencies": {
-            "once": {
-              "version": "1.3.3",
-              "resolved": "https://registry.npmjs.org/once/-/once-1.3.3.tgz",
-              "integrity": "sha1-suJhVXzkwxTsgwTz+oJmPkKXyiA=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "wrappy": "1"
-              }
-            },
-            "readable-stream": {
-              "version": "2.1.5",
-              "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.1.5.tgz",
-              "integrity": "sha1-ZvqLcg4UOLNkaB8q0aY8YYRIydA=",
-              "dev": true,
-              "optional": true,
-              "requires": {
-                "buffer-shims": "^1.0.0",
-                "core-util-is": "~1.0.0",
-                "inherits": "~2.0.1",
-                "isarray": "~1.0.0",
-                "process-nextick-args": "~1.0.6",
-                "string_decoder": "~0.10.x",
-                "util-deprecate": "~1.0.1"
-              }
-            }
-          }
-        },
-        "tough-cookie": {
-          "version": "2.3.2",
-          "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
-          "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "punycode": "^1.4.1"
-          }
-        },
-        "tunnel-agent": {
-          "version": "0.4.3",
-          "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
-          "integrity": "sha1-Y3PbdpCf5XDgjXNYM2Xtgop07us=",
-          "dev": true,
-          "optional": true
-        },
-        "tweetnacl": {
-          "version": "0.14.5",
-          "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-          "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-          "dev": true,
-          "optional": true
-        },
-        "uid-number": {
-          "version": "0.0.6",
-          "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
-          "integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=",
-          "dev": true,
-          "optional": true
-        },
-        "util-deprecate": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-          "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-          "dev": true
-        },
-        "uuid": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
-          "integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE=",
-          "dev": true,
-          "optional": true
-        },
-        "verror": {
-          "version": "1.3.6",
-          "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
-          "integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "extsprintf": "1.0.2"
-          }
-        },
-        "wide-align": {
-          "version": "1.1.0",
-          "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.0.tgz",
-          "integrity": "sha1-QO3egCpx/qHwcNo+YtzaLnrdlq0=",
-          "dev": true,
-          "optional": true,
-          "requires": {
-            "string-width": "^1.0.1"
-          }
-        },
-        "wrappy": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-          "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-          "dev": true
-        },
-        "xtend": {
-          "version": "4.0.1",
-          "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.1.tgz",
-          "integrity": "sha1-pcbVMr5lbiPbgg77lDofBJmNY68=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "function-bind": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
-      "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "dev": true
-    },
-    "getpass": {
-      "version": "0.1.7",
-      "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
-      "integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "^1.0.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "glob": {
-      "version": "5.0.15",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-5.0.15.tgz",
-      "integrity": "sha1-G8k2ueAvSmA/zCIuz3Yz0wuLk7E=",
-      "dev": true,
-      "requires": {
-        "inflight": "^1.0.4",
-        "inherits": "2",
-        "minimatch": "2 || 3",
-        "once": "^1.3.0",
-        "path-is-absolute": "^1.0.0"
-      }
-    },
-    "glob-base": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/glob-base/-/glob-base-0.3.0.tgz",
-      "integrity": "sha1-27Fk9iIbHAscz4Kuoyi0l98Oo8Q=",
-      "dev": true,
-      "requires": {
-        "glob-parent": "^2.0.0",
-        "is-glob": "^2.0.0"
-      }
-    },
-    "glob-parent": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-2.0.0.tgz",
-      "integrity": "sha1-gTg9ctsFT8zPUzbaqQLxgvbtuyg=",
-      "dev": true,
-      "requires": {
-        "is-glob": "^2.0.0"
-      }
-    },
-    "global-modules": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-0.2.3.tgz",
-      "integrity": "sha1-6lo77ULG1s6ZWk+KEmm12uIjgo0=",
-      "dev": true,
-      "requires": {
-        "global-prefix": "^0.1.4",
-        "is-windows": "^0.2.0"
-      }
-    },
-    "global-prefix": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz",
-      "integrity": "sha1-jTvGuNo8qBEqFg2NSW/wRiv+948=",
-      "dev": true,
-      "requires": {
-        "homedir-polyfill": "^1.0.0",
-        "ini": "^1.3.4",
-        "is-windows": "^0.2.0",
-        "which": "^1.2.12"
-      }
-    },
-    "got": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/got/-/got-3.3.1.tgz",
-      "integrity": "sha1-5dDtSvVfw+701WAHdp2YGSvLLso=",
-      "dev": true,
-      "requires": {
-        "duplexify": "^3.2.0",
-        "infinity-agent": "^2.0.0",
-        "is-redirect": "^1.0.0",
-        "is-stream": "^1.0.0",
-        "lowercase-keys": "^1.0.0",
-        "nested-error-stacks": "^1.0.0",
-        "object-assign": "^3.0.0",
-        "prepend-http": "^1.0.0",
-        "read-all-stream": "^3.0.0",
-        "timed-out": "^2.0.0"
-      },
-      "dependencies": {
-        "object-assign": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-3.0.0.tgz",
-          "integrity": "sha1-m+3VygiXlJvKR+f/QIBi1Un1h/I=",
-          "dev": true
-        }
-      }
-    },
-    "graceful-fs": {
-      "version": "4.1.11",
-      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-      "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-      "dev": true
-    },
-    "graceful-readlink": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/graceful-readlink/-/graceful-readlink-1.0.1.tgz",
-      "integrity": "sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=",
-      "dev": true
-    },
-    "handlebars": {
-      "version": "4.0.10",
-      "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.10.tgz",
-      "integrity": "sha1-PTDHGLCaPZbyPqTMH0A8TTup/08=",
-      "dev": true,
-      "requires": {
-        "async": "^1.4.0",
-        "optimist": "^0.6.1",
-        "source-map": "^0.4.4",
-        "uglify-js": "^2.6"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.4.4",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
-          "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
-          "dev": true,
-          "requires": {
-            "amdefine": ">=0.0.4"
-          }
-        }
-      }
-    },
-    "har-schema": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
-      "integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=",
-      "dev": true
-    },
-    "har-validator": {
-      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
-      "integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
-      "dev": true,
-      "requires": {
-        "ajv": "^4.9.1",
-        "har-schema": "^1.0.5"
-      }
-    },
-    "has": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
-      "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "dev": true,
-      "requires": {
-        "function-bind": "^1.1.1"
-      }
-    },
-    "has-ansi": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/has-ansi/-/has-ansi-2.0.0.tgz",
-      "integrity": "sha1-NPUEnOHs3ysGSa8+8k5F7TVBbZE=",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "^2.0.0"
-      }
-    },
-    "has-flag": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-1.0.0.tgz",
-      "integrity": "sha1-nZ55MWXOAXoA8AQYxD+UKnsdEfo=",
-      "dev": true
-    },
-    "hawk": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
-      "integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
-      "dev": true,
-      "requires": {
-        "boom": "2.x.x",
-        "cryptiles": "2.x.x",
-        "hoek": "2.x.x",
-        "sntp": "1.x.x"
-      }
-    },
-    "hoek": {
-      "version": "2.16.3",
-      "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
-      "integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0=",
-      "dev": true
-    },
-    "homedir-polyfill": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.1.tgz",
-      "integrity": "sha1-TCu8inWJmP7r9e1oWA921GdotLw=",
-      "dev": true,
-      "requires": {
-        "parse-passwd": "^1.0.0"
-      }
-    },
-    "html-encoding-sniffer": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-1.0.1.tgz",
-      "integrity": "sha1-eb96eF6klf5mFl5zQVPzY/9UN9o=",
-      "dev": true,
-      "requires": {
-        "whatwg-encoding": "^1.0.1"
-      }
-    },
-    "http-auth": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/http-auth/-/http-auth-3.1.3.tgz",
-      "integrity": "sha1-lFz63WZSHq+PfISRPTd9exXyTjE=",
-      "dev": true,
-      "requires": {
-        "apache-crypt": "^1.1.2",
-        "apache-md5": "^1.0.6",
-        "bcryptjs": "^2.3.0",
-        "uuid": "^3.0.0"
-      }
-    },
-    "http-errors": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.6.1.tgz",
-      "integrity": "sha1-X4uO2YrKVFZWv1cplzh/kEpyIlc=",
-      "dev": true,
-      "requires": {
-        "depd": "1.1.0",
-        "inherits": "2.0.3",
-        "setprototypeof": "1.0.3",
-        "statuses": ">= 1.3.1 < 2"
-      }
-    },
-    "http-signature": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
-      "integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "^0.2.0",
-        "jsprim": "^1.2.2",
-        "sshpk": "^1.7.0"
-      }
-    },
-    "iconv-lite": {
-      "version": "0.4.13",
-      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.13.tgz",
-      "integrity": "sha1-H4irpKsLFQjoMSrMOTRfNumS4vI=",
-      "dev": true
-    },
-    "ignore-by-default": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/ignore-by-default/-/ignore-by-default-1.0.1.tgz",
-      "integrity": "sha1-SMptcvbGo68Aqa1K5odr44ieKwk=",
-      "dev": true
-    },
-    "imurmurhash": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
-      "integrity": "sha1-khi5srkoojixPcT7a21XbyMUU+o=",
-      "dev": true
-    },
-    "infinity-agent": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/infinity-agent/-/infinity-agent-2.0.3.tgz",
-      "integrity": "sha1-ReDi/3qesDCyfWK3SzdEt6esQhY=",
-      "dev": true
-    },
-    "inflight": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
-      "integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
-      "dev": true,
-      "requires": {
-        "once": "^1.3.0",
-        "wrappy": "1"
-      }
-    },
-    "inherits": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
-      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=",
-      "dev": true
-    },
-    "ini": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
-      "integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=",
-      "dev": true
-    },
-    "is-binary-path": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-1.0.1.tgz",
-      "integrity": "sha1-dfFmQrSA8YenEcgUFh/TpKdlWJg=",
-      "dev": true,
-      "requires": {
-        "binary-extensions": "^1.0.0"
-      }
-    },
-    "is-buffer": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.5.tgz",
-      "integrity": "sha1-Hzsm72E7IUuIy8ojzGwB2Hlh7sw=",
-      "dev": true
-    },
-    "is-callable": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.1.4.tgz",
-      "integrity": "sha512-r5p9sxJjYnArLjObpjA4xu5EKI3CuKHkJXMhT7kwbpUyIFD1n5PMAsoPvWnvtZiNz7LjkYDRZhd7FlI0eMijEA==",
-      "dev": true
-    },
-    "is-date-object": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
-      "integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
-      "dev": true
-    },
-    "is-dotfile": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/is-dotfile/-/is-dotfile-1.0.3.tgz",
-      "integrity": "sha1-pqLzL/0t+wT1yiXs0Pa4PPeYoeE=",
-      "dev": true
-    },
-    "is-equal-shallow": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/is-equal-shallow/-/is-equal-shallow-0.1.3.tgz",
-      "integrity": "sha1-IjgJj8Ih3gvPpdnqxMRdY4qhxTQ=",
-      "dev": true,
-      "requires": {
-        "is-primitive": "^2.0.0"
-      }
-    },
-    "is-extendable": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-extendable/-/is-extendable-0.1.1.tgz",
-      "integrity": "sha1-YrEQ4omkcUGOPsNqYX1HLjAd/Ik=",
-      "dev": true
-    },
-    "is-extglob": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-1.0.0.tgz",
-      "integrity": "sha1-rEaBd8SUNAWgkvyPKXYMb/xiBsA=",
-      "dev": true
-    },
-    "is-finite": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-finite/-/is-finite-1.0.2.tgz",
-      "integrity": "sha1-zGZ3aVYCvlUO8R6LSqYwU0K20Ko=",
-      "dev": true,
-      "requires": {
-        "number-is-nan": "^1.0.0"
-      }
-    },
-    "is-glob": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-2.0.1.tgz",
-      "integrity": "sha1-0Jb5JqPe1WAPP9/ZEZjLCIjC2GM=",
-      "dev": true,
-      "requires": {
-        "is-extglob": "^1.0.0"
-      }
-    },
-    "is-npm": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-npm/-/is-npm-1.0.0.tgz",
-      "integrity": "sha1-8vtjpl5JBbQGyGBydloaTceTufQ=",
-      "dev": true
-    },
-    "is-number": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/is-number/-/is-number-2.1.0.tgz",
-      "integrity": "sha1-Afy7s5NGOlSPL0ZszhbezknbkI8=",
-      "dev": true,
-      "requires": {
-        "kind-of": "^3.0.2"
-      }
-    },
-    "is-posix-bracket": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/is-posix-bracket/-/is-posix-bracket-0.1.1.tgz",
-      "integrity": "sha1-MzTceXdDaOkvAW5vvAqI9c1ua8Q=",
-      "dev": true
-    },
-    "is-primitive": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-2.0.0.tgz",
-      "integrity": "sha1-IHurkWOEmcB7Kt8kCkGochADRXU=",
-      "dev": true
-    },
-    "is-redirect": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-redirect/-/is-redirect-1.0.0.tgz",
-      "integrity": "sha1-HQPd7VO9jbDzDCbk+V02/HyH3CQ=",
-      "dev": true
-    },
-    "is-regex": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
-      "integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
-      "dev": true,
-      "requires": {
-        "has": "^1.0.1"
-      }
-    },
-    "is-stream": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
-      "dev": true
-    },
-    "is-symbol": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.1.tgz",
-      "integrity": "sha1-PMWfAAJRlLarLjjbrmaJJWtmBXI=",
-      "dev": true
-    },
-    "is-typedarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
-      "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
-      "dev": true
-    },
-    "is-windows": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-0.2.0.tgz",
-      "integrity": "sha1-3hqm1j6indJIc3tp8f+LgALSEIw=",
-      "dev": true
-    },
-    "is-wsl": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-1.1.0.tgz",
-      "integrity": "sha1-HxbkqiKwTRM2tmGIpmrzxgDDpm0=",
-      "dev": true
-    },
-    "isarray": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
-      "integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=",
-      "dev": true
-    },
-    "isexe": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
-      "integrity": "sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=",
-      "dev": true
-    },
-    "isobject": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
-      "integrity": "sha1-8GVWEJaj8dou9GJy+BXIQNh+DIk=",
-      "dev": true,
-      "requires": {
-        "isarray": "1.0.0"
-      }
-    },
-    "isstream": {
-      "version": "0.1.2",
-      "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
-      "integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
-      "dev": true
-    },
-    "istanbul": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/istanbul/-/istanbul-0.4.5.tgz",
-      "integrity": "sha1-ZcfXPUxNqE1POsMQuRj7C4Azczs=",
-      "dev": true,
-      "requires": {
-        "abbrev": "1.0.x",
-        "async": "1.x",
-        "escodegen": "1.8.x",
-        "esprima": "2.7.x",
-        "glob": "^5.0.15",
-        "handlebars": "^4.0.1",
-        "js-yaml": "3.x",
-        "mkdirp": "0.5.x",
-        "nopt": "3.x",
-        "once": "1.x",
-        "resolve": "1.1.x",
-        "supports-color": "^3.1.0",
-        "which": "^1.1.1",
-        "wordwrap": "^1.0.0"
-      }
-    },
-    "js-reporters": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/js-reporters/-/js-reporters-1.2.0.tgz",
-      "integrity": "sha1-fPLLaYGWaEeQNQ0MTKB/Su2ewX4=",
-      "dev": true
-    },
-    "js-yaml": {
-      "version": "3.8.4",
-      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.8.4.tgz",
-      "integrity": "sha1-UgtFZPhlc7qWZir4Woyvp7S1pvY=",
-      "dev": true,
-      "requires": {
-        "argparse": "^1.0.7",
-        "esprima": "^3.1.1"
-      },
-      "dependencies": {
-        "esprima": {
-          "version": "3.1.3",
-          "resolved": "https://registry.npmjs.org/esprima/-/esprima-3.1.3.tgz",
-          "integrity": "sha1-/cpRzuYTOJXjyI1TXOSdv/YqRjM=",
-          "dev": true
-        }
-      }
-    },
-    "jsbn": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
-      "integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
-      "dev": true,
-      "optional": true
-    },
-    "jsdom": {
-      "version": "11.0.0",
-      "resolved": "https://registry.npmjs.org/jsdom/-/jsdom-11.0.0.tgz",
-      "integrity": "sha1-HuUHyywLFsh1ACR2sahVfZUTU+U=",
-      "dev": true,
-      "requires": {
-        "abab": "^1.0.3",
-        "acorn": "^4.0.4",
-        "acorn-globals": "^3.1.0",
-        "array-equal": "^1.0.0",
-        "content-type-parser": "^1.0.1",
-        "cssom": ">= 0.3.2 < 0.4.0",
-        "cssstyle": ">= 0.2.37 < 0.3.0",
-        "escodegen": "^1.6.1",
-        "html-encoding-sniffer": "^1.0.1",
-        "nwmatcher": ">= 1.3.9 < 2.0.0",
-        "parse5": "^3.0.2",
-        "pn": "^1.0.0",
-        "request": "^2.79.0",
-        "request-promise-native": "^1.0.3",
-        "sax": "^1.2.1",
-        "symbol-tree": "^3.2.1",
-        "tough-cookie": "^2.3.2",
-        "webidl-conversions": "^4.0.0",
-        "whatwg-encoding": "^1.0.1",
-        "whatwg-url": "^4.3.0",
-        "xml-name-validator": "^2.0.1"
-      }
-    },
-    "jsdom-global": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/jsdom-global/-/jsdom-global-3.0.2.tgz",
-      "integrity": "sha1-a9KZwTsMRiay2iwDk81DhdYGrLk=",
-      "dev": true
-    },
-    "json-schema": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
-      "integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
-      "dev": true
-    },
-    "json-stable-stringify": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
-      "integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
-      "dev": true,
-      "requires": {
-        "jsonify": "~0.0.0"
-      }
-    },
-    "json-stringify-safe": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
-      "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
-      "dev": true
-    },
-    "jsonify": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
-      "integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
-      "dev": true
-    },
-    "jsprim": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
-      "integrity": "sha1-o7h+QCmNjDgFUtjMdiigu5WiKRg=",
-      "dev": true,
-      "requires": {
-        "assert-plus": "1.0.0",
-        "extsprintf": "1.0.2",
-        "json-schema": "0.2.3",
-        "verror": "1.3.6"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "kind-of": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-      "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-      "dev": true,
-      "requires": {
-        "is-buffer": "^1.1.5"
-      }
-    },
-    "latest-version": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/latest-version/-/latest-version-1.0.1.tgz",
-      "integrity": "sha1-cs/Ebj6NG+ZR4eu1Tqn26pbzdLs=",
-      "dev": true,
-      "requires": {
-        "package-json": "^1.0.0"
-      }
-    },
-    "lazy-cache": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
-      "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
-      "dev": true,
-      "optional": true
-    },
-    "levn": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz",
-      "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=",
-      "dev": true,
-      "requires": {
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2"
-      }
-    },
-    "live-server": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/live-server/-/live-server-1.2.0.tgz",
-      "integrity": "sha1-RJhkS7+Bpm8Y3Y3/3vYcTBw3TKM=",
-      "dev": true,
-      "requires": {
-        "chokidar": "^1.6.0",
-        "colors": "^1.1.2",
-        "connect": "3.5.x",
-        "cors": "^2.8.3",
-        "event-stream": "^3.3.4",
-        "faye-websocket": "0.11.x",
-        "http-auth": "3.1.x",
-        "morgan": "^1.6.1",
-        "object-assign": "^4.1.1",
-        "opn": "^5.1.0",
-        "proxy-middleware": "^0.15.0",
-        "send": "^0.15.3",
-        "serve-index": "^1.7.2"
-      }
-    },
-    "lodash": {
-      "version": "4.17.4",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz",
-      "integrity": "sha1-eCA6TRwyiuHYbcpkYONptX9AVa4=",
-      "dev": true
-    },
-    "lodash._baseassign": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/lodash._baseassign/-/lodash._baseassign-3.2.0.tgz",
-      "integrity": "sha1-jDigmVAPIVrQnlnxci/QxSv+Ck4=",
-      "dev": true,
-      "requires": {
-        "lodash._basecopy": "^3.0.0",
-        "lodash.keys": "^3.0.0"
-      }
-    },
-    "lodash._basecopy": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
-      "integrity": "sha1-jaDmqHbPNEwK2KVIghEd08XHyjY=",
-      "dev": true
-    },
-    "lodash._bindcallback": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/lodash._bindcallback/-/lodash._bindcallback-3.0.1.tgz",
-      "integrity": "sha1-5THCdkTPi1epnhftlbNcdIeJOS4=",
-      "dev": true
-    },
-    "lodash._createassigner": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/lodash._createassigner/-/lodash._createassigner-3.1.1.tgz",
-      "integrity": "sha1-g4pbri/aymOsIt7o4Z+k5taXCxE=",
-      "dev": true,
-      "requires": {
-        "lodash._bindcallback": "^3.0.0",
-        "lodash._isiterateecall": "^3.0.0",
-        "lodash.restparam": "^3.0.0"
-      }
-    },
-    "lodash._getnative": {
-      "version": "3.9.1",
-      "resolved": "https://registry.npmjs.org/lodash._getnative/-/lodash._getnative-3.9.1.tgz",
-      "integrity": "sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=",
-      "dev": true
-    },
-    "lodash._isiterateecall": {
-      "version": "3.0.9",
-      "resolved": "https://registry.npmjs.org/lodash._isiterateecall/-/lodash._isiterateecall-3.0.9.tgz",
-      "integrity": "sha1-UgOte6Ql+uhCRg5pbbnPPmqsBXw=",
-      "dev": true
-    },
-    "lodash.assign": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/lodash.assign/-/lodash.assign-3.2.0.tgz",
-      "integrity": "sha1-POnwI0tLIiPilrj6CsH+6OvKZPo=",
-      "dev": true,
-      "requires": {
-        "lodash._baseassign": "^3.0.0",
-        "lodash._createassigner": "^3.0.0",
-        "lodash.keys": "^3.0.0"
-      }
-    },
-    "lodash.defaults": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.defaults/-/lodash.defaults-3.1.2.tgz",
-      "integrity": "sha1-xzCLGNv4vJNy1wGnNJPGEZK9Liw=",
-      "dev": true,
-      "requires": {
-        "lodash.assign": "^3.0.0",
-        "lodash.restparam": "^3.0.0"
-      }
-    },
-    "lodash.isarguments": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz",
-      "integrity": "sha1-L1c9hcaiQon/AGY7SRwdM4/zRYo=",
-      "dev": true
-    },
-    "lodash.isarray": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/lodash.isarray/-/lodash.isarray-3.0.4.tgz",
-      "integrity": "sha1-eeTriMNqgSKvhvhEqpvNhRtfu1U=",
-      "dev": true
-    },
-    "lodash.keys": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/lodash.keys/-/lodash.keys-3.1.2.tgz",
-      "integrity": "sha1-TbwEcrFWvlCgsoaFXRvQsMZWCYo=",
-      "dev": true,
-      "requires": {
-        "lodash._getnative": "^3.0.0",
-        "lodash.isarguments": "^3.0.0",
-        "lodash.isarray": "^3.0.0"
-      }
-    },
-    "lodash.restparam": {
-      "version": "3.6.1",
-      "resolved": "https://registry.npmjs.org/lodash.restparam/-/lodash.restparam-3.6.1.tgz",
-      "integrity": "sha1-k2pOMJ7zMKdkXtQUWYbIWuWyCAU=",
-      "dev": true
-    },
-    "longest": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
-      "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true
-    },
-    "lowercase-keys": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-1.0.0.tgz",
-      "integrity": "sha1-TjNms55/VFfjXxMkvfb4jQv8cwY=",
-      "dev": true
-    },
-    "lru-cache": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.0.tgz",
-      "integrity": "sha1-Wb5JpoO42YapOfHKYP22mJ9LIEY=",
-      "dev": true,
-      "requires": {
-        "pseudomap": "^1.0.1",
-        "yallist": "^2.0.0"
-      }
-    },
-    "map-stream": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/map-stream/-/map-stream-0.1.0.tgz",
-      "integrity": "sha1-5WqpTEyAVaFkBKBnS3jyFffI4ZQ=",
-      "dev": true
-    },
-    "matcher-collection": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/matcher-collection/-/matcher-collection-1.0.4.tgz",
-      "integrity": "sha1-L2auCGmZbynkPQtiyD3R1D5YF1U=",
-      "dev": true,
-      "requires": {
-        "minimatch": "^3.0.2"
-      }
-    },
-    "micromatch": {
-      "version": "2.3.11",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-2.3.11.tgz",
-      "integrity": "sha1-hmd8l9FyCzY0MdBNDRUpO9OMFWU=",
-      "dev": true,
-      "requires": {
-        "arr-diff": "^2.0.0",
-        "array-unique": "^0.2.1",
-        "braces": "^1.8.2",
-        "expand-brackets": "^0.1.4",
-        "extglob": "^0.3.1",
-        "filename-regex": "^2.0.0",
-        "is-extglob": "^1.0.0",
-        "is-glob": "^2.0.1",
-        "kind-of": "^3.0.2",
-        "normalize-path": "^2.0.1",
-        "object.omit": "^2.0.0",
-        "parse-glob": "^3.0.4",
-        "regex-cache": "^0.4.2"
-      }
-    },
-    "mime": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/mime/-/mime-1.3.4.tgz",
-      "integrity": "sha1-EV+eO2s9rylZmDyzjxSaLUDrXVM=",
-      "dev": true
-    },
-    "mime-db": {
-      "version": "1.27.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.27.0.tgz",
-      "integrity": "sha1-gg9XIpa70g7CXtVeW13oaeVDbrE=",
-      "dev": true
-    },
-    "mime-types": {
-      "version": "2.1.15",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.15.tgz",
-      "integrity": "sha1-pOv1BkCUVpI3uM9wBGd20J/JKu0=",
-      "dev": true,
-      "requires": {
-        "mime-db": "~1.27.0"
-      }
-    },
-    "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=",
-      "dev": true,
-      "requires": {
-        "brace-expansion": "^1.1.7"
-      }
-    },
-    "minimist": {
-      "version": "0.0.10",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-      "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
-      "dev": true
-    },
-    "mkdirp": {
-      "version": "0.5.1",
-      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
-      "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
-      "dev": true,
-      "requires": {
-        "minimist": "0.0.8"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "dev": true
-        }
-      }
-    },
-    "morgan": {
-      "version": "1.8.2",
-      "resolved": "https://registry.npmjs.org/morgan/-/morgan-1.8.2.tgz",
-      "integrity": "sha1-eErHc05KRTqcbm6GgKkyknXItoc=",
-      "dev": true,
-      "requires": {
-        "basic-auth": "~1.1.0",
-        "debug": "2.6.8",
-        "depd": "~1.1.0",
-        "on-finished": "~2.3.0",
-        "on-headers": "~1.0.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.8",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
-          "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        }
-      }
-    },
-    "ms": {
-      "version": "0.7.1",
-      "resolved": "https://registry.npmjs.org/ms/-/ms-0.7.1.tgz",
-      "integrity": "sha1-nNE8A62/8ltl7/3nzoZO6VIBcJg=",
-      "dev": true
-    },
-    "nan": {
-      "version": "2.6.2",
-      "resolved": "https://registry.npmjs.org/nan/-/nan-2.6.2.tgz",
-      "integrity": "sha1-5P805slf37WuzAjeZZb0NgWn20U=",
-      "dev": true,
-      "optional": true
-    },
-    "negotiator": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.1.tgz",
-      "integrity": "sha1-KzJxhOiZIQEXeyhWP7XnECrNDKk=",
-      "dev": true
-    },
-    "nested-error-stacks": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/nested-error-stacks/-/nested-error-stacks-1.0.2.tgz",
-      "integrity": "sha1-GfYZWRUZ8JZ2mlupqG5u7sgjw88=",
-      "dev": true,
-      "requires": {
-        "inherits": "~2.0.1"
-      }
-    },
-    "nodemon": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/nodemon/-/nodemon-1.11.0.tgz",
-      "integrity": "sha1-ImxWK9KnsT09dRi0mtSCijYj0Gw=",
-      "dev": true,
-      "requires": {
-        "chokidar": "^1.4.3",
-        "debug": "^2.2.0",
-        "es6-promise": "^3.0.2",
-        "ignore-by-default": "^1.0.0",
-        "lodash.defaults": "^3.1.2",
-        "minimatch": "^3.0.0",
-        "ps-tree": "^1.0.1",
-        "touch": "1.0.0",
-        "undefsafe": "0.0.3",
-        "update-notifier": "0.5.0"
-      }
-    },
-    "nopt": {
-      "version": "3.0.6",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-3.0.6.tgz",
-      "integrity": "sha1-xkZdvwirzU2zWTF/eaxopkayj/k=",
-      "dev": true,
-      "requires": {
-        "abbrev": "1"
-      }
-    },
-    "normalize-path": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-2.1.1.tgz",
-      "integrity": "sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=",
-      "dev": true,
-      "requires": {
-        "remove-trailing-separator": "^1.0.1"
-      }
-    },
-    "number-is-nan": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-      "dev": true
-    },
-    "nwmatcher": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/nwmatcher/-/nwmatcher-1.4.0.tgz",
-      "integrity": "sha1-tDiTYhcOfvl5jDx3FtgOvAEG/M8=",
-      "dev": true
-    },
-    "oauth-sign": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
-      "integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
-      "dev": true
-    },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
-      "dev": true
-    },
-    "object-inspect": {
-      "version": "1.6.0",
-      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.6.0.tgz",
-      "integrity": "sha512-GJzfBZ6DgDAmnuaM3104jR4s1Myxr3Y3zfIyN4z3UdqN69oSRacNK8UhnobDdC+7J2AHCjGwxQubNJfE70SXXQ==",
-      "dev": true
-    },
-    "object-keys": {
-      "version": "1.0.12",
-      "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.0.12.tgz",
-      "integrity": "sha512-FTMyFUm2wBcGHnH2eXmz7tC6IwlqQZ6mVZ+6dm6vZ4IQIHjs6FdNsQBuKGPuUUUY6NfJw2PshC08Tn6LzLDOag==",
-      "dev": true
-    },
-    "object.omit": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/object.omit/-/object.omit-2.0.1.tgz",
-      "integrity": "sha1-Gpx0SCnznbuFjHbKNXmuKlTr0fo=",
-      "dev": true,
-      "requires": {
-        "for-own": "^0.1.4",
-        "is-extendable": "^0.1.1"
-      }
-    },
-    "on-finished": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz",
-      "integrity": "sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=",
-      "dev": true,
-      "requires": {
-        "ee-first": "1.1.1"
-      }
-    },
-    "on-headers": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/on-headers/-/on-headers-1.0.1.tgz",
-      "integrity": "sha1-ko9dD0cNSTQmUepnlLCFfBAGk/c=",
-      "dev": true
-    },
-    "once": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
-      "integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
-      "dev": true,
-      "requires": {
-        "wrappy": "1"
-      }
-    },
-    "opn": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/opn/-/opn-5.1.0.tgz",
-      "integrity": "sha1-cs4jBqF9vqWP8QQYUzUrSo/HdRk=",
-      "dev": true,
-      "requires": {
-        "is-wsl": "^1.1.0"
-      }
-    },
-    "optimist": {
-      "version": "0.6.1",
-      "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
-      "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
-      "dev": true,
-      "requires": {
-        "minimist": "~0.0.1",
-        "wordwrap": "~0.0.2"
-      },
-      "dependencies": {
-        "wordwrap": {
-          "version": "0.0.3",
-          "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-          "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
-          "dev": true
-        }
-      }
-    },
-    "optionator": {
-      "version": "0.8.2",
-      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.2.tgz",
-      "integrity": "sha1-NkxeQJ0/TWMB1sC0wFu6UBgK62Q=",
-      "dev": true,
-      "requires": {
-        "deep-is": "~0.1.3",
-        "fast-levenshtein": "~2.0.4",
-        "levn": "~0.3.0",
-        "prelude-ls": "~1.1.2",
-        "type-check": "~0.3.2",
-        "wordwrap": "~1.0.0"
-      }
-    },
-    "os-homedir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
-      "dev": true
-    },
-    "os-shim": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/os-shim/-/os-shim-0.1.3.tgz",
-      "integrity": "sha1-a2LDeRz3kJ6jXtRuF2WLtBfLORc=",
-      "dev": true
-    },
-    "os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-      "dev": true
-    },
-    "osenv": {
-      "version": "0.1.4",
-      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz",
-      "integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=",
-      "dev": true,
-      "requires": {
-        "os-homedir": "^1.0.0",
-        "os-tmpdir": "^1.0.0"
-      }
-    },
-    "package-json": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/package-json/-/package-json-1.2.0.tgz",
-      "integrity": "sha1-yOysCUInzfdqMWh07QXifMk5oOA=",
-      "dev": true,
-      "requires": {
-        "got": "^3.2.0",
-        "registry-url": "^3.0.0"
-      }
-    },
-    "parse-glob": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/parse-glob/-/parse-glob-3.0.4.tgz",
-      "integrity": "sha1-ssN2z7EfNVE7rdFz7wu246OIORw=",
-      "dev": true,
-      "requires": {
-        "glob-base": "^0.3.0",
-        "is-dotfile": "^1.0.0",
-        "is-extglob": "^1.0.0",
-        "is-glob": "^2.0.0"
-      }
-    },
-    "parse-passwd": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
-      "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
-      "dev": true
-    },
-    "parse5": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.2.tgz",
-      "integrity": "sha1-Be/1fw70V3+xRKefi5qWemzERRA=",
-      "dev": true,
-      "requires": {
-        "@types/node": "^6.0.46"
-      }
-    },
-    "parseurl": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/parseurl/-/parseurl-1.3.1.tgz",
-      "integrity": "sha1-yKuMkiO6NIiKpkopeyiFO+wY2lY=",
-      "dev": true
-    },
-    "path-is-absolute": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
-      "integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18=",
-      "dev": true
-    },
-    "path-parse": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.5.tgz",
-      "integrity": "sha1-PBrfhx6pzWyUMbbqK9dKD/BVxME=",
-      "dev": true
-    },
-    "pause-stream": {
-      "version": "0.0.11",
-      "resolved": "https://registry.npmjs.org/pause-stream/-/pause-stream-0.0.11.tgz",
-      "integrity": "sha1-/lo0sMvOErWqaitAPuLnO2AvFEU=",
-      "dev": true,
-      "requires": {
-        "through": "~2.3"
-      }
-    },
-    "performance-now": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
-      "integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=",
-      "dev": true
-    },
-    "pinkie": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz",
-      "integrity": "sha1-clVrgM+g1IqXToDnckjoDtT3+HA=",
-      "dev": true
-    },
-    "pinkie-promise": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/pinkie-promise/-/pinkie-promise-2.0.1.tgz",
-      "integrity": "sha1-ITXW36ejWMBprJsXh3YogihFD/o=",
-      "dev": true,
-      "requires": {
-        "pinkie": "^2.0.0"
-      }
-    },
-    "pn": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/pn/-/pn-1.0.0.tgz",
-      "integrity": "sha1-HPWjCw2AbNGPiPxBprXUrWFbO6k=",
-      "dev": true
-    },
-    "pre-commit": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/pre-commit/-/pre-commit-1.2.2.tgz",
-      "integrity": "sha1-287g7p3nI15X95xW186UZBpp7sY=",
-      "dev": true,
-      "requires": {
-        "cross-spawn": "^5.0.1",
-        "spawn-sync": "^1.0.15",
-        "which": "1.2.x"
-      }
-    },
-    "prelude-ls": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
-      "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=",
-      "dev": true
-    },
-    "prepend-http": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/prepend-http/-/prepend-http-1.0.4.tgz",
-      "integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw=",
-      "dev": true
-    },
-    "preserve": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/preserve/-/preserve-0.2.0.tgz",
-      "integrity": "sha1-gV7R9uvGWSb4ZbMQwHE7yzMVzks=",
-      "dev": true
-    },
-    "process-nextick-args": {
-      "version": "1.0.7",
-      "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
-      "integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=",
-      "dev": true
-    },
-    "proxy-middleware": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/proxy-middleware/-/proxy-middleware-0.15.0.tgz",
-      "integrity": "sha1-o/3xvvtzD5UZZYcqwvYHTGFHelY=",
-      "dev": true
-    },
-    "ps-tree": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/ps-tree/-/ps-tree-1.1.0.tgz",
-      "integrity": "sha1-tCGyQUDWID8e08dplrRCewjowBQ=",
-      "dev": true,
-      "requires": {
-        "event-stream": "~3.3.0"
-      }
-    },
-    "pseudomap": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
-      "integrity": "sha1-8FKijacOYYkX7wqKw0wa5aaChrM=",
-      "dev": true
-    },
-    "punycode": {
-      "version": "1.4.1",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
-      "integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
-      "dev": true
-    },
-    "qs": {
-      "version": "6.4.0",
-      "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
-      "integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=",
-      "dev": true
-    },
-    "qunit-tap": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/qunit-tap/-/qunit-tap-1.5.1.tgz",
-      "integrity": "sha1-KflRnFb6ne8y+WgXEVFcQe0jHpE=",
-      "dev": true
-    },
-    "qunitjs": {
-      "version": "2.3.3",
-      "resolved": "https://registry.npmjs.org/qunitjs/-/qunitjs-2.3.3.tgz",
-      "integrity": "sha1-RWaWvdYaLItbyPBT8A4g11pz1Tk=",
-      "dev": true,
-      "requires": {
-        "chokidar": "1.6.1",
-        "commander": "2.9.0",
-        "exists-stat": "1.0.0",
-        "findup-sync": "0.4.3",
-        "js-reporters": "1.2.0",
-        "resolve": "1.3.2",
-        "walk-sync": "0.3.1"
-      },
-      "dependencies": {
-        "chokidar": {
-          "version": "1.6.1",
-          "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-1.6.1.tgz",
-          "integrity": "sha1-L0RHq16W5Q+z14n9kNTHLg5McMI=",
-          "dev": true,
-          "requires": {
-            "anymatch": "^1.3.0",
-            "async-each": "^1.0.0",
-            "fsevents": "^1.0.0",
-            "glob-parent": "^2.0.0",
-            "inherits": "^2.0.1",
-            "is-binary-path": "^1.0.0",
-            "is-glob": "^2.0.0",
-            "path-is-absolute": "^1.0.0",
-            "readdirp": "^2.0.0"
-          }
-        },
-        "resolve": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.3.2.tgz",
-          "integrity": "sha1-HwRCyeDLuBNuh7kwX5MvRsfygjU=",
-          "dev": true,
-          "requires": {
-            "path-parse": "^1.0.5"
-          }
-        }
-      }
-    },
-    "randomatic": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/randomatic/-/randomatic-1.1.7.tgz",
-      "integrity": "sha1-x6vpzIuHwLqodrGf3oP9RkeX44w=",
-      "dev": true,
-      "requires": {
-        "is-number": "^3.0.0",
-        "kind-of": "^4.0.0"
-      },
-      "dependencies": {
-        "is-number": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/is-number/-/is-number-3.0.0.tgz",
-          "integrity": "sha1-JP1iAaR4LPUFYcgQJ2r8fRLXEZU=",
-          "dev": true,
-          "requires": {
-            "kind-of": "^3.0.2"
-          },
-          "dependencies": {
-            "kind-of": {
-              "version": "3.2.2",
-              "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
-              "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
-              "dev": true,
-              "requires": {
-                "is-buffer": "^1.1.5"
-              }
-            }
-          }
-        },
-        "kind-of": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-4.0.0.tgz",
-          "integrity": "sha1-IIE989cSkosgc3hpGkUGb65y3Vc=",
-          "dev": true,
-          "requires": {
-            "is-buffer": "^1.1.5"
-          }
-        }
-      }
-    },
-    "range-parser": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/range-parser/-/range-parser-1.2.0.tgz",
-      "integrity": "sha1-9JvmtIeJTdxA3MlKMi9hEJLgDV4=",
-      "dev": true
-    },
-    "rc": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.1.tgz",
-      "integrity": "sha1-LgPo5C7kULjLPc5lvhv4l04d/ZU=",
-      "dev": true,
-      "requires": {
-        "deep-extend": "~0.4.0",
-        "ini": "~1.3.0",
-        "minimist": "^1.2.0",
-        "strip-json-comments": "~2.0.1"
-      },
-      "dependencies": {
-        "minimist": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-          "dev": true
-        }
-      }
-    },
-    "read-all-stream": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/read-all-stream/-/read-all-stream-3.1.0.tgz",
-      "integrity": "sha1-NcPhd/IHjveJ7kv6+kNzB06u9Po=",
-      "dev": true,
-      "requires": {
-        "pinkie-promise": "^2.0.0",
-        "readable-stream": "^2.0.0"
-      }
-    },
-    "readable-stream": {
-      "version": "2.2.11",
-      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.11.tgz",
-      "integrity": "sha1-B5azH412iAB/8Lk6gIjTSqF8D3I=",
-      "dev": true,
-      "requires": {
-        "core-util-is": "~1.0.0",
-        "inherits": "~2.0.1",
-        "isarray": "~1.0.0",
-        "process-nextick-args": "~1.0.6",
-        "safe-buffer": "~5.0.1",
-        "string_decoder": "~1.0.0",
-        "util-deprecate": "~1.0.1"
-      }
-    },
-    "readdirp": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-2.1.0.tgz",
-      "integrity": "sha1-TtCtBg3zBzMAxIRANz9y0cxkLXg=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.2",
-        "minimatch": "^3.0.2",
-        "readable-stream": "^2.0.2",
-        "set-immediate-shim": "^1.0.1"
-      }
-    },
-    "regex-cache": {
-      "version": "0.4.3",
-      "resolved": "https://registry.npmjs.org/regex-cache/-/regex-cache-0.4.3.tgz",
-      "integrity": "sha1-mxpsNdTQ3871cRrmUejp09cRQUU=",
-      "dev": true,
-      "requires": {
-        "is-equal-shallow": "^0.1.3",
-        "is-primitive": "^2.0.0"
-      }
-    },
-    "registry-url": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/registry-url/-/registry-url-3.1.0.tgz",
-      "integrity": "sha1-PU74cPc93h138M+aOBQyRE4XSUI=",
-      "dev": true,
-      "requires": {
-        "rc": "^1.0.1"
-      }
-    },
-    "remove-trailing-separator": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.0.2.tgz",
-      "integrity": "sha1-abBi2XhyetFNxrVrpKt3L9jXBRE=",
-      "dev": true
-    },
-    "repeat-element": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/repeat-element/-/repeat-element-1.1.2.tgz",
-      "integrity": "sha1-7wiaF40Ug7quTZPrmLT55OEdmQo=",
-      "dev": true
-    },
-    "repeat-string": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-      "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
-      "dev": true
-    },
-    "repeating": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/repeating/-/repeating-1.1.3.tgz",
-      "integrity": "sha1-PUEUIYh3U3SU+X93+Xhfq4EPpKw=",
-      "dev": true,
-      "requires": {
-        "is-finite": "^1.0.0"
-      }
-    },
-    "request": {
-      "version": "2.81.0",
-      "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
-      "integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
-      "dev": true,
-      "requires": {
-        "aws-sign2": "~0.6.0",
-        "aws4": "^1.2.1",
-        "caseless": "~0.12.0",
-        "combined-stream": "~1.0.5",
-        "extend": "~3.0.0",
-        "forever-agent": "~0.6.1",
-        "form-data": "~2.1.1",
-        "har-validator": "~4.2.1",
-        "hawk": "~3.1.3",
-        "http-signature": "~1.1.0",
-        "is-typedarray": "~1.0.0",
-        "isstream": "~0.1.2",
-        "json-stringify-safe": "~5.0.1",
-        "mime-types": "~2.1.7",
-        "oauth-sign": "~0.8.1",
-        "performance-now": "^0.2.0",
-        "qs": "~6.4.0",
-        "safe-buffer": "^5.0.1",
-        "stringstream": "~0.0.4",
-        "tough-cookie": "~2.3.0",
-        "tunnel-agent": "^0.6.0",
-        "uuid": "^3.0.0"
-      }
-    },
-    "request-promise-core": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/request-promise-core/-/request-promise-core-1.1.1.tgz",
-      "integrity": "sha1-Pu4AssWqgyOc+wTFcA2jb4HNCLY=",
-      "dev": true,
-      "requires": {
-        "lodash": "^4.13.1"
-      }
-    },
-    "request-promise-native": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/request-promise-native/-/request-promise-native-1.0.4.tgz",
-      "integrity": "sha1-hpiOyO7kCORVefzoO/0Fs635oVU=",
-      "dev": true,
-      "requires": {
-        "request-promise-core": "1.1.1",
-        "stealthy-require": "^1.1.0",
-        "tough-cookie": ">=2.3.0"
-      }
-    },
-    "resolve": {
-      "version": "1.1.7",
-      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.1.7.tgz",
-      "integrity": "sha1-IDEU2CrSxe2ejgQRs5ModeiJ6Xs=",
-      "dev": true
-    },
-    "resolve-dir": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-0.1.1.tgz",
-      "integrity": "sha1-shklmlYC+sXFxJatiUpujMQwJh4=",
-      "dev": true,
-      "requires": {
-        "expand-tilde": "^1.2.2",
-        "global-modules": "^0.2.3"
-      }
-    },
-    "resumer": {
-      "version": "0.0.0",
-      "resolved": "https://registry.npmjs.org/resumer/-/resumer-0.0.0.tgz",
-      "integrity": "sha1-8ej0YeQGS6Oegq883CqMiT0HZ1k=",
-      "dev": true,
-      "requires": {
-        "through": "~2.3.4"
-      }
-    },
-    "right-align": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
-      "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "align-text": "^0.1.1"
-      }
-    },
-    "safe-buffer": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz",
-      "integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c=",
-      "dev": true
-    },
-    "sax": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.2.tgz",
-      "integrity": "sha1-/YYxojvHgmvvXYcb24c3jJVkeCg=",
-      "dev": true
-    },
-    "semver": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
-      "integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
-      "dev": true
-    },
-    "semver-diff": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/semver-diff/-/semver-diff-2.1.0.tgz",
-      "integrity": "sha1-S7uEN8jTfksM8aaP1ybsbWRdbTY=",
-      "dev": true,
-      "requires": {
-        "semver": "^5.0.3"
-      }
-    },
-    "send": {
-      "version": "0.15.3",
-      "resolved": "https://registry.npmjs.org/send/-/send-0.15.3.tgz",
-      "integrity": "sha1-UBP5+ZAj31DRvZiSwZ4979HVMwk=",
-      "dev": true,
-      "requires": {
-        "debug": "2.6.7",
-        "depd": "~1.1.0",
-        "destroy": "~1.0.4",
-        "encodeurl": "~1.0.1",
-        "escape-html": "~1.0.3",
-        "etag": "~1.8.0",
-        "fresh": "0.5.0",
-        "http-errors": "~1.6.1",
-        "mime": "1.3.4",
-        "ms": "2.0.0",
-        "on-finished": "~2.3.0",
-        "range-parser": "~1.2.0",
-        "statuses": "~1.3.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.7.tgz",
-          "integrity": "sha1-krrR9tBbu2u6Isyoi80OyJTChh4=",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        }
-      }
-    },
-    "serve-index": {
-      "version": "1.9.0",
-      "resolved": "https://registry.npmjs.org/serve-index/-/serve-index-1.9.0.tgz",
-      "integrity": "sha1-0rKA/FYNYW7oG0i/D6gqvtJIXOc=",
-      "dev": true,
-      "requires": {
-        "accepts": "~1.3.3",
-        "batch": "0.6.1",
-        "debug": "2.6.8",
-        "escape-html": "~1.0.3",
-        "http-errors": "~1.6.1",
-        "mime-types": "~2.1.15",
-        "parseurl": "~1.3.1"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "2.6.8",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
-          "integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
-          "dev": true,
-          "requires": {
-            "ms": "2.0.0"
-          }
-        },
-        "ms": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
-          "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
-          "dev": true
-        }
-      }
-    },
-    "set-immediate-shim": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/set-immediate-shim/-/set-immediate-shim-1.0.1.tgz",
-      "integrity": "sha1-SysbJ+uAip+NzEgaWOXlb1mfP2E=",
-      "dev": true
-    },
-    "setprototypeof": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.0.3.tgz",
-      "integrity": "sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=",
-      "dev": true
-    },
-    "shebang-command": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-1.2.0.tgz",
-      "integrity": "sha1-RKrGW2lbAzmJaMOfNj/uXer98eo=",
-      "dev": true,
-      "requires": {
-        "shebang-regex": "^1.0.0"
-      }
-    },
-    "shebang-regex": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-1.0.0.tgz",
-      "integrity": "sha1-2kL0l0DAtC2yypcoVxyxkMmO/qM=",
-      "dev": true
-    },
-    "slide": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/slide/-/slide-1.1.6.tgz",
-      "integrity": "sha1-VusCfWW00tzmyy4tMsTUr8nh1wc=",
-      "dev": true
-    },
-    "sntp": {
-      "version": "1.0.9",
-      "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
-      "integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
-      "dev": true,
-      "requires": {
-        "hoek": "2.x.x"
-      }
-    },
-    "source-map": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.2.0.tgz",
-      "integrity": "sha1-2rc/vPwrqBm03gO9b26qSBZLP50=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "amdefine": ">=0.0.4"
-      }
-    },
-    "spawn-sync": {
-      "version": "1.0.15",
-      "resolved": "https://registry.npmjs.org/spawn-sync/-/spawn-sync-1.0.15.tgz",
-      "integrity": "sha1-sAeZVX63+wyDdsKdROih6mfldHY=",
-      "dev": true,
-      "requires": {
-        "concat-stream": "^1.4.7",
-        "os-shim": "^0.1.2"
-      }
-    },
-    "split": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/split/-/split-0.3.3.tgz",
-      "integrity": "sha1-zQ7qXmOiEd//frDwkcQTPi0N0o8=",
-      "dev": true,
-      "requires": {
-        "through": "2"
-      }
-    },
-    "sprintf-js": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/sprintf-js/-/sprintf-js-1.0.3.tgz",
-      "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=",
-      "dev": true
-    },
-    "sshpk": {
-      "version": "1.13.1",
-      "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.1.tgz",
-      "integrity": "sha1-US322mKHFEMW3EwY/hzx2UBzm+M=",
-      "dev": true,
-      "requires": {
-        "asn1": "~0.2.3",
-        "assert-plus": "^1.0.0",
-        "bcrypt-pbkdf": "^1.0.0",
-        "dashdash": "^1.12.0",
-        "ecc-jsbn": "~0.1.1",
-        "getpass": "^0.1.1",
-        "jsbn": "~0.1.0",
-        "tweetnacl": "~0.14.0"
-      },
-      "dependencies": {
-        "assert-plus": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
-          "integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
-          "dev": true
-        }
-      }
-    },
-    "statuses": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/statuses/-/statuses-1.3.1.tgz",
-      "integrity": "sha1-+vUbnrdKrvOzrPStX2Gr8ky3uT4=",
-      "dev": true
-    },
-    "stealthy-require": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/stealthy-require/-/stealthy-require-1.1.1.tgz",
-      "integrity": "sha1-NbCYdbT/SfJqd35QmzCQoyJr8ks=",
-      "dev": true
-    },
-    "stream-combiner": {
-      "version": "0.0.4",
-      "resolved": "https://registry.npmjs.org/stream-combiner/-/stream-combiner-0.0.4.tgz",
-      "integrity": "sha1-TV5DPBhSYd3mI8o/RMWGvPXErRQ=",
-      "dev": true,
-      "requires": {
-        "duplexer": "~0.1.1"
-      }
-    },
-    "stream-shift": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.0.tgz",
-      "integrity": "sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=",
-      "dev": true
-    },
-    "string-length": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/string-length/-/string-length-1.0.1.tgz",
-      "integrity": "sha1-VpcPscOFWOnnC3KL894mmsRa36w=",
-      "dev": true,
-      "requires": {
-        "strip-ansi": "^3.0.0"
-      }
-    },
-    "string.prototype.trim": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz",
-      "integrity": "sha1-0E3iyJ4Tf019IG8Ia17S+ua+jOo=",
-      "dev": true,
-      "requires": {
-        "define-properties": "^1.1.2",
-        "es-abstract": "^1.5.0",
-        "function-bind": "^1.0.2"
-      }
-    },
-    "string_decoder": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.2.tgz",
-      "integrity": "sha1-sp4fThEl+pehA4K4pTNze3SR4Xk=",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "~5.0.1"
-      }
-    },
-    "stringstream": {
-      "version": "0.0.5",
-      "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
-      "integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
-      "dev": true
-    },
-    "strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
-      "requires": {
-        "ansi-regex": "^2.0.0"
-      }
-    },
-    "strip-json-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
-      "dev": true
-    },
-    "supports-color": {
-      "version": "3.2.3",
-      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-3.2.3.tgz",
-      "integrity": "sha1-ZawFBLOVQXHYpklGsq48u4pfVPY=",
-      "dev": true,
-      "requires": {
-        "has-flag": "^1.0.0"
-      }
-    },
-    "symbol-tree": {
-      "version": "3.2.2",
-      "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.2.tgz",
-      "integrity": "sha1-rifbOPZgp64uHDt9G8KQgZuFGeY=",
-      "dev": true
-    },
-    "tape": {
-      "version": "4.9.1",
-      "resolved": "https://registry.npmjs.org/tape/-/tape-4.9.1.tgz",
-      "integrity": "sha512-6fKIXknLpoe/Jp4rzHKFPpJUHDHDqn8jus99IfPnHIjyz78HYlefTGD3b5EkbQzuLfaEvmfPK3IolLgq2xT3kw==",
-      "dev": true,
-      "requires": {
-        "deep-equal": "~1.0.1",
-        "defined": "~1.0.0",
-        "for-each": "~0.3.3",
-        "function-bind": "~1.1.1",
-        "glob": "~7.1.2",
-        "has": "~1.0.3",
-        "inherits": "~2.0.3",
-        "minimist": "~1.2.0",
-        "object-inspect": "~1.6.0",
-        "resolve": "~1.7.1",
-        "resumer": "~0.0.0",
-        "string.prototype.trim": "~1.1.2",
-        "through": "~2.3.8"
-      },
-      "dependencies": {
-        "glob": {
-          "version": "7.1.2",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
-          "integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
-          "dev": true,
-          "requires": {
-            "fs.realpath": "^1.0.0",
-            "inflight": "^1.0.4",
-            "inherits": "2",
-            "minimatch": "^3.0.4",
-            "once": "^1.3.0",
-            "path-is-absolute": "^1.0.0"
-          }
-        },
-        "minimist": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
-          "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-          "dev": true
-        },
-        "resolve": {
-          "version": "1.7.1",
-          "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.7.1.tgz",
-          "integrity": "sha512-c7rwLofp8g1U+h1KNyHL/jicrKg1Ek4q+Lr33AL65uZTinUZHe30D5HlyN5V9NW0JX1D5dXQ4jqW5l7Sy/kGfw==",
-          "dev": true,
-          "requires": {
-            "path-parse": "^1.0.5"
-          }
-        }
-      }
-    },
-    "through": {
-      "version": "2.3.8",
-      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
-      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU=",
-      "dev": true
-    },
-    "timed-out": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/timed-out/-/timed-out-2.0.0.tgz",
-      "integrity": "sha1-84sK6B03R9YoAB9B2vxlKs5nHAo=",
-      "dev": true
-    },
-    "touch": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/touch/-/touch-1.0.0.tgz",
-      "integrity": "sha1-RJy+LbrlqMgDjjDXH6D/RklHxN4=",
-      "dev": true,
-      "requires": {
-        "nopt": "~1.0.10"
-      },
-      "dependencies": {
-        "nopt": {
-          "version": "1.0.10",
-          "resolved": "https://registry.npmjs.org/nopt/-/nopt-1.0.10.tgz",
-          "integrity": "sha1-bd0hvSoxQXuScn3Vhfim83YI6+4=",
-          "dev": true,
-          "requires": {
-            "abbrev": "1"
-          }
-        }
-      }
-    },
-    "tough-cookie": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
-      "integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=",
-      "dev": true,
-      "requires": {
-        "punycode": "^1.4.1"
-      }
-    },
-    "tr46": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
-      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
-      "dev": true
-    },
-    "tunnel-agent": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
-      "integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
-      "dev": true,
-      "requires": {
-        "safe-buffer": "^5.0.1"
-      }
-    },
-    "tweetnacl": {
-      "version": "0.14.5",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
-      "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
-      "dev": true,
-      "optional": true
-    },
-    "type-check": {
-      "version": "0.3.2",
-      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz",
-      "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=",
-      "dev": true,
-      "requires": {
-        "prelude-ls": "~1.1.2"
-      }
-    },
-    "typedarray": {
-      "version": "0.0.6",
-      "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
-      "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=",
-      "dev": true
-    },
-    "uglify-js": {
-      "version": "2.8.28",
-      "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.28.tgz",
-      "integrity": "sha1-4zUDLfm7INy5GPFkWJ1a9H84g0o=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "source-map": "~0.5.1",
-        "uglify-to-browserify": "~1.0.0",
-        "yargs": "~3.10.0"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.6",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.6.tgz",
-          "integrity": "sha1-dc449SvwczxafwwRjYEzSiu19BI=",
-          "dev": true,
-          "optional": true
-        }
-      }
-    },
-    "uglify-to-browserify": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
-      "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-      "dev": true,
-      "optional": true
-    },
-    "undefsafe": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/undefsafe/-/undefsafe-0.0.3.tgz",
-      "integrity": "sha1-7Mo6A+VrmvFzhbqsgSrIO5lKli8=",
-      "dev": true
-    },
-    "unix-crypt-td-js": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unix-crypt-td-js/-/unix-crypt-td-js-1.0.0.tgz",
-      "integrity": "sha1-HAgkFQSBvHoB1J6Y8exmjYJBLzs=",
-      "dev": true
-    },
-    "unpipe": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
-      "integrity": "sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=",
-      "dev": true
-    },
-    "update-notifier": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/update-notifier/-/update-notifier-0.5.0.tgz",
-      "integrity": "sha1-B7XcIGazYnqztPUwEw9+3doHpMw=",
-      "dev": true,
-      "requires": {
-        "chalk": "^1.0.0",
-        "configstore": "^1.0.0",
-        "is-npm": "^1.0.0",
-        "latest-version": "^1.0.0",
-        "repeating": "^1.1.2",
-        "semver-diff": "^2.0.0",
-        "string-length": "^1.0.0"
-      }
-    },
-    "util-deprecate": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
-      "integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=",
-      "dev": true
-    },
-    "utils-merge": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/utils-merge/-/utils-merge-1.0.0.tgz",
-      "integrity": "sha1-ApT7kiu5N1FTVBxPcJYjHyh8ivg=",
-      "dev": true
-    },
-    "uuid": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
-      "integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE=",
-      "dev": true
-    },
-    "vary": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.1.tgz",
-      "integrity": "sha1-Z1Neu2lMHVIldFeYRmUyP1h+jTc=",
-      "dev": true
-    },
-    "verror": {
-      "version": "1.3.6",
-      "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
-      "integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=",
-      "dev": true,
-      "requires": {
-        "extsprintf": "1.0.2"
-      }
-    },
-    "walk-sync": {
-      "version": "0.3.1",
-      "resolved": "https://registry.npmjs.org/walk-sync/-/walk-sync-0.3.1.tgz",
-      "integrity": "sha1-VYoWrqyMDbWcAotzxm85doTs5GU=",
-      "dev": true,
-      "requires": {
-        "ensure-posix-path": "^1.0.0",
-        "matcher-collection": "^1.0.0"
-      }
-    },
-    "webidl-conversions": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-4.0.1.tgz",
-      "integrity": "sha1-gBWherg+fhsxFjhIas6B2mziBqA=",
-      "dev": true
-    },
-    "websocket-driver": {
-      "version": "0.6.5",
-      "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz",
-      "integrity": "sha1-XLJVbOuF9Dc8bYI4qmkchFThOjY=",
-      "dev": true,
-      "requires": {
-        "websocket-extensions": ">=0.1.1"
-      }
-    },
-    "websocket-extensions": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/websocket-extensions/-/websocket-extensions-0.1.1.tgz",
-      "integrity": "sha1-domUmcGEtu91Q3fC27DNbLVdKec=",
-      "dev": true
-    },
-    "whatwg-encoding": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/whatwg-encoding/-/whatwg-encoding-1.0.1.tgz",
-      "integrity": "sha1-PGxFGhmO567FWx7GHQkgxngBpfQ=",
-      "dev": true,
-      "requires": {
-        "iconv-lite": "0.4.13"
-      }
-    },
-    "whatwg-url": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-4.8.0.tgz",
-      "integrity": "sha1-0pgaqRSMHgCkHFphMRZqtGg7vMA=",
-      "dev": true,
-      "requires": {
-        "tr46": "~0.0.3",
-        "webidl-conversions": "^3.0.0"
-      },
-      "dependencies": {
-        "webidl-conversions": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
-          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
-          "dev": true
-        }
-      }
-    },
-    "which": {
-      "version": "1.2.14",
-      "resolved": "https://registry.npmjs.org/which/-/which-1.2.14.tgz",
-      "integrity": "sha1-mofEN48D6CfOyvGs31bHNsAcFOU=",
-      "dev": true,
-      "requires": {
-        "isexe": "^2.0.0"
-      }
-    },
-    "window-size": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
-      "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
-      "dev": true,
-      "optional": true
-    },
-    "wordwrap": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",
-      "integrity": "sha1-J1hIEIkUVqQXHI0CJkQa3pDLyus=",
-      "dev": true
-    },
-    "wrappy": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
-      "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
-      "dev": true
-    },
-    "write-file-atomic": {
-      "version": "1.3.4",
-      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-1.3.4.tgz",
-      "integrity": "sha1-+Aek8LHZ6ROuekgRLmzDrxmRtF8=",
-      "dev": true,
-      "requires": {
-        "graceful-fs": "^4.1.11",
-        "imurmurhash": "^0.1.4",
-        "slide": "^1.1.5"
-      }
-    },
-    "xdg-basedir": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/xdg-basedir/-/xdg-basedir-2.0.0.tgz",
-      "integrity": "sha1-7byQPMOF/ARSPZZqM1UEtVBNG9I=",
-      "dev": true,
-      "requires": {
-        "os-homedir": "^1.0.0"
-      }
-    },
-    "xml-name-validator": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-2.0.1.tgz",
-      "integrity": "sha1-TYuPHszTQZqjYgYb7O9RXh5VljU=",
-      "dev": true
-    },
-    "yallist": {
-      "version": "2.1.2",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
-      "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI=",
-      "dev": true
-    },
-    "yargs": {
-      "version": "3.10.0",
-      "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
-      "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
-      "dev": true,
-      "optional": true,
-      "requires": {
-        "camelcase": "^1.0.2",
-        "cliui": "^2.1.0",
-        "decamelize": "^1.0.0",
-        "window-size": "0.1.0"
-      }
-    }
-  }
-}
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 8e67c936..f99152ca 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -28,15 +28,29 @@ test('empty("root") removes DOM elements from container', function (t) {
   t.end();
 });
 
-// test('Mount app expect state to be Zero', function (t) {
-//   mount(0, update, view, id);
-//   var actual = document.getElementById(id).textContent;
-//   var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
-//   var expected = 0;
-//   t.equal(expected, actual_stripped, "Inital state set to 0.");
-//   t.end()
-// });
-//
+// use view and update from counter-reset example
+// to confirm that our elmish.mount function is generic!
+const { view, update} = require(path.resolve(__dirname,
+  '../examples/counter-reset/counter.js'));
+
+test('elmish.mount app expect state to be Zero', function (t) {
+  const root = document.getElementById(id);
+  elmish.mount(7, update, view, id);
+  const actual = document.getElementById(id).textContent;
+  const actual_stripped = parseInt(actual.replace('+', '')
+    .replace('-Reset', ''), 10);
+  const expected = 7;
+  t.equal(expected, actual_stripped, "Inital state set to 7.");
+  // reset to zero:
+  const btn = root.getElementsByClassName("reset")[0]; // click reset button
+  btn.click(); // Click the Reset button!
+  const state = parseInt(root.getElementsByClassName('count')[0]
+    .textContent, 10);
+  t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
+  elmish.empty(root); // clean up after tests
+  t.end()
+});
+
 // test('Test Update update(0) returns 0 (current state)', function (t) {
 //   var result = update(0);
 //   t.equal(result, 0, "Initial state: 0, No Action, Final state: 0");

From 28ab679cd2db12f63f9c9845bd2d975e3df06138 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 14 Jul 2018 23:00:04 +0100
Subject: [PATCH 013/164] add instructions for empty function in todo-list.md
 for #44

---
 examples/todo-list/elmish.js |  14 ++--
 test/elmish.test.js          |  20 +++---
 todo-list.md                 | 128 ++++++++++++++++++++++++++++-------
 3 files changed, 122 insertions(+), 40 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 72380046..f070ac90 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -6,7 +6,6 @@
  * `empty` the contents of a given DOM element "node" (before re-rendering).
  * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
  * @param  {Object} node the exact DOM node you want to empty
- * @return {Boolean} returns true once the DOM node is empty.
  * @example
  * // returns true (once the 'app' node is emptied)
  * const node = document.getElementById('app');
@@ -16,7 +15,6 @@ function empty(node) {
   while (node.lastChild) {
     node.removeChild(node.lastChild);
   }
-  return true;
 }
 
 /**
@@ -25,7 +23,6 @@ function empty(node) {
  * @param  {Function} update how the application state is updated ("controller")
  * @param  {Function} view function that renders HTML/DOM elements with model.
  * @param  {String} root_element_id root DOM element in which the app is mounted
- * @return {Boolean} returns true once app has been mounted.
  */
 function mount(model, update, view, root_element_id) {
   var root = document.getElementById(root_element_id); // root DOM element
@@ -37,14 +34,19 @@ function mount(model, update, view, root_element_id) {
     };
   };
   view(signal, model, root);                    // render initial model (once)
-  return true;
 }
 
+/**
+ * init initialises the document (Global) variable for DOM operations.
+ * @param  {Object} doc window.document in browser and JSDOM.document in tests.
+ * @return {Object} document returns whatever is passed in.
+ */
 function init(doc){
-  document = doc; // this is used for instantiating JSDOM. ignore!
+  document = doc; // this is used for instantiating JSDOM for testing.
+  return document;
 }
 
-/* The code block below ONLY Applies to tests run using Node.js */
+/* module.exports is needed to run the functions using Node.js for testing! */
 /* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
diff --git a/test/elmish.test.js b/test/elmish.test.js
index f99152ca..98822db9 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -1,13 +1,12 @@
-const test = require('tape');         // https://github.com/dwyl/learn-tape
-const fs = require('fs');
-const path = require('path');
-const elmish = require(path.resolve(__dirname,
-  '../examples/todo-list/elmish.js'))
+const test = require('tape');       // https://github.com/dwyl/learn-tape
+const fs = require('fs');           // read html files (see below)
+const path = require('path');       // so we can open files cross-platform
+const elmish = require('../examples/todo-list/elmish.js');
 const html = fs.readFileSync(path.resolve(__dirname,
   '../examples/todo-list/index.html'));
-require('jsdom-global')(html); // https://github.com/rstacruz/jsdom-global
-elmish.init(document); // pass the JSDOM into counter.js
-const id = 'test-app';
+require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
+elmish.init(document);              // pass JSDOM into elmish for DOM functions
+const id = 'test-app';              // all tests use separate root element
 
 test('empty("root") removes DOM elements from container', function (t) {
   // setup the test div:
@@ -23,15 +22,14 @@ test('empty("root") removes DOM elements from container', function (t) {
   t.equal(actual, text, "Contents of mydiv is: " + actual + ' == ' + text);
   t.equal(root.childElementCount, 1, "Root element " + id + " has 1 child el");
   // empty the root DOM node:
-  elmish.empty(root);
+  elmish.empty(root); // exercise the `empty` function!
   t.equal(root.childElementCount, 0, "After empty(root) has 0 child elements!")
   t.end();
 });
 
 // use view and update from counter-reset example
 // to confirm that our elmish.mount function is generic!
-const { view, update} = require(path.resolve(__dirname,
-  '../examples/counter-reset/counter.js'));
+const { view, update } = require('../examples/counter-reset/counter.js');
 
 test('elmish.mount app expect state to be Zero', function (t) {
   const root = document.getElementById(id);
diff --git a/todo-list.md b/todo-list.md
index f115c4f3..dca425f1 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -77,12 +77,115 @@ please see:
 and
 [front-end-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
 
+It's "OK" to ask: "_Where do I **start** (my **TDD** quest)?_" <br />
+The answer is: create **two** new files:
+`examples/todo-list/elmish.js` and `test/elmish.test.js`
 
+We will create a couple of tests and their corresponding functions _next_!
 
+## Elm(_ish_)
+
+Our **first step** is to _abstract_ and _generalise_
+the Elm Architecture (`mount`) and HTML ("DOM") functions
+we used in the "counter" example.
+
+Recall that there are **3 parts** to "TEA": `model`, `update` and `view`. <br />
+These correspond to the `M`odel, `C`ontroller and `V`iew of "**MVC**".
+The _reason_ Elm refers to the "Controller" as "Update" is because
+this name _more accurately_ reflects what the function _does_:
+it updates the _state_ of the application.
 
-### _Analyse_
+Our `update` and `view` functions form
+the "business logic" of our Todo List App,
+so we cannot abstract these. <br />
+The `update` function is a simple `switch` statement
+that "decides" how to to _update_ the app's `model`
+each `case` is functionality that is _specific_ to the Todo List App. <br />
+The `view` function _invokes_ several "helper" functions
+which create HTML elements e.g: `div` & `<button>`;
+these _can_ (_will_) be generalised (_below_).
+
+Let's kick-off with a couple of "_familiar_" _generic_ functions:
+`empty` and `mount`.
+
+
+#### `empty` the DOM
+
+Given that we _know_ we are going to use the `empty`
+function we used previously in our `counter`,
+`counter-reset` and `multiple-counters` examples (_in the "basic" TEA tutorial_)
+we can write a _test_ for the `empty` function quite easily.
+
+In the `test/elmish.test.js` file, type the following code:
+```js
+const test = require('tape');       // https://github.com/dwyl/learn-tape
+const fs = require('fs');           // read html files (see below)
+const path = require('path');       // so we can open files cross-platform
+const elmish = require('../examples/todo-list/elmish.js');
+const html = fs.readFileSync(path.resolve(__dirname,
+  '../examples/todo-list/index.html'));
+require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
+elmish.init(document);              // pass JSDOM into elmish for DOM functions
+const id = 'test-app';              // all tests use separate root element
+
+test('empty("root") removes DOM elements from container', function (t) {
+  // setup the test div:
+  const text = 'Hello World!'
+  const root = document.getElementById(id);
+  const div = document.createElement('div');
+  div.id = 'mydiv';
+  const txt = document.createTextNode(text);
+  div.appendChild(txt);
+  root.appendChild(div);
+  // check text of the div:
+  const actual = document.getElementById('mydiv').textContent;
+  t.equal(actual, text, "Contents of mydiv is: " + actual + ' == ' + text);
+  t.equal(root.childElementCount, 1, "Root element " + id + " has 1 child el");
+  // empty the root DOM node:
+  elmish.empty(root); // exercise the `empty` function!
+  t.equal(root.childElementCount, 0, "After empty(root) has 0 child elements!")
+  t.end();
+});
+```
+
+> _**Note**: if any line in this file is **unfamiliar** to you,
+please **first** go back over the previous example(s),
+**then** do bit of "googling" for any words or functions you don't recognise
+e.g: `childElementCount`,
+and if you are **still** "**stuck**"_,
+[***please open an
+issue***!](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues)
+_It's **essential** that you **understand** each **character**
+in the code **before** continuing to **avoid** "**confusion**" later._
+
+Now that we have the **test** for our `empty` function written,
+we can add the `empty` function to `examples/todo-list/elmish.js`:
+```js
+/**
+ * `empty` the contents of a given DOM element "node" (before re-rendering).
+ * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
+ * @param  {Object} node the exact DOM node you want to empty
+ * @example
+ * // returns true (once the 'app' node is emptied)
+ * const node = document.getElementById('app');
+ * empty(node);
+ */
+function empty(node) {
+  while (node.lastChild) {
+    node.removeChild(node.lastChild);
+  }
+}
+```
+
+If the comment syntax above the function definition is _unfamiliar_,
+please see:
+[https://github.com/dwyl/**learn-jsdoc**](https://github.com/dwyl/learn-jsdoc)
 
-Our _first_ step is to _analyse_ the required functionality of a Todo List.
+
+### _Analyse_ the TodoMVC App to "Gather Requirements"
+
+Once we have a
+Our _next_ step is to _analyse_ the required functionality of a Todo List.
 
 ### Todo List _Basic_ Functionality
 
@@ -156,27 +259,6 @@ _so don't expect to **understand** it all the first time without study._
 _Don't worry, we will walk through building each feature in detail._
 
 
-## Elm(_ish_)
-
-Our **first step** is to _abstract_ and _generalise_
-the Elm Architecture (`mount`) and HTML ("DOM") functions
-we used in the "counter" example.
-
-Recall that there are **3 parts** to "TEA": `model`, `update` and `view`. <br />
-These correspond to the `M`odel, `C`ontroller and `V`iew of "**MVC**".
-The _reason_ Elm refers to the "Controller" as "Update" is because
-this name _more accurately_ reflects what the function _does_:
-it updates the _state_ of the application.
-
-Our `update` and `view` functions form
-the "business logic" of our Todo List App,
-so we cannot abstract these. <br />
-The `update` function is a simple `switch` statement
-that "decides" how to to _update_ the app's `model`
-each `case` is functionality that is _specific_ to the Todo List App. <br />
-The `view` function _invokes_ several "helper" functions
-which create HTML elements e.g: `div` & `<button>`; these _can_ be generalised.
-
 
 ### HTML Elements (Functions)
 

From 560c9bcb9c7f0963f9bd4bdb7466e639ccf47960 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 14 Jul 2018 23:16:47 +0100
Subject: [PATCH 014/164] adds instructions+code for mount generic function in
 elm(ish) for #44

---
 todo-list.md | 119 ++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 90 insertions(+), 29 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index dca425f1..05c09227 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -182,11 +182,100 @@ please see:
 [https://github.com/dwyl/**learn-jsdoc**](https://github.com/dwyl/learn-jsdoc)
 
 
+### `mount` the App
+
+The next function we need for "TEA" is `mount`.
+
+In the `test/elmish.test.js` file, type the following code:
+```js
+// use view and update from counter-reset example
+// to invoke elmish.mount() function and confirm it is generic!
+const { view, update } = require('../examples/counter-reset/counter.js');
+
+test('elmish.mount app expect state to be Zero', function (t) {
+  const root = document.getElementById(id);
+  elmish.mount(7, update, view, id);
+  const actual = document.getElementById(id).textContent;
+  const actual_stripped = parseInt(actual.replace('+', '')
+    .replace('-Reset', ''), 10);
+  const expected = 7;
+  t.equal(expected, actual_stripped, "Inital state set to 7.");
+  // reset to zero:
+  const btn = root.getElementsByClassName("reset")[0]; // click reset button
+  btn.click(); // Click the Reset button!
+  const state = parseInt(root.getElementsByClassName('count')[0]
+    .textContent, 10);
+  t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
+  elmish.empty(root); // clean up after tests
+  t.end()
+});
+```
+> _**Note**: we have "**borrowed**" this test from our previous example.
+see:_ `test/counter-reset.test.js`
+
+The corresponding code for the `mount` function
+in `examples/todo-list/elmish.js` is:
+```js
+/**
+ * `mount` mounts the app in the "root" DOM Element.
+ * @param  {Object} model store of the application's state.
+ * @param  {Function} update how the application state is updated ("controller")
+ * @param  {Function} view function that renders HTML/DOM elements with model.
+ * @param  {String} root_element_id root DOM element in which the app is mounted
+ */
+function mount(model, update, view, root_element_id) {
+  var root = document.getElementById(root_element_id); // root DOM element
+  function signal(action) {                     // signal function takes action
+    return function callback() {                // and returns callback
+      var updatedModel = update(model, action); // update model for the action
+      empty(root);                              // clear root el before rerender
+      view(signal, updatedModel, root);         // subsequent re-rendering
+    };
+  };
+  view(signal, model, root);                    // render initial model (once)
+}
+```
+
+
+Now that we have started creating the `elmish` generic functions,
+we need to know which _other_ functions we need.
+Let's take a look at the TodoMVC App to see what we need.
+
 ### _Analyse_ the TodoMVC App to "Gather Requirements"
 
-Once we have a
 Our _next_ step is to _analyse_ the required functionality of a Todo List.
 
+### _Recommended_ Background Reading: TodoMVC "_Vanilla_" JS
+
+By _far_ the best place to start for _understanding_ TodoMVC's layout/format,
+is the "Vanilla" JavaScript (_no "framework"_) implementation:
+https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanillajs
+
+Run it locally with:
+```
+git clone https://github.com/tastejs/todomvc.git
+cd todomvc/examples/vanillajs
+python -m SimpleHTTPServer 8000
+```
+Open your web browser to: http://localhost:8000
+
+![vanillajs-localhost](https://user-images.githubusercontent.com/194400/42632838-6e68c20c-85d6-11e8-8ae4-d688f5977704.png)
+
+_Play_ with the app by adding a few items,
+checking-off and toggling the views in the footer.
+
+> _**Note**: IMO the "**Vanilla**" **JS** implementation
+is quite complex and insufficiently documented_
+(_very few code comments and sparse_
+[`README.md`](https://github.com/tastejs/todomvc/tree/25a9e31eb32db752d959df18e4d214295a2875e8/examples/vanillajs)),
+_so don't expect to **understand** it all the first time without study._
+_Don't worry, we will walk through building each feature in detail._
+
+> If you are unable to run the TodoMVC locally, you can always view it online:
+>> Please add direct link here!
+
+
+
 ### Todo List _Basic_ Functionality
 
 A todo list has only 2 basic functions:
@@ -232,34 +321,6 @@ is ~~a great~~ the best way to _understand_ it. <br />
 This is the "physics" approach. see: https://youtu.be/L-s_3b5fRd8?t=22m37s
 
 
-### _Recommended_ Background Reading: TodoMVC "_Vanilla_" JS
-
-By _far_ the best place to start for _understanding_ TodoMVC's layout/format,
-is the "Vanilla" JavaScript (_no "framework"_) implementation:
-https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanillajs
-
-Run it locally with:
-```
-git clone https://github.com/tastejs/todomvc.git
-cd todomvc/examples/vanillajs
-python -m SimpleHTTPServer 8000
-```
-Open your web browser to: http://localhost:8000
-
-![vanillajs-localhost](https://user-images.githubusercontent.com/194400/42632838-6e68c20c-85d6-11e8-8ae4-d688f5977704.png)
-
-_Play_ with the app by adding a few items,
-checking-off and toggling the views in the footer.
-
-> _**Note**: IMO the "**Vanilla**" **JS** implementation
-is quite complex and insufficiently documented_
-(_very few code comments and sparse_
-[`README.md`](https://github.com/tastejs/todomvc/tree/25a9e31eb32db752d959df18e4d214295a2875e8/examples/vanillajs)),
-_so don't expect to **understand** it all the first time without study._
-_Don't worry, we will walk through building each feature in detail._
-
-
-
 ### HTML Elements (Functions)
 
 The _requirements_ for the HTML elements we _need_ for a Todo List

From cb414581855a2f7300872ac87806fd678f1e929a Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 15 Jul 2018 17:54:47 +0100
Subject: [PATCH 015/164] add elmish.attributes function to apply HTML
 attributes to node for
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/44

---
 examples/todo-list/elmish.js | 33 +++++++++++++++++--
 test/counter-reset.test.js   | 10 +++---
 test/elmish.test.js          | 35 +++++++++++++++-----
 todo-list.md                 | 62 ++++++++++++++++++++++++++++--------
 4 files changed, 110 insertions(+), 30 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index f070ac90..809d2d5f 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -36,6 +36,32 @@ function mount(model, update, view, root_element_id) {
   view(signal, model, root);                    // render initial model (once)
 }
 
+
+/**
+* attributes applies the desired attributes to the desired node.
+* Note: this function is "impure" because it "mutates" the node.
+* however it is idempotent; the "side effect" is only applied once.
+* @param {Array.<String>} attrlist list of attributes to be applied to the node
+* @param {Object} node DOM node upon which attribute(s) should be applied
+* @example
+* // returns node with attributes applied
+* div = attributes(["class=item", "id=mydiv", "active=true"], div);
+*/
+function attributes(attrlist, node) {
+  attrlist.forEach(function (attr) {
+    var a = attr.split('=');
+    switch(a[0]) {
+      case 'class':
+        node.className = a[1]; // apply CSS classes
+        break;
+      default:
+        break;
+    }
+  });
+  return node;
+}
+
+
 /**
  * init initialises the document (Global) variable for DOM operations.
  * @param  {Object} doc window.document in browser and JSDOM.document in tests.
@@ -51,11 +77,12 @@ function init(doc){
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     // view: view,
-    mount: mount,
+    attributes: attributes,
+    empty: empty,
+    init: init,
+    mount: mount
     // update: update,
     // div: div,
     // button: button,
-    empty: empty,
-    init: init
   }
 } else { init(document); }
diff --git a/test/counter-reset.test.js b/test/counter-reset.test.js
index 6ab9e196..51641a6c 100644
--- a/test/counter-reset.test.js
+++ b/test/counter-reset.test.js
@@ -13,9 +13,9 @@ const id = 'test-app';
 test('Mount app expect state to be Zero', function (t) {
   // console.log('mount', mount);
   mount(0, update, view, id);
-  console.log('document.getElementById(id)', document.getElementById(id), document.getElementById(id).childElementCount);
+  // console.log('document.getElementById(id)', document.getElementById(id), document.getElementById(id).childElementCount);
   var actual = document.getElementById(id).textContent;
-  console.log('actual:', actual);
+  // console.log('actual:', actual);
   var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
   var expected = 0;
   t.equal(actual_stripped, expected, "Inital state set to 0.");
@@ -42,7 +42,7 @@ test('Test Update decrement: update(3, "dec") returns 2', function (t) {
 
 
 test('click on "+" button (increment model by 1)', function (t) {
-  console.log('document', typeof document, document);
+  // console.log('document', typeof document, document);
   document.body.appendChild(div(id));
   mount(7, update, view, id);
 
@@ -53,10 +53,10 @@ test('click on "+" button (increment model by 1)', function (t) {
   var btn = document.getElementById('inc');
 
   btn.addEventListener('click', function() {
-    console.log('increment button CLICKed!!');
+    // console.log('increment button CLICKed!!');
     var state = parseInt( document.getElementById(id)
       .getElementsByClassName('count')[0].innerHTML, 10);
-    console.log('state:', state, 'typeof state:', typeof state);
+    // console.log('state:', state, 'typeof state:', typeof state);
     t.equal(state, 8,
     "End State is 8 after incrementing 7 by 1 (as expected)"); // incremented
     t.end();
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 98822db9..94872cf8 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -8,17 +8,18 @@ require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
 elmish.init(document);              // pass JSDOM into elmish for DOM functions
 const id = 'test-app';              // all tests use separate root element
 
-test('empty("root") removes DOM elements from container', function (t) {
+test('elmish.empty("root") removes DOM elements from container', function (t) {
   // setup the test div:
   const text = 'Hello World!'
+  const divid = "mydiv";
   const root = document.getElementById(id);
   const div = document.createElement('div');
-  div.id = 'mydiv';
+  div.id = divid;
   const txt = document.createTextNode(text);
   div.appendChild(txt);
   root.appendChild(div);
   // check text of the div:
-  const actual = document.getElementById('mydiv').textContent;
+  const actual = document.getElementById(divid).textContent;
   t.equal(actual, text, "Contents of mydiv is: " + actual + ' == ' + text);
   t.equal(root.childElementCount, 1, "Root element " + id + " has 1 child el");
   // empty the root DOM node:
@@ -49,8 +50,26 @@ test('elmish.mount app expect state to be Zero', function (t) {
   t.end()
 });
 
-// test('Test Update update(0) returns 0 (current state)', function (t) {
-//   var result = update(0);
-//   t.equal(result, 0, "Initial state: 0, No Action, Final state: 0");
-//   t.end();
-// });
+
+test('elmish.attributes applies an HTML attribute to a node', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  div = elmish.attributes(["class=apptastic"], div);
+  root.appendChild(div);
+  // test the div has the desired class:
+  const nodes = document.getElementsByClassName('apptastic');
+  t.equal(nodes.length, 1, "<div> has 'apptastic' class applied");
+  t.end();
+});
+
+test('test default branch of elmish.attributes (no effect)', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  // "Clone" the div DOM node before invoking the elmish.attributes
+  const clone = div.cloneNode(true);
+  div = elmish.attributes(["unrecognised_attribute=noise"], div);
+  t.deepEqual(div, clone, "<div> has not been altered");
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index 05c09227..311ae34c 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -184,7 +184,8 @@ please see:
 
 ### `mount` the App
 
-The next function we need for "TEA" is `mount`.
+The `mount` function is the "glue" or "wiring" function that
+connects the `model`, `update` and `view`; we _can_ _generalise_ it.
 
 In the `test/elmish.test.js` file, type the following code:
 ```js
@@ -213,7 +214,7 @@ test('elmish.mount app expect state to be Zero', function (t) {
 > _**Note**: we have "**borrowed**" this test from our previous example.
 see:_ `test/counter-reset.test.js`
 
-The corresponding code for the `mount` function
+The corresponding code with JSDOC for the `mount` function
 in `examples/todo-list/elmish.js` is:
 ```js
 /**
@@ -236,6 +237,36 @@ function mount(model, update, view, root_element_id) {
 }
 ```
 
+### `module.exports`
+
+In order to test the `elmish` functions we need to `export` them.
+Additionally, because we are using JSDOM
+to test our front-end functions using `tape`,
+we need an `init` function to pass in the JSDOM `document`.
+add the following lines to `examples/todo-list/elmish.js`:
+
+```js
+/**
+ * init initialises the document (Global) variable for DOM operations.
+ * @param  {Object} doc window.document in browser and JSDOM.document in tests.
+ * @return {Object} document returns whatever is passed in.
+ */
+function init(doc){
+  document = doc; // this is used for instantiating JSDOM for testing.
+  return document;
+}
+
+/* module.exports is needed to run the functions using Node.js for testing! */
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    empty: empty,
+    mount: mount,
+    init: init
+  }
+} else { init(document); }
+```
+
 
 Now that we have started creating the `elmish` generic functions,
 we need to know which _other_ functions we need.
@@ -261,6 +292,9 @@ Open your web browser to: http://localhost:8000
 
 ![vanillajs-localhost](https://user-images.githubusercontent.com/194400/42632838-6e68c20c-85d6-11e8-8ae4-d688f5977704.png)
 
+> If you are unable to run the TodoMVC locally, you can always view it online:
+http://todomvc.com/examples/vanillajs
+
 _Play_ with the app by adding a few items,
 checking-off and toggling the views in the footer.
 
@@ -271,9 +305,6 @@ is quite complex and insufficiently documented_
 _so don't expect to **understand** it all the first time without study._
 _Don't worry, we will walk through building each feature in detail._
 
-> If you are unable to run the TodoMVC locally, you can always view it online:
->> Please add direct link here!
-
 
 
 ### Todo List _Basic_ Functionality
@@ -404,6 +435,16 @@ We therefore need a pair of "helper" functions (_one for each argument_).
 
 
 
+#### `attributes`
+
+`attributes(list, node)`
+
+The `attributes` function is "impure" as it "mutates"
+the target DOM `node`, however the application of attributes
+to DOM node(s) is idempotent;
+the attribute will only be applied _once_ to the node
+regardless of how many times the `attributes` function is called.
+see: https://en.wikipedia.org/wiki/Idempotence
 
 
 
@@ -415,15 +456,8 @@ Demo: https://ellie-app.com/LTtNVQjfWVa1
 
 
 
-
-### `mount`
-
-The `mount` function is the "glue" or "wiring" function that
-connects the `model`, `update` and `view`; we _can_ `generalise` it.
-
-
-
-
+The Elm HTML Attributes package is:
+http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes
 
 
 

From 0b28ecac309b7026cf2a1d34e5241af85530cbe4 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 15 Jul 2018 20:18:19 +0100
Subject: [PATCH 016/164] add id case to attributes function for #44

---
 examples/todo-list/elmish.js |  3 +++
 test/elmish.test.js          | 16 +++++++++++++++-
 todo-list.md                 |  2 +-
 3 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 809d2d5f..4346864f 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -54,6 +54,9 @@ function attributes(attrlist, node) {
       case 'class':
         node.className = a[1]; // apply CSS classes
         break;
+      case 'id':
+        node.id = a[1]; // apply element id
+        break;
       default:
         break;
     }
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 94872cf8..11314f80 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -51,7 +51,7 @@ test('elmish.mount app expect state to be Zero', function (t) {
 });
 
 
-test('elmish.attributes applies an HTML attribute to a node', function (t) {
+test('elmish.attributes applies class HTML attribute to a node', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
   div.id = 'divid';
@@ -63,6 +63,20 @@ test('elmish.attributes applies an HTML attribute to a node', function (t) {
   t.end();
 });
 
+test('elmish.attributes applies id HTML attribute to a node', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let el = document.createElement('section');
+  el = elmish.attributes(["id=myid"], el);
+  const text = 'hello world!'
+  var txt = document.createTextNode(text);
+  el.appendChild(txt);
+  root.appendChild(el);
+  const actual = document.getElementById('myid').textContent;
+  t.equal(actual, text, "<section> has 'myid' id attribute");
+  t.end();
+});
+
 test('test default branch of elmish.attributes (no effect)', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
diff --git a/todo-list.md b/todo-list.md
index 311ae34c..bbb6b2cf 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -437,7 +437,7 @@ We therefore need a pair of "helper" functions (_one for each argument_).
 
 #### `attributes`
 
-`attributes(list, node)`
+`attributes(attrlist, node)`
 
 The `attributes` function is "impure" as it "mutates"
 the target DOM `node`, however the application of attributes

From 41dd1a62149969f07080ddbceb772c075c12f44e Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 15 Jul 2018 20:21:13 +0100
Subject: [PATCH 017/164] add package-lock.json to .gitignore #noise!

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index d42b6616..31af3606 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,3 +36,4 @@ jspm_packages
 # Optional REPL history
 .node_repl_history
 .DS_Store
+package-lock.json

From 21f05d5e9f9f9a556b2cb676734b2aa67a03d4eb Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 15 Jul 2018 20:22:29 +0100
Subject: [PATCH 018/164] add tap-spec to package.json and test script to
 "prettify" test output see: https://github.com/dwyl/learn-tape

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fe91a1e3..ee2da216 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "pre-commit": "^1.2.2",
     "qunit-tap": "^1.5.1",
     "qunitjs": "^2.3.2",
+    "tap-spec": "^5.0.0",
     "tape": "^4.9.1"
   },
   "scripts": {
@@ -26,7 +27,7 @@
     "postinstall": "npm test",
     "retest": "PORT=8000 node_modules/.bin/nodemon ./test/*.js",
     "start": "live-server --port=8000 --open=./examples",
-    "test": "istanbul cover tape ./test/*.test.js"
+    "test": "istanbul cover tape ./test/*.test.js | tap-spec"
   },
   "keywords": [
     "Elm",

From 25cd493114524e8b61e93abdef53e57a08a5df25 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 15 Jul 2018 22:05:57 +0100
Subject: [PATCH 019/164] add instructions for elmish attributes function #44

---
 todo-list.md | 90 ++++++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 74 insertions(+), 16 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index bbb6b2cf..995cd7a4 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -410,9 +410,9 @@ This is a "copy-paste" of the _generated_ code including the Todo items:
 Let's split each one of these elements into it's own `function`
 (_with any necessary "helpers"_) in the order they appear.
 
-#### `<section>`
+### `<section>` HTML Element
 
-The _first_ HTML we encounter in the TodoMVC app is
+The _first_ HTML element we encounter in the TodoMVC app is
 `<section>`.
 `<section>` represents a standalone section — which doesn't have
 a more specific semantic element to represent it —
@@ -427,40 +427,98 @@ our `section` function (_which will create the_ `<section>` _DOM node_)
 will be a function with _two_ arguments:
 + `attributes` - a list (Array) of HTML attributes/properties
   e.g: `id` or `class`.
-+ `children` - a list (Array) of child HTML elements
++ `childnodes` - a list (Array) of child HTML elements
 (_nested within the_ `<section>`)
 
 Each of these function arguments will be "_applied_" to the HTML element.
 We therefore need a pair of "helper" functions (_one for each argument_).
 
+Section in Elm: http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
+<br />
+Demo: https://ellie-app.com/LTtNVQjfWVa1
+![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)
 
 
-#### `attributes`
+### `attributes`
 
-`attributes(attrlist, node)`
+The `JSDOC` comment for our `attributes` function is:
+```js
+/**
+* attributes applies the desired attributes to the desired node.
+* Note: this function is "impure" because it "mutates" the node.
+* however it is idempotent; the "side effect" is only applied once.
+* @param {Array.<String>} attrlist list of attributes to be applied to the node
+* @param {Object} node DOM node upon which attribute(s) should be applied
+* @example
+* // returns node with attributes applied
+* div = attributes(["class=item", "id=mydiv", "active=true"], div);
+*/
+```
+This should give you a _good idea_ of what code needs to be written.
 
-The `attributes` function is "impure" as it "mutates"
-the target DOM `node`, however the application of attributes
-to DOM node(s) is idempotent;
-the attribute will only be applied _once_ to the node
-regardless of how many times the `attributes` function is called.
-see: https://en.wikipedia.org/wiki/Idempotence
+But let's write the _test_ first!
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.attributes applies class HTML attribute to a node', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  div = elmish.attributes(["class=apptastic"], div);
+  root.appendChild(div);
+  // test the div has the desired class:
+  const nodes = document.getElementsByClassName('apptastic');
+  t.equal(nodes.length, 1, "<div> has 'apptastic' class applied");
+  t.end();
+});
+```
 
+Given the code in the test above,
+take a moment to think of how _you_ would write,
+the `attributes` function to apply a CSS `class` to an element. <br />
+Note: we have _seen_ the code _before_ in the `counter` example.
+The difference is this time we want it to be "generic";
+we want to apply a CSS `class` to _any_ DOM node.
 
+If you can, make the test _pass_
+by writing the `attributes` function.
+(_don't forget to_ `export` _the function at the end of the file_).
 
+If you get "stuck", checkout:
+https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
 
-Section in Elm: http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
-<br />
-Demo: https://ellie-app.com/LTtNVQjfWVa1
-![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)
 
 
 
-The Elm HTML Attributes package is:
+> The `attributes` function is "impure" as it "mutates"
+the target DOM `node`, however the application of attributes
+to DOM node(s) is idempotent;
+the attribute will only be applied _once_ to the node
+regardless of how many times the `attributes` function is called.
+see: https://en.wikipedia.org/wiki/Idempotence
+
+
+For reference, the Elm HTML Attributes package is:
 http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes
 
+### `childnodes`
 
+The `childnodes` functionality is a one-liner: <br />
+```js
+childnodes.forEach(function(el){ parent.appendChild(el) });
+```
+It's easy to think: "_why bother to create a_ `function`...?" <br />
+The _reasons_ to create _small_ functions are: <br />
+**a)** Keep the _functionality_ "DRY" https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
+which means we can _easily_ track down all instances of function invocation.
+<br />
+**b)** If we ever need to modify the function, e.g: to performance optimise it, there is a _single_ definition.
+<br />
+**c)** It makes unit-testing the functionality easy;
+that's _great_ news for reliability!
 
+With that in mind, let's write a _test_ for the `childnodes` function!
+Add the following code to the `test/elmish.test.js` file: <br />
 
 
 

From 606e2935d0e278b36a6e609e0eb10bb9cc444a77 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 15 Jul 2018 22:12:42 +0100
Subject: [PATCH 020/164] rename attributes to add_attributes for clarity! #44

---
 examples/todo-list/elmish.js | 10 +++-------
 test/elmish.test.js          | 38 ++++++++++++++++++++++++++++++------
 todo-list.md                 | 12 ++++++------
 3 files changed, 41 insertions(+), 19 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 4346864f..ae458cfc 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -1,7 +1,3 @@
-
-
-
-
 /**
  * `empty` the contents of a given DOM element "node" (before re-rendering).
  * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
@@ -45,9 +41,9 @@ function mount(model, update, view, root_element_id) {
 * @param {Object} node DOM node upon which attribute(s) should be applied
 * @example
 * // returns node with attributes applied
-* div = attributes(["class=item", "id=mydiv", "active=true"], div);
+* div = add_attributes(["class=item", "id=mydiv", "active=true"], div);
 */
-function attributes(attrlist, node) {
+function add_attributes(attrlist, node) {
   attrlist.forEach(function (attr) {
     var a = attr.split('=');
     switch(a[0]) {
@@ -80,7 +76,7 @@ function init(doc){
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     // view: view,
-    attributes: attributes,
+    add_attributes: add_attributes,
     empty: empty,
     init: init,
     mount: mount
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 11314f80..a2b59690 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -51,11 +51,11 @@ test('elmish.mount app expect state to be Zero', function (t) {
 });
 
 
-test('elmish.attributes applies class HTML attribute to a node', function (t) {
+test('elmish.add_attributes applies HTML claa attribute to node', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
   div.id = 'divid';
-  div = elmish.attributes(["class=apptastic"], div);
+  div = elmish.add_attributes(["class=apptastic"], div);
   root.appendChild(div);
   // test the div has the desired class:
   const nodes = document.getElementsByClassName('apptastic');
@@ -63,11 +63,11 @@ test('elmish.attributes applies class HTML attribute to a node', function (t) {
   t.end();
 });
 
-test('elmish.attributes applies id HTML attribute to a node', function (t) {
+test('elmish.add_attributes applies id HTML attribute to a node', function (t) {
   const root = document.getElementById(id);
   elmish.empty(root);
   let el = document.createElement('section');
-  el = elmish.attributes(["id=myid"], el);
+  el = elmish.add_attributes(["id=myid"], el);
   const text = 'hello world!'
   var txt = document.createTextNode(text);
   el.appendChild(txt);
@@ -77,13 +77,39 @@ test('elmish.attributes applies id HTML attribute to a node', function (t) {
   t.end();
 });
 
-test('test default branch of elmish.attributes (no effect)', function (t) {
+test('elmish.add_attributes applies multiple attribute to node', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let el = document.createElement('span');
+  el = elmish.add_attributes(["id=myid", "class=totes mcawesome"], el);
+  const text = 'hello world'
+  var txt = document.createTextNode(text);
+  el.appendChild(txt);
+  root.appendChild(el);
+  const actual = document.getElementById('myid').textContent;
+  t.equal(actual, text, "<section> has 'myid' id attribute");
+  t.equal(el.className, 'totes mcawesome', "CSS class applied: ", el.className);
+  t.end();
+});
+
+test('test default branch of elmish.add_attributes (no effect)', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  // "Clone" the div DOM node before invoking the elmish.attributes
+  const clone = div.cloneNode(true);
+  div = elmish.add_attributes(["unrecognised_attribute=noise"], div);
+  t.deepEqual(div, clone, "<div> has not been altered");
+  t.end();
+});
+
+test('elmish.', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
   div.id = 'divid';
   // "Clone" the div DOM node before invoking the elmish.attributes
   const clone = div.cloneNode(true);
-  div = elmish.attributes(["unrecognised_attribute=noise"], div);
+  div = elmish.add_attributes(["unrecognised_attribute=noise"], div);
   t.deepEqual(div, clone, "<div> has not been altered");
   t.end();
 });
diff --git a/todo-list.md b/todo-list.md
index 995cd7a4..ca1b4d93 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -439,19 +439,19 @@ Demo: https://ellie-app.com/LTtNVQjfWVa1
 ![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)
 
 
-### `attributes`
+### `add_attributes`
 
-The `JSDOC` comment for our `attributes` function is:
+The `JSDOC` comment for our `add_attributes` function is:
 ```js
 /**
-* attributes applies the desired attributes to the desired node.
+* add_attributes applies the desired attributes to the desired node.
 * Note: this function is "impure" because it "mutates" the node.
 * however it is idempotent; the "side effect" is only applied once.
 * @param {Array.<String>} attrlist list of attributes to be applied to the node
 * @param {Object} node DOM node upon which attribute(s) should be applied
 * @example
 * // returns node with attributes applied
-* div = attributes(["class=item", "id=mydiv", "active=true"], div);
+* div = add_attributes(["class=item", "id=mydiv", "active=true"], div);
 */
 ```
 This should give you a _good idea_ of what code needs to be written.
@@ -460,11 +460,11 @@ But let's write the _test_ first!
 Add the following test to the `test/elmish.test.js` file: <br />
 
 ```js
-test('elmish.attributes applies class HTML attribute to a node', function (t) {
+test('elmish.add_attributes applies class HTML attribute to a node', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
   div.id = 'divid';
-  div = elmish.attributes(["class=apptastic"], div);
+  div = elmish.add_attributes(["class=apptastic"], div);
   root.appendChild(div);
   // test the div has the desired class:
   const nodes = document.getElementsByClassName('apptastic');

From 6763bae5e3040b58447898dfb41df9833470a5a4 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 15 Jul 2018 22:41:29 +0100
Subject: [PATCH 021/164] adds elmish.append_children test, docs & function for
 #44

---
 examples/todo-list/elmish.js | 18 ++++++++++++++++--
 test/elmish.test.js          | 12 ++++++------
 todo-list.md                 | 32 +++++++++++++++++++++++++++++++-
 3 files changed, 53 insertions(+), 9 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index ae458cfc..f5cc72e1 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -34,7 +34,7 @@ function mount(model, update, view, root_element_id) {
 
 
 /**
-* attributes applies the desired attributes to the desired node.
+* `add_attributes` applies the desired attributes to the desired node.
 * Note: this function is "impure" because it "mutates" the node.
 * however it is idempotent; the "side effect" is only applied once.
 * @param {Array.<String>} attrlist list of attributes to be applied to the node
@@ -60,9 +60,22 @@ function add_attributes(attrlist, node) {
   return node;
 }
 
+/**
+ * `append_children` appends an array of HTML elements to a parent DOM node.
+ * @param  {Array.<Object>} childnodes array of child DOM nodes.
+ * @param  {Object} parent the "parent" DOM node where children will be added.
+ * @return {Object} returns parent DOM node with appended children
+ * @example
+ * // returns the parent node with the "children" appended
+ * var parent = elmish.append_children([div, p, section], parent);
+ */
+function append_children (childnodes, parent) {
+  childnodes.forEach(function (el) { parent.appendChild(el) });
+  return parent;
+}
 
 /**
- * init initialises the document (Global) variable for DOM operations.
+ * `init` initialises the document (Global) variable for DOM operations.
  * @param  {Object} doc window.document in browser and JSDOM.document in tests.
  * @return {Object} document returns whatever is passed in.
  */
@@ -77,6 +90,7 @@ if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     // view: view,
     add_attributes: add_attributes,
+    append_children: append_children,
     empty: empty,
     init: init,
     mount: mount
diff --git a/test/elmish.test.js b/test/elmish.test.js
index a2b59690..b4411725 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -103,13 +103,13 @@ test('test default branch of elmish.add_attributes (no effect)', function (t) {
   t.end();
 });
 
-test('elmish.', function (t) {
+test('elmish.append_children appends child DOM nodes to parent', function (t) {
   const root = document.getElementById(id);
+  elmish.empty(root); // clear the test DOM before!
   let div = document.createElement('div');
-  div.id = 'divid';
-  // "Clone" the div DOM node before invoking the elmish.attributes
-  const clone = div.cloneNode(true);
-  div = elmish.add_attributes(["unrecognised_attribute=noise"], div);
-  t.deepEqual(div, clone, "<div> has not been altered");
+  let p = document.createElement('p');
+  let section = document.createElement('section');
+  elmish.append_children([div, p, section], root);
+  t.equal(root.childElementCount, 3, "Root element " + id + " has 3 child els");
   t.end();
 });
diff --git a/todo-list.md b/todo-list.md
index ca1b4d93..b6ea129f 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -503,9 +503,11 @@ http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes
 
 ### `childnodes`
 
+
+
 The `childnodes` functionality is a one-liner: <br />
 ```js
-childnodes.forEach(function(el){ parent.appendChild(el) });
+childnodes.forEach(function (el) { parent.appendChild(el) });
 ```
 It's easy to think: "_why bother to create a_ `function`...?" <br />
 The _reasons_ to create _small_ functions are: <br />
@@ -520,8 +522,36 @@ that's _great_ news for reliability!
 With that in mind, let's write a _test_ for the `childnodes` function!
 Add the following code to the `test/elmish.test.js` file: <br />
 
+```js
+test.only('elmish.append_children appends child DOM nodes to parent', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root); // clear the test DOM before!
+  let div = document.createElement('div');
+  let p = document.createElement('p');
+  let section = document.createElement('section');
+  elmish.append_children([div, p, section], root);
+  t.equal(root.childElementCount, 3, "Root element " + id + " has 3 child els");
+  t.end();
+});
+```
+
+Now, based on the following `JSDOC` comment:
+```js
+/**
+ * `append_children` appends an array of HTML elements to a parent DOM node.
+ * @param  {Array.<Object>} childnodes array of child DOM nodes.
+ * @param  {Object} parent the "parent" DOM node where children will be added.
+ * @return {Object} returns parent DOM node with appended children
+ * @example
+ * // returns the parent node with the "children" appended
+ * var parent = elmish.append_children([div, p, section], parent);
+ */
+```
 
+Implementing this function to make the test pass should be
+the easiest one so far. (_see above for "one-liner" clue_...). <br />
 
+Don't forget to remove the `.only` from the test, before you move on!
 
 <!--
 

From ac5eeb3a1d263cfbc5fd0862d79ddf7a98cca827 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 15 Jul 2018 23:18:15 +0100
Subject: [PATCH 022/164] rename to elmish.append_childnodes for clarity ...
 #44

---
 examples/todo-list/elmish.js | 12 +++++-------
 test/elmish.test.js          |  4 ++--
 todo-list.md                 | 19 +++++++++++++------
 3 files changed, 20 insertions(+), 15 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index f5cc72e1..e7c981dc 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -67,9 +67,9 @@ function add_attributes(attrlist, node) {
  * @return {Object} returns parent DOM node with appended children
  * @example
  * // returns the parent node with the "children" appended
- * var parent = elmish.append_children([div, p, section], parent);
+ * var parent = elmish.append_childnodes([div, p, section], parent);
  */
-function append_children (childnodes, parent) {
+function append_childnodes (childnodes, parent) {
   childnodes.forEach(function (el) { parent.appendChild(el) });
   return parent;
 }
@@ -88,14 +88,12 @@ function init(doc){
 /* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
-    // view: view,
     add_attributes: add_attributes,
-    append_children: append_children,
+    append_childnodes: append_childnodes,
+    // button: button,
+    // div: div,
     empty: empty,
     init: init,
     mount: mount
-    // update: update,
-    // div: div,
-    // button: button,
   }
 } else { init(document); }
diff --git a/test/elmish.test.js b/test/elmish.test.js
index b4411725..fa658df1 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -103,13 +103,13 @@ test('test default branch of elmish.add_attributes (no effect)', function (t) {
   t.end();
 });
 
-test('elmish.append_children appends child DOM nodes to parent', function (t) {
+test('elmish.append_childnodes appends child DOM nodes to parent', function (t) {
   const root = document.getElementById(id);
   elmish.empty(root); // clear the test DOM before!
   let div = document.createElement('div');
   let p = document.createElement('p');
   let section = document.createElement('section');
-  elmish.append_children([div, p, section], root);
+  elmish.append_childnodes([div, p, section], root);
   t.equal(root.childElementCount, 3, "Root element " + id + " has 3 child els");
   t.end();
 });
diff --git a/todo-list.md b/todo-list.md
index b6ea129f..f33fde0a 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -501,11 +501,11 @@ see: https://en.wikipedia.org/wiki/Idempotence
 For reference, the Elm HTML Attributes package is:
 http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes
 
-### `childnodes`
+### `append_childnodes`
 
 
 
-The `childnodes` functionality is a one-liner: <br />
+The `append_childnodes` functionality is a one-liner: <br />
 ```js
 childnodes.forEach(function (el) { parent.appendChild(el) });
 ```
@@ -523,13 +523,13 @@ With that in mind, let's write a _test_ for the `childnodes` function!
 Add the following code to the `test/elmish.test.js` file: <br />
 
 ```js
-test.only('elmish.append_children appends child DOM nodes to parent', function (t) {
+test.only('elmish.append_childnodes appends child DOM nodes to parent', function (t) {
   const root = document.getElementById(id);
   elmish.empty(root); // clear the test DOM before!
   let div = document.createElement('div');
   let p = document.createElement('p');
   let section = document.createElement('section');
-  elmish.append_children([div, p, section], root);
+  elmish.append_childnodes([div, p, section], root);
   t.equal(root.childElementCount, 3, "Root element " + id + " has 3 child els");
   t.end();
 });
@@ -549,9 +549,16 @@ Now, based on the following `JSDOC` comment:
 ```
 
 Implementing this function to make the test pass should be
-the easiest one so far. (_see above for "one-liner" clue_...). <br />
+the _easiest_ one so far. (_see above for "one-liner" clue_...). <br />
+
+Don't forget to remove the `.only` from the test, once you finish.
+
+If you get "stuck", checkout:
+https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
+
+
+
 
-Don't forget to remove the `.only` from the test, before you move on!
 
 <!--
 

From 6a715febc5cb3bb9f14dc07645523e1ad6148063 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 16 Jul 2018 10:05:30 +0100
Subject: [PATCH 023/164] add Input Placeholder Attribute instructions, test
 and code for #44

---
 examples/todo-list/elmish.js |  3 ++
 test/elmish.test.js          | 13 ++++++
 todo-list.md                 | 89 ++++++++++++++++++++++++------------
 3 files changed, 77 insertions(+), 28 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index e7c981dc..7e6694c4 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -53,6 +53,9 @@ function add_attributes(attrlist, node) {
       case 'id':
         node.id = a[1]; // apply element id
         break;
+      case 'placeholder':
+        node.placeholder = a[1]; // add placeholder to <input> element
+        break;
       default:
         break;
     }
diff --git a/test/elmish.test.js b/test/elmish.test.js
index fa658df1..522ed4b5 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -92,6 +92,19 @@ test('elmish.add_attributes applies multiple attribute to node', function (t) {
   t.end();
 });
 
+test.only('elmish.add_attributes set placeholder on <input> element', function (t) {
+  const root = document.getElementById(id);
+  let input = document.createElement('input');
+  input.id = 'new-todo';
+  input = elmish.add_attributes(["placeholder=What needs to be done?"], input);
+  root.appendChild(input);
+  const placeholder = document.getElementById('new-todo')
+    .getAttribute("placeholder");
+  t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
+  t.end();
+});
+
+
 test('test default branch of elmish.add_attributes (no effect)', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
diff --git a/todo-list.md b/todo-list.md
index f33fde0a..d849f9e5 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -410,21 +410,18 @@ This is a "copy-paste" of the _generated_ code including the Todo items:
 Let's split each one of these elements into it's own `function`
 (_with any necessary "helpers"_) in the order they appear.
 
-### `<section>` HTML Element
+When building a House we don't think "build house" as our _first_ action.
+Instead we think: what are the "foundations" that need to be in place
+***before*** we lay the first brick?
 
-The _first_ HTML element we encounter in the TodoMVC app is
-`<section>`.
-`<section>` represents a standalone section — which doesn't have
-a more specific semantic element to represent it —
-it's an alternative way to group elements to a `<div>`.
+In our Todo List App we need a few "Helper Functions"
+before we start building the App.
 
-> info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section <br />
-> difference:
-https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div
+### HTML / DOM Creation Generic Helper Functions
 
-As with other "grouping" or "container" HTML elements,
-our `section` function (_which will create the_ `<section>` _DOM node_)
-will be a function with _two_ arguments:
+All "grouping" or "container" HTML elements e.g: `<div>` or `<section>`
+will be called with ***two arguments***:
+e.g: `var sec = section(attributes, childnodes)`
 + `attributes` - a list (Array) of HTML attributes/properties
   e.g: `id` or `class`.
 + `childnodes` - a list (Array) of child HTML elements
@@ -433,11 +430,6 @@ will be a function with _two_ arguments:
 Each of these function arguments will be "_applied_" to the HTML element.
 We therefore need a pair of "helper" functions (_one for each argument_).
 
-Section in Elm: http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
-<br />
-Demo: https://ellie-app.com/LTtNVQjfWVa1
-![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)
-
 
 ### `add_attributes`
 
@@ -475,37 +467,57 @@ test('elmish.add_attributes applies class HTML attribute to a node', function (t
 
 Given the code in the test above,
 take a moment to think of how _you_ would write,
-the `attributes` function to apply a CSS `class` to an element. <br />
+the `add_attributes` function to apply a CSS `class` to an element. <br />
 Note: we have _seen_ the code _before_ in the `counter` example.
 The difference is this time we want it to be "generic";
 we want to apply a CSS `class` to _any_ DOM node.
 
 If you can, make the test _pass_
-by writing the `attributes` function.
+by writing the `add_attributes` function.
 (_don't forget to_ `export` _the function at the end of the file_).
 
 If you get "stuck", checkout:
 https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
 
 
-
-
-> The `attributes` function is "impure" as it "mutates"
-the target DOM `node`, however the application of attributes
-to DOM node(s) is idempotent;
+> **Note**: The `add_attributes` function is "impure" as it "mutates"
+the target DOM `node`, this is more of a "fact of life" in JavaScript,
+and given that the application of attributes
+to DOM node(s) is idempotent we aren't "concerned" with "side effects";
 the attribute will only be applied _once_ to the node
-regardless of how many times the `attributes` function is called.
+regardless of how many times the `add_attributes` function is called.
 see: https://en.wikipedia.org/wiki/Idempotence
 
 
-For reference, the Elm HTML Attributes package is:
+For reference, the Elm HTML Attributes function on Elm package is:
 http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes
 
-### `append_childnodes`
+#### Input Placeholder Attribute
+
+The `<input>` form element (_where we create new Todo List items_)
+has a helpful `placeholder` _prompting_ us with a question:
+"_What needs to be done?_"
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test.only('elmish.add_attributes set placeholder on <input> element', function (t) {
+  const root = document.getElementById(id);
+  let input = document.createElement('input');
+  input.id = 'new-todo';
+  input = elmish.add_attributes(["placeholder=What needs to be done?"], input);
+  root.appendChild(input);
+  const placeholder = document.getElementById('new-todo')
+    .getAttribute("placeholder");
+  t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
+  t.end();
+});
+```
 
 
+### `append_childnodes`
 
-The `append_childnodes` functionality is a one-liner: <br />
+The `append_childnodes` _functionality_ is a "_one-liner_": <br />
 ```js
 childnodes.forEach(function (el) { parent.appendChild(el) });
 ```
@@ -557,6 +569,27 @@ If you get "stuck", checkout:
 https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
 
 
+### `<section>` HTML Element
+
+The _first_ HTML element we encounter in the TodoMVC app is
+`<section>`.
+`<section>` represents a standalone section — which doesn't have
+a more specific semantic element to represent it —
+it's an alternative way to group elements to a `<div>`.
+
+> info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section <br />
+> difference:
+https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div
+
+
+
+
+
+
+Section in Elm: http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
+<br />
+Demo: https://ellie-app.com/LTtNVQjfWVa1
+![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)
 
 
 

From cfa283240cf57d6c2c188b56b5aff425277e83ef Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 16 Jul 2018 10:06:11 +0100
Subject: [PATCH 024/164] remove test.only to ensure all tests are executed

---
 test/elmish.test.js | 2 +-
 todo-list.md        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/elmish.test.js b/test/elmish.test.js
index 522ed4b5..d893b4ed 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -92,7 +92,7 @@ test('elmish.add_attributes applies multiple attribute to node', function (t) {
   t.end();
 });
 
-test.only('elmish.add_attributes set placeholder on <input> element', function (t) {
+test('elmish.add_attributes set placeholder on <input> element', function (t) {
   const root = document.getElementById(id);
   let input = document.createElement('input');
   input.id = 'new-todo';
diff --git a/todo-list.md b/todo-list.md
index d849f9e5..a28fa3fa 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -501,7 +501,7 @@ has a helpful `placeholder` _prompting_ us with a question:
 Add the following test to the `test/elmish.test.js` file: <br />
 
 ```js
-test.only('elmish.add_attributes set placeholder on <input> element', function (t) {
+test('elmish.add_attributes set placeholder on <input> element', function (t) {
   const root = document.getElementById(id);
   let input = document.createElement('input');
   input.id = 'new-todo';

From 536f2ecce2127336aabeb8feaaf48d2b9d4b9119 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 16 Jul 2018 11:54:04 +0100
Subject: [PATCH 025/164] add elmish.add_attributes set data-id on <li> element
 for #44

---
 examples/todo-list/elmish.js |  3 ++
 examples/todo-list/todo.html | 93 ++++++++++++++++--------------------
 test/counter-reset.test.js   |  2 +-
 test/elmish.test.js          | 23 +++++++++
 todo-list.md                 | 47 ++++++++++++++++++
 5 files changed, 116 insertions(+), 52 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 7e6694c4..8d2de4d1 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -50,6 +50,9 @@ function add_attributes(attrlist, node) {
       case 'class':
         node.className = a[1]; // apply CSS classes
         break;
+      case 'data-id':
+        node.setAttribute('data-id', a[1]); // add data-id e.g: to <li>
+        break;
       case 'id':
         node.id = a[1]; // apply element id
         break;
diff --git a/examples/todo-list/todo.html b/examples/todo-list/todo.html
index 73b59069..685b03e2 100644
--- a/examples/todo-list/todo.html
+++ b/examples/todo-list/todo.html
@@ -1,51 +1,42 @@
-<!doctype html>
-<html lang="en" data-framework="javascript">
-	<head>
-		<meta charset="utf-8">
-		<title>VanillaJS • TodoMVC</title>
-		<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
-		<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
-	</head>
-	<body>
-		<section class="todoapp">
-			<header class="header">
-				<h1>todos</h1>
-				<input class="new-todo" placeholder="What needs to be done?" autofocus>
-			</header>
-			<section class="main">
-				<input id="toggle-all" class="toggle-all" type="checkbox">
-				<label for="toggle-all">Mark all as complete</label>
-				<ul class="todo-list"></ul>
-			</section>
-			<footer class="footer">
-				<span class="todo-count"></span>
-				<ul class="filters">
-					<li>
-						<a href="#/" class="selected">All</a>
-					</li>
-					<li>
-						<a href="#/active">Active</a>
-					</li>
-					<li>
-						<a href="#/completed">Completed</a>
-					</li>
-				</ul>
-				<button class="clear-completed">Clear completed</button>
-			</footer>
-		</section>
-		<footer class="info">
-			<p>Double-click to edit a todo</p>
-			<p>Created by <a href="http://twitter.com/oscargodson">Oscar Godson</a></p>
-			<p>Refactored by <a href="https://github.com/cburgmer">Christoph Burgmer</a></p>
-			<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
-		</footer>
-		<script src="node_modules/todomvc-common/base.js"></script>
-		<script src="js/helpers.js"></script>
-		<script src="js/store.js"></script>
-		<script src="js/model.js"></script>
-		<script src="js/template.js"></script>
-		<script src="js/view.js"></script>
-		<script src="js/controller.js"></script>
-		<script src="js/app.js"></script>
-	</body>
-</html>
+<section class="todoapp">
+  <header class="header">
+    <h1>todos</h1>
+    <input class="new-todo" placeholder="What needs to be done?" autofocus="">
+  </header>
+  <section class="main" style="display: block;">
+    <input id="toggle-all" class="toggle-all" type="checkbox">
+    <label for="toggle-all">Mark all as complete</label>
+    <ul class="todo-list">
+      <li data-id="1531397960010" class="completed">
+        <div class="view">
+          <input class="toggle" type="checkbox" checked="">
+          <label>Learn The Elm Architecture ("TEA")</label>
+          <button class="destroy"></button>
+        </div>
+      </li>
+      <li data-id="1531397981603" class="">
+        <div class="view">
+          <input class="toggle" type="checkbox">
+          <label>Build TEA Todo List App</label>
+          <button class="destroy">
+          </button>
+        </div>
+      </li>
+    </ul>
+  </section>
+  <footer class="footer" style="display: block;">
+    <span class="todo-count"><strong>1</strong> item left</span>
+    <ul class="filters">
+      <li>
+        <a href="#/" class="selected">All</a>
+      </li>
+      <li>
+        <a href="#/active" class="">Active</a>
+      </li>
+      <li>
+        <a href="#/completed">Completed</a>
+      </li>
+    </ul>
+    <button class="clear-completed" style="display: block;">Clear completed</button>
+  </footer>
+</section>
diff --git a/test/counter-reset.test.js b/test/counter-reset.test.js
index 51641a6c..30e434e0 100644
--- a/test/counter-reset.test.js
+++ b/test/counter-reset.test.js
@@ -83,7 +83,7 @@ test('Click reset button resets state to 0', function (t) {
 
 test('Test reset counter when model/state is 6 returns 0', function(t) {
   var result = update(6, "reset");
-  t.equal(result, 0);
+  t.equal(result, 0, "counter reset to 0 (Zero)");
   t.end()
 });
 
diff --git a/test/elmish.test.js b/test/elmish.test.js
index d893b4ed..4d72d0a8 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -104,6 +104,29 @@ test('elmish.add_attributes set placeholder on <input> element', function (t) {
   t.end();
 });
 
+test('elmish.add_attributes set data-id on <li> element', function (t) {
+  const root = document.getElementById(id);
+  let li = document.createElement('li');
+  li.id = 'task1';
+  li = elmish.add_attributes(["data-id=123"], li);
+  root.appendChild(li);
+  const data_id = document.getElementById('task1').getAttribute("data-id");
+  t.equal(data_id, '123', "data-id successfully added to <li> element");
+  t.end();
+});
+
+test.skip('elmish.add_attributes set "for" attribute <label> element', function (t) {
+  const root = document.getElementById(id);
+  let input = document.createElement('input');
+  input.id = 'new-todo';
+  input = elmish.add_attributes(["placeholder=What needs to be done?"], input);
+  root.appendChild(input);
+  const placeholder = document.getElementById('new-todo')
+    .getAttribute("placeholder");
+  t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
+  t.end();
+});
+
 
 test('test default branch of elmish.add_attributes (no effect)', function (t) {
   const root = document.getElementById(id);
diff --git a/todo-list.md b/todo-list.md
index a28fa3fa..89c39c7f 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -514,6 +514,53 @@ test('elmish.add_attributes set placeholder on <input> element', function (t) {
 });
 ```
 
+Write the necessary code to make this test _pass_ in `elmish.js`.
+
+
+#### add `data-id` attribute to `<li>`
+
+ `data-*` attributes allow us to store extra information on standard, semantic HTML elements without affecting regular attributes.
+For example in the case of a Todo List item,
+we want to store a reference to the "item id" in the DOM
+for that item, so that we know which item to check-off when
+the checkbox is clicked/tapped. _However_ we don't want to use the
+"traditional" `id` attribute, we can use `data-id`
+to keep a clear separation between the data and presentation.
+
+See: "Using data attributes"
+https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
+
+In the TodoMVC HTML code
+there are two `<li>` (_list elements_)
+which have the `data-id` attribute (_see above_).
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.add_attributes set data-id on <li> element', function (t) {
+  const root = document.getElementById(id);
+  let li = document.createElement('li');
+  li.id = 'task1';
+  li = elmish.add_attributes(["data-id=123"], li);
+  root.appendChild(li);
+  const data_id = document.getElementById('task1').getAttribute("data-id");
+  t.equal(data_id, '123', "data-id successfully added to <li> element");
+  t.end();
+});
+```
+Write the "case" in to make this test _pass_ in `elmish.js`.
+
+Tip: use `setAttribute()` method:
+https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
+
+#### label `for` attribute
+
+`for="toggle-all"`
+
+```js
+
+```
+
 
 ### `append_childnodes`
 

From 906639eef5d35c7673d14c5fe20d980c1703e287 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 16 Jul 2018 12:24:32 +0100
Subject: [PATCH 026/164] adds <label for="toggle-all"> for #44

---
 examples/todo-list/elmish.js |  3 +++
 test/elmish.test.js          | 15 +++++++--------
 todo-list.md                 | 26 ++++++++++++++++++++++++--
 3 files changed, 34 insertions(+), 10 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 8d2de4d1..3b158727 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -53,6 +53,9 @@ function add_attributes(attrlist, node) {
       case 'data-id':
         node.setAttribute('data-id', a[1]); // add data-id e.g: to <li>
         break;
+      case 'for':
+        node.setAttribute('for', a[1]); // e.g: <label for="toggle-all">
+        break;
       case 'id':
         node.id = a[1]; // apply element id
         break;
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 4d72d0a8..b331aac3 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -115,15 +115,14 @@ test('elmish.add_attributes set data-id on <li> element', function (t) {
   t.end();
 });
 
-test.skip('elmish.add_attributes set "for" attribute <label> element', function (t) {
+test('elmish.add_attributes set "for" attribute <label> element', function (t) {
   const root = document.getElementById(id);
-  let input = document.createElement('input');
-  input.id = 'new-todo';
-  input = elmish.add_attributes(["placeholder=What needs to be done?"], input);
-  root.appendChild(input);
-  const placeholder = document.getElementById('new-todo')
-    .getAttribute("placeholder");
-  t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
+  let li = document.createElement('li');
+  li.id = 'toggle';
+  li = elmish.add_attributes(["for=toggle-all"], li);
+  root.appendChild(li);
+  const label_for = document.getElementById('toggle').getAttribute("for");
+  t.equal(label_for, "toggle-all", '<label for="toggle-all">');
   t.end();
 });
 
diff --git a/todo-list.md b/todo-list.md
index 89c39c7f..0cd5f9e4 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -555,12 +555,34 @@ https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
 
 #### label `for` attribute
 
-`for="toggle-all"`
+Apply the `for` attribute to a `<label>`
+e.g: `<label for="toggle-all">`
 
-```js
+HTML `<label>` attributes `for`:
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Attributes
+
+
+Add the following test to the `test/elmish.test.js` file: <br />
 
+```js
+test.only('elmish.add_attributes set "for" attribute <label> element', function (t) {
+  const root = document.getElementById(id);
+  let li = document.createElement('li');
+  li.id = 'toggle';
+  li = elmish.add_attributes(["for=toggle-all"], li);
+  root.appendChild(li);
+  const label_for = document.getElementById('toggle').getAttribute("for");
+  t.equal(label_for, "toggle-all", '<label for="toggle-all">');
+  t.end();
+});
 ```
 
+Write the "case" in to make this test _pass_ in `elmish.js`.
+
+
+
+
+
 
 ### `append_childnodes`
 

From 511c868f8ae66220e3abddbfda6c2b86eb5f04fa Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 16 Jul 2018 12:43:51 +0100
Subject: [PATCH 027/164] update codecov script in .travis.yml (simplify)

---
 .travis.yml | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/.travis.yml b/.travis.yml
index ed4597c7..e6186937 100644
--- a/.travis.yml
+++ b/.travis.yml
@@ -1,7 +1,5 @@
 language: node_js
 node_js:
-  - 6
-before_install:
-  - pip install --user codecov
+  - node
 after_success:
-  - codecov --file coverage/lcov.info --disable search
+  - bash <(curl -s https://codecov.io/bash)

From 43bd3d6bd95bddbefa6f9d6a284d447df82d3c31 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 16 Jul 2018 13:03:48 +0100
Subject: [PATCH 028/164] add type attribute to <input> element e.g: <input
 id="toggle-all" type="checkbox"> for #44

---
 examples/todo-list/elmish.js |  3 +++
 test/elmish.test.js          | 13 +++++++++++++
 todo-list.md                 | 25 +++++++++++++++++++++++++
 3 files changed, 41 insertions(+)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 3b158727..526ce83f 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -62,6 +62,9 @@ function add_attributes(attrlist, node) {
       case 'placeholder':
         node.placeholder = a[1]; // add placeholder to <input> element
         break;
+      case 'type':
+        node.setAttribute('type', a[1]); // e.g: <input id="toggle-all" type="checkbox">
+        break;
       default:
         break;
     }
diff --git a/test/elmish.test.js b/test/elmish.test.js
index b331aac3..9495d14c 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -126,6 +126,19 @@ test('elmish.add_attributes set "for" attribute <label> element', function (t) {
   t.end();
 });
 
+test('elmish.add_attributes type="checkbox" on <input> element', function (t) {
+  const root = document.getElementById(id);
+  let input = document.createElement('input');
+  input = elmish.add_attributes(["type=checkbox", "id=toggle-all"], input);
+  root.appendChild(input);
+  const type_atrr = document.getElementById('toggle-all').getAttribute("type");
+  t.equal(type_atrr, "checkbox", '<input id="toggle-all" type="checkbox">');
+  t.end();
+});
+
+
+
+
 
 test('test default branch of elmish.add_attributes (no effect)', function (t) {
   const root = document.getElementById(id);
diff --git a/todo-list.md b/todo-list.md
index 0cd5f9e4..d66861e8 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -580,6 +580,31 @@ test.only('elmish.add_attributes set "for" attribute <label> element', function
 Write the "case" in to make this test _pass_ in `elmish.js`.
 
 
+#### `<input>` attribute `type`
+
+In order to use a Checkbox in our Todo List UI,
+we need to set the `type=checkbox` on the `<input>` element.
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.add_attributes type="checkbox" on <input> element', function (t) {
+  const root = document.getElementById(id);
+  let input = document.createElement('input');
+  input = elmish.add_attributes(["type=checkbox", "id=toggle-all"], input);
+  root.appendChild(input);
+  const type_atrr = document.getElementById('toggle-all').getAttribute("type");
+  t.equal(type_atrr, "checkbox", '<input id="toggle-all" type="checkbox">');
+  t.end();
+});
+```
+
+Write the "case" in to make this test _pass_ in `elmish.js`.
+
+`<input>` attribute `type`:
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
+
+
 
 
 

From 22c809bd1c2786f8698915ebddfde589a8b13e89 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 17 Jul 2018 17:02:36 +0100
Subject: [PATCH 029/164] adds instructions, docs, test and implementation for
 applying in-line styles in elm(ish) for #44

---
 examples/todo-list/elmish.js |  3 +++
 test/elmish.test.js          | 15 ++++++++++++---
 todo-list.md                 | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 526ce83f..72176d4e 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -62,6 +62,9 @@ function add_attributes(attrlist, node) {
       case 'placeholder':
         node.placeholder = a[1]; // add placeholder to <input> element
         break;
+      case 'style':
+        node.setAttribute("style", a[1]); // e.g: <div style="display: block;">
+        break;
       case 'type':
         node.setAttribute('type', a[1]); // e.g: <input id="toggle-all" type="checkbox">
         break;
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 9495d14c..426583f1 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -136,10 +136,19 @@ test('elmish.add_attributes type="checkbox" on <input> element', function (t) {
   t.end();
 });
 
+test('elmish.add_attributes apply style="display: block;"', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let sec = document.createElement('section');
+  root.appendChild(
+    elmish.add_attributes(["id=main", "style=display: block;"], sec)
+  );
+  const style = window.getComputedStyle(document.getElementById('main'));
+  t.equal(style._values.display, 'block', 'style="display: block;" applied!')
+  t.end();
+});
 
-
-
-
+/** DEFAULT BRANCH **/
 test('test default branch of elmish.add_attributes (no effect)', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
diff --git a/todo-list.md b/todo-list.md
index d66861e8..2d4619e2 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -605,7 +605,40 @@ Write the "case" in to make this test _pass_ in `elmish.js`.
 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
 
 
+#### Add `style` attribute to HTML element?
 
+In TodoMVC there are _three_ instances of in-line CSS styles.
+they are _all_ `style="display: block;"`.
+It's _unclear_ why setting _inline_ styles is _necessary_;
+we _prefer_ to be _consistent_ and
+***either*** use CSS `classes`
+with an _external_ stylesheet (_which TodoMVC already does!_)
+***or*** go _full_ "inline styles"
+e.g: http://package.elm-lang.org/packages/mdgriffith/style-elements/latest
+
+For now, let's add the `style` attribute
+to our `add_attributes` function for "completeness".
+
+see:
+https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test.only('elmish.add_attributes apply style="display: block;"', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let sec = document.createElement('section');
+  root.appendChild(
+    elmish.add_attributes(["id=main", "style=display: block;"], sec)
+  );
+  const style = window.getComputedStyle(document.getElementById('main'));
+  t.equal(style._values.display, 'block', 'style="display: block;" applied!')
+  t.end();
+});
+```
+
+Write the "case" in to make this test _pass_ in `elmish.js`.
 
 
 

From 4b1e6801fa4a2d29ffeb008eb9d551bfe5fd630a Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 18 Jul 2018 09:09:03 +0100
Subject: [PATCH 030/164] add instructions, docs, test & code for checked=true
 for #44

---
 examples/todo-list/elmish.js |  5 ++++-
 test/elmish.test.js          | 14 ++++++++++++-
 todo-list.md                 | 39 ++++++++++++++++++++++++++++++++++++
 3 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 72176d4e..dbbb23df 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -44,9 +44,12 @@ function mount(model, update, view, root_element_id) {
 * div = add_attributes(["class=item", "id=mydiv", "active=true"], div);
 */
 function add_attributes(attrlist, node) {
-  attrlist.forEach(function (attr) {
+  attrlist.forEach(function (attr) { // apply all props in array
     var a = attr.split('=');
+    console.log(a);
     switch(a[0]) {
+      case 'checked':
+        node.checked = (a[1] === 'true' ? true : false);
       case 'class':
         node.className = a[1]; // apply CSS classes
         break;
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 426583f1..17f8c179 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -148,12 +148,24 @@ test('elmish.add_attributes apply style="display: block;"', function (t) {
   t.end();
 });
 
+test('elmish.add_attributes checked=true on "done" item', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let input = document.createElement('input');
+  input = elmish.add_attributes(["type=checkbox", "id=item1", "checked=true"],
+    input);
+  root.appendChild(input);
+  const checked = document.getElementById('item1').checked;
+  t.equal(checked, true, '<input type="checkbox" checked=true>');
+  t.end();
+});
+
 /** DEFAULT BRANCH **/
 test('test default branch of elmish.add_attributes (no effect)', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
   div.id = 'divid';
-  // "Clone" the div DOM node before invoking the elmish.attributes
+  // "Clone" the div DOM node before invoking elmish.attributes to compare
   const clone = div.cloneNode(true);
   div = elmish.add_attributes(["unrecognised_attribute=noise"], div);
   t.deepEqual(div, clone, "<div> has not been altered");
diff --git a/todo-list.md b/todo-list.md
index 2d4619e2..3de14b0d 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -640,6 +640,45 @@ test.only('elmish.add_attributes apply style="display: block;"', function (t) {
 
 Write the "case" in to make this test _pass_ in `elmish.js`.
 
+If you get "stuck", checkout:
+https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
+
+
+#### `checked=true` attribute for "complete"/"done" items
+
+Todo List items that have been marked as "done" will have the `checked=true`
+attribute applied to them.
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.add_attributes checked=true on "done" item', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let input = document.createElement('input');
+  input = elmish.add_attributes(["type=checkbox", "id=item1", "checked=true"],
+    input);
+  root.appendChild(input);
+  const checked = document.getElementById('item1').checked;
+  t.equal(checked, true, '<input type="checkbox" checked=true>');
+  t.end();
+});
+```
+
+Write the code to make the test pass!
+
+> _**Implementation note**: while the VanillaJS TodoMVC view has
+`checked=""` (just an attribute with **no value**),
+we find this "unfriendly" to beginners
+so instead we are using `checked=true` instead because it's clearer.
+See: https://stackoverflow.com/a/10650302/1148249
+"Use true as it is marginally more efficient
+and is **more intention revealing** to maintainers._"
+
+For more detail on the `<input type="checkbox">`
+see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+
+
 
 
 ### `append_childnodes`

From 6b6495aa84583abd576a59f4b08cddb33c20a7e7 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 18 Jul 2018 09:13:42 +0100
Subject: [PATCH 031/164] add checked=false for toggling todo items

---
 examples/todo-list/elmish.js | 1 -
 test/elmish.test.js          | 8 ++++++++
 todo-list.md                 | 1 +
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index dbbb23df..66fbe812 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -46,7 +46,6 @@ function mount(model, update, view, root_element_id) {
 function add_attributes(attrlist, node) {
   attrlist.forEach(function (attr) { // apply all props in array
     var a = attr.split('=');
-    console.log(a);
     switch(a[0]) {
       case 'checked':
         node.checked = (a[1] === 'true' ? true : false);
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 17f8c179..07cca82e 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -157,6 +157,14 @@ test('elmish.add_attributes checked=true on "done" item', function (t) {
   root.appendChild(input);
   const checked = document.getElementById('item1').checked;
   t.equal(checked, true, '<input type="checkbox" checked=true>');
+  // test "checked=false" so we know we are able to "toggle" a todo item:
+  root.appendChild(
+    elmish.add_attributes(
+      ["type=checkbox", "id=item2", "checked=false"],
+      document.createElement('input')
+    )
+  );
+  t.equal(document.getElementById('item2').checked, false, 'checked=false');
   t.end();
 });
 
diff --git a/todo-list.md b/todo-list.md
index 3de14b0d..c7625770 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -661,6 +661,7 @@ test('elmish.add_attributes checked=true on "done" item', function (t) {
   root.appendChild(input);
   const checked = document.getElementById('item1').checked;
   t.equal(checked, true, '<input type="checkbox" checked=true>');
+  let input2
   t.end();
 });
 ```

From 111644ea8d19f1d71081b872515cd77eb90d1575 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 19 Jul 2018 10:14:12 +0100
Subject: [PATCH 032/164] add href attribute to <a> tags (Docs, Tests & Code)
 for #44

---
 examples/todo-list/elmish.js | 11 +++++++----
 test/elmish.test.js          | 20 ++++++++++++++++++-
 todo-list.md                 | 38 ++++++++++++++++++++++++++++++++++++
 3 files changed, 64 insertions(+), 5 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 66fbe812..d1609d7b 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -34,14 +34,14 @@ function mount(model, update, view, root_element_id) {
 
 
 /**
-* `add_attributes` applies the desired attributes to the desired node.
+* `add_attributes` applies the desired attribute(s) to the specified DOM node.
 * Note: this function is "impure" because it "mutates" the node.
 * however it is idempotent; the "side effect" is only applied once.
 * @param {Array.<String>} attrlist list of attributes to be applied to the node
 * @param {Object} node DOM node upon which attribute(s) should be applied
 * @example
 * // returns node with attributes applied
-* div = add_attributes(["class=item", "id=mydiv", "active=true"], div);
+* input = add_attributes(["type=checkbox", "id=todo1", "checked=true"], input);
 */
 function add_attributes(attrlist, node) {
   attrlist.forEach(function (attr) { // apply all props in array
@@ -58,8 +58,11 @@ function add_attributes(attrlist, node) {
       case 'for':
         node.setAttribute('for', a[1]); // e.g: <label for="toggle-all">
         break;
+      case 'href':
+        node.href = a[1]; // e.g: <a href="#/active">Active</a>
+        break;
       case 'id':
-        node.id = a[1]; // apply element id
+        node.id = a[1]; // apply element id e.g: <input id="toggle-all">
         break;
       case 'placeholder':
         node.placeholder = a[1]; // add placeholder to <input> element
@@ -68,7 +71,7 @@ function add_attributes(attrlist, node) {
         node.setAttribute("style", a[1]); // e.g: <div style="display: block;">
         break;
       case 'type':
-        node.setAttribute('type', a[1]); // e.g: <input id="toggle-all" type="checkbox">
+        node.setAttribute('type', a[1]); // e.g: <input id="go" type="checkbox">
         break;
       default:
         break;
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 07cca82e..b0c386fd 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -168,6 +168,24 @@ test('elmish.add_attributes checked=true on "done" item', function (t) {
   t.end();
 });
 
+
+test('elmish.add_attributes <a href="#/active">Active</a>', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  root.appendChild(
+    elmish.add_attributes(["href=#/active", "class=selected", "id=active"],
+      document.createElement('a')
+    )
+  );
+  // note: "about:blank" is the JSDOM default "window.location.href"
+  console.log('JSDOM window.location.href:', window.location.href);
+  // so when an href is set *relative* to this it becomes "about:blank#/my-link"
+  // so we *remove* it before the assertion below, but it works fine in browser!
+  const href = document.getElementById('active').href.replace('about:blank', '')
+  t.equal(href, "#/active", 'href="#/active" applied to "active" link');
+  t.end();
+});
+
 /** DEFAULT BRANCH **/
 test('test default branch of elmish.add_attributes (no effect)', function (t) {
   const root = document.getElementById(id);
@@ -180,7 +198,7 @@ test('test default branch of elmish.add_attributes (no effect)', function (t) {
   t.end();
 });
 
-test('elmish.append_childnodes appends child DOM nodes to parent', function (t) {
+test('elmish.append_childnodes append child DOM nodes to parent', function (t) {
   const root = document.getElementById(id);
   elmish.empty(root); // clear the test DOM before!
   let div = document.createElement('div');
diff --git a/todo-list.md b/todo-list.md
index c7625770..0b4c3ad9 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -679,6 +679,44 @@ and is **more intention revealing** to maintainers._"
 For more detail on the `<input type="checkbox">`
 see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
 
+#### Set `href` on `<a>` (anchor) element
+
+The "filters" in the `<footer>` of TodoMVC contain 3 links ("anchors") `<a>`
+each of which have an `href` attribute indicating where
+clicking/tapping on the link (filter) should "route" to.
+
+> We will return to routing later (_below_),
+for now we simply need to set the `href` attribute.
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.add_attributes <a href="#/active">Active</a>', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  root.appendChild(
+    elmish.add_attributes(["href=#/active", "class=selected", "id=active"],
+      document.createElement('a')
+    )
+  );
+  // note: "about:blank" is the JSDOM default "window.location.href"
+  console.log('JSDOM window.location.href:', window.location.href);
+  // so when an href is set *relative* to this it becomes "about:blank#/my-link"
+  // so we *remove* it before the assertion below, but it works fine in browser!
+  const href = document.getElementById('active').href.replace('about:blank', '')
+  t.equal(href, "#/active", 'href="#/active" applied to "active" link');
+  t.end();
+});
+```
+
+Write the code to make the test pass!
+
+
+Useful knowledge:
++ What: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
++ Why: https://stackoverflow.com/questions/4855168/what-is-href-and-why-is-it-used
++ How:  https://stackoverflow.com/questions/4689344/how-can-i-add-href-attribute-to-a-link-dynamically-using-javascript
+
 
 
 

From a3a4bfa7e8118eaf32e66eae2ab6f0b2db3121aa Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 19 Jul 2018 12:40:17 +0100
Subject: [PATCH 033/164] add instructions, tests & code for <input autofocus>
 for #44

---
 examples/todo-list/elmish.js |  7 +++-
 test/elmish.test.js          | 20 +++++++--
 todo-list.md                 | 81 +++++++++++++++++++++++++++++++-----
 3 files changed, 93 insertions(+), 15 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index d1609d7b..f6286858 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -47,6 +47,11 @@ function add_attributes(attrlist, node) {
   attrlist.forEach(function (attr) { // apply all props in array
     var a = attr.split('=');
     switch(a[0]) {
+      case 'autofocus':
+        console.log('set autofocus ...');
+        node.autofocus = "";
+        node.focus();
+        break;
       case 'checked':
         node.checked = (a[1] === 'true' ? true : false);
       case 'class':
@@ -81,7 +86,7 @@ function add_attributes(attrlist, node) {
 }
 
 /**
- * `append_children` appends an array of HTML elements to a parent DOM node.
+ * `append_childnodes` appends an array of HTML elements to a parent DOM node.
  * @param  {Array.<Object>} childnodes array of child DOM nodes.
  * @param  {Object} parent the "parent" DOM node where children will be added.
  * @return {Object} returns parent DOM node with appended children
diff --git a/test/elmish.test.js b/test/elmish.test.js
index b0c386fd..95e7de0e 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -51,7 +51,20 @@ test('elmish.mount app expect state to be Zero', function (t) {
 });
 
 
-test('elmish.add_attributes applies HTML claa attribute to node', function (t) {
+test('elmish.add_attributes adds "autofocus" attribute', function (t) {
+  document.getElementById(id).appendChild(
+    elmish.add_attributes(["class=new-todo", "autofocus", "id=new"],
+      document.createElement('input')
+    )
+  );
+  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
+  t.equal(document.getElementById('new'), document.activeElement,
+    '<input autofocus> is "activeElement"');
+  elmish.empty(document);
+  t.end();
+});
+
+test('elmish.add_attributes applies HTML class attribute to el', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
   div.id = 'divid';
@@ -59,13 +72,12 @@ test('elmish.add_attributes applies HTML claa attribute to node', function (t) {
   root.appendChild(div);
   // test the div has the desired class:
   const nodes = document.getElementsByClassName('apptastic');
-  t.equal(nodes.length, 1, "<div> has 'apptastic' class applied");
+  t.equal(nodes.length, 1, "<div> has 'apptastic' CSS class applied");
   t.end();
 });
 
 test('elmish.add_attributes applies id HTML attribute to a node', function (t) {
   const root = document.getElementById(id);
-  elmish.empty(root);
   let el = document.createElement('section');
   el = elmish.add_attributes(["id=myid"], el);
   const text = 'hello world!'
@@ -74,6 +86,7 @@ test('elmish.add_attributes applies id HTML attribute to a node', function (t) {
   root.appendChild(el);
   const actual = document.getElementById('myid').textContent;
   t.equal(actual, text, "<section> has 'myid' id attribute");
+  elmish.empty(root); // clear the "DOM"/"state" before next test
   t.end();
 });
 
@@ -168,7 +181,6 @@ test('elmish.add_attributes checked=true on "done" item', function (t) {
   t.end();
 });
 
-
 test('elmish.add_attributes <a href="#/active">Active</a>', function (t) {
   const root = document.getElementById(id);
   elmish.empty(root);
diff --git a/todo-list.md b/todo-list.md
index 0b4c3ad9..ebdcdb9e 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -6,7 +6,7 @@ You are about to "_level up_" your JavaScript and "TEA" skills!
 
 ## Why?
 
-Consolidate your understanding of The Elm Architecture (TEA)
+_Consolidate_ your understanding of The Elm Architecture (TEA)
 by creating a "real world" _useable_ App.
 
 ## What?
@@ -492,7 +492,7 @@ see: https://en.wikipedia.org/wiki/Idempotence
 For reference, the Elm HTML Attributes function on Elm package is:
 http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes
 
-#### Input Placeholder Attribute
+#### Input `placeholder` Attribute
 
 The `<input>` form element (_where we create new Todo List items_)
 has a helpful `placeholder` _prompting_ us with a question:
@@ -517,6 +517,47 @@ test('elmish.add_attributes set placeholder on <input> element', function (t) {
 Write the necessary code to make this test _pass_ in `elmish.js`.
 
 
+#### Input `autofocus`
+
+In order to "_guide_" the person using our Todo List app
+to create their _first_ Todo List _item_,
+**we want** the `<input>` field to be automatically "active"
+**so that** they can just start typing as soon as the app loads.
+
+This is achieved using the `autofocus` attribute.
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test.only('elmish.add_attributes add "autofocus" attribute', function (t) {
+  document.getElementById(id).appendChild(
+    elmish.add_attributes(["class=new-todo", "autofocus", "id=new"],
+      document.createElement('input')
+    )
+  );
+  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
+  t.equal(document.getElementById('new'), document.activeElement,
+    '<input autofocus> is "activeElement"');
+  elmish.empty(document);
+  t.end();
+});
+```
+
+Write the necessary code to make this test _pass_ in `elmish.js`.
+
+Relevant reading:
++ `<input>` attributes:
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
++
+
+> **Note**: while _all_ our _other_ HTML attributes
+follow the `key="value"` syntax,
+according to the W3C _specification_,
+simply adding the attribute _key_ in the element is "valid"
+e.g: `<input placeholder="What needs to be done?" autofocus>`
+see: https://stackoverflow.com/questions/4445765/html5-is-it-autofocus-autofocus-or-autofocus
+
+
 #### add `data-id` attribute to `<li>`
 
  `data-*` attributes allow us to store extra information on standard, semantic HTML elements without affecting regular attributes.
@@ -718,8 +759,6 @@ Useful knowledge:
 + How:  https://stackoverflow.com/questions/4689344/how-can-i-add-href-attribute-to-a-link-dynamically-using-javascript
 
 
-
-
 ### `append_childnodes`
 
 The `append_childnodes` _functionality_ is a "_one-liner_": <br />
@@ -755,18 +794,19 @@ test.only('elmish.append_childnodes appends child DOM nodes to parent', function
 Now, based on the following `JSDOC` comment:
 ```js
 /**
- * `append_children` appends an array of HTML elements to a parent DOM node.
+ * `append_childnodes` appends an array of HTML elements to a parent DOM node.
  * @param  {Array.<Object>} childnodes array of child DOM nodes.
  * @param  {Object} parent the "parent" DOM node where children will be added.
  * @return {Object} returns parent DOM node with appended children
  * @example
  * // returns the parent node with the "children" appended
- * var parent = elmish.append_children([div, p, section], parent);
+ * var parent = elmish.append_childnodes([div, p, section], parent);
  */
 ```
 
-Implementing this function to make the test pass should be
-the _easiest_ one so far. (_see above for "one-liner" clue_...). <br />
+_Implement_ this function to make the test pass.
+It _should_ be the _easiest_ one so far.
+(_see above for "one-liner" clue_...). <br />
 
 Don't forget to remove the `.only` from the test, once you finish.
 
@@ -787,11 +827,32 @@ it's an alternative way to group elements to a `<div>`.
 https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div
 
 
+We want to make our `view` function "***declarative***",
+this means our `view` should contain **no** "**control flow**"
+(i.e. `if` statements).
+The function invocations should reflect the final DOM quite closely
+see: https://en.wikipedia.org/wiki/Declarative_programming
 
+Example `view`:
+```js
+elmish.append_childnodes([
+  section(["class=todoapp"], [ // array of "child" elements
+    header(["class=header"], [
+      h1([], [
+        text("todos")
+      ]), // </h1>
+      input([
+        "class=new-todo",
+        "placeholder=What needs to be done?",
+        "autofocus"
+      ]) // <input> is "self-closing"
+    ]) // </header>
+  ])
+], documented.getElementById('my-app'));
+```
 
 
-
-Section in Elm: http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
+For reference, the section function in Elm: http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
 <br />
 Demo: https://ellie-app.com/LTtNVQjfWVa1
 ![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)

From 48e1bb85c4e6914b6608be563f9619f4e3921d53 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 19 Jul 2018 12:41:50 +0100
Subject: [PATCH 034/164] <input autofocus> unavailable on iOS Safari!
 https://caniuse.com/#feat=autofocus

---
 test/elmish.test.js | 2 +-
 todo-list.md        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/elmish.test.js b/test/elmish.test.js
index 95e7de0e..b49009a9 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -60,7 +60,7 @@ test('elmish.add_attributes adds "autofocus" attribute', function (t) {
   // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
   t.equal(document.getElementById('new'), document.activeElement,
     '<input autofocus> is "activeElement"');
-  elmish.empty(document);
+  elmish.empty(document.getElementById(id));
   t.end();
 });
 
diff --git a/todo-list.md b/todo-list.md
index ebdcdb9e..e2c3ffec 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -548,7 +548,7 @@ Write the necessary code to make this test _pass_ in `elmish.js`.
 Relevant reading:
 + `<input>` attributes:
 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
-+
++ https://caniuse.com/#feat=autofocus (unavailable on iOS Safari!)
 
 > **Note**: while _all_ our _other_ HTML attributes
 follow the `key="value"` syntax,

From 956ac1fe9a8d998cc9b7c6b2d97d3224a3d8c834 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 19 Jul 2018 13:21:25 +0100
Subject: [PATCH 035/164] add test, JSDOC and implementation of <section> html
 element for #44

---
 examples/todo-list/elmish.js | 21 ++++++++++++++--
 test/elmish.test.js          | 15 ++++++++++++
 todo-list.md                 | 47 +++++++++++++++++++++++++++---------
 3 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index f6286858..d4d987dd 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -43,7 +43,7 @@ function mount(model, update, view, root_element_id) {
 * // returns node with attributes applied
 * input = add_attributes(["type=checkbox", "id=todo1", "checked=true"], input);
 */
-function add_attributes(attrlist, node) {
+function add_attributes (attrlist, node) {
   attrlist.forEach(function (attr) { // apply all props in array
     var a = attr.split('=');
     switch(a[0]) {
@@ -99,6 +99,22 @@ function append_childnodes (childnodes, parent) {
   return parent;
 }
 
+/**
+ * section creates a <section> HTML element with attributes and childnodes
+ * @param {Array.<String>} attrlist list of attributes to be applied to the node
+ * @param {Array.<Object>} childnodes array of child DOM nodes.
+ * @return {Object} returns the <section> DOM node with appended children
+ * @example
+ * // returns the parent node with the "children" appended
+ * var section = elmish.section(["class=todoapp"], [h1, input]);
+ */
+function section (attrlist, childnodes) {
+  return append_childnodes(childnodes,
+    add_attributes(attrlist, document.createElement('section'))
+  );
+}
+
+
 /**
  * `init` initialises the document (Global) variable for DOM operations.
  * @param  {Object} doc window.document in browser and JSDOM.document in tests.
@@ -119,6 +135,7 @@ if (typeof module !== 'undefined' && module.exports) {
     // div: div,
     empty: empty,
     init: init,
-    mount: mount
+    mount: mount,
+    section: section
   }
 } else { init(document); }
diff --git a/test/elmish.test.js b/test/elmish.test.js
index b49009a9..45610a5b 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -220,3 +220,18 @@ test('elmish.append_childnodes append child DOM nodes to parent', function (t) {
   t.equal(root.childElementCount, 3, "Root element " + id + " has 3 child els");
   t.end();
 });
+
+test('elmish.section creates a <section> HTML element', function (t) {
+  const p = document.createElement('p');
+  p.id = 'para';
+  const text = 'Hello World!'
+  const txt = document.createTextNode(text);
+  p.appendChild(txt);
+  const section = elmish.section(["class=new-todo"], [p])
+  document.getElementById(id).appendChild(section); // add section with <p>
+  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
+  t.equal(document.getElementById('para').textContent, text,
+    '<section> <p>' + text + '</p></section> works as expected!');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index e2c3ffec..aed3e8ef 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1,4 +1,4 @@
-# Elm(ish) Todo List (TodoMVC) Mini App
+# Elm(ish) Todo List (TodoMVC) Mini App (TDD Tutorial!)
 
 If you've made it this far, give yourself a pat on the back!
 You are about to "_level up_" your JavaScript and "TEA" skills!
@@ -19,18 +19,19 @@ Along the way we will touch upon:
 + [x] Local Storage for Offline Support
 
 We will be abstracting all "TEA" related code
-into a file called `elmish.js`
-so that our Todo List application can be as simple as possible.
+into a file called **`elmish.js`**
+so that our Todo List application can be as simple
+and "declarative" as possible.
 
 ### Todo List?
 
 If you are _unfamiliar_ with Todo lists,
-they are a way of keeping a list of the tasks that need to be done.
+they are a way of keeping a list of the tasks that need to be done. <br />
 see: https://en.wikipedia.org/wiki/Time_management#Setting_priorities_and_goals
 
-Todo Lists or "Checklists" are the _best_ way of tracking tasks.
-Atul Gawande wrote a _fantastic_ book on this subject:
-https://www.amazon.com/Checklist-Manifesto-How-Things-Right/dp/0312430000
+Todo Lists or "Checklists" are the _best_ way of tracking tasks. <br />
+Atul Gawande wrote a _superb_ book on this subject:
+https://www.amazon.com/Checklist-Manifesto-How-Things-Right/dp/0312430000 <br />
 Watch: https://www.youtube.com/results?search_query=checklist+manifesto
 
 ### TodoMVC?
@@ -548,7 +549,7 @@ Write the necessary code to make this test _pass_ in `elmish.js`.
 Relevant reading:
 + `<input>` attributes:
 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
-+ https://caniuse.com/#feat=autofocus (unavailable on iOS Safari!)
++ https://caniuse.com/#feat=autofocus (_**unavailable** on **iOS Safari**!_)
 
 > **Note**: while _all_ our _other_ HTML attributes
 follow the `key="value"` syntax,
@@ -560,7 +561,8 @@ see: https://stackoverflow.com/questions/4445765/html5-is-it-autofocus-autofocus
 
 #### add `data-id` attribute to `<li>`
 
- `data-*` attributes allow us to store extra information on standard, semantic HTML elements without affecting regular attributes.
+`data-*` attributes allow us to store extra information on standard,
+semantic HTML elements without affecting regular attributes.
 For example in the case of a Todo List item,
 we want to store a reference to the "item id" in the DOM
 for that item, so that we know which item to check-off when
@@ -826,7 +828,6 @@ it's an alternative way to group elements to a `<div>`.
 > difference:
 https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div
 
-
 We want to make our `view` function "***declarative***",
 this means our `view` should contain **no** "**control flow**"
 (i.e. `if` statements).
@@ -851,8 +852,32 @@ elmish.append_childnodes([
 ], documented.getElementById('my-app'));
 ```
 
+Add the following _test_ to your `test/elmish.test.js` file: <br />
+
+```js
+
+```
+
+Based on the following `JSDOC` comment:
+```js
+/**
+ * section creates a <section> HTML element with attributes and childnodes
+ * @param {Array.<String>} attrlist list of attributes to be applied to the node
+ * @param {Array.<Object>} childnodes array of child DOM nodes.
+ * @return {Object} returns the <section> DOM node with appended children
+ * @example
+ * // returns the parent node with the "children" appended
+ * var section = elmish.section(["class=todoapp"], [h1, input]);
+ */
+```
+Attempt to create the `section` function
+using the `add_attributes` and `append_childnodes` "helper" functions.
+
+If you get "stuck", checkout:
+https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
 
-For reference, the section function in Elm: http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
+For reference, the section function in Elm:
+http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
 <br />
 Demo: https://ellie-app.com/LTtNVQjfWVa1
 ![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)

From 6c66a0423d591a707717438cadfc90485d40b4e7 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 19 Jul 2018 13:32:33 +0100
Subject: [PATCH 036/164] adds create_element DOM element creation function to
 "DRY" DOM code for #44

---
 examples/todo-list/elmish.js | 22 ++++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index d4d987dd..ffa179bc 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -100,20 +100,34 @@ function append_childnodes (childnodes, parent) {
 }
 
 /**
- * section creates a <section> HTML element with attributes and childnodes
+ * create_element is a "helper" function to "DRY" HTML element creation code
+ * creat *any* element with attributes and childnodes.
+ * @param {String} type of element to be created e.g: 'div', 'section'
  * @param {Array.<String>} attrlist list of attributes to be applied to the node
  * @param {Array.<Object>} childnodes array of child DOM nodes.
  * @return {Object} returns the <section> DOM node with appended children
  * @example
  * // returns the parent node with the "children" appended
- * var section = elmish.section(["class=todoapp"], [h1, input]);
+ * var div = elmish.create_element('div', ["class=todoapp"], [h1, input]);
  */
-function section (attrlist, childnodes) {
+function create_element (type, attrlist, childnodes) {
   return append_childnodes(childnodes,
-    add_attributes(attrlist, document.createElement('section'))
+    add_attributes(attrlist, document.createElement(type))
   );
 }
 
+/**
+ * section creates a <section> HTML element with attributes and childnodes
+ * @param {Array.<String>} attrlist list of attributes to be applied to the node
+ * @param {Array.<Object>} childnodes array of child DOM nodes.
+ * @return {Object} returns the <section> DOM node with appended children
+ * @example
+ * // returns the parent node with the "children" appended
+ * var section = elmish.section(["class=todoapp"], [h1, input]);
+ */
+function section (attrlist, childnodes) {
+  return create_element('section', attrlist, childnodes);
+}
 
 /**
  * `init` initialises the document (Global) variable for DOM operations.

From 59c5298b5212e2546a3e49ba63e26f36f208c867 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 19 Jul 2018 13:37:34 +0100
Subject: [PATCH 037/164] add <section> test code to todo-list.md for #44

---
 examples/todo-list/elmish.js |  2 +-
 test/elmish.test.js          |  1 +
 todo-list.md                 | 21 +++++++++++++++++++--
 3 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index ffa179bc..df26f5d4 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -122,7 +122,7 @@ function create_element (type, attrlist, childnodes) {
  * @param {Array.<Object>} childnodes array of child DOM nodes.
  * @return {Object} returns the <section> DOM node with appended children
  * @example
- * // returns the parent node with the "children" appended
+ * // returns <section> DOM element with attributes applied & children appended
  * var section = elmish.section(["class=todoapp"], [h1, input]);
  */
 function section (attrlist, childnodes) {
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 45610a5b..1011ae8f 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -227,6 +227,7 @@ test('elmish.section creates a <section> HTML element', function (t) {
   const text = 'Hello World!'
   const txt = document.createTextNode(text);
   p.appendChild(txt);
+  // create the `<section>` HTML element using our section function
   const section = elmish.section(["class=new-todo"], [p])
   document.getElementById(id).appendChild(section); // add section with <p>
   // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
diff --git a/todo-list.md b/todo-list.md
index aed3e8ef..abd04554 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -855,7 +855,21 @@ elmish.append_childnodes([
 Add the following _test_ to your `test/elmish.test.js` file: <br />
 
 ```js
-
+test('elmish.section creates a <section> HTML element', function (t) {
+  const p = document.createElement('p');
+  p.id = 'para';
+  const text = 'Hello World!'
+  const txt = document.createTextNode(text);
+  p.appendChild(txt);
+  // create the `<section>` HTML element using our section function
+  const section = elmish.section(["class=new-todo"], [p])
+  document.getElementById(id).appendChild(section); // add section with <p>
+  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
+  t.equal(document.getElementById('para').textContent, text,
+    '<section> <p>' + text + '</p></section> works as expected!');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
 ```
 
 Based on the following `JSDOC` comment:
@@ -866,7 +880,7 @@ Based on the following `JSDOC` comment:
  * @param {Array.<Object>} childnodes array of child DOM nodes.
  * @return {Object} returns the <section> DOM node with appended children
  * @example
- * // returns the parent node with the "children" appended
+ * // returns <section> DOM element with attributes applied & children appended
  * var section = elmish.section(["class=todoapp"], [h1, input]);
  */
 ```
@@ -875,6 +889,9 @@ using the `add_attributes` and `append_childnodes` "helper" functions.
 
 If you get "stuck", checkout:
 https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
+> _**Note**: in our "solution" we created a "helper" function
+called `create_element` to "DRY" the HTML element creation code;
+this is a *recommended** "best practice"._
 
 For reference, the section function in Elm:
 http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html

From be35d3e5768523df04ebd6ccaa7bb9fa1bfed7b9 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 20 Jul 2018 00:01:37 +0100
Subject: [PATCH 038/164] add two "compound" views, tests, docs & code to pass
 tests! (for #44)

---
 examples/todo-list/elmish.js | 130 +++++++++++++++++---------
 test/elmish.test.js          |  57 ++++++++++++
 todo-list.md                 | 171 +++++++++++++++++++++++++++++++++--
 3 files changed, 307 insertions(+), 51 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index df26f5d4..18d6e627 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -44,44 +44,45 @@ function mount(model, update, view, root_element_id) {
 * input = add_attributes(["type=checkbox", "id=todo1", "checked=true"], input);
 */
 function add_attributes (attrlist, node) {
-  attrlist.forEach(function (attr) { // apply all props in array
-    var a = attr.split('=');
-    switch(a[0]) {
-      case 'autofocus':
-        console.log('set autofocus ...');
-        node.autofocus = "";
-        node.focus();
-        break;
-      case 'checked':
-        node.checked = (a[1] === 'true' ? true : false);
-      case 'class':
-        node.className = a[1]; // apply CSS classes
-        break;
-      case 'data-id':
-        node.setAttribute('data-id', a[1]); // add data-id e.g: to <li>
-        break;
-      case 'for':
-        node.setAttribute('for', a[1]); // e.g: <label for="toggle-all">
-        break;
-      case 'href':
-        node.href = a[1]; // e.g: <a href="#/active">Active</a>
-        break;
-      case 'id':
-        node.id = a[1]; // apply element id e.g: <input id="toggle-all">
-        break;
-      case 'placeholder':
-        node.placeholder = a[1]; // add placeholder to <input> element
-        break;
-      case 'style':
-        node.setAttribute("style", a[1]); // e.g: <div style="display: block;">
-        break;
-      case 'type':
-        node.setAttribute('type', a[1]); // e.g: <input id="go" type="checkbox">
-        break;
-      default:
-        break;
-    }
-  });
+  if(attrlist && attrlist.length) {
+    attrlist.forEach(function (attr) { // apply all props in array
+      var a = attr.split('=');
+      switch(a[0]) {
+        case 'autofocus':
+          node.autofocus = "";
+          node.focus();
+          break;
+        case 'checked':
+          node.checked = (a[1] === 'true' ? true : false);
+        case 'class':
+          node.className = a[1]; // apply CSS classes
+          break;
+        case 'data-id':
+          node.setAttribute('data-id', a[1]); // add data-id e.g: to <li>
+          break;
+        case 'for':
+          node.setAttribute('for', a[1]); // e.g: <label for="toggle-all">
+          break;
+        case 'href':
+          node.href = a[1]; // e.g: <a href="#/active">Active</a>
+          break;
+        case 'id':
+          node.id = a[1]; // apply element id e.g: <input id="toggle-all">
+          break;
+        case 'placeholder':
+          node.placeholder = a[1]; // add placeholder to <input> element
+          break;
+        case 'style':
+          node.setAttribute("style", a[1]); // <div style="display: block;">
+          break;
+        case 'type':
+          node.setAttribute('type', a[1]); // <input id="go" type="checkbox">
+          break;
+        default:
+          break;
+      }
+    });
+  }
   return node;
 }
 
@@ -95,7 +96,9 @@ function add_attributes (attrlist, node) {
  * var parent = elmish.append_childnodes([div, p, section], parent);
  */
 function append_childnodes (childnodes, parent) {
-  childnodes.forEach(function (el) { parent.appendChild(el) });
+  if(childnodes && childnodes.length > 0) {
+    childnodes.forEach(function (el) { parent.appendChild(el) });
+  }
   return parent;
 }
 
@@ -129,6 +132,42 @@ function section (attrlist, childnodes) {
   return create_element('section', attrlist, childnodes);
 }
 
+function button (attrlist, childnodes) {
+  return create_element('button', attrlist, childnodes);
+}
+
+function div (attrlist, childnodes) {
+  return create_element('div', attrlist, childnodes);
+}
+
+function header (attrlist, childnodes) {
+  return create_element('header', attrlist, childnodes);
+}
+
+function h1 (attrlist, childnodes) {
+  return create_element('h1', attrlist, childnodes);
+}
+
+function input (attrlist, childnodes) {
+  return create_element('input', attrlist, childnodes);
+}
+
+function label (attrlist, childnodes) {
+  return create_element('label', attrlist, childnodes);
+}
+
+function li (attrlist, childnodes) {
+  return create_element('li', attrlist, childnodes);
+}
+
+function text (text) {
+  return document.createTextNode(text);
+}
+
+function ul (attrlist, childnodes) {
+  return create_element('ul', attrlist, childnodes);
+}
+
 /**
  * `init` initialises the document (Global) variable for DOM operations.
  * @param  {Object} doc window.document in browser and JSDOM.document in tests.
@@ -145,11 +184,18 @@ if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     add_attributes: add_attributes,
     append_childnodes: append_childnodes,
-    // button: button,
-    // div: div,
+    button: button,
+    div: div,
     empty: empty,
     init: init,
+    input: input,
+    h1, h1,
+    header: header,
+    label: label,
+    li: li,
     mount: mount,
-    section: section
+    section: section,
+    text: text,
+    ul: ul
   }
 } else { init(document); }
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 1011ae8f..a76b1ada 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -236,3 +236,60 @@ test('elmish.section creates a <section> HTML element', function (t) {
   elmish.empty(document.getElementById(id));
   t.end();
 });
+
+test('elmish create <header> view using HTML element functions', function (t) {
+  const { append_childnodes, section, header, h1, text, input } = elmish;
+  append_childnodes([
+    section(["class=todoapp"], [ // array of "child" elements
+      header(["class=header"], [
+        h1([], [
+          text("todos")
+        ]), // </h1>
+        input([
+          "id=new",
+          "class=new-todo",
+          "placeholder=What needs to be done?",
+          "autofocus"
+        ], []) // <input> is "self-closing"
+      ]) // </header>
+    ])
+  ], document.getElementById(id));
+
+  const place = document.getElementById('new').getAttribute('placeholder');
+  t.equal(place, "What needs to be done?", "placeholder set in <input> el");
+  t.equal(document.querySelector('h1').textContent, 'todos', '<h1>todos</h1>');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+
+test('elmish create "main" view using HTML DOM functions', function (t) {
+  const { section, input, label, ul, li, div, button, text } = elmish;
+  elmish.append_childnodes([
+    section(["class=main", "style=display: block;"], [
+      input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
+      label(["for=toggle-all"], [ text("Mark all as complete") ]),
+      ul(["class=todo-list"], [
+        li(["data-id=123", "class=completed"], [
+          div(["class=view"], [
+            input(["class=toggle", "type=checkbox", "checked=true"], []),
+            label([], [text('Learn The Elm Architecture ("TEA")')]),
+            button(["class=destroy"])
+          ]) // </div>
+        ]), // </li>
+        li(["data-id=234"], [
+          div(["class=view"], [
+            input(["class=toggle", "type=checkbox"], []),
+            label([], [text("Build TEA Todo List App")]),
+            button(["class=destroy"])
+          ]) // </div>
+        ]) // </li>
+      ]) // </ul>
+    ])
+  ], document.getElementById(id));
+  const done = document.querySelectorAll('.completed')[0].textContent;
+  t.equal(done, 'Learn The Elm Architecture ("TEA")', 'Done: Learn "TEA"');
+  const todo = document.querySelectorAll('.view')[1].textContent;
+  t.equal(todo, 'Build TEA Todo List App', 'Todo: Build TEA Todo List App');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index abd04554..7987d520 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -12,8 +12,9 @@ by creating a "real world" _useable_ App.
 ## What?
 
 _Use_ our "TEA" knowledge to build a simple "Todo List" Application. <br />
-Along the way we will touch upon:
+Along the way we will cover:
 
++ [x] Building an App using a pre-made CSS Styles/Framework!
 + [x] The Document Object Model (DOM)
 + [x] Browser Routing/Navigation
 + [x] Local Storage for Offline Support
@@ -268,10 +269,9 @@ if (typeof module !== 'undefined' && module.exports) {
 } else { init(document); }
 ```
 
-
 Now that we have started creating the `elmish` generic functions,
-we need to know which _other_ functions we need.
-Let's take a look at the TodoMVC App to see what we need.
+we need to know which _other_ functions we need. <br />
+Let's take a look at the TodoMVC App to "_analyse_ the requirements".
 
 ### _Analyse_ the TodoMVC App to "Gather Requirements"
 
@@ -818,8 +818,7 @@ https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/example
 
 ### `<section>` HTML Element
 
-The _first_ HTML element we encounter in the TodoMVC app is
-`<section>`.
+The _first_ HTML element we encounter in the TodoMVC app is `<section>`. <br />
 `<section>` represents a standalone section — which doesn't have
 a more specific semantic element to represent it —
 it's an alternative way to group elements to a `<div>`.
@@ -849,7 +848,7 @@ elmish.append_childnodes([
       ]) // <input> is "self-closing"
     ]) // </header>
   ])
-], documented.getElementById('my-app'));
+], document.getElementById('my-app'));
 ```
 
 Add the following _test_ to your `test/elmish.test.js` file: <br />
@@ -893,6 +892,23 @@ https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/example
 called `create_element` to "DRY" the HTML element creation code;
 this is a *recommended** "best practice"._
 
+The `JSDOC` comment for our `create_element` function is:
+```js
+/**
+ * create_element is a "helper" function to "DRY" HTML element creation code
+ * creat *any* element with attributes and childnodes.
+ * @param {String} type of element to be created e.g: 'div', 'section'
+ * @param {Array.<String>} attrlist list of attributes to be applied to the node
+ * @param {Array.<Object>} childnodes array of child DOM nodes.
+ * @return {Object} returns the <section> DOM node with appended children
+ * @example
+ * // returns the parent node with the "children" appended
+ * var div = elmish.create_element('div', ["class=todoapp"], [h1, input]);
+ */
+```
+`try` to write it for yourself before looking at the "answer".
+
+
 For reference, the section function in Elm:
 http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
 <br />
@@ -900,6 +916,143 @@ Demo: https://ellie-app.com/LTtNVQjfWVa1
 ![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)
 
 
+### Create a `view` using HTML Element Functions!
+
+Once we know how to create _one_ HTML element,
+it's _easy_ to create _all_ of them!
+Consider the following HTML for the `<header>` section of the TodoMVC App:
+
+```html
+<section class="todoapp">
+  <header class="header">
+    <h1>todos</h1>
+    <input class="new-todo" placeholder="What needs to be done?" autofocus="">
+  </header>
+</section>
+```
+
+There are five HTML elements: `<section>`, `<header>`, `<h1>`
+(_which has a `text` element_) and `<input>`.
+We need a _function_ to represent (_create_) each one of these HTML elements.
+
+Here is a **test** that creates the "real" header `view`:
+(_notice how the "shape" of the "elmish" functions matches the HTML_)
+
+```js
+test('elmish create <header> view using HTML element functions', function (t) {
+  const { append_childnodes, section, header, h1, text, input } = elmish;
+  append_childnodes([
+    section(["class=todoapp"], [ // array of "child" elements
+      header(["class=header"], [
+        h1([], [
+          text("todos")
+        ]), // </h1>
+        input([
+          "id=new",
+          "class=new-todo",
+          "placeholder=What needs to be done?",
+          "autofocus"
+        ], []) // <input> is "self-closing"
+      ]) // </header>
+    ])
+  ], document.getElementById(id));
+
+  const place = document.getElementById('new').getAttribute('placeholder');
+  t.equal(place, "What needs to be done?", "placeholder set in <input> el");
+  t.equal(document.querySelector('h1').textContent, 'todos', '<h1>todos</h1>');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+```
+We can define the required HTML element creation functions
+in only a few lines of code.
+
+Create (_and export_) the necessary functions to make the test pass:
+`header`, `h1`, `input` and `text`.
+
+**Tip**: each one of these HTML creation functions is a "_one-liner_" function body
+that invokes the `create_element` function defined above.
+Except the `text` function, which is still a "_one-liner_",
+but has only one argument and invokes a native method.
+
+If you get stuck trying to make this test pass,
+refer to the completed code:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js )
+
+Once you have the code to pass the above test,
+you will be ready to tackle something a bit bigger.
+Our next `view` is the `main` App:
+
+```html
+<section class="main" style="display: block;">
+  <input id="toggle-all" class="toggle-all" type="checkbox">
+  <label for="toggle-all">Mark all as complete</label>
+  <ul class="todo-list">
+    <li data-id="1531397960010" class="completed">
+      <div class="view">
+        <input class="toggle" type="checkbox" checked="">
+        <label>Learn The Elm Architecture ("TEA")</label>
+        <button class="destroy"></button>
+      </div>
+    </li>
+    <li data-id="1531397981603" class="">
+      <div class="view">
+        <input class="toggle" type="checkbox">
+        <label>Build TEA Todo List App</label>
+        <button class="destroy">
+        </button>
+      </div>
+    </li>
+  </ul>
+</section>
+```
+
+The corresponding _test_ for the above `view` is:
+
+```js
+test.only('elmish create "main" view using HTML DOM functions', function (t) {
+  const { section, input, label, ul, li, div, button, text } = elmish;
+  elmish.append_childnodes([
+    section(["class=main", "style=display: block;"], [
+      input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
+      label(["for=toggle-all"], [ text("Mark all as complete") ]),
+      ul(["class=todo-list"], [
+        li(["data-id=123", "class=completed"], [
+          div(["class=view"], [
+            input(["class=toggle", "type=checkbox", "checked=true"], []),
+            label([], [text('Learn The Elm Architecture ("TEA")')]),
+            button(["class=destroy"])
+          ]) // </div>
+        ]), // </li>
+        li(["data-id=234"], [
+          div(["class=view"], [
+            input(["class=toggle", "type=checkbox"], []),
+            label([], [text("Build TEA Todo List App")]),
+            button(["class=destroy"])
+          ]) // </div>
+        ]) // </li>
+      ]) // </ul>
+    ])
+  ], document.getElementById(id));
+  const done = document.querySelectorAll('.completed')[0].textContent;
+  t.equal(done, 'Learn The Elm Architecture ("TEA")', 'Done: Learn "TEA"');
+  const todo = document.querySelectorAll('.view')[1].textContent;
+  t.equal(todo, 'Build TEA Todo List App', 'Todo: Build TEA Todo List App');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+```
+
+To make this test pass you will need to write (_and export_)
+5 new functions: `label`, `ul`, `li`, `div` and `button`.
+
+These five functions are all _almost_ identical,
+so if you feel like being _creative_ in how you define them, go for it!
+Just make the tests pass and try to keep your code _maintainable_.
+
+Again, if you get stuck trying to make this test pass,
+refer to the completed code:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js )
 
 <!--
 
@@ -907,7 +1060,7 @@ Demo: https://ellie-app.com/LTtNVQjfWVa1
 
 If you feel _confident_ with your "TEA" skills you can _either_:
 + **`try`** and use them to **create your _own_ App** using "TEA"
-+ **Learn Elm**: https://github.com/dwyl/learn-elm
-+ (Join the herd and) learn React/Redux.
++ Move on and **Learn Elm**: https://github.com/dwyl/learn-elm
++ (Join the herd and) Learn & use React/Redux.
 
 -->

From 27ea95c62d70652c11e7091da538babb1e9ed85c Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 20 Jul 2018 10:45:48 +0100
Subject: [PATCH 039/164] add remaining instructions/docs, tests & code for
 <footer> view! #44 https://youtu.be/PSeJckOUZrs?t=41m16s

---
 examples/todo-list/elmish.js | 24 +++++++++-
 test/elmish.test.js          | 35 ++++++++++++++
 todo-list.md                 | 91 ++++++++++++++++++++++++++++++++++--
 3 files changed, 144 insertions(+), 6 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 18d6e627..4d86bc20 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -96,7 +96,9 @@ function add_attributes (attrlist, node) {
  * var parent = elmish.append_childnodes([div, p, section], parent);
  */
 function append_childnodes (childnodes, parent) {
-  if(childnodes && childnodes.length > 0) {
+  if(childnodes &&
+      Object.prototype.toString.call( childnodes ) === '[object Array]'
+      && childnodes.length > 0) {
     childnodes.forEach(function (el) { parent.appendChild(el) });
   }
   return parent;
@@ -132,6 +134,10 @@ function section (attrlist, childnodes) {
   return create_element('section', attrlist, childnodes);
 }
 
+function a (attrlist, childnodes) {
+  return create_element('a', attrlist, childnodes);
+}
+
 function button (attrlist, childnodes) {
   return create_element('button', attrlist, childnodes);
 }
@@ -140,6 +146,10 @@ function div (attrlist, childnodes) {
   return create_element('div', attrlist, childnodes);
 }
 
+function footer (attrlist, childnodes) {
+  return create_element('footer', attrlist, childnodes);
+}
+
 function header (attrlist, childnodes) {
   return create_element('header', attrlist, childnodes);
 }
@@ -160,6 +170,14 @@ function li (attrlist, childnodes) {
   return create_element('li', attrlist, childnodes);
 }
 
+function span (attrlist, childnodes) {
+  return create_element('span', attrlist, childnodes);
+}
+
+function strong (text_str) {
+  return create_element('strong', [], text(text_str));
+}
+
 function text (text) {
   return document.createTextNode(text);
 }
@@ -184,9 +202,11 @@ if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     add_attributes: add_attributes,
     append_childnodes: append_childnodes,
+    a: a,
     button: button,
     div: div,
     empty: empty,
+    footer: footer,
     init: init,
     input: input,
     h1, h1,
@@ -195,6 +215,8 @@ if (typeof module !== 'undefined' && module.exports) {
     li: li,
     mount: mount,
     section: section,
+    span: span,
+    strong: strong,
     text: text,
     ul: ul
   }
diff --git a/test/elmish.test.js b/test/elmish.test.js
index a76b1ada..e7e30c2e 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -293,3 +293,38 @@ test('elmish create "main" view using HTML DOM functions', function (t) {
   elmish.empty(document.getElementById(id));
   t.end();
 });
+
+test('elmish create <footer> view using HTML DOM functions', function (t) {
+  const { footer, span, strong, text, ul, li, a, button } = elmish;
+  elmish.append_childnodes([
+    footer(["class=footer", "style=display: block;"], [
+      span(["class=todo-count", "id=count"], [
+        strong("1"),
+        text("item left")
+      ]),
+      ul(["class=filters"], [
+        li([], [
+          a(["href=#/", "class=selected"], [text("All")])
+        ]),
+        li([], [
+          a(["href=#/active"], [text("Active")])
+        ]),
+        li([], [
+          a(["href=#/completed"], [text("Completed")])
+        ])
+      ]), // </ul>
+      button(["class=clear-completed", "style=display:block;"],
+        [text("Clear completed")]
+      )
+    ])
+  ], document.getElementById(id));
+
+  const left = document.getElementById('count').textContent;
+  t.equal(left, "item left", 'there is 1 todo item left');
+  const clear = document.querySelectorAll('button')[1].textContent;
+  t.equal(clear, "Clear completed", '<button> text is "Clear completed"');
+  const selected = document.querySelectorAll('.selected')[1].textContent;
+  t.equal(selected, "All", "All is selected by default");
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index 7987d520..a80b0262 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -979,7 +979,10 @@ If you get stuck trying to make this test pass,
 refer to the completed code:
 [/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js )
 
-Once you have the code to pass the above test,
+
+#### Create the "main" `view` functions
+
+Once you have the code to pass the above test(s),
 you will be ready to tackle something a bit bigger.
 Our next `view` is the `main` App:
 
@@ -1042,17 +1045,87 @@ test.only('elmish create "main" view using HTML DOM functions', function (t) {
   t.end();
 });
 ```
+Add the _test_ to your `test/elmish.test.js` file.
 
-To make this test pass you will need to write (_and export_)
+To make this test pass you will need to write (_and `export`_)
 5 new functions: `label`, `ul`, `li`, `div` and `button`.
 
-These five functions are all _almost_ identical,
-so if you feel like being _creative_ in how you define them, go for it!
+These five functions are all _almost_ identical so you _should_
+be able to get these done in under 5 minutes. (_don't over-think it_!)
 Just make the tests pass and try to keep your code _maintainable_.
 
 Again, if you get stuck trying to make this test pass,
 refer to the completed code:
-[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js )
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
+
+
+#### Create the `<footer>` view functions
+
+The final `view` we need functions for is `<footer>`:
+
+```js
+<footer class="footer" style="display: block;">
+  <span class="todo-count"><strong>1</strong> item left</span>
+  <ul class="filters">
+    <li>
+      <a href="#/" class="selected">All</a>
+    </li>
+    <li>
+      <a href="#/active" class="">Active</a>
+    </li>
+    <li>
+      <a href="#/completed">Completed</a>
+    </li>
+  </ul>
+  <button class="clear-completed" style="display: block;">
+    Clear completed
+  </button>
+</footer>
+```
+This `view` introduces 4 new tags:
+`<footer>`, `<span>`, `<strong>` and `<a>` (_in the order they appear_).
+
+Add the following _test_ for this `view`
+to your `test/elmish.test.js` file: <br />:
+```js
+test.only('elmish create <footer> view using HTML DOM functions', function (t) {
+  const { footer, span, strong, text, ul, li, a, button } = elmish;
+  elmish.append_childnodes([
+    footer(["class=footer", "style=display: block;"], [
+      span(["class=todo-count", "id=count"], [
+        strong("1"),
+        text("item left")
+      ]),
+      ul(["class=filters"], [
+        li([], [
+          a(["href=#/", "class=selected"], [text("All")])
+        ]),
+        li([], [
+          a(["href=#/active"], [text("Active")])
+        ]),
+        li([], [
+          a(["href=#/completed"], [text("Completed")])
+        ])
+      ]), // </ul>
+      button(["class=clear-completed", "style=display:block;"],
+        [text("Clear completed")]
+      )
+    ])
+  ], document.getElementById(id));
+
+  const left = document.getElementById('count').textContent;
+  t.equal(left, "item left", 'there is 1 todo item left');
+  const clear = document.querySelectorAll('button')[1].textContent;
+  t.equal(clear, "Clear completed", '<button> text is "Clear completed"');
+  const selected = document.querySelectorAll('.selected')[1].textContent;
+  t.equal(selected, "All", "All is selected by default");
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+```
+
+Add the 4 functions `footer`, `span`, `strong` and `a`
+to `elmish.js` and `export` them so the test will pass.
 
 <!--
 
@@ -1064,3 +1137,11 @@ If you feel _confident_ with your "TEA" skills you can _either_:
 + (Join the herd and) Learn & use React/Redux.
 
 -->
+
+### Why _Not_ use HTML5 `<template>`
+
+Templates are an _awesome_ feature in HTML5 which
+allow the creation of reusable markup!
+
+_Sadly_, they are unavailable in Internet Explorer.
+https://caniuse.com/#feat=template

From 59664d952cb3d33b095f0cd7da84d795a286185b Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 21 Jul 2018 14:06:40 +0100
Subject: [PATCH 040/164] adds example location.href and history.pushState code
 for https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/46

---
 examples/todo-list/index.html | 21 ++++++++--
 todo-list.md                  | 75 +++++++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+), 4 deletions(-)

diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
index b33390c5..808b762b 100644
--- a/examples/todo-list/index.html
+++ b/examples/todo-list/index.html
@@ -41,7 +41,7 @@ <h1>todos</h1>
   </section>
   <footer class="info">
     <p>Double-click to edit a todo</p>
-    <p>Created by <a href="https://github.com/nelsonic">@nelsonic</a></p>
+    <p>Created by <a href="https://github.com/dwyl">@dwyl community</a></p>
     <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
   </footer>
   <!-- <script src="node_modules/todomvc-common/base.js"></script>
@@ -53,10 +53,11 @@ <h1>todos</h1>
   <script src="js/controller.js"></script>
   <script src="js/app.js"></script> -->
 
-
-  <script src="todo-app.js" data-cover></script> <!-- load counter  -->
+<!--
+  <script src="todo-app.js" data-cover></script> load counter
 
   <script> mount({counters:[0, 1, 2]}, update, view, 'app'); </script>
+-->
   <!-- Below this point is all related to the Tests for the App -->
   <div id="test-app"></div> <!-- Create a test-app div to mount the app -->
   <div id="qunit"></div>    <!-- test results are displayed here -->
@@ -67,6 +68,18 @@ <h1>todos</h1>
   <!-- Load Blanket.js from CDN - for test coverage stats -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/blanket.js/1.1.4/blanket.js">
   </script>
-  <script src="test.js"></script>  <!-- always load test.js last -->
+  <!--  <script src="test.js"></script>  always load test.js last -->
+  <script>
+  setTimeout(function () { // delay for 1 second then run:
+    console.log('window.location.href:', window.location.href);
+    var base = window.location.href.split('#')[0];
+    var active = '#/active';
+    window.location.href = base + active;
+    console.log('window.location.href:', window.location.href, 'updated!');
+    console.log('window.history.length:', window.history.length);
+    window.history.pushState(null, 'Active', active);
+    console.log('window.history.length:', window.history.length);
+  }, 1000)
+  </script>
 </body>
 </html>
diff --git a/todo-list.md b/todo-list.md
index a80b0262..5ba89a43 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1127,6 +1127,78 @@ test.only('elmish create <footer> view using HTML DOM functions', function (t) {
 Add the 4 functions `footer`, `span`, `strong` and `a`
 to `elmish.js` and `export` them so the test will pass.
 
+if you get stuck trying to make this test pass,
+refer to the completed code:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
+
+
+### Routing
+
+Routing is how we use the browser URL/Address
+to keep track of what should be displayed in the browser window.
+
+#### Acceptance Criteria
+
++ [ ] URL (hash) should change to reflect navigation in the app
++ [ ] History of navigation should be preserved
+  + [ ] Browser "back button" should _work_.
++ [ ] Pasting (_or Book-marking_) a URL should display the desired content
+when the "page" is loaded.
+
+#### Background reading
+
+Routing uses _two_ web browser APIs:
+
++ Location: https://developer.mozilla.org/en-US/docs/Web/API/Location
++ History: https://developer.mozilla.org/en-US/docs/Web/API/History_API
+
+`location` allows us to "**get**" and "**set**" the URL (`href`)
+and `history` lets us set the page history (_before changing the `href`_)
+so that the user can use their browser's "back button"
+(_or other native browser navigation to go "back" through the history_).
+
+> Note: Internet Explorer <11 does not support `history.pushState`:
+https://caniuse.com/#search=pushstate
+
+#### Try it!
+
+Open a web browser window, open the "Developer Tools"
+and type (_or copy-paste_) the following code into the Console:
+
+```js
+setTimeout(function () { // delay for 1 second then run:
+  console.log('window.location.href:', window.location.href);
+  var base = window.location.href.split('#')[0];
+  var active = '#/active';
+  console.log('Setting the window.location.href to:', base + active);
+  window.location.href = base + active;
+  console.log('window.location.href:', window.location.href, 'updated!');
+  console.log('window.history.length:', window.history.length);
+  window.history.pushState(null, 'Active', active);
+  console.log('window.history.length:', window.history.length);
+}, 1000)
+```
+
+You should see something like this:
+![browser-routing-example](https://user-images.githubusercontent.com/194400/43035907-f3a1adac-8cee-11e8-9122-43fb756749a3.png)
+The values for `window.history.length` will be different
+(_depending on how many times you run the code_).
+
+But that's "_all_" there is to it!
+Now let's define some "helper functions" 
+so that we can use routing in our Todo List App!
+
+
+#### Implementation
+
+
+
+
+
+### Elm(ish) Store > Local Storage
+
+
+
 <!--
 
 ## What _Next_?
@@ -1145,3 +1217,6 @@ allow the creation of reusable markup!
 
 _Sadly_, they are unavailable in Internet Explorer.
 https://caniuse.com/#feat=template
+If you don't _need_ to "cater" for Internet Explorer,
+then checkout:
+https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro

From fa20108fd8c005170550d17f38b92aff3d23e120 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 22 Jul 2018 08:54:06 +0100
Subject: [PATCH 041/164] add JSDOC for elmish.route function for #46

---
 examples/todo-list/elmish.js | 17 +++++++++++
 test/elmish.test.js          | 12 ++++++++
 todo-list.md                 | 58 +++++++++++++++++++++++++++++-------
 3 files changed, 76 insertions(+), 11 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 4d86bc20..d59f8496 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -186,6 +186,22 @@ function ul (attrlist, childnodes) {
   return create_element('ul', attrlist, childnodes);
 }
 
+/**
+ * route sets the hash portion of the URL in a web browser
+ * and sets the browser history so that the "back button" works.
+ * @param {Object} state - the current state of the application.
+ * @param {String} title - the title of the "page" being navigated to
+ * @param {String} hash - the hash (URL) to be navigated to.
+ * @return {Object} new_state - state with hash updated to the *new* hash.
+ * @example
+ * // returns the state object with updated hash value:
+ * var new_state = elmish.route(state, 'Active', '#/active');
+ */
+function route (state, title, hash) {
+
+  return state;
+}
+
 /**
  * `init` initialises the document (Global) variable for DOM operations.
  * @param  {Object} doc window.document in browser and JSDOM.document in tests.
@@ -214,6 +230,7 @@ if (typeof module !== 'undefined' && module.exports) {
     label: label,
     li: li,
     mount: mount,
+    route: route,
     section: section,
     span: span,
     strong: strong,
diff --git a/test/elmish.test.js b/test/elmish.test.js
index e7e30c2e..7262a5fd 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -328,3 +328,15 @@ test('elmish create <footer> view using HTML DOM functions', function (t) {
   elmish.empty(document.getElementById(id));
   t.end();
 });
+
+test('elmish.route updates the url hash and sets history', function (t) {
+  const initial_hash = window.location.hash
+  console.log('START window.location.hash:', initial_hash, '(empty string)');
+  const initial_history_length = window.history.length;
+  console.log('START window.history.length:', initial_history_length);
+  // update the URL Hash and Set Browser History
+  const state = elmish.route({}, 'Active', '#/active');
+  console.log('UPDATED state:', state);
+  console.log('UPDATED window.location.hash:', window.location.hash);
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index 5ba89a43..cf2fef23 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -85,7 +85,7 @@ The answer is: create **two** new files:
 
 We will create a couple of tests and their corresponding functions _next_!
 
-## Elm(_ish_)
+## Elm(_ish_) ?
 
 Our **first step** is to _abstract_ and _generalise_
 the Elm Architecture (`mount`) and HTML ("DOM") functions
@@ -179,7 +179,9 @@ function empty(node) {
 }
 ```
 
-If the comment syntax above the function definition is _unfamiliar_,
+If the **comment syntax**
+above the function definition
+is _unfamiliar_,
 please see:
 [https://github.com/dwyl/**learn-jsdoc**](https://github.com/dwyl/learn-jsdoc)
 
@@ -411,22 +413,23 @@ This is a "copy-paste" of the _generated_ code including the Todo items:
 Let's split each one of these elements into it's own `function`
 (_with any necessary "helpers"_) in the order they appear.
 
-When building a House we don't think "build house" as our _first_ action.
-Instead we think: what are the "foundations" that need to be in place
-***before*** we lay the first brick?
+When building a House we don't think "build house" as our _first_ action. <br />
+_Instead_ we think: what are the "foundations" that need to be in place
+***before*** we lay the _first_ "brick"?
 
 In our Todo List App we need a few "Helper Functions"
 before we start building the App.
 
 ### HTML / DOM Creation Generic Helper Functions
 
-All "grouping" or "container" HTML elements e.g: `<div>` or `<section>`
+All "grouping" or "container" HTML elements
+e.g: `<div>`, `<section>` or `<span>`
 will be called with ***two arguments***:
 e.g: `var sec = section(attributes, childnodes)`
 + `attributes` - a list (Array) of HTML attributes/properties
   e.g: `id` or `class`.
 + `childnodes` - a list (Array) of child HTML elements
-(_nested within the_ `<section>`)
+(_nested within the_ `<section>` _element_)
 
 Each of these function arguments will be "_applied_" to the HTML element.
 We therefore need a pair of "helper" functions (_one for each argument_).
@@ -1163,7 +1166,7 @@ https://caniuse.com/#search=pushstate
 #### Try it!
 
 Open a web browser window, open the "Developer Tools"
-and type (_or copy-paste_) the following code into the Console:
+then type (_or copy-paste_) the following code into the Console:
 
 ```js
 setTimeout(function () { // delay for 1 second then run:
@@ -1180,17 +1183,50 @@ setTimeout(function () { // delay for 1 second then run:
 ```
 
 You should see something like this:
-![browser-routing-example](https://user-images.githubusercontent.com/194400/43035907-f3a1adac-8cee-11e8-9122-43fb756749a3.png)
+![browser-routing-example](https://user-images.githubusercontent.com/194400/43035907-f3a1adac-8cee-11e8-9122-43fb756749a3.png) <br />
+
 The values for `window.history.length` will be different
 (_depending on how many times you run the code_).
 
 But that's "_all_" there is to it!
-Now let's define some "helper functions" 
+Now let's define some "helper functions"
 so that we can use routing in our Todo List App!
 
 
 #### Implementation
 
+##### JSDOC
+
+We are _huge_ proponents of "document driven development"
+this includes writing _both_ `markdown` _and_ code comments.
+
+Consider the following JSDOC for the `route` function:
+
+```js
+/**
+ * route sets the hash portion of the URL in a web browser
+ * and sets the browser history so that the "back button" works.
+ * @param {Object} state - the current state of the application.
+ * @param {String} title - the title of the "page" being navigated to
+ * @param {String} hash - the hash (URL) to be navigated to.
+ * @return {Object} new_state - state with hash updated to the *new* hash.
+ * @example
+ * // returns the state object with updated hash value:
+ * var new_state = elmish.route(state, 'Active', '#/active');
+ */
+```
+
+
+##### Test!
+
+Add the following _test_ to your `test/elmish.test.js` file: <br />:
+
+```js
+
+```
+
+##### Code (_to make test(s) pass_)
+
 
 
 
@@ -1216,7 +1252,7 @@ Templates are an _awesome_ feature in HTML5 which
 allow the creation of reusable markup!
 
 _Sadly_, they are unavailable in Internet Explorer.
-https://caniuse.com/#feat=template
+https://caniuse.com/#feat=template <br />
 If you don't _need_ to "cater" for Internet Explorer,
 then checkout:
 https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro

From b22596e5d143e398d72c525bb2345ec281666145 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 22 Jul 2018 10:46:23 +0100
Subject: [PATCH 042/164] add instructions test(s) and code for routing! closes
 #46

---
 examples/todo-list/elmish.js |  9 +++++----
 test/elmish.test.js          | 14 ++++++++++++--
 todo-list.md                 | 31 +++++++++++++++++++++++++++++--
 3 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index d59f8496..ca3251c3 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -187,8 +187,7 @@ function ul (attrlist, childnodes) {
 }
 
 /**
- * route sets the hash portion of the URL in a web browser
- * and sets the browser history so that the "back button" works.
+ * route sets the hash portion of the URL in a web browser.
  * @param {Object} state - the current state of the application.
  * @param {String} title - the title of the "page" being navigated to
  * @param {String} hash - the hash (URL) to be navigated to.
@@ -198,8 +197,10 @@ function ul (attrlist, childnodes) {
  * var new_state = elmish.route(state, 'Active', '#/active');
  */
 function route (state, title, hash) {
-
-  return state;
+  window.location.hash = hash;
+  var new_state = JSON.parse(JSON.stringify(state)); // clone state
+  new_state.hash = hash;
+  return new_state;
 }
 
 /**
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 7262a5fd..4a3bce86 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -335,8 +335,18 @@ test('elmish.route updates the url hash and sets history', function (t) {
   const initial_history_length = window.history.length;
   console.log('START window.history.length:', initial_history_length);
   // update the URL Hash and Set Browser History
-  const state = elmish.route({}, 'Active', '#/active');
-  console.log('UPDATED state:', state);
+  const state = { hash: '' };
+  const new_hash = '#/active'
+  const new_state = elmish.route(state, 'Active', new_hash);
+  console.log('UPDATED window.history.length:', window.history.length);
+  console.log('UPDATED state:', new_state);
   console.log('UPDATED window.location.hash:', window.location.hash);
+  t.notEqual(initial_hash, window.location.hash, "location.hash has changed!");
+  t.equal(new_hash, new_state.hash, "state.hash is now: " + new_state.hash);
+  t.equal(new_hash, window.location.hash, "window.location.hash: "
+    + window.location.hash);
+  t.equal(initial_history_length + 1, window.history.length,
+    "window.history.length increased from: " + initial_history_length + ' to: '
+    + window.history.length);
   t.end();
 });
diff --git a/todo-list.md b/todo-list.md
index cf2fef23..f7d24ce4 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1222,13 +1222,40 @@ Consider the following JSDOC for the `route` function:
 Add the following _test_ to your `test/elmish.test.js` file: <br />:
 
 ```js
-
+test.only('elmish.route updates the url hash and sets history', function (t) {
+  const initial_hash = window.location.hash
+  console.log('START window.location.hash:', initial_hash, '(empty string)');
+  const initial_history_length = window.history.length;
+  console.log('START window.history.length:', initial_history_length);
+  // update the URL Hash and Set Browser History
+  const state = { hash: '' };
+  const new_hash = '#/active'
+  const new_state = elmish.route(state, 'Active', new_hash);
+  console.log('UPDATED window.history.length:', window.history.length);
+  console.log('UPDATED state:', new_state);
+  console.log('UPDATED window.location.hash:', window.location.hash);
+  t.notEqual(initial_hash, window.location.hash, "location.hash has changed!");
+  t.equal(new_hash, new_state.hash, "state.hash is now: " + new_state.hash);
+  t.equal(new_hash, window.location.hash, "window.location.hash: "
+    + window.location.hash);
+  t.equal(initial_history_length + 1, window.history.length,
+    "window.history.length increased from: " + initial_history_length + ' to: '
+    + window.history.length);
+  t.end();
+});
 ```
 
 ##### Code (_to make test(s) pass_)
 
+The code to make these tests pass is only 3 or 4 lines.
+(_depending on your implementation ..._)
+Provided the tests pass and you haven't "hard coded" the `return`,
+there is no "wrong answer".
+Try and figure it out for yourself before checking a solution.
 
-
+**`if`** you get stuck trying to make this test pass,
+refer to the completed code:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
 
 
 ### Elm(ish) Store > Local Storage

From a1a1e304107b4e864d188c1a5913dd89df5e99ed Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 22 Jul 2018 14:27:25 +0100
Subject: [PATCH 043/164] add intro text and sample code for saving Todo List
 data to localStorage for
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/47

---
 examples/todo-list/elmish.js |  5 +-
 todo-list.md                 | 91 +++++++++++++++++++++++++++++++++++-
 2 files changed, 94 insertions(+), 2 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index ca3251c3..1c6aef24 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -1,3 +1,4 @@
+(function() { //
 /**
  * `empty` the contents of a given DOM element "node" (before re-rendering).
  * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
@@ -133,7 +134,7 @@ function create_element (type, attrlist, childnodes) {
 function section (attrlist, childnodes) {
   return create_element('section', attrlist, childnodes);
 }
-
+// these are a *bit* repetitive, if you know a better way, please open an issue!
 function a (attrlist, childnodes) {
   return create_element('a', attrlist, childnodes);
 }
@@ -239,3 +240,5 @@ if (typeof module !== 'undefined' && module.exports) {
     ul: ul
   }
 } else { init(document); }
+
+})();
diff --git a/todo-list.md b/todo-list.md
index f7d24ce4..f6210c73 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1258,7 +1258,96 @@ refer to the completed code:
 [/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
 
 
-### Elm(ish) Store > Local Storage
+> _**Note**: do not "worry" about how to render the "right" content on the "page"
+in response to the URL (hash) changing, we will come to that when
+writing the "business logic" of the Todo List Application,
+because it will "make more sense" in context._
+
+
+### Elm(ish) Store > Save Model Data to `localStorage`
+
+The _final_ piece in the "Elm(ish)" puzzle is saving data on the device
+so that the Todo List items (_and history_) is not "_lost_" when
+when the user refreshes the browser or navigates away (_and back_).
+
+The relevant Web Browser API is `localStorage`:
+https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage <br />
+
+
+We are only using _two_ methods of the `localStorage` API:
++ `setItem` - save a `value` (`String`) to the borwser/device's `localStorage`
+with a specific `key`
++ `getItem` - retrieve the `value` `String` from `localStorage` by `key`
+
+Example:
+```js
+localStorage.setItem('key', "World");
+console.log("Hello " + localStorage.getItem('key')); // Hello World
+```
+
+#### Try it!
+
+As always, the best way to familiarise yourself with a DOM API
+is to `try` it in your web browser!
+Open a browser tab, open Dev Tools and type the following code:
+
+```js
+var model = { 'one': 1, 'two': 2, 'three': 3 };
+
+// save the model (data) into storage as a stringified object:
+localStorage.setItem('elmish_store', JSON.stringify(model));
+
+// Retrieve the stringified object from localStorage:
+var retrieved_model = localStorage.getItem('elmish_store');
+
+console.log('Retrieved model: ', JSON.parse(retrieved_model));
+```
+You should see something like this:
+
+![localStorage-example-run-in-browser](https://user-images.githubusercontent.com/194400/43045550-6f06b082-8db2-11e8-80a8-8489f158c2ac.png)
+
+
++ Further reading & discussion:
+https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localStorage <br />
++ Spec: https://www.w3.org/TR/webstorage/#the-localstorage-attribute
+
+#### Implementation
+
+_Given_ that saving and retrieving the Todo List `model` to/from `localStorage`
+uses two "native" DOM API functions, we can _avoid_ writing our own functions
+which are just going to "_wrap_" `setItem` and `getItem`.
+
+We can simply _use_ the `setItem` and `getItem` where we _need_ them!
+The best place to handle the "set" and "get" logic is in the `mount` function.
+You will recall from earlier (_above_) that the Elm(ish) `mount` function
+looks like this:
+
+```js
+/**
+ * `mount` mounts the app in the "root" DOM Element.
+ * @param  {Object} model store of the application's state.
+ * @param  {Function} update how the application state is updated ("controller")
+ * @param  {Function} view function that renders HTML/DOM elements with model.
+ * @param  {String} root_element_id root DOM element in which the app is mounted
+ */
+function mount(model, update, view, root_element_id) {
+  var root = document.getElementById(root_element_id); // root DOM element
+  function signal(action) {                     // signal function takes action
+    return function callback() {                // and returns callback
+      var updatedModel = update(model, action); // update model for the action
+      empty(root);                              // clear root el before rerender
+      view(signal, updatedModel, root);         // subsequent re-rendering
+    };
+  };
+  view(signal, model, root);                    // render initial model (once)
+}
+```
+
+We are going to make 3 adjustments to this code to use `setItem` and `getItem`,
+but _first_ let's write a ***test*** for the desired outcome!
+
+Add the following _test_ to your `test/elmish.test.js` file: <br />:
+
 
 
 

From 8f34ff7a6462169837d7f794a227d6b55b7a101b Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 22 Jul 2018 15:05:00 +0100
Subject: [PATCH 044/164] adds test for localStorage functionality #47 to
 todo-list.md

---
 todo-list.md | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 52 insertions(+)

diff --git a/todo-list.md b/todo-list.md
index f6210c73..5caff43b 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1348,7 +1348,59 @@ but _first_ let's write a ***test*** for the desired outcome!
 
 Add the following _test_ to your `test/elmish.test.js` file: <br />:
 
+```js
+// Testing localStorage requires "polyfil" because:
+// https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
+global.localStorage = { // globals are bad! but a "necessary evil" here ...
+  getItem: function(key) {
+   const value = this[key];
+   return typeof value === 'undefined' ? null : value;
+ },
+ setItem: function (key, value) {
+   this[key] = value;
+ }
+}
+localStorage.setItem('hello', 'world!');
+console.log('localStorage (polyfil) hello', localStorage.getItem('hello'));
+
+// Test mount's localStorage using view and update from counter-reset example
+// to confirm that our elmish.mount localStorage works and is "generic".
 
+test.only('elmish.mount sets model in localStorage', function (t) {
+  const { view, update } = require('../examples/counter-reset/counter.js');
+
+  const root = document.getElementById(id);
+  elmish.mount(7, update, view, id);
+  // the "model" stored in localStorage should be 7 now:
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+    "elmish_store is 7 (as expected). initial state saved to localStorage.");
+  // test that mount still works as expected (check initial state of counter):
+  const actual = document.getElementById(id).textContent;
+  const actual_stripped = parseInt(actual.replace('+', '')
+    .replace('-Reset', ''), 10);
+  const expected = 7;
+  t.equal(expected, actual_stripped, "Inital state set to 7.");
+  // attempting to "re-mount" with a different model value should not work
+  // because mount should retrieve the value from localStorage
+  elmish.mount(42, update, view, id); // model (42) should be ignored this time!
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+    "elmish_store is 7 (as expected). initial state saved to localStorage.");
+  // reset to zero:
+  const btn = root.getElementsByClassName("inc")[0]; // click increment button
+  btn.click(); // Click the Increment button!
+  const state = parseInt(root.getElementsByClassName('count')[0]
+    .textContent, 10);
+  t.equal(state, 8, "State is 8 after increment.");
+  // the "model" stored in localStorage should also be 8 now:
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+    "elmish_store is 8 (as expected).");
+  elmish.empty(root); // reset the DOM
+  // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+    "elmish_store still 0 (zero)");
+  t.end()
+});
+```
 
 
 <!--

From fb83010312e87be48b20e2b687b7f9ef4b9f3fc3 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 22 Jul 2018 15:06:32 +0100
Subject: [PATCH 045/164] add test for Elm(ish) localStorage in mount function
 with implementation for #47

---
 examples/todo-list/elmish.js |  3 ++
 package.json                 |  1 +
 test/elmish.test.js          | 53 ++++++++++++++++++++++++++++++++++++
 3 files changed, 57 insertions(+)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 1c6aef24..790e109c 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -26,11 +26,14 @@ function mount(model, update, view, root_element_id) {
   function signal(action) {                     // signal function takes action
     return function callback() {                // and returns callback
       var updatedModel = update(model, action); // update model for the action
+      localStorage.setItem('elmish_store', JSON.stringify(updatedModel));
       empty(root);                              // clear root el before rerender
       view(signal, updatedModel, root);         // subsequent re-rendering
     };
   };
+  model = JSON.parse(localStorage.getItem('elmish_store')) || model;
   view(signal, model, root);                    // render initial model (once)
+  localStorage.setItem('elmish_store', JSON.stringify(model)); // save model!
 }
 
 
diff --git a/package.json b/package.json
index ee2da216..b85d1fad 100644
--- a/package.json
+++ b/package.json
@@ -15,6 +15,7 @@
     "jsdom": "^11.0.0",
     "jsdom-global": "^3.0.2",
     "live-server": "^1.2.0",
+    "localstorage-polyfill": "^1.0.1",
     "nodemon": "^1.11.0",
     "pre-commit": "^1.2.2",
     "qunit-tap": "^1.5.1",
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 4a3bce86..ca270d11 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -350,3 +350,56 @@ test('elmish.route updates the url hash and sets history', function (t) {
     + window.history.length);
   t.end();
 });
+
+
+// Testing localStorage requires "polyfil" because:
+// https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
+global.localStorage = { // globals are bad! but a "necessary evil" here ...
+  getItem: function(key) {
+   const value = this[key];
+   return typeof value === 'undefined' ? null : value;
+ },
+ setItem: function (key, value) {
+   this[key] = value;
+ }
+}
+localStorage.setItem('hello', 'world!');
+console.log('localStorage (polyfil) hello', localStorage.getItem('hello'));
+
+// Test mount's localStorage using view and update from counter-reset example
+// to confirm that our elmish.mount localStorage works and is "generic".
+
+test('elmish.mount sets model in localStorage', function (t) {
+  const { view, update } = require('../examples/counter-reset/counter.js');
+
+  const root = document.getElementById(id);
+  elmish.mount(7, update, view, id);
+  // the "model" stored in localStorage should be 7 now:
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+    "elmish_store is 7 (as expected). initial state saved to localStorage.");
+  // test that mount still works as expected (check initial state of counter):
+  const actual = document.getElementById(id).textContent;
+  const actual_stripped = parseInt(actual.replace('+', '')
+    .replace('-Reset', ''), 10);
+  const expected = 7;
+  t.equal(expected, actual_stripped, "Inital state set to 7.");
+  // attempting to "re-mount" with a different model value should not work
+  // because mount should retrieve the value from localStorage
+  elmish.mount(42, update, view, id); // model (42) should be ignored this time!
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+    "elmish_store is 7 (as expected). initial state saved to localStorage.");
+  // reset to zero:
+  const btn = root.getElementsByClassName("inc")[0]; // click increment button
+  btn.click(); // Click the Increment button!
+  const state = parseInt(root.getElementsByClassName('count')[0]
+    .textContent, 10);
+  t.equal(state, 8, "State is 8 after increment."); // state incremented
+  // the "model" stored in localStorage should also be 8 now:
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+    "elmish_store is 8 (as expected).");
+  elmish.empty(root); // reset the DOM
+  // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+    "elmish_store still 0 (zero)");
+  t.end()
+});

From e0d64dea6a0ee3bc536a7cdfc09a607e3b03f1cc Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 22 Jul 2018 15:08:36 +0100
Subject: [PATCH 046/164] remove localstorage-polyfil from package.json as not
 using

---
 package.json | 2 --
 1 file changed, 2 deletions(-)

diff --git a/package.json b/package.json
index b85d1fad..7723691e 100644
--- a/package.json
+++ b/package.json
@@ -15,8 +15,6 @@
     "jsdom": "^11.0.0",
     "jsdom-global": "^3.0.2",
     "live-server": "^1.2.0",
-    "localstorage-polyfill": "^1.0.1",
-    "nodemon": "^1.11.0",
     "pre-commit": "^1.2.2",
     "qunit-tap": "^1.5.1",
     "qunitjs": "^2.3.2",

From e7d542f93cf449ab5a867d3aa5b387ac37114477 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 22 Jul 2018 15:28:19 +0100
Subject: [PATCH 047/164] adds "Acceptance Criteria" for localStorage
 functionality. closes #47

---
 examples/todo-list/elmish.js |  2 +-
 test/elmish.test.js          |  9 +++++----
 todo-list.md                 | 39 ++++++++++++++++++++++++++++++------
 3 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 790e109c..cd29c7a1 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -1,4 +1,4 @@
-(function() { //
+(function() { // scope elmish to prevent conflicts if used elsewhere
 /**
  * `empty` the contents of a given DOM element "node" (before re-rendering).
  * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
diff --git a/test/elmish.test.js b/test/elmish.test.js
index ca270d11..1a527c66 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -388,18 +388,19 @@ test('elmish.mount sets model in localStorage', function (t) {
   elmish.mount(42, update, view, id); // model (42) should be ignored this time!
   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
     "elmish_store is 7 (as expected). initial state saved to localStorage.");
-  // reset to zero:
+  // increment the counter
   const btn = root.getElementsByClassName("inc")[0]; // click increment button
   btn.click(); // Click the Increment button!
   const state = parseInt(root.getElementsByClassName('count')[0]
     .textContent, 10);
-  t.equal(state, 8, "State is 8 after increment."); // state incremented
+  t.equal(state, 8, "State is 8 after increment.");
   // the "model" stored in localStorage should also be 8 now:
   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
     "elmish_store is 8 (as expected).");
-  elmish.empty(root); // reset the DOM
+  elmish.empty(root); // reset the DOM to simulate refreshing a browser window
+  elmish.mount(5, update, view, id); // 5 ignored! read model from localStorage
   // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-    "elmish_store still 0 (zero)");
+    "elmish_store still 8 from increment (above) saved in localStorage");
   t.end()
 });
diff --git a/todo-list.md b/todo-list.md
index 5caff43b..04cb678a 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1285,6 +1285,14 @@ localStorage.setItem('key', "World");
 console.log("Hello " + localStorage.getItem('key')); // Hello World
 ```
 
+#### Acceptance Criteria
+
++ [ ] `model` is ***retrieved*** from `localStorage`
+if it has been (_previously_) set when `mount` is invoked
++ [ ] Initial `model` is ***saved*** to `localStorage` when `mount` is invoked
++ [ ] ***Updated*** `model` is ***saved*** to `localStorage`
+when `update` is called. (_thus_ `localStorage` _always has the latest version_)
+
 #### Try it!
 
 As always, the best way to familiarise yourself with a DOM API
@@ -1343,13 +1351,14 @@ function mount(model, update, view, root_element_id) {
 }
 ```
 
-We are going to make 3 adjustments to this code to use `setItem` and `getItem`,
+We are going to make **3 adjustments** to this code
+to use `setItem` and `getItem`,
 but _first_ let's write a ***test*** for the desired outcome!
 
-Add the following _test_ to your `test/elmish.test.js` file: <br />:
+Add the following _test code_ to your `test/elmish.test.js` file: <br />:
 
 ```js
-// Testing localStorage requires "polyfil" because:
+// Testing localStorage requires a "polyfil" because it's unavailable in JSDOM:
 // https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
 global.localStorage = { // globals are bad! but a "necessary evil" here ...
   getItem: function(key) {
@@ -1385,7 +1394,7 @@ test.only('elmish.mount sets model in localStorage', function (t) {
   elmish.mount(42, update, view, id); // model (42) should be ignored this time!
   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
     "elmish_store is 7 (as expected). initial state saved to localStorage.");
-  // reset to zero:
+  // increment the counter
   const btn = root.getElementsByClassName("inc")[0]; // click increment button
   btn.click(); // Click the Increment button!
   const state = parseInt(root.getElementsByClassName('count')[0]
@@ -1394,14 +1403,32 @@ test.only('elmish.mount sets model in localStorage', function (t) {
   // the "model" stored in localStorage should also be 8 now:
   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
     "elmish_store is 8 (as expected).");
-  elmish.empty(root); // reset the DOM
+  elmish.empty(root); // reset the DOM to simulate refreshing a browser window
+  elmish.mount(5, update, view, id); // 5 ignored! model read from localStorage.
   // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-    "elmish_store still 0 (zero)");
+    "elmish_store still 8 from increment (above) saved in localStorage");
   t.end()
 });
 ```
 
+There is quite a lot to "unpack" in this test but let's break it down:
+1. Require the `view` and `update` from our counter reset example.
+2. `mount` the counter reset app
+3. ***test*** that the `model` (7) is being saved to `localStorage`
+by `mount` function.
+4. Attempt to "***re-mount***" the counter app with an initial model of `42`
+should not work because `mount` will "read"
+the initial model from `localStorage` if it is defined.
+5. `update` the model using the `inc` (_increment_) action
+6. ***test*** that `localStorage` was updated to reflect the increment (8)
+7. ***`empty`*** the DOM. (_to simulate a page being refreshed_)
+8. ***test*** that `localStorage` still contains our saved data.
+
+Based on this test, try to add the necessary lines to the `mount` function,
+to make the test pass.
+
+
 
 <!--
 

From c70ba2b34a230851040c8ff84aab474753f1f749 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 23 Jul 2018 23:59:02 +0100
Subject: [PATCH 048/164] preparing to move elm(ish) code to elmish.md ... for
 #44

---
 elmish.md                    | 40 ++++++++++++++++++++++
 examples/todo-list/elmish.js | 14 ++++----
 todo-list.md                 | 65 +++++++++++++++++++++++++++---------
 3 files changed, 96 insertions(+), 23 deletions(-)
 create mode 100644 elmish.md

diff --git a/elmish.md b/elmish.md
new file mode 100644
index 00000000..0c17cf14
--- /dev/null
+++ b/elmish.md
@@ -0,0 +1,40 @@
+# Elm(_ish_) ?
+
+Elm(_ish_) is our **`Elm`** "_inspired_" `JavaScript` (**ES5**)
+front-end _micro_-framework.<sup>1</sup>
+
+## _Why?_
+
+The purpose of building Elm(_ish_) is _not_ to "_replace_" Elm
+or to create _yet another_ front-end JS framework!
+
+The purpose of _separating_ the Elm(ish) functions into a "micro framework" is:
+**a)** to ***simplify*** the Todo List application code. <br />
+**b)** _demonstrate_ a ***re-useable*** (_fully-tested_)
+"**micro-framework**" that allows us to _practice_ the Elm Architecture.<br />
+**c)** get into the **mindset** of writing **tests _first_**
+and then the _least_ amount of code necessary to pass the test
+(_while meeting the acceptance criteria_).
+
+
+By the end of this exercise you will _understand_
+The Elm Architecture (TEA) _much better_ because we will be
+analysing, documenting, testing and writing each function required
+to build the fully functional "micro framework".
+
+
+<sup>1</sup><small>The reason for calling the micro-framework Elm(ish)
+is to emphasize that it is "**inspired by**" **`Elm`**.
+But the only thing Elm(ish) shares with Elm is the architecture "pattern".
+In all other respects Elm(ish) is a "poor imitation" and should _only_
+be used for learning purposes!
+To _truly_ appreciate the awesome elegance, simplicity, power
+and personal effectiveness of using Elm, there is **no substitute**
+for the "real thing".
+</small>
+
+
+
+
+You are already _familiar_ with the first few functions
+`mount` and `empty`
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index cd29c7a1..99f93258 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -1,8 +1,8 @@
-(function() { // scope elmish to prevent conflicts if used elsewhere
+(function() { // scope elm(ish) functions to prevent conflicts if used elsewhere
 /**
  * `empty` the contents of a given DOM element "node" (before re-rendering).
  * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
- * @param  {Object} node the exact DOM node you want to empty
+ * @param  {Object} node the exact DOM node you want to empty the contents of.
  * @example
  * // returns true (once the 'app' node is emptied)
  * const node = document.getElementById('app');
@@ -12,7 +12,7 @@ function empty(node) {
   while (node.lastChild) {
     node.removeChild(node.lastChild);
   }
-}
+} // this function produces a (DOM) "mutation" but has no other "side effects".
 
 /**
  * `mount` mounts the app in the "root" DOM Element.
@@ -192,17 +192,17 @@ function ul (attrlist, childnodes) {
 
 /**
  * route sets the hash portion of the URL in a web browser.
- * @param {Object} state - the current state of the application.
+ * @param {Object} model - the current state of the application.
  * @param {String} title - the title of the "page" being navigated to
  * @param {String} hash - the hash (URL) to be navigated to.
  * @return {Object} new_state - state with hash updated to the *new* hash.
  * @example
  * // returns the state object with updated hash value:
- * var new_state = elmish.route(state, 'Active', '#/active');
+ * var new_state = elmish.route(model, 'Active', '#/active');
  */
-function route (state, title, hash) {
+function route (model, title, hash) {
   window.location.hash = hash;
-  var new_state = JSON.parse(JSON.stringify(state)); // clone state
+  var new_state = JSON.parse(JSON.stringify(model)); // clone model
   new_state.hash = hash;
   return new_state;
 }
diff --git a/todo-list.md b/todo-list.md
index 04cb678a..d2fc97c3 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1,13 +1,33 @@
-# Elm(ish) Todo List (TodoMVC) Mini App (TDD Tutorial!)
+# Elm(ish) Todo List (TodoMVC) Mini App (Real World TDD Tutorial!)
 
 If you've made it this far, give yourself a pat on the back!
-You are about to "_level up_" your JavaScript and "TEA" skills!
+Your persistence is about to pay off as you
+"_level up_" _both_ your **`JavaScript`** and "TEA" skills!
 
 
 ## Why?
 
-_Consolidate_ your understanding of The Elm Architecture (TEA)
-by creating a "real world" _useable_ App.
+The _purpose_ of this **Todo List _mini_ project** is to
+_consolidate_ your understanding of The Elm Architecture (TEA)
+by creating a "real world" _useable_ App following a _strict_
+Documentation and Test Driven Development approach.
+
+This will _show_ you that it's not only _possible_
+to write docs and tests _first_,
+you will see _first hand_ that **`code`** is **more concise**,
+well-documented and thus **_easier_ to maintain**
+and you will get your "work" done ***much faster***.
+
+These are _foundational_ skills that will
+pay **_immediate_ returns** on the time invested,
+and will **`continue`** to **`return`** "**interest**"
+for as long as you write (_and people use your_) software!
+
+> _It's **impossible** to "**over-state**" how **vital writing tests first**
+to both your **personal effectiveness** and **long-term sanity**.
+Thankfully, by the end of this page, you will see how **easy** it is._
+
+
 
 ## What?
 
@@ -19,14 +39,14 @@ Along the way we will cover:
 + [x] Browser Routing/Navigation
 + [x] Local Storage for Offline Support
 
-We will be abstracting all "TEA" related code
+We will be abstracting all "TEA" related ("generic framework") code
 into a file called **`elmish.js`**
-so that our Todo List application can be as simple
+so that our Todo List application can be as concise
 and "declarative" as possible.
 
 ### Todo List?
 
-If you are _unfamiliar_ with Todo lists,
+If you are _unfamiliar_ with Todo lists, simply put:
 they are a way of keeping a list of the tasks that need to be done. <br />
 see: https://en.wikipedia.org/wiki/Time_management#Setting_priorities_and_goals
 
@@ -38,17 +58,19 @@ Watch: https://www.youtube.com/results?search_query=checklist+manifesto
 ### TodoMVC?
 
 If you have not come across TodoMVC before,
-it's a sample application to showcase various "frontend" frameworks.
+it's a sample application to showcase various "frontend" frameworks
+using a common user interface (UI): a Todo List Application.
 ![TodoMVC-intro](https://user-images.githubusercontent.com/194400/42624420-4528a3c6-85bd-11e8-8b92-9b1c8951ba35.png)
 
 
-We highly recommend checking out the following links:
+We _highly recommend_ checking out the following links:
 
 + Website: http://todomvc.com
 + GitHub project: https://github.com/tastejs/todomvc
 
-For our purposes we will simply be re-using the **`CSS`**
-to make our TEA Todo List _look_ nice.
+For our purposes we will simply be re-using the **TodoMVC `CSS`**
+to make our TEA Todo List _look_ good
+(_not have to "worry" about styles so we can **focus on functionality**_).
 All the JavaScript code will be written "_from scratch_"
 to ensure that everything is clear.
 
@@ -79,13 +101,19 @@ please see:
 and
 [front-end-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
 
+
+
+
 It's "OK" to ask: "_Where do I **start** (my **TDD** quest)?_" <br />
 The answer is: create **two** new files:
 `examples/todo-list/elmish.js` and `test/elmish.test.js`
 
 We will create a couple of tests and their corresponding functions _next_!
 
-## Elm(_ish_) ?
+
+
+
+
 
 Our **first step** is to _abstract_ and _generalise_
 the Elm Architecture (`mount`) and HTML ("DOM") functions
@@ -151,8 +179,9 @@ test('empty("root") removes DOM elements from container', function (t) {
 ```
 
 > _**Note**: if any line in this file is **unfamiliar** to you,
-please **first** go back over the previous example(s),
-**then** do bit of "googling" for any words or functions you don't recognise
+please **first** go back over the previous example(s)_:
+`counter-basic` _and_ `counter-reset`,
+_**then** do bit of "googling" for any words or functions you don't recognise
 e.g: `childElementCount`,
 and if you are **still** "**stuck**"_,
 [***please open an
@@ -1264,7 +1293,7 @@ writing the "business logic" of the Todo List Application,
 because it will "make more sense" in context._
 
 
-### Elm(ish) Store > Save Model Data to `localStorage`
+### Elm(ish) Store > Save Model (Data) to `localStorage`
 
 The _final_ piece in the "Elm(ish)" puzzle is saving data on the device
 so that the Todo List items (_and history_) is not "_lost_" when
@@ -1412,7 +1441,8 @@ test.only('elmish.mount sets model in localStorage', function (t) {
 });
 ```
 
-There is quite a lot to "unpack" in this test but let's break it down:
+There is quite a lot to "unpack" in this test but let's walk through the steps:
+
 1. Require the `view` and `update` from our counter reset example.
 2. `mount` the counter reset app
 3. ***test*** that the `model` (7) is being saved to `localStorage`
@@ -1428,6 +1458,9 @@ the initial model from `localStorage` if it is defined.
 Based on this test, try to add the necessary lines to the `mount` function,
 to make the test pass.
 
+**`if`** you get stuck trying to make this test pass,
+refer to the completed code:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
 
 
 <!--

From 47bb41520b8b9a022fd9a14638533476f0ef2afb Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 24 Jul 2018 10:05:23 +0100
Subject: [PATCH 049/164] adds clarifying note on why "Elm(ish)" for #44

---
 elmish.md | 46 +++++++++++++++++++++++++++-------------------
 1 file changed, 27 insertions(+), 19 deletions(-)

diff --git a/elmish.md b/elmish.md
index 0c17cf14..e62b0016 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1,40 +1,48 @@
-# Elm(_ish_) ?
+# `Elm`(_ish_) ?
 
-Elm(_ish_) is our **`Elm`** "_inspired_" `JavaScript` (**ES5**)
-front-end _micro_-framework.<sup>1</sup>
+`Elm`(_ish_) is our **`Elm`**-_inspired_ `JavaScript` (**ES5**)
+front-end _micro_-framework.[<sup>1</sup>](#notes)
 
 ## _Why?_
 
-The purpose of building Elm(_ish_) is _not_ to "_replace_" Elm
+The purpose of building `Elm`(_ish_) is _not_ to "_replace_" Elm
 or to create _yet another_ front-end JS framework!
 
-The purpose of _separating_ the Elm(ish) functions into a "micro framework" is:
+The purpose of _separating_ the `Elm`(_ish_) functions
+into a "micro framework" is: <br />
 **a)** to ***simplify*** the Todo List application code. <br />
 **b)** _demonstrate_ a ***re-useable*** (_fully-tested_)
 "**micro-framework**" that allows us to _practice_ the Elm Architecture.<br />
 **c)** get into the **mindset** of writing **tests _first_**
-and then the _least_ amount of code necessary to pass the test
+and **`then`** the _least_ amount of code necessary to pass the test
 (_while meeting the acceptance criteria_).
 
-
 By the end of this exercise you will _understand_
-The Elm Architecture (TEA) _much better_ because we will be
-analysing, documenting, testing and writing each function required
-to build the fully functional "micro framework".
+The Elm Architecture (TEA) _much better_
+because we will be analysing, documenting, testing
+and writing each function required
+to build the fully functional "micro framework" ***from scratch***.
+
 
 
-<sup>1</sup><small>The reason for calling the micro-framework Elm(ish)
-is to emphasize that it is "**inspired by**" **`Elm`**.
-But the only thing Elm(ish) shares with Elm is the architecture "pattern".
-In all other respects Elm(ish) is a "poor imitation" and should _only_
-be used for learning purposes!
-To _truly_ appreciate the awesome elegance, simplicity, power
-and personal effectiveness of using Elm, there is **no substitute**
-for the "real thing".
-</small>
 
+## _What?_
 
 
 
 You are already _familiar_ with the first few functions
 `mount` and `empty`
+
+## Notes
+
+<sup>1</sup><small>The reason for calling the micro-framework `Elm`(_ish_)
+is to **emphasize** that it is "**inspired by**" **`Elm`**.
+The only things `Elm`(_ish_) shares with `Elm`
+are the "MUV" architecture "pattern"
+and function naming/argument similarity.
+In all other respects `Elm`(_ish_) is a "**poor imitation**"
+and should _only_ be used for learning purposes!
+To _truly_ appreciate the awesome elegance, simplicity, power
+and personal effectiveness of using Elm, there is **no substitute**
+for the "real thing".
+</small>

From 208c153ca726a284b21f7104bbb2eaa067f788fe Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 25 Jul 2018 17:13:24 +0100
Subject: [PATCH 050/164] add Elm(ish) intro header image to elmish.md for #44

---
 elmish.md    | 18 +++++++++++-------
 todo-list.md |  4 +++-
 2 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/elmish.md b/elmish.md
index e62b0016..a4d3e2c0 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1,4 +1,8 @@
-# `Elm`(_ish_) ?
+# `Elm`(_ish_)
+
+![elmlogo-ish](https://user-images.githubusercontent.com/194400/43213139-b70a4c68-902d-11e8-8162-3c7cb56b6360.png)
+<!-- the colors are deliberately "a bit off" to emphasize that
+this is a "inspired by" but really a "poor immitation" of Elm! -->
 
 `Elm`(_ish_) is our **`Elm`**-_inspired_ `JavaScript` (**ES5**)
 front-end _micro_-framework.[<sup>1</sup>](#notes)
@@ -9,11 +13,12 @@ The purpose of building `Elm`(_ish_) is _not_ to "_replace_" Elm
 or to create _yet another_ front-end JS framework!
 
 The purpose of _separating_ the `Elm`(_ish_) functions
-into a "micro framework" is: <br />
-**a)** to ***simplify*** the Todo List application code. <br />
+into a "micro framework" is to: <br />
+**a)** ***simplify*** the Todo List application code
+to just "business logic". <br />
 **b)** _demonstrate_ a ***re-useable*** (_fully-tested_)
 "**micro-framework**" that allows us to _practice_ the Elm Architecture.<br />
-**c)** get into the **mindset** of writing **tests _first_**
+**c)** promote the **mindset** of writing **tests _first_**
 and **`then`** the _least_ amount of code necessary to pass the test
 (_while meeting the acceptance criteria_).
 
@@ -21,15 +26,14 @@ By the end of this exercise you will _understand_
 The Elm Architecture (TEA) _much better_
 because we will be analysing, documenting, testing
 and writing each function required
-to build the fully functional "micro framework" ***from scratch***.
-
-
+to build the _fully functional_ "**micro framework**" ***from scratch***.
 
 
 ## _What?_
 
 
 
+
 You are already _familiar_ with the first few functions
 `mount` and `empty`
 
diff --git a/todo-list.md b/todo-list.md
index d2fc97c3..095b7f77 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -39,11 +39,13 @@ Along the way we will cover:
 + [x] Browser Routing/Navigation
 + [x] Local Storage for Offline Support
 
-We will be abstracting all "TEA" related ("generic framework") code
+We will be abstracting all "TEA" related ("generic") code
 into a file called **`elmish.js`**
 so that our Todo List application can be as concise
 and "declarative" as possible.
 
+
+
 ### Todo List?
 
 If you are _unfamiliar_ with Todo lists, simply put:

From 6fe6364b2f831bb3246587e128dd19ece8690a6f Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 25 Jul 2018 18:07:16 +0100
Subject: [PATCH 051/164] add What? Who? & How? sections to elmish.md for #44

---
 elmish.md    | 272 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 todo-list.md | 242 +--------------------------------------------
 2 files changed, 272 insertions(+), 242 deletions(-)

diff --git a/elmish.md b/elmish.md
index a4d3e2c0..73a44c3d 100644
--- a/elmish.md
+++ b/elmish.md
@@ -17,25 +17,287 @@ into a "micro framework" is to: <br />
 **a)** ***simplify*** the Todo List application code
 to just "business logic". <br />
 **b)** _demonstrate_ a ***re-useable*** (_fully-tested_)
-"**micro-framework**" that allows us to _practice_ the Elm Architecture.<br />
+"**micro-framework**" that allows us to _practice_ The Elm Architecture ("TEA").<br />
 **c)** promote the **mindset** of writing **tests _first_**
 and **`then`** the _least_ amount of code necessary to pass the test
 (_while meeting the acceptance criteria_).
 
+> _Test & Document-Driven Development is **easy** and it's **easily**
+one of the **best habits** to form in your software development career.
+This walkthrough shows **how** you can do it **the right way**
+from the **start** of a project._
+
+
+## _What?_
+
+A walkthrough of creating a
+_fully functional front-end_ "**micro framework**" ***from scratch***.
+
 By the end of this exercise you will _understand_
 The Elm Architecture (TEA) _much better_
 because we will be analysing, documenting, testing
 and writing each function required
-to build the _fully functional_ "**micro framework**" ***from scratch***.
+to architect and render the our Todo List (TodoMVC) App.
 
+## _Who?_
 
-## _What?_
+People who wants to gain an _in-depth_ understanding
+of The Elm Architecture ("TEA")
+and thus _intrinsically_ grok Redux/React JavaScript apps.
+
+This tutorial is intended for _beginners_ who have _modest_
+JavaScript knowledge (_variables, functions, DOM methods and TDD_),
+if you have any questions or get "stuck",
+please open an issue:
+https://github.com/dwyl/learn-elm-architecture-in-javascript/issues <br />
+@dwyl is a "safe space" and we are all here to help don't be shy/afraid.
+
+
+## _How_?
+
+_Before_ diving into _writing functions_ for `Elm`(_ish_),
+we need to consider how we are going to _test_ it.
+By ensuring that we follow **TDD** from the _start_ of an App,
+we _avoid_ having to "correct" any "**bad habits**".
+
+We will be using **Tape** and **JSDOM** for testing the functions.
+If you are `new` to _either_ of these tools,
+please see:
+[https://github.com/dwyl/**learn-tape**](https://github.com/dwyl/learn-tape)
+and
+[front-end-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
+
+It's "OK" to ask: "_Where do I **start** (my **TDD** quest)?_" <br />
+The answer is: create **two** new files:
+`examples/todo-list/elmish.js` and `test/elmish.test.js`
+
+We will create a couple of tests and their corresponding functions _next_!
+
+Our **first step** is to _abstract_ and _generalise_
+the Elm Architecture (`mount`) and HTML ("DOM") functions
+we used in the "counter" example.
+
+Recall that there are **3 parts** to "TEA": `model`, `update` and `view`. <br />
+These correspond to the `M`odel, `C`ontroller and `V`iew of "**MVC**".
+The _reason_ Elm refers to the "Controller" as "Update" is because
+this name _more accurately_ reflects what the function _does_:
+it updates the _state_ of the application.
+
+Our `update` and `view` functions form
+the "business logic" of our Todo List App,
+so we cannot abstract these. <br />
+The `update` function is a simple `switch` statement
+that "decides" how to to _update_ the app's `model`
+each `case` is functionality that is _specific_ to the Todo List App. <br />
+The `view` function _invokes_ several "helper" functions
+which create HTML elements e.g: `div` & `<button>`;
+these _can_ (_will_) be generalised (_below_).
+
+Let's kick-off with a couple of "_familiar_" _generic_ functions:
+`empty` and `mount`.
+
+
+
+
+#### `empty` the DOM
+
+Given that we _know_ we are going to use the `empty`
+function we used previously in our `counter`,
+`counter-reset` and `multiple-counters` examples (_in the "basic" TEA tutorial_)
+we can write a _test_ for the `empty` function quite easily.
+
+In the `test/elmish.test.js` file, type the following code:
+```js
+const test = require('tape');       // https://github.com/dwyl/learn-tape
+const fs = require('fs');           // read html files (see below)
+const path = require('path');       // so we can open files cross-platform
+const elmish = require('../examples/todo-list/elmish.js');
+const html = fs.readFileSync(path.resolve(__dirname,
+  '../examples/todo-list/index.html'));
+require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
+elmish.init(document);              // pass JSDOM into elmish for DOM functions
+const id = 'test-app';              // all tests use separate root element
+
+test('empty("root") removes DOM elements from container', function (t) {
+  // setup the test div:
+  const text = 'Hello World!'
+  const root = document.getElementById(id);
+  const div = document.createElement('div');
+  div.id = 'mydiv';
+  const txt = document.createTextNode(text);
+  div.appendChild(txt);
+  root.appendChild(div);
+  // check text of the div:
+  const actual = document.getElementById('mydiv').textContent;
+  t.equal(actual, text, "Contents of mydiv is: " + actual + ' == ' + text);
+  t.equal(root.childElementCount, 1, "Root element " + id + " has 1 child el");
+  // empty the root DOM node:
+  elmish.empty(root); // exercise the `empty` function!
+  t.equal(root.childElementCount, 0, "After empty(root) has 0 child elements!")
+  t.end();
+});
+```
+
+> _**Note**: if any line in this file is **unfamiliar** to you,
+please **first** go back over the previous example(s)_:
+`counter-basic` _and_ `counter-reset`,
+_**then** do bit of "googling" for any words or functions you don't recognise
+e.g: `childElementCount`,
+and if you are **still** "**stuck**"_,
+[***please open an
+issue***!](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues)
+_It's **essential** that you **understand** each **character**
+in the code **before** continuing to **avoid** "**confusion**" later._
+
+Now that we have the **test** for our `empty` function written,
+we can add the `empty` function to `examples/todo-list/elmish.js`:
+```js
+/**
+ * `empty` the contents of a given DOM element "node" (before re-rendering).
+ * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
+ * @param  {Object} node the exact DOM node you want to empty
+ * @example
+ * // returns true (once the 'app' node is emptied)
+ * const node = document.getElementById('app');
+ * empty(node);
+ */
+function empty(node) {
+  while (node.lastChild) {
+    node.removeChild(node.lastChild);
+  }
+}
+```
+
+If the **comment syntax**
+above the function definition
+is _unfamiliar_,
+please see:
+[https://github.com/dwyl/**learn-jsdoc**](https://github.com/dwyl/learn-jsdoc)
+
+
+### `mount` the App
+
+The `mount` function is the "glue" or "wiring" function that
+connects the `model`, `update` and `view`; we _can_ _generalise_ it.
+
+In the `test/elmish.test.js` file, type the following code:
+```js
+// use view and update from counter-reset example
+// to invoke elmish.mount() function and confirm it is generic!
+const { view, update } = require('../examples/counter-reset/counter.js');
+
+test('elmish.mount app expect state to be Zero', function (t) {
+  const root = document.getElementById(id);
+  elmish.mount(7, update, view, id);
+  const actual = document.getElementById(id).textContent;
+  const actual_stripped = parseInt(actual.replace('+', '')
+    .replace('-Reset', ''), 10);
+  const expected = 7;
+  t.equal(expected, actual_stripped, "Inital state set to 7.");
+  // reset to zero:
+  const btn = root.getElementsByClassName("reset")[0]; // click reset button
+  btn.click(); // Click the Reset button!
+  const state = parseInt(root.getElementsByClassName('count')[0]
+    .textContent, 10);
+  t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
+  elmish.empty(root); // clean up after tests
+  t.end()
+});
+```
+> _**Note**: we have "**borrowed**" this test from our previous example.
+see:_ `test/counter-reset.test.js`
+
+The corresponding code with JSDOC for the `mount` function
+in `examples/todo-list/elmish.js` is:
+```js
+/**
+ * `mount` mounts the app in the "root" DOM Element.
+ * @param  {Object} model store of the application's state.
+ * @param  {Function} update how the application state is updated ("controller")
+ * @param  {Function} view function that renders HTML/DOM elements with model.
+ * @param  {String} root_element_id root DOM element in which the app is mounted
+ */
+function mount(model, update, view, root_element_id) {
+  var root = document.getElementById(root_element_id); // root DOM element
+  function signal(action) {                     // signal function takes action
+    return function callback() {                // and returns callback
+      var updatedModel = update(model, action); // update model for the action
+      empty(root);                              // clear root el before rerender
+      view(signal, updatedModel, root);         // subsequent re-rendering
+    };
+  };
+  view(signal, model, root);                    // render initial model (once)
+}
+```
+
+### `module.exports`
+
+In order to test the `elmish` functions we need to `export` them.
+Additionally, because we are using JSDOM
+to test our front-end functions using `tape`,
+we need an `init` function to pass in the JSDOM `document`.
+add the following lines to `examples/todo-list/elmish.js`:
+
+```js
+/**
+ * init initialises the document (Global) variable for DOM operations.
+ * @param  {Object} doc window.document in browser and JSDOM.document in tests.
+ * @return {Object} document returns whatever is passed in.
+ */
+function init(doc){
+  document = doc; // this is used for instantiating JSDOM for testing.
+  return document;
+}
+
+/* module.exports is needed to run the functions using Node.js for testing! */
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    empty: empty,
+    mount: mount,
+    init: init
+  }
+} else { init(document); }
+```
+
+Now that we have started creating the `elmish` generic functions,
+we need to know which _other_ functions we need. <br />
+Let's take a look at the TodoMVC App to "_analyse_ the requirements".
+
+### _Analyse_ the TodoMVC App to "Gather Requirements"
+
+Our _next_ step is to _analyse_ the required functionality of a Todo List.
+
+### _Recommended_ Background Reading: TodoMVC "_Vanilla_" JS
+
+By _far_ the best place to start for _understanding_ TodoMVC's layout/format,
+is the "Vanilla" JavaScript (_no "framework"_) implementation:
+https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanillajs
+
+Run it locally with:
+```
+git clone https://github.com/tastejs/todomvc.git
+cd todomvc/examples/vanillajs
+python -m SimpleHTTPServer 8000
+```
+Open your web browser to: http://localhost:8000
+
+![vanillajs-localhost](https://user-images.githubusercontent.com/194400/42632838-6e68c20c-85d6-11e8-8ae4-d688f5977704.png)
+
+> If you are unable to run the TodoMVC locally, you can always view it online:
+http://todomvc.com/examples/vanillajs
 
+_Play_ with the app by adding a few items,
+checking-off and toggling the views in the footer.
 
+> _**Note**: IMO the "**Vanilla**" **JS** implementation
+is quite complex and insufficiently documented_
+(_very few code comments and sparse_
+[`README.md`](https://github.com/tastejs/todomvc/tree/25a9e31eb32db752d959df18e4d214295a2875e8/examples/vanillajs)),
+_so don't expect to **understand** it all the first time without study._
+_Don't worry, we will walk through building each feature in detail._
 
 
-You are already _familiar_ with the first few functions
-`mount` and `empty`
 
 ## Notes
 
diff --git a/todo-list.md b/todo-list.md
index 095b7f77..9f635c3c 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -9,8 +9,8 @@ Your persistence is about to pay off as you
 
 The _purpose_ of this **Todo List _mini_ project** is to
 _consolidate_ your understanding of The Elm Architecture (TEA)
-by creating a "real world" _useable_ App following a _strict_
-Documentation and Test Driven Development approach.
+by creating a "real world" _useable_ App following _strict_
+Documentation and Test Driven Development.
 
 This will _show_ you that it's not only _possible_
 to write docs and tests _first_,
@@ -24,8 +24,8 @@ and will **`continue`** to **`return`** "**interest**"
 for as long as you write (_and people use your_) software!
 
 > _It's **impossible** to "**over-state**" how **vital writing tests first**
-to both your **personal effectiveness** and **long-term sanity**.
-Thankfully, by the end of this page, you will see how **easy** it is._
+is to both your **personal effectiveness** and **long-term sanity**.
+Thankfully, by the end of this chapter, you will see how **easy** it is._
 
 
 
@@ -106,244 +106,12 @@ and
 
 
 
-It's "OK" to ask: "_Where do I **start** (my **TDD** quest)?_" <br />
-The answer is: create **two** new files:
-`examples/todo-list/elmish.js` and `test/elmish.test.js`
-
-We will create a couple of tests and their corresponding functions _next_!
-
-
-
-
-
-
-Our **first step** is to _abstract_ and _generalise_
-the Elm Architecture (`mount`) and HTML ("DOM") functions
-we used in the "counter" example.
-
-Recall that there are **3 parts** to "TEA": `model`, `update` and `view`. <br />
-These correspond to the `M`odel, `C`ontroller and `V`iew of "**MVC**".
-The _reason_ Elm refers to the "Controller" as "Update" is because
-this name _more accurately_ reflects what the function _does_:
-it updates the _state_ of the application.
-
-Our `update` and `view` functions form
-the "business logic" of our Todo List App,
-so we cannot abstract these. <br />
-The `update` function is a simple `switch` statement
-that "decides" how to to _update_ the app's `model`
-each `case` is functionality that is _specific_ to the Todo List App. <br />
-The `view` function _invokes_ several "helper" functions
-which create HTML elements e.g: `div` & `<button>`;
-these _can_ (_will_) be generalised (_below_).
-
-Let's kick-off with a couple of "_familiar_" _generic_ functions:
-`empty` and `mount`.
-
-
-#### `empty` the DOM
-
-Given that we _know_ we are going to use the `empty`
-function we used previously in our `counter`,
-`counter-reset` and `multiple-counters` examples (_in the "basic" TEA tutorial_)
-we can write a _test_ for the `empty` function quite easily.
-
-In the `test/elmish.test.js` file, type the following code:
-```js
-const test = require('tape');       // https://github.com/dwyl/learn-tape
-const fs = require('fs');           // read html files (see below)
-const path = require('path');       // so we can open files cross-platform
-const elmish = require('../examples/todo-list/elmish.js');
-const html = fs.readFileSync(path.resolve(__dirname,
-  '../examples/todo-list/index.html'));
-require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
-elmish.init(document);              // pass JSDOM into elmish for DOM functions
-const id = 'test-app';              // all tests use separate root element
-
-test('empty("root") removes DOM elements from container', function (t) {
-  // setup the test div:
-  const text = 'Hello World!'
-  const root = document.getElementById(id);
-  const div = document.createElement('div');
-  div.id = 'mydiv';
-  const txt = document.createTextNode(text);
-  div.appendChild(txt);
-  root.appendChild(div);
-  // check text of the div:
-  const actual = document.getElementById('mydiv').textContent;
-  t.equal(actual, text, "Contents of mydiv is: " + actual + ' == ' + text);
-  t.equal(root.childElementCount, 1, "Root element " + id + " has 1 child el");
-  // empty the root DOM node:
-  elmish.empty(root); // exercise the `empty` function!
-  t.equal(root.childElementCount, 0, "After empty(root) has 0 child elements!")
-  t.end();
-});
-```
-
-> _**Note**: if any line in this file is **unfamiliar** to you,
-please **first** go back over the previous example(s)_:
-`counter-basic` _and_ `counter-reset`,
-_**then** do bit of "googling" for any words or functions you don't recognise
-e.g: `childElementCount`,
-and if you are **still** "**stuck**"_,
-[***please open an
-issue***!](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues)
-_It's **essential** that you **understand** each **character**
-in the code **before** continuing to **avoid** "**confusion**" later._
-
-Now that we have the **test** for our `empty` function written,
-we can add the `empty` function to `examples/todo-list/elmish.js`:
-```js
-/**
- * `empty` the contents of a given DOM element "node" (before re-rendering).
- * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
- * @param  {Object} node the exact DOM node you want to empty
- * @example
- * // returns true (once the 'app' node is emptied)
- * const node = document.getElementById('app');
- * empty(node);
- */
-function empty(node) {
-  while (node.lastChild) {
-    node.removeChild(node.lastChild);
-  }
-}
-```
-
-If the **comment syntax**
-above the function definition
-is _unfamiliar_,
-please see:
-[https://github.com/dwyl/**learn-jsdoc**](https://github.com/dwyl/learn-jsdoc)
-
-
-### `mount` the App
-
-The `mount` function is the "glue" or "wiring" function that
-connects the `model`, `update` and `view`; we _can_ _generalise_ it.
-
-In the `test/elmish.test.js` file, type the following code:
-```js
-// use view and update from counter-reset example
-// to invoke elmish.mount() function and confirm it is generic!
-const { view, update } = require('../examples/counter-reset/counter.js');
-
-test('elmish.mount app expect state to be Zero', function (t) {
-  const root = document.getElementById(id);
-  elmish.mount(7, update, view, id);
-  const actual = document.getElementById(id).textContent;
-  const actual_stripped = parseInt(actual.replace('+', '')
-    .replace('-Reset', ''), 10);
-  const expected = 7;
-  t.equal(expected, actual_stripped, "Inital state set to 7.");
-  // reset to zero:
-  const btn = root.getElementsByClassName("reset")[0]; // click reset button
-  btn.click(); // Click the Reset button!
-  const state = parseInt(root.getElementsByClassName('count')[0]
-    .textContent, 10);
-  t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
-  elmish.empty(root); // clean up after tests
-  t.end()
-});
-```
-> _**Note**: we have "**borrowed**" this test from our previous example.
-see:_ `test/counter-reset.test.js`
-
-The corresponding code with JSDOC for the `mount` function
-in `examples/todo-list/elmish.js` is:
-```js
-/**
- * `mount` mounts the app in the "root" DOM Element.
- * @param  {Object} model store of the application's state.
- * @param  {Function} update how the application state is updated ("controller")
- * @param  {Function} view function that renders HTML/DOM elements with model.
- * @param  {String} root_element_id root DOM element in which the app is mounted
- */
-function mount(model, update, view, root_element_id) {
-  var root = document.getElementById(root_element_id); // root DOM element
-  function signal(action) {                     // signal function takes action
-    return function callback() {                // and returns callback
-      var updatedModel = update(model, action); // update model for the action
-      empty(root);                              // clear root el before rerender
-      view(signal, updatedModel, root);         // subsequent re-rendering
-    };
-  };
-  view(signal, model, root);                    // render initial model (once)
-}
-```
-
-### `module.exports`
-
-In order to test the `elmish` functions we need to `export` them.
-Additionally, because we are using JSDOM
-to test our front-end functions using `tape`,
-we need an `init` function to pass in the JSDOM `document`.
-add the following lines to `examples/todo-list/elmish.js`:
-
-```js
-/**
- * init initialises the document (Global) variable for DOM operations.
- * @param  {Object} doc window.document in browser and JSDOM.document in tests.
- * @return {Object} document returns whatever is passed in.
- */
-function init(doc){
-  document = doc; // this is used for instantiating JSDOM for testing.
-  return document;
-}
-
-/* module.exports is needed to run the functions using Node.js for testing! */
-/* istanbul ignore next */
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = {
-    empty: empty,
-    mount: mount,
-    init: init
-  }
-} else { init(document); }
-```
-
-Now that we have started creating the `elmish` generic functions,
-we need to know which _other_ functions we need. <br />
-Let's take a look at the TodoMVC App to "_analyse_ the requirements".
-
-### _Analyse_ the TodoMVC App to "Gather Requirements"
-
-Our _next_ step is to _analyse_ the required functionality of a Todo List.
-
-### _Recommended_ Background Reading: TodoMVC "_Vanilla_" JS
-
-By _far_ the best place to start for _understanding_ TodoMVC's layout/format,
-is the "Vanilla" JavaScript (_no "framework"_) implementation:
-https://github.com/tastejs/todomvc/tree/gh-pages/examples/vanillajs
-
-Run it locally with:
-```
-git clone https://github.com/tastejs/todomvc.git
-cd todomvc/examples/vanillajs
-python -m SimpleHTTPServer 8000
-```
-Open your web browser to: http://localhost:8000
-
-![vanillajs-localhost](https://user-images.githubusercontent.com/194400/42632838-6e68c20c-85d6-11e8-8ae4-d688f5977704.png)
-
-> If you are unable to run the TodoMVC locally, you can always view it online:
-http://todomvc.com/examples/vanillajs
-
-_Play_ with the app by adding a few items,
-checking-off and toggling the views in the footer.
-
-> _**Note**: IMO the "**Vanilla**" **JS** implementation
-is quite complex and insufficiently documented_
-(_very few code comments and sparse_
-[`README.md`](https://github.com/tastejs/todomvc/tree/25a9e31eb32db752d959df18e4d214295a2875e8/examples/vanillajs)),
-_so don't expect to **understand** it all the first time without study._
-_Don't worry, we will walk through building each feature in detail._
 
 
 
 ### Todo List _Basic_ Functionality
 
-A todo list has only 2 basic functions:
+A todo list has only 2 _basic_ functions:
 
 1. **Add** a `new` item to the list when the **`[Enter]`** key is pressed
 2. **Check-off** an item as "**completed**" (_done/finished_)

From 2b21e7aa5e8ffcd8712cd23b5aaaa424ec9d88a3 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 26 Jul 2018 09:42:59 +0100
Subject: [PATCH 052/164] Always imagine that you are "_pairing_" with someone
 who does _not_ already "know the solution" and you are _explaining_ it to
 them.

---
 elmish.md | 138 +++++++++++++++++++++++++++++++++++++++++-------------
 1 file changed, 105 insertions(+), 33 deletions(-)

diff --git a/elmish.md b/elmish.md
index 73a44c3d..4f957eb8 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1,11 +1,15 @@
 # `Elm`(_ish_)
 
+### How to Build a Front-end Micro-Framework _From Scratch_
+
 ![elmlogo-ish](https://user-images.githubusercontent.com/194400/43213139-b70a4c68-902d-11e8-8162-3c7cb56b6360.png)
 <!-- the colors are deliberately "a bit off" to emphasize that
 this is a "inspired by" but really a "poor immitation" of Elm! -->
 
-`Elm`(_ish_) is our **`Elm`**-_inspired_ `JavaScript` (**ES5**)
-front-end _micro_-framework.[<sup>1</sup>](#notes)
+`Elm`(_ish_) is an **`Elm`**-_inspired_ `JavaScript` (**ES5**)
+fully functional front-end _micro_-framework.[<sup>1</sup>](#notes) <br />
+
+
 
 ## _Why?_
 
@@ -14,15 +18,18 @@ or to create _yet another_ front-end JS framework!
 
 The purpose of _separating_ the `Elm`(_ish_) functions
 into a "micro framework" is to: <br />
-**a)** ***simplify*** the Todo List application code
-to just "business logic". <br />
+**a)** **abstract** the "plumbing" so that we can
+***simplify*** the Todo List application code
+to _just_
+["**application logic**"](https://en.wikipedia.org/wiki/Business_logic). <br />
 **b)** _demonstrate_ a ***re-useable*** (_fully-tested_)
-"**micro-framework**" that allows us to _practice_ The Elm Architecture ("TEA").<br />
+"**micro-framework**" that allows us
+to _practice_ using The Elm Architecture ("TEA").<br />
 **c)** promote the **mindset** of writing **tests _first_**
 and **`then`** the _least_ amount of code necessary to pass the test
 (_while meeting the acceptance criteria_).
 
-> _Test & Document-Driven Development is **easy** and it's **easily**
+> _**Test** & **Document-Driven Development** is **easy** and it's **easily**
 one of the **best habits** to form in your software development career.
 This walkthrough shows **how** you can do it **the right way**
 from the **start** of a project._
@@ -46,8 +53,8 @@ of The Elm Architecture ("TEA")
 and thus _intrinsically_ grok Redux/React JavaScript apps.
 
 This tutorial is intended for _beginners_ who have _modest_
-JavaScript knowledge (_variables, functions, DOM methods and TDD_),
-if you have any questions or get "stuck",
+JavaScript knowledge (_variables, functions, DOM methods and TDD_). <br />
+If you have any questions or get "stuck",
 please open an issue:
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues <br />
 @dwyl is a "safe space" and we are all here to help don't be shy/afraid.
@@ -58,65 +65,130 @@ https://github.com/dwyl/learn-elm-architecture-in-javascript/issues <br />
 _Before_ diving into _writing functions_ for `Elm`(_ish_),
 we need to consider how we are going to _test_ it.
 By ensuring that we follow **TDD** from the _start_ of an App,
-we _avoid_ having to "correct" any "**bad habits**".
-
-We will be using **Tape** and **JSDOM** for testing the functions.
-If you are `new` to _either_ of these tools,
+we _avoid_ having to "correct" any "**bad habits**" later.
+
+We will be using **Tape** and **`JSDOM`** for testing the functions.
+Tape is a _minimalist_ testing framework
+that is fast and has everything we need.
+**`JSDOM`** is a JavaScript implementation of the
+WHATWG DOM and HTML standards, for use with node.js. <br />
+If _either_ of these tools is _unfamiliar_ to you,
 please see:
 [https://github.com/dwyl/**learn-tape**](https://github.com/dwyl/learn-tape)
 and
 [front-end-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
 
+### Start by Creating the Files
+
 It's "OK" to ask: "_Where do I **start** (my **TDD** quest)?_" <br />
 The answer is: create **two** new files:
 `examples/todo-list/elmish.js` and `test/elmish.test.js`
 
-We will create a couple of tests and their corresponding functions _next_!
+We will create a couple of tests and their corresponding functions _next_
+but first, let's take a moment to think about what we _can_ generalise
+from the code we wrote for our "counter" example at the start of this tutorial.
+
+### What _Can_ We _Generalise_ ?
+
+Our **first step** in creating `Elm`(_ish_) is to consider
+what _can_ be _generalised_ into
+an application-independent re-useable framework.
 
-Our **first step** is to _abstract_ and _generalise_
-the Elm Architecture (`mount`) and HTML ("DOM") functions
-we used in the "counter" example.
+> Our **rule-of-thumb** is: anything that creates (_or destroys_)
+a DOM element or looks like "plumbing"
+(_e.g: "routing" or "managing state"_) is _generic_
+and should thus be abstracted into the `Elm`(_ish_) framework.
 
-Recall that there are **3 parts** to "TEA": `model`, `update` and `view`. <br />
-These correspond to the `M`odel, `C`ontroller and `V`iew of "**MVC**".
-The _reason_ Elm refers to the "Controller" as "Update" is because
+
+Recall that there are **3 parts** to the Elm Architecture:
+`model`, `update` and `view`. <br />
+These correspond to the `M`odel, `C`ontroller and `V`iew
+of
+["**MVC** pattern"](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller),
+which is the most _widely used_ "software architecture pattern".
+
+> **Aside**: "**software architecture**" is just a fancy way of saying
+"how code is **organised**" and/or how "data **flows**" through a system.
+Whenever you see the word "**pattern**" it just means
+"a bunch of experienced people have concluded that this works well,
+so as beginners, we don't have to think too hard."
+
+The _reason_ Elm refers to the "**Controller**" as "***Update***" is because
 this name _more accurately_ reflects what the function _does_:
-it updates the _state_ of the application.
+it _updates_ the _state_ (Model) of the application.
+
+Our `update` and `view` functions will form
+the "**domain logic**" of our Todo List App,
+(_i.e. they are "**specific**" to the Todo List_)
+so we cannot abstract them. <br />
+The `model` will be a JavaScript `Object` where the App's data will be stored.
 
-Our `update` and `view` functions form
-the "business logic" of our Todo List App,
-so we cannot abstract these. <br />
 The `update` function is a simple `switch` statement
 that "decides" how to to _update_ the app's `model`
-each `case` is functionality that is _specific_ to the Todo List App. <br />
+each `case` will call a function
+that _belongs_ to the Todo List App. <br />
+
 The `view` function _invokes_ several "helper" functions
-which create HTML elements e.g: `div` & `<button>`;
+which create HTML ("DOM") elements e.g: `<section>`, `<div>` & `<button>`;
 these _can_ (_will_) be generalised (_below_).
 
-Let's kick-off with a couple of "_familiar_" _generic_ functions:
-`empty` and `mount`.
-
 
+Let's start with a couple of "_familiar_" _generic_ functions
+(_which we saw and used in the "counter" example_):
+`empty` and `mount`. <br />
 
+<br />
 
 #### `empty` the DOM
 
+Start by _describing_ what the `empty` function _does_. <br />
+This is both to clarify our _own_ understanding as the people _writing_
+the code and to _clearly communicate_ with the **`humans` _reading_** the code.
+
+##### Function Description
+
+The `empty` function clears the DOM elements out of a specific "root" element.
+We use it to erase the DOM before re-rendering our app.
+
+Following "**_Document(ation)_ Driven Development**",
+we create a **`JSDOC`** comment block
+in the `examples/todo-list/elmish.js` file
+with _just_ the function description:
+
+```js
+/**
+ * `empty` clears the DOM elements out of a specific "root" element.
+ * it is used to erase the DOM before re-rendering the app.
+ */
+```
+Writing out the function documentation _first_ helps you _think_
+about what the functionality is.
+Even if you know exactly what code needs to be written,
+resist the temptation to write the code until it is documented.
+Always imagine that you are "_pairing_" with someone
+who does _not_ already "know the solution"
+and you are _explaining_ it to them.
+
+
+
 Given that we _know_ we are going to use the `empty`
+
 function we used previously in our `counter`,
 `counter-reset` and `multiple-counters` examples (_in the "basic" TEA tutorial_)
 we can write a _test_ for the `empty` function quite easily.
 
+
 In the `test/elmish.test.js` file, type the following code:
 ```js
 const test = require('tape');       // https://github.com/dwyl/learn-tape
-const fs = require('fs');           // read html files (see below)
+const fs = require('fs');           // to read html files (see below)
 const path = require('path');       // so we can open files cross-platform
-const elmish = require('../examples/todo-list/elmish.js');
+const elmish = require('../examples/todo-list/elmish.js'); // functions to test
 const html = fs.readFileSync(path.resolve(__dirname,
-  '../examples/todo-list/index.html'));
+  '../examples/todo-list/index.html')); // sample HTML file for JSDOM to load
 require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
 elmish.init(document);              // pass JSDOM into elmish for DOM functions
-const id = 'test-app';              // all tests use separate root element
+const id = 'test-app';              // all tests use 'test-app' as root element
 
 test('empty("root") removes DOM elements from container', function (t) {
   // setup the test div:
@@ -132,7 +204,7 @@ test('empty("root") removes DOM elements from container', function (t) {
   t.equal(actual, text, "Contents of mydiv is: " + actual + ' == ' + text);
   t.equal(root.childElementCount, 1, "Root element " + id + " has 1 child el");
   // empty the root DOM node:
-  elmish.empty(root); // exercise the `empty` function!
+  elmish.empty(root); // <-- exercise the `empty` function!
   t.equal(root.childElementCount, 0, "After empty(root) has 0 child elements!")
   t.end();
 });

From f94ecd9e8ec4f6321ecee58f5c98bb2bf72010ca Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 27 Jul 2018 22:49:25 +0100
Subject: [PATCH 053/164] re-word Doc Driven Dev section

---
 elmish.md | 18 ++++++++++--------
 1 file changed, 10 insertions(+), 8 deletions(-)

diff --git a/elmish.md b/elmish.md
index 4f957eb8..b8720cdd 100644
--- a/elmish.md
+++ b/elmish.md
@@ -142,8 +142,9 @@ Let's start with a couple of "_familiar_" _generic_ functions
 #### `empty` the DOM
 
 Start by _describing_ what the `empty` function _does_. <br />
-This is both to clarify our _own_ understanding as the people _writing_
-the code and to _clearly communicate_ with the **`humans` _reading_** the code.
+This is both to clarify our _own_ understanding
+as the people _writing_ the code <br />
+and to _clearly communicate_ with the **`humans` _reading_** the code.
 
 ##### Function Description
 
@@ -161,12 +162,13 @@ with _just_ the function description:
  * it is used to erase the DOM before re-rendering the app.
  */
 ```
-Writing out the function documentation _first_ helps you _think_
-about what the functionality is.
-Even if you know exactly what code needs to be written,
-resist the temptation to write the code until it is documented.
-Always imagine that you are "_pairing_" with someone
-who does _not_ already "know the solution"
+Writing out the function documentation _first_
+helps us _think_ about the functionality.
+Even if you know _exactly_ what code needs to be written,
+_resist_ the temptation to write the code until it is documented.
+Even if you are writing code alone,
+always imagine that you are "_pairing_" with someone
+who does _not_ (_already_) "know the solution"
 and you are _explaining_ it to them.
 
 

From 42e0a4a3a5420d1d8ffb5aa03de4ed88b294d3a3 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 28 Jul 2018 07:33:42 +0100
Subject: [PATCH 054/164] add instructsion for elmish.init function to
 elmish.md for #44

---
 README.md                    |  37 +-
 elmish.md                    | 155 +++++--
 examples/todo-list/elmish.js | 424 ++++++++++----------
 test/counter-reset.test.js   | 202 +++++-----
 test/elmish.test.js          | 754 +++++++++++++++++------------------
 5 files changed, 840 insertions(+), 732 deletions(-)

diff --git a/README.md b/README.md
index 559047cc..ac259ef4 100644
--- a/README.md
+++ b/README.md
@@ -46,12 +46,14 @@ of a completely new (_functional_) programming language!
 _Organizing_ `code` in a Web (_or Mobile_) Application
 is _really easy_ to ***over-complicate***, <br />
 _especially_ when you are just starting out and there
-are dozens of competing ideas <br />
-all claiming to be the "_right way_"...
+are _dozens_ of competing ideas
+all _claiming_ to be the "***right way***"...
 
 When we encounter this type of "_what is the **right way**_?"
-question <br />
-we always follow [***Occam's Razor***](https://en.wikipedia.org/wiki/Occam%27s_razor) and _ask_:
+question, <br />
+we always follow
+[***Occam's Razor***](https://en.wikipedia.org/wiki/Occam%27s_razor)
+and _ask_:
 what is the ***simplest way***? <br />
 In the case of web application organization,
 the ***answer*** is:
@@ -73,6 +75,14 @@ very easy!
   such as
 [Model-view-Presenter](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter) or "Model-View-ViewModel" (MVVM) which is "overkill" for most apps_.)
 
+> _**Note**: **don't panic** if any of the terms above are strange
+or even confusing to you right now.
+> Our **quest** is to put all the concepts into **context**.
+> And if you get "**stuck**" at any point, we are here to help!
+> Simply **open a question** on GitHub:_
+[github.com/dwyl/**learn-elm-architecture**-in-javascript/**issues**](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues)
+
+
 ## _Who? (Should I Read/Learn This...?)_
 
 [![everybodys-gotta-learn-sometime](https://cloud.githubusercontent.com/assets/194400/25806590/a1619644-33fb-11e7-8b84-1a21be188fb7.png)](https://www.youtube.com/results?q=The+Korgis+-+Everybody%27s+Gotta+Learn+Sometime)
@@ -83,7 +93,7 @@ their code/app in a _sane_, predictable and testable way.
 
 ### _Prerequisites_?
 
-![all-you-need-is-less](https://cloud.githubusercontent.com/assets/194400/25772135/a4230490-325b-11e7-9f12-da19fa4eb5e9.png)
+[![all-you-need-is-less](https://cloud.githubusercontent.com/assets/194400/25772135/a4230490-325b-11e7-9f12-da19fa4eb5e9.png)](https://www.ted.com/talks/graham_hill_less_stuff_more_happiness)
 
 + **_Basic_ JavaScript Knowledge**.
 see: [github.com/dwyl/**Javascript**-the-**Good-Parts**-notes](https://github.com/iteles/Javascript-the-Good-Parts-notes)
@@ -99,16 +109,18 @@ If you have **_any_ questions**, ***please ask***: <br />
 
 ## _What?_
 
-![image](https://cloud.githubusercontent.com/assets/194400/25772120/3fa2492c-325b-11e7-9aee-90b059360c14.png)
+[![image](https://cloud.githubusercontent.com/assets/194400/25772120/3fa2492c-325b-11e7-9aee-90b059360c14.png)](https://youtu.be/yYCmhHFhopA?t=4s)
 
 ### A _Complete Beginner's_ Guide to "MUV"
 
 Start with a few definitions:
 
-+ **Model** - or "data model" is the place where all data stored;
++ **Model** - or "data model" is the place where all data is stored;
 often referred to as the application's `state`.
 + **Update** - how the app handles `actions` performed
-by people and `update` the `state`.
+by people and `update` the `state`,
+usually organised as a `switch` with various `case` statements corresponding
+to the different "_actions_" the user can take in your App.
 + **View** - what people using the app can _see_;
 a way to `view` the Model (counter) as `HTML`
 rendered in a web browser.
@@ -135,7 +147,14 @@ Creative Commons License
 
 </div>
 
-If this diagram is not clear (_yet_), again, don't panic,
+In the "View Theatre" diagram, the:
++ **`model`** is the ensamble of characters (_or "**puppets**"_)
++ **`update`** is the function that transforms (_"changes"_) the `model`
+(_the "**puppeteer**"_).
++ **`view`** what the audience sees through "view port" (_stage_).
+
+
+> If this diagram is not clear (_yet_), again, don't panic,
 it will all be clarified when you start seeing it in _action_ (_below_)!
 
 
diff --git a/elmish.md b/elmish.md
index b8720cdd..7c627af8 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1,6 +1,6 @@
 # `Elm`(_ish_)
 
-### How to Build a Front-end Micro-Framework _From Scratch_
+### (How to Build a Front-end Micro-Framework _From Scratch_)
 
 ![elmlogo-ish](https://user-images.githubusercontent.com/194400/43213139-b70a4c68-902d-11e8-8162-3c7cb56b6360.png)
 <!-- the colors are deliberately "a bit off" to emphasize that
@@ -78,26 +78,18 @@ please see:
 and
 [front-end-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
 
-### Start by Creating the Files
-
-It's "OK" to ask: "_Where do I **start** (my **TDD** quest)?_" <br />
-The answer is: create **two** new files:
-`examples/todo-list/elmish.js` and `test/elmish.test.js`
-
-We will create a couple of tests and their corresponding functions _next_
-but first, let's take a moment to think about what we _can_ generalise
-from the code we wrote for our "counter" example at the start of this tutorial.
 
 ### What _Can_ We _Generalise_ ?
 
-Our **first step** in creating `Elm`(_ish_) is to consider
-what _can_ be _generalised_ into
+Our **first step** in creating `Elm`(_ish_)
+is to _re-visit_ the functions we wrote for the "counter app"
+and consider what _can_ be _generalised_ into
 an application-independent re-useable framework.
 
 > Our **rule-of-thumb** is: anything that creates (_or destroys_)
 a DOM element or looks like "plumbing"
-(_e.g: "routing" or "managing state"_) is _generic_
-and should thus be abstracted into the `Elm`(_ish_) framework.
+(_that which is common to **all apps**, e.g: "routing" or "managing state"_)
+is _generic_ and should thus be abstracted into the `Elm`(_ish_) framework.
 
 
 Recall that there are **3 parts** to the Elm Architecture:
@@ -134,21 +126,106 @@ these _can_ (_will_) be generalised (_below_).
 
 
 Let's start with a couple of "_familiar_" _generic_ functions
-(_which we saw and used in the "counter" example_):
-`empty` and `mount`. <br />
+(_which we used in the "counter-reset" example_):
+`init`, `empty` and `mount`. <br />
 
 <br />
 
-#### `empty` the DOM
+### Start by Creating the Files
+
+It's _essential_ to ask: "_Where do I **start** (my **TDD** quest)?_" <br />
+The answer is: create **two** new files:
+`examples/todo-list/elmish.js` and `test/elmish.test.js`
+
+
+### Test Setup
+
+In order to run our test, we need some "setup" code
+that "requires" the libraries so we can _execute_ the functions.
+
+In the `test/elmish.test.js` file, type the following code:
+```js
+const test = require('tape');       // https://github.com/dwyl/learn-tape
+const fs = require('fs');           // to read html files (see below)
+const path = require('path');       // so we can open files cross-platform
+const html = fs.readFileSync(path.resolve(__dirname,
+  '../examples/todo-list/index.html')); // sample HTML file to initialise JSDOM.
+require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
+const elmish = require('../examples/todo-list/elmish.js'); // functions to test
+elmish.init(document);              // pass JSDOM into elmish for DOM functions
+const id = 'test-app';              // all tests use 'test-app' as root element
+```
+
+> Most of this code should be _familiar_ to you
+if you have followed previous tutorials.
+> If anything is _unclear_ please revisit
+https://github.com/dwyl/learn-tape
+and
+
+If you attempt to run this code using the command:
+```sh
+node test/elmish.test.js
+```
+
+you will see something like the following:
+![no-init-function](https://user-images.githubusercontent.com/194400/43359605-b8cc9418-929c-11e8-92d6-97feb8c67596.png)
+
+This is because we do not have anything in the `elmish.js`, yet.
+Let's address that now!
+
+
+### Add `init` function
+
+Open the `examples/todo-list/elmish.js` file and add the following code:
+
+```js
+
+
+/**
+ * `init` initialises the document (Global) variable for DOM operations.
+ * @param  {Object} doc window.document in browser and JSDOM.document in tests.
+ * @return {Object} document returns whatever is passed in.
+ */
+function init(doc){
+  document = doc; // this is used for instantiating JSDOM for testing.
+  return document;
+}
+```
+
+This code is simply to allow us to "initialise" `Elm`(_ish_)
+with a "fake" DOM (`JSDOM`) so that we can _test_ it.
+
+
+### Add `module.exports` to "export" the `init` function
+
+Adding the function to the `elmish.js` file is a good _start_,
+but we need to ***`export`*** it to be able to _invoke_ it in our test.
+Let's add the following code at the end of `examples/todo-list/elmish.js`:
+
+```js
+/* module.exports is needed to run the functions using Node.js for testing! */
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    init: init
+  }
+} else { init(document);
+```
+
+
+
+
+### `empty` the DOM
 
 Start by _describing_ what the `empty` function _does_. <br />
 This is both to clarify our _own_ understanding
 as the people _writing_ the code <br />
 and to _clearly communicate_ with the **`humans` _reading_** the code.
 
-##### Function Description
+#### `empty` Function _Description_
 
-The `empty` function clears the DOM elements out of a specific "root" element.
+The `empty` function deletes all DOM elements
+from within a specific "root" element.
 We use it to erase the DOM before re-rendering our app.
 
 Following "**_Document(ation)_ Driven Development**",
@@ -158,12 +235,13 @@ with _just_ the function description:
 
 ```js
 /**
- * `empty` clears the DOM elements out of a specific "root" element.
+ * `empty` deletes all the DOM elements from within a specific "root" element.
  * it is used to erase the DOM before re-rendering the app.
  */
 ```
 Writing out the function documentation _first_
-helps us _think_ about the functionality.
+allows (_our subconscious_) time to _think_ about the functionality
+and how to _test_ for the "_acceptance criteria_".
 Even if you know _exactly_ what code needs to be written,
 _resist_ the temptation to write the code until it is documented.
 Even if you are writing code alone,
@@ -172,12 +250,15 @@ who does _not_ (_already_) "know the solution"
 and you are _explaining_ it to them.
 
 
+#### `empty` Function _Test_
 
-Given that we _know_ we are going to use the `empty`
-
-function we used previously in our `counter`,
+We previously used the `empty` function in our `counter`,
 `counter-reset` and `multiple-counters` examples (_in the "basic" TEA tutorial_)
-we can write a _test_ for the `empty` function quite easily.
+so we have a "head start" on writing the test.
+
+> _The **reason**(s) we write the **test first**
+even when we (already) know the "solution" is:_ <br />
+>
 
 
 In the `test/elmish.test.js` file, type the following code:
@@ -187,7 +268,7 @@ const fs = require('fs');           // to read html files (see below)
 const path = require('path');       // so we can open files cross-platform
 const elmish = require('../examples/todo-list/elmish.js'); // functions to test
 const html = fs.readFileSync(path.resolve(__dirname,
-  '../examples/todo-list/index.html')); // sample HTML file for JSDOM to load
+  '../examples/todo-list/index.html')); // sample HTML file to initialise JSDOM.
 require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
 elmish.init(document);              // pass JSDOM into elmish for DOM functions
 const id = 'test-app';              // all tests use 'test-app' as root element
@@ -223,17 +304,19 @@ issue***!](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues)
 _It's **essential** that you **understand** each **character**
 in the code **before** continuing to **avoid** "**confusion**" later._
 
+#### `empty` Function _Implementation_
+
 Now that we have the **test** for our `empty` function written,
 we can add the `empty` function to `examples/todo-list/elmish.js`:
 ```js
 /**
- * `empty` the contents of a given DOM element "node" (before re-rendering).
+ * `empty` deletes all the DOM elements from within a specific "root" element.
+ * it is used to erase the DOM before re-rendering the app.
  * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
- * @param  {Object} node the exact DOM node you want to empty
+ * @param  {Object} node the exact ("parent") DOM node you want to empty
  * @example
  * // returns true (once the 'app' node is emptied)
- * const node = document.getElementById('app');
- * empty(node);
+ * empty(document.getElementById('app'));
  */
 function empty(node) {
   while (node.lastChild) {
@@ -242,12 +325,18 @@ function empty(node) {
 }
 ```
 
-If the **comment syntax**
-above the function definition
-is _unfamiliar_,
+If the **comment syntax** above the function definition is _unfamiliar_,
 please see:
 [https://github.com/dwyl/**learn-jsdoc**](https://github.com/dwyl/learn-jsdoc)
 
+When you run the test in your terminal with the command
+`node test/elmish.test.js`
+you should see something _similar_ to this:
+
+
+
+
+
 
 ### `mount` the App
 
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 99f93258..f7e076e1 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -14,198 +14,198 @@ function empty(node) {
   }
 } // this function produces a (DOM) "mutation" but has no other "side effects".
 
-/**
- * `mount` mounts the app in the "root" DOM Element.
- * @param  {Object} model store of the application's state.
- * @param  {Function} update how the application state is updated ("controller")
- * @param  {Function} view function that renders HTML/DOM elements with model.
- * @param  {String} root_element_id root DOM element in which the app is mounted
- */
-function mount(model, update, view, root_element_id) {
-  var root = document.getElementById(root_element_id); // root DOM element
-  function signal(action) {                     // signal function takes action
-    return function callback() {                // and returns callback
-      var updatedModel = update(model, action); // update model for the action
-      localStorage.setItem('elmish_store', JSON.stringify(updatedModel));
-      empty(root);                              // clear root el before rerender
-      view(signal, updatedModel, root);         // subsequent re-rendering
-    };
-  };
-  model = JSON.parse(localStorage.getItem('elmish_store')) || model;
-  view(signal, model, root);                    // render initial model (once)
-  localStorage.setItem('elmish_store', JSON.stringify(model)); // save model!
-}
-
-
-/**
-* `add_attributes` applies the desired attribute(s) to the specified DOM node.
-* Note: this function is "impure" because it "mutates" the node.
-* however it is idempotent; the "side effect" is only applied once.
-* @param {Array.<String>} attrlist list of attributes to be applied to the node
-* @param {Object} node DOM node upon which attribute(s) should be applied
-* @example
-* // returns node with attributes applied
-* input = add_attributes(["type=checkbox", "id=todo1", "checked=true"], input);
-*/
-function add_attributes (attrlist, node) {
-  if(attrlist && attrlist.length) {
-    attrlist.forEach(function (attr) { // apply all props in array
-      var a = attr.split('=');
-      switch(a[0]) {
-        case 'autofocus':
-          node.autofocus = "";
-          node.focus();
-          break;
-        case 'checked':
-          node.checked = (a[1] === 'true' ? true : false);
-        case 'class':
-          node.className = a[1]; // apply CSS classes
-          break;
-        case 'data-id':
-          node.setAttribute('data-id', a[1]); // add data-id e.g: to <li>
-          break;
-        case 'for':
-          node.setAttribute('for', a[1]); // e.g: <label for="toggle-all">
-          break;
-        case 'href':
-          node.href = a[1]; // e.g: <a href="#/active">Active</a>
-          break;
-        case 'id':
-          node.id = a[1]; // apply element id e.g: <input id="toggle-all">
-          break;
-        case 'placeholder':
-          node.placeholder = a[1]; // add placeholder to <input> element
-          break;
-        case 'style':
-          node.setAttribute("style", a[1]); // <div style="display: block;">
-          break;
-        case 'type':
-          node.setAttribute('type', a[1]); // <input id="go" type="checkbox">
-          break;
-        default:
-          break;
-      }
-    });
-  }
-  return node;
-}
-
-/**
- * `append_childnodes` appends an array of HTML elements to a parent DOM node.
- * @param  {Array.<Object>} childnodes array of child DOM nodes.
- * @param  {Object} parent the "parent" DOM node where children will be added.
- * @return {Object} returns parent DOM node with appended children
- * @example
- * // returns the parent node with the "children" appended
- * var parent = elmish.append_childnodes([div, p, section], parent);
- */
-function append_childnodes (childnodes, parent) {
-  if(childnodes &&
-      Object.prototype.toString.call( childnodes ) === '[object Array]'
-      && childnodes.length > 0) {
-    childnodes.forEach(function (el) { parent.appendChild(el) });
-  }
-  return parent;
-}
-
-/**
- * create_element is a "helper" function to "DRY" HTML element creation code
- * creat *any* element with attributes and childnodes.
- * @param {String} type of element to be created e.g: 'div', 'section'
- * @param {Array.<String>} attrlist list of attributes to be applied to the node
- * @param {Array.<Object>} childnodes array of child DOM nodes.
- * @return {Object} returns the <section> DOM node with appended children
- * @example
- * // returns the parent node with the "children" appended
- * var div = elmish.create_element('div', ["class=todoapp"], [h1, input]);
- */
-function create_element (type, attrlist, childnodes) {
-  return append_childnodes(childnodes,
-    add_attributes(attrlist, document.createElement(type))
-  );
-}
-
-/**
- * section creates a <section> HTML element with attributes and childnodes
- * @param {Array.<String>} attrlist list of attributes to be applied to the node
- * @param {Array.<Object>} childnodes array of child DOM nodes.
- * @return {Object} returns the <section> DOM node with appended children
- * @example
- * // returns <section> DOM element with attributes applied & children appended
- * var section = elmish.section(["class=todoapp"], [h1, input]);
- */
-function section (attrlist, childnodes) {
-  return create_element('section', attrlist, childnodes);
-}
-// these are a *bit* repetitive, if you know a better way, please open an issue!
-function a (attrlist, childnodes) {
-  return create_element('a', attrlist, childnodes);
-}
-
-function button (attrlist, childnodes) {
-  return create_element('button', attrlist, childnodes);
-}
-
-function div (attrlist, childnodes) {
-  return create_element('div', attrlist, childnodes);
-}
-
-function footer (attrlist, childnodes) {
-  return create_element('footer', attrlist, childnodes);
-}
-
-function header (attrlist, childnodes) {
-  return create_element('header', attrlist, childnodes);
-}
-
-function h1 (attrlist, childnodes) {
-  return create_element('h1', attrlist, childnodes);
-}
-
-function input (attrlist, childnodes) {
-  return create_element('input', attrlist, childnodes);
-}
-
-function label (attrlist, childnodes) {
-  return create_element('label', attrlist, childnodes);
-}
-
-function li (attrlist, childnodes) {
-  return create_element('li', attrlist, childnodes);
-}
-
-function span (attrlist, childnodes) {
-  return create_element('span', attrlist, childnodes);
-}
-
-function strong (text_str) {
-  return create_element('strong', [], text(text_str));
-}
-
-function text (text) {
-  return document.createTextNode(text);
-}
-
-function ul (attrlist, childnodes) {
-  return create_element('ul', attrlist, childnodes);
-}
-
-/**
- * route sets the hash portion of the URL in a web browser.
- * @param {Object} model - the current state of the application.
- * @param {String} title - the title of the "page" being navigated to
- * @param {String} hash - the hash (URL) to be navigated to.
- * @return {Object} new_state - state with hash updated to the *new* hash.
- * @example
- * // returns the state object with updated hash value:
- * var new_state = elmish.route(model, 'Active', '#/active');
- */
-function route (model, title, hash) {
-  window.location.hash = hash;
-  var new_state = JSON.parse(JSON.stringify(model)); // clone model
-  new_state.hash = hash;
-  return new_state;
-}
+// /**
+//  * `mount` mounts the app in the "root" DOM Element.
+//  * @param  {Object} model store of the application's state.
+//  * @param  {Function} update how the application state is updated ("controller")
+//  * @param  {Function} view function that renders HTML/DOM elements with model.
+//  * @param  {String} root_element_id root DOM element in which the app is mounted
+//  */
+// function mount(model, update, view, root_element_id) {
+//   var root = document.getElementById(root_element_id); // root DOM element
+//   function signal(action) {                     // signal function takes action
+//     return function callback() {                // and returns callback
+//       var updatedModel = update(model, action); // update model for the action
+//       localStorage.setItem('elmish_store', JSON.stringify(updatedModel));
+//       empty(root);                              // clear root el before rerender
+//       view(signal, updatedModel, root);         // subsequent re-rendering
+//     };
+//   };
+//   model = JSON.parse(localStorage.getItem('elmish_store')) || model;
+//   view(signal, model, root);                    // render initial model (once)
+//   localStorage.setItem('elmish_store', JSON.stringify(model)); // save model!
+// }
+//
+//
+// /**
+// * `add_attributes` applies the desired attribute(s) to the specified DOM node.
+// * Note: this function is "impure" because it "mutates" the node.
+// * however it is idempotent; the "side effect" is only applied once.
+// * @param {Array.<String>} attrlist list of attributes to be applied to the node
+// * @param {Object} node DOM node upon which attribute(s) should be applied
+// * @example
+// * // returns node with attributes applied
+// * input = add_attributes(["type=checkbox", "id=todo1", "checked=true"], input);
+// */
+// function add_attributes (attrlist, node) {
+//   if(attrlist && attrlist.length) {
+//     attrlist.forEach(function (attr) { // apply all props in array
+//       var a = attr.split('=');
+//       switch(a[0]) {
+//         case 'autofocus':
+//           node.autofocus = "";
+//           node.focus();
+//           break;
+//         case 'checked':
+//           node.checked = (a[1] === 'true' ? true : false);
+//         case 'class':
+//           node.className = a[1]; // apply CSS classes
+//           break;
+//         case 'data-id':
+//           node.setAttribute('data-id', a[1]); // add data-id e.g: to <li>
+//           break;
+//         case 'for':
+//           node.setAttribute('for', a[1]); // e.g: <label for="toggle-all">
+//           break;
+//         case 'href':
+//           node.href = a[1]; // e.g: <a href="#/active">Active</a>
+//           break;
+//         case 'id':
+//           node.id = a[1]; // apply element id e.g: <input id="toggle-all">
+//           break;
+//         case 'placeholder':
+//           node.placeholder = a[1]; // add placeholder to <input> element
+//           break;
+//         case 'style':
+//           node.setAttribute("style", a[1]); // <div style="display: block;">
+//           break;
+//         case 'type':
+//           node.setAttribute('type', a[1]); // <input id="go" type="checkbox">
+//           break;
+//         default:
+//           break;
+//       }
+//     });
+//   }
+//   return node;
+// }
+//
+// /**
+//  * `append_childnodes` appends an array of HTML elements to a parent DOM node.
+//  * @param  {Array.<Object>} childnodes array of child DOM nodes.
+//  * @param  {Object} parent the "parent" DOM node where children will be added.
+//  * @return {Object} returns parent DOM node with appended children
+//  * @example
+//  * // returns the parent node with the "children" appended
+//  * var parent = elmish.append_childnodes([div, p, section], parent);
+//  */
+// function append_childnodes (childnodes, parent) {
+//   if(childnodes &&
+//       Object.prototype.toString.call( childnodes ) === '[object Array]'
+//       && childnodes.length > 0) {
+//     childnodes.forEach(function (el) { parent.appendChild(el) });
+//   }
+//   return parent;
+// }
+//
+// /**
+//  * create_element is a "helper" function to "DRY" HTML element creation code
+//  * creat *any* element with attributes and childnodes.
+//  * @param {String} type of element to be created e.g: 'div', 'section'
+//  * @param {Array.<String>} attrlist list of attributes to be applied to the node
+//  * @param {Array.<Object>} childnodes array of child DOM nodes.
+//  * @return {Object} returns the <section> DOM node with appended children
+//  * @example
+//  * // returns the parent node with the "children" appended
+//  * var div = elmish.create_element('div', ["class=todoapp"], [h1, input]);
+//  */
+// function create_element (type, attrlist, childnodes) {
+//   return append_childnodes(childnodes,
+//     add_attributes(attrlist, document.createElement(type))
+//   );
+// }
+//
+// /**
+//  * section creates a <section> HTML element with attributes and childnodes
+//  * @param {Array.<String>} attrlist list of attributes to be applied to the node
+//  * @param {Array.<Object>} childnodes array of child DOM nodes.
+//  * @return {Object} returns the <section> DOM node with appended children
+//  * @example
+//  * // returns <section> DOM element with attributes applied & children appended
+//  * var section = elmish.section(["class=todoapp"], [h1, input]);
+//  */
+// function section (attrlist, childnodes) {
+//   return create_element('section', attrlist, childnodes);
+// }
+// // these are a *bit* repetitive, if you know a better way, please open an issue!
+// function a (attrlist, childnodes) {
+//   return create_element('a', attrlist, childnodes);
+// }
+//
+// function button (attrlist, childnodes) {
+//   return create_element('button', attrlist, childnodes);
+// }
+//
+// function div (attrlist, childnodes) {
+//   return create_element('div', attrlist, childnodes);
+// }
+//
+// function footer (attrlist, childnodes) {
+//   return create_element('footer', attrlist, childnodes);
+// }
+//
+// function header (attrlist, childnodes) {
+//   return create_element('header', attrlist, childnodes);
+// }
+//
+// function h1 (attrlist, childnodes) {
+//   return create_element('h1', attrlist, childnodes);
+// }
+//
+// function input (attrlist, childnodes) {
+//   return create_element('input', attrlist, childnodes);
+// }
+//
+// function label (attrlist, childnodes) {
+//   return create_element('label', attrlist, childnodes);
+// }
+//
+// function li (attrlist, childnodes) {
+//   return create_element('li', attrlist, childnodes);
+// }
+//
+// function span (attrlist, childnodes) {
+//   return create_element('span', attrlist, childnodes);
+// }
+//
+// function strong (text_str) {
+//   return create_element('strong', [], text(text_str));
+// }
+//
+// function text (text) {
+//   return document.createTextNode(text);
+// }
+//
+// function ul (attrlist, childnodes) {
+//   return create_element('ul', attrlist, childnodes);
+// }
+//
+// /**
+//  * route sets the hash portion of the URL in a web browser.
+//  * @param {Object} model - the current state of the application.
+//  * @param {String} title - the title of the "page" being navigated to
+//  * @param {String} hash - the hash (URL) to be navigated to.
+//  * @return {Object} new_state - state with hash updated to the *new* hash.
+//  * @example
+//  * // returns the state object with updated hash value:
+//  * var new_state = elmish.route(model, 'Active', '#/active');
+//  */
+// function route (model, title, hash) {
+//   window.location.hash = hash;
+//   var new_state = JSON.parse(JSON.stringify(model)); // clone model
+//   new_state.hash = hash;
+//   return new_state;
+// }
 
 /**
  * `init` initialises the document (Global) variable for DOM operations.
@@ -221,26 +221,26 @@ function init(doc){
 /* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
-    add_attributes: add_attributes,
-    append_childnodes: append_childnodes,
-    a: a,
-    button: button,
-    div: div,
-    empty: empty,
-    footer: footer,
-    init: init,
-    input: input,
-    h1, h1,
-    header: header,
-    label: label,
-    li: li,
-    mount: mount,
-    route: route,
-    section: section,
-    span: span,
-    strong: strong,
-    text: text,
-    ul: ul
+    // add_attributes: add_attributes,
+    // append_childnodes: append_childnodes,
+    // a: a,
+    // button: button,
+    // div: div,
+    // empty: empty,
+    // footer: footer,
+    // init: init,
+    // input: input,
+    // h1, h1,
+    // header: header,
+    // label: label,
+    // li: li,
+    // mount: mount,
+    // route: route,
+    // section: section,
+    // span: span,
+    // strong: strong,
+    // text: text,
+    // ul: ul
   }
 } else { init(document); }
 
diff --git a/test/counter-reset.test.js b/test/counter-reset.test.js
index 30e434e0..4442ddbc 100644
--- a/test/counter-reset.test.js
+++ b/test/counter-reset.test.js
@@ -1,101 +1,101 @@
-const test = require('tape'); // see: https://github.com/dwyl/learn-tape
-const fs = require('fs');
-const path = require('path');
-const html = fs.readFileSync(path.resolve(__dirname,
-  '../examples/counter-reset/index.html'));
-require('jsdom-global')(html);
-const counter = require(path.resolve(__dirname,
-  '../examples/counter-reset/counter.js'));
-const { view, mount, update, div, button, empty, init} = counter;
-init(document); // pass the JSDOM into counter.js
-const id = 'test-app';
-
-test('Mount app expect state to be Zero', function (t) {
-  // console.log('mount', mount);
-  mount(0, update, view, id);
-  // console.log('document.getElementById(id)', document.getElementById(id), document.getElementById(id).childElementCount);
-  var actual = document.getElementById(id).textContent;
-  // console.log('actual:', actual);
-  var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
-  var expected = 0;
-  t.equal(actual_stripped, expected, "Inital state set to 0.");
-  t.end()
-});
-
-test('Test Update update(0) returns 0 (current state)', function (t) {
-  var result = update(0);
-  t.equal(result, 0, "Initial state: 0, No Action, Final state: 0");
-  t.end();
-});
-
-test('Test Update increment: update(1, "inc") returns 2', function (t) {
-  var result = update(1, "inc");
-  t.equal(result, 2, "Initial state: 1, Increment once, Final state: 2");
-  t.end();
-});
-
-test('Test Update decrement: update(3, "dec") returns 2', function (t) {
-  var result = update(1, "dec");
-  t.equal(result, 0, "Initial state: 1, Decrement once, Final state: 0");
-  t.end();
-});
-
-
-test('click on "+" button (increment model by 1)', function (t) {
-  // console.log('document', typeof document, document);
-  document.body.appendChild(div(id));
-  mount(7, update, view, id);
-
-  // see: http://stackoverflow.com/questions/27557624/simulating-click-jsdom
-  // var evt = document.createEvent("HTMLEvents");
-  const evt = document.createEvent("MouseEvents");
-  evt.initEvent("click", false, true);
-  var btn = document.getElementById('inc');
-
-  btn.addEventListener('click', function() {
-    // console.log('increment button CLICKed!!');
-    var state = parseInt( document.getElementById(id)
-      .getElementsByClassName('count')[0].innerHTML, 10);
-    // console.log('state:', state, 'typeof state:', typeof state);
-    t.equal(state, 8,
-    "End State is 8 after incrementing 7 by 1 (as expected)"); // incremented
-    t.end();
-  });
-
-  btn.dispatchEvent(evt);
-});
-
-test('Click reset button resets state to 0', function (t) {
-  mount(7, update, view, id);
-  var root = document.getElementById(id);
-  var state7 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
-  t.equal(state7, 7, "State is 7 after mounting with initial state=7");
-  var btn = root.getElementsByClassName("reset")[0]; // click reset button
-  btn.click(); // Click the Reset button!
-  var state0 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
-  t.equal(state0, 0, "State is 0 (Zero) after reset."); // state reset to 0!
-  empty(root); // clean up after tests
-  // console.log('STATE:', state);
-  t.end()
-});
-
-// Reset Functionality
-
-test('Test reset counter when model/state is 6 returns 0', function(t) {
-  var result = update(6, "reset");
-  t.equal(result, 0, "counter reset to 0 (Zero)");
-  t.end()
-});
-
-test('Click reset button resets state to 0', function(t) {
-  mount(7, update, view, id);
-  var root = document.getElementById(id);
-  var state7 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
-  t.equal(state7, 7, "initial state is 7 as expected");
-  var btn = root.getElementsByClassName("reset")[0]; // click reset button
-  btn.click(); // Click the Reset button!
-  var state = parseInt(root.getElementsByClassName('count')[0].textContent, 10);
-  t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
-  empty(root); // clean up after tests
-  t.end()
-});
+// const test = require('tape'); // see: https://github.com/dwyl/learn-tape
+// const fs = require('fs');
+// const path = require('path');
+// const html = fs.readFileSync(path.resolve(__dirname,
+//   '../examples/counter-reset/index.html'));
+// require('jsdom-global')(html);
+// const counter = require(path.resolve(__dirname,
+//   '../examples/counter-reset/counter.js'));
+// const { view, mount, update, div, button, empty, init} = counter;
+// init(document); // pass the JSDOM into counter.js
+// const id = 'test-app';
+//
+// test('Mount app expect state to be Zero', function (t) {
+//   // console.log('mount', mount);
+//   mount(0, update, view, id);
+//   // console.log('document.getElementById(id)', document.getElementById(id), document.getElementById(id).childElementCount);
+//   var actual = document.getElementById(id).textContent;
+//   // console.log('actual:', actual);
+//   var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
+//   var expected = 0;
+//   t.equal(actual_stripped, expected, "Inital state set to 0.");
+//   t.end()
+// });
+//
+// test('Test Update update(0) returns 0 (current state)', function (t) {
+//   var result = update(0);
+//   t.equal(result, 0, "Initial state: 0, No Action, Final state: 0");
+//   t.end();
+// });
+//
+// test('Test Update increment: update(1, "inc") returns 2', function (t) {
+//   var result = update(1, "inc");
+//   t.equal(result, 2, "Initial state: 1, Increment once, Final state: 2");
+//   t.end();
+// });
+//
+// test('Test Update decrement: update(3, "dec") returns 2', function (t) {
+//   var result = update(1, "dec");
+//   t.equal(result, 0, "Initial state: 1, Decrement once, Final state: 0");
+//   t.end();
+// });
+//
+//
+// test('click on "+" button (increment model by 1)', function (t) {
+//   // console.log('document', typeof document, document);
+//   document.body.appendChild(div(id));
+//   mount(7, update, view, id);
+//
+//   // see: http://stackoverflow.com/questions/27557624/simulating-click-jsdom
+//   // var evt = document.createEvent("HTMLEvents");
+//   const evt = document.createEvent("MouseEvents");
+//   evt.initEvent("click", false, true);
+//   var btn = document.getElementById('inc');
+//
+//   btn.addEventListener('click', function() {
+//     // console.log('increment button CLICKed!!');
+//     var state = parseInt( document.getElementById(id)
+//       .getElementsByClassName('count')[0].innerHTML, 10);
+//     // console.log('state:', state, 'typeof state:', typeof state);
+//     t.equal(state, 8,
+//     "End State is 8 after incrementing 7 by 1 (as expected)"); // incremented
+//     t.end();
+//   });
+//
+//   btn.dispatchEvent(evt);
+// });
+//
+// test('Click reset button resets state to 0', function (t) {
+//   mount(7, update, view, id);
+//   var root = document.getElementById(id);
+//   var state7 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
+//   t.equal(state7, 7, "State is 7 after mounting with initial state=7");
+//   var btn = root.getElementsByClassName("reset")[0]; // click reset button
+//   btn.click(); // Click the Reset button!
+//   var state0 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
+//   t.equal(state0, 0, "State is 0 (Zero) after reset."); // state reset to 0!
+//   empty(root); // clean up after tests
+//   // console.log('STATE:', state);
+//   t.end()
+// });
+//
+// // Reset Functionality
+//
+// test('Test reset counter when model/state is 6 returns 0', function(t) {
+//   var result = update(6, "reset");
+//   t.equal(result, 0, "counter reset to 0 (Zero)");
+//   t.end()
+// });
+//
+// test('Click reset button resets state to 0', function(t) {
+//   mount(7, update, view, id);
+//   var root = document.getElementById(id);
+//   var state7 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
+//   t.equal(state7, 7, "initial state is 7 as expected");
+//   var btn = root.getElementsByClassName("reset")[0]; // click reset button
+//   btn.click(); // Click the Reset button!
+//   var state = parseInt(root.getElementsByClassName('count')[0].textContent, 10);
+//   t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
+//   empty(root); // clean up after tests
+//   t.end()
+// });
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 1a527c66..8054e75b 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -27,380 +27,380 @@ test('elmish.empty("root") removes DOM elements from container', function (t) {
   t.equal(root.childElementCount, 0, "After empty(root) has 0 child elements!")
   t.end();
 });
-
-// use view and update from counter-reset example
-// to confirm that our elmish.mount function is generic!
-const { view, update } = require('../examples/counter-reset/counter.js');
-
-test('elmish.mount app expect state to be Zero', function (t) {
-  const root = document.getElementById(id);
-  elmish.mount(7, update, view, id);
-  const actual = document.getElementById(id).textContent;
-  const actual_stripped = parseInt(actual.replace('+', '')
-    .replace('-Reset', ''), 10);
-  const expected = 7;
-  t.equal(expected, actual_stripped, "Inital state set to 7.");
-  // reset to zero:
-  const btn = root.getElementsByClassName("reset")[0]; // click reset button
-  btn.click(); // Click the Reset button!
-  const state = parseInt(root.getElementsByClassName('count')[0]
-    .textContent, 10);
-  t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
-  elmish.empty(root); // clean up after tests
-  t.end()
-});
-
-
-test('elmish.add_attributes adds "autofocus" attribute', function (t) {
-  document.getElementById(id).appendChild(
-    elmish.add_attributes(["class=new-todo", "autofocus", "id=new"],
-      document.createElement('input')
-    )
-  );
-  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
-  t.equal(document.getElementById('new'), document.activeElement,
-    '<input autofocus> is "activeElement"');
-  elmish.empty(document.getElementById(id));
-  t.end();
-});
-
-test('elmish.add_attributes applies HTML class attribute to el', function (t) {
-  const root = document.getElementById(id);
-  let div = document.createElement('div');
-  div.id = 'divid';
-  div = elmish.add_attributes(["class=apptastic"], div);
-  root.appendChild(div);
-  // test the div has the desired class:
-  const nodes = document.getElementsByClassName('apptastic');
-  t.equal(nodes.length, 1, "<div> has 'apptastic' CSS class applied");
-  t.end();
-});
-
-test('elmish.add_attributes applies id HTML attribute to a node', function (t) {
-  const root = document.getElementById(id);
-  let el = document.createElement('section');
-  el = elmish.add_attributes(["id=myid"], el);
-  const text = 'hello world!'
-  var txt = document.createTextNode(text);
-  el.appendChild(txt);
-  root.appendChild(el);
-  const actual = document.getElementById('myid').textContent;
-  t.equal(actual, text, "<section> has 'myid' id attribute");
-  elmish.empty(root); // clear the "DOM"/"state" before next test
-  t.end();
-});
-
-test('elmish.add_attributes applies multiple attribute to node', function (t) {
-  const root = document.getElementById(id);
-  elmish.empty(root);
-  let el = document.createElement('span');
-  el = elmish.add_attributes(["id=myid", "class=totes mcawesome"], el);
-  const text = 'hello world'
-  var txt = document.createTextNode(text);
-  el.appendChild(txt);
-  root.appendChild(el);
-  const actual = document.getElementById('myid').textContent;
-  t.equal(actual, text, "<section> has 'myid' id attribute");
-  t.equal(el.className, 'totes mcawesome', "CSS class applied: ", el.className);
-  t.end();
-});
-
-test('elmish.add_attributes set placeholder on <input> element', function (t) {
-  const root = document.getElementById(id);
-  let input = document.createElement('input');
-  input.id = 'new-todo';
-  input = elmish.add_attributes(["placeholder=What needs to be done?"], input);
-  root.appendChild(input);
-  const placeholder = document.getElementById('new-todo')
-    .getAttribute("placeholder");
-  t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
-  t.end();
-});
-
-test('elmish.add_attributes set data-id on <li> element', function (t) {
-  const root = document.getElementById(id);
-  let li = document.createElement('li');
-  li.id = 'task1';
-  li = elmish.add_attributes(["data-id=123"], li);
-  root.appendChild(li);
-  const data_id = document.getElementById('task1').getAttribute("data-id");
-  t.equal(data_id, '123', "data-id successfully added to <li> element");
-  t.end();
-});
-
-test('elmish.add_attributes set "for" attribute <label> element', function (t) {
-  const root = document.getElementById(id);
-  let li = document.createElement('li');
-  li.id = 'toggle';
-  li = elmish.add_attributes(["for=toggle-all"], li);
-  root.appendChild(li);
-  const label_for = document.getElementById('toggle').getAttribute("for");
-  t.equal(label_for, "toggle-all", '<label for="toggle-all">');
-  t.end();
-});
-
-test('elmish.add_attributes type="checkbox" on <input> element', function (t) {
-  const root = document.getElementById(id);
-  let input = document.createElement('input');
-  input = elmish.add_attributes(["type=checkbox", "id=toggle-all"], input);
-  root.appendChild(input);
-  const type_atrr = document.getElementById('toggle-all').getAttribute("type");
-  t.equal(type_atrr, "checkbox", '<input id="toggle-all" type="checkbox">');
-  t.end();
-});
-
-test('elmish.add_attributes apply style="display: block;"', function (t) {
-  const root = document.getElementById(id);
-  elmish.empty(root);
-  let sec = document.createElement('section');
-  root.appendChild(
-    elmish.add_attributes(["id=main", "style=display: block;"], sec)
-  );
-  const style = window.getComputedStyle(document.getElementById('main'));
-  t.equal(style._values.display, 'block', 'style="display: block;" applied!')
-  t.end();
-});
-
-test('elmish.add_attributes checked=true on "done" item', function (t) {
-  const root = document.getElementById(id);
-  elmish.empty(root);
-  let input = document.createElement('input');
-  input = elmish.add_attributes(["type=checkbox", "id=item1", "checked=true"],
-    input);
-  root.appendChild(input);
-  const checked = document.getElementById('item1').checked;
-  t.equal(checked, true, '<input type="checkbox" checked=true>');
-  // test "checked=false" so we know we are able to "toggle" a todo item:
-  root.appendChild(
-    elmish.add_attributes(
-      ["type=checkbox", "id=item2", "checked=false"],
-      document.createElement('input')
-    )
-  );
-  t.equal(document.getElementById('item2').checked, false, 'checked=false');
-  t.end();
-});
-
-test('elmish.add_attributes <a href="#/active">Active</a>', function (t) {
-  const root = document.getElementById(id);
-  elmish.empty(root);
-  root.appendChild(
-    elmish.add_attributes(["href=#/active", "class=selected", "id=active"],
-      document.createElement('a')
-    )
-  );
-  // note: "about:blank" is the JSDOM default "window.location.href"
-  console.log('JSDOM window.location.href:', window.location.href);
-  // so when an href is set *relative* to this it becomes "about:blank#/my-link"
-  // so we *remove* it before the assertion below, but it works fine in browser!
-  const href = document.getElementById('active').href.replace('about:blank', '')
-  t.equal(href, "#/active", 'href="#/active" applied to "active" link');
-  t.end();
-});
-
-/** DEFAULT BRANCH **/
-test('test default branch of elmish.add_attributes (no effect)', function (t) {
-  const root = document.getElementById(id);
-  let div = document.createElement('div');
-  div.id = 'divid';
-  // "Clone" the div DOM node before invoking elmish.attributes to compare
-  const clone = div.cloneNode(true);
-  div = elmish.add_attributes(["unrecognised_attribute=noise"], div);
-  t.deepEqual(div, clone, "<div> has not been altered");
-  t.end();
-});
-
-test('elmish.append_childnodes append child DOM nodes to parent', function (t) {
-  const root = document.getElementById(id);
-  elmish.empty(root); // clear the test DOM before!
-  let div = document.createElement('div');
-  let p = document.createElement('p');
-  let section = document.createElement('section');
-  elmish.append_childnodes([div, p, section], root);
-  t.equal(root.childElementCount, 3, "Root element " + id + " has 3 child els");
-  t.end();
-});
-
-test('elmish.section creates a <section> HTML element', function (t) {
-  const p = document.createElement('p');
-  p.id = 'para';
-  const text = 'Hello World!'
-  const txt = document.createTextNode(text);
-  p.appendChild(txt);
-  // create the `<section>` HTML element using our section function
-  const section = elmish.section(["class=new-todo"], [p])
-  document.getElementById(id).appendChild(section); // add section with <p>
-  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
-  t.equal(document.getElementById('para').textContent, text,
-    '<section> <p>' + text + '</p></section> works as expected!');
-  elmish.empty(document.getElementById(id));
-  t.end();
-});
-
-test('elmish create <header> view using HTML element functions', function (t) {
-  const { append_childnodes, section, header, h1, text, input } = elmish;
-  append_childnodes([
-    section(["class=todoapp"], [ // array of "child" elements
-      header(["class=header"], [
-        h1([], [
-          text("todos")
-        ]), // </h1>
-        input([
-          "id=new",
-          "class=new-todo",
-          "placeholder=What needs to be done?",
-          "autofocus"
-        ], []) // <input> is "self-closing"
-      ]) // </header>
-    ])
-  ], document.getElementById(id));
-
-  const place = document.getElementById('new').getAttribute('placeholder');
-  t.equal(place, "What needs to be done?", "placeholder set in <input> el");
-  t.equal(document.querySelector('h1').textContent, 'todos', '<h1>todos</h1>');
-  elmish.empty(document.getElementById(id));
-  t.end();
-});
-
-test('elmish create "main" view using HTML DOM functions', function (t) {
-  const { section, input, label, ul, li, div, button, text } = elmish;
-  elmish.append_childnodes([
-    section(["class=main", "style=display: block;"], [
-      input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
-      label(["for=toggle-all"], [ text("Mark all as complete") ]),
-      ul(["class=todo-list"], [
-        li(["data-id=123", "class=completed"], [
-          div(["class=view"], [
-            input(["class=toggle", "type=checkbox", "checked=true"], []),
-            label([], [text('Learn The Elm Architecture ("TEA")')]),
-            button(["class=destroy"])
-          ]) // </div>
-        ]), // </li>
-        li(["data-id=234"], [
-          div(["class=view"], [
-            input(["class=toggle", "type=checkbox"], []),
-            label([], [text("Build TEA Todo List App")]),
-            button(["class=destroy"])
-          ]) // </div>
-        ]) // </li>
-      ]) // </ul>
-    ])
-  ], document.getElementById(id));
-  const done = document.querySelectorAll('.completed')[0].textContent;
-  t.equal(done, 'Learn The Elm Architecture ("TEA")', 'Done: Learn "TEA"');
-  const todo = document.querySelectorAll('.view')[1].textContent;
-  t.equal(todo, 'Build TEA Todo List App', 'Todo: Build TEA Todo List App');
-  elmish.empty(document.getElementById(id));
-  t.end();
-});
-
-test('elmish create <footer> view using HTML DOM functions', function (t) {
-  const { footer, span, strong, text, ul, li, a, button } = elmish;
-  elmish.append_childnodes([
-    footer(["class=footer", "style=display: block;"], [
-      span(["class=todo-count", "id=count"], [
-        strong("1"),
-        text("item left")
-      ]),
-      ul(["class=filters"], [
-        li([], [
-          a(["href=#/", "class=selected"], [text("All")])
-        ]),
-        li([], [
-          a(["href=#/active"], [text("Active")])
-        ]),
-        li([], [
-          a(["href=#/completed"], [text("Completed")])
-        ])
-      ]), // </ul>
-      button(["class=clear-completed", "style=display:block;"],
-        [text("Clear completed")]
-      )
-    ])
-  ], document.getElementById(id));
-
-  const left = document.getElementById('count').textContent;
-  t.equal(left, "item left", 'there is 1 todo item left');
-  const clear = document.querySelectorAll('button')[1].textContent;
-  t.equal(clear, "Clear completed", '<button> text is "Clear completed"');
-  const selected = document.querySelectorAll('.selected')[1].textContent;
-  t.equal(selected, "All", "All is selected by default");
-  elmish.empty(document.getElementById(id));
-  t.end();
-});
-
-test('elmish.route updates the url hash and sets history', function (t) {
-  const initial_hash = window.location.hash
-  console.log('START window.location.hash:', initial_hash, '(empty string)');
-  const initial_history_length = window.history.length;
-  console.log('START window.history.length:', initial_history_length);
-  // update the URL Hash and Set Browser History
-  const state = { hash: '' };
-  const new_hash = '#/active'
-  const new_state = elmish.route(state, 'Active', new_hash);
-  console.log('UPDATED window.history.length:', window.history.length);
-  console.log('UPDATED state:', new_state);
-  console.log('UPDATED window.location.hash:', window.location.hash);
-  t.notEqual(initial_hash, window.location.hash, "location.hash has changed!");
-  t.equal(new_hash, new_state.hash, "state.hash is now: " + new_state.hash);
-  t.equal(new_hash, window.location.hash, "window.location.hash: "
-    + window.location.hash);
-  t.equal(initial_history_length + 1, window.history.length,
-    "window.history.length increased from: " + initial_history_length + ' to: '
-    + window.history.length);
-  t.end();
-});
-
-
-// Testing localStorage requires "polyfil" because:
-// https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
-global.localStorage = { // globals are bad! but a "necessary evil" here ...
-  getItem: function(key) {
-   const value = this[key];
-   return typeof value === 'undefined' ? null : value;
- },
- setItem: function (key, value) {
-   this[key] = value;
- }
-}
-localStorage.setItem('hello', 'world!');
-console.log('localStorage (polyfil) hello', localStorage.getItem('hello'));
-
-// Test mount's localStorage using view and update from counter-reset example
-// to confirm that our elmish.mount localStorage works and is "generic".
-
-test('elmish.mount sets model in localStorage', function (t) {
-  const { view, update } = require('../examples/counter-reset/counter.js');
-
-  const root = document.getElementById(id);
-  elmish.mount(7, update, view, id);
-  // the "model" stored in localStorage should be 7 now:
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
-    "elmish_store is 7 (as expected). initial state saved to localStorage.");
-  // test that mount still works as expected (check initial state of counter):
-  const actual = document.getElementById(id).textContent;
-  const actual_stripped = parseInt(actual.replace('+', '')
-    .replace('-Reset', ''), 10);
-  const expected = 7;
-  t.equal(expected, actual_stripped, "Inital state set to 7.");
-  // attempting to "re-mount" with a different model value should not work
-  // because mount should retrieve the value from localStorage
-  elmish.mount(42, update, view, id); // model (42) should be ignored this time!
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
-    "elmish_store is 7 (as expected). initial state saved to localStorage.");
-  // increment the counter
-  const btn = root.getElementsByClassName("inc")[0]; // click increment button
-  btn.click(); // Click the Increment button!
-  const state = parseInt(root.getElementsByClassName('count')[0]
-    .textContent, 10);
-  t.equal(state, 8, "State is 8 after increment.");
-  // the "model" stored in localStorage should also be 8 now:
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-    "elmish_store is 8 (as expected).");
-  elmish.empty(root); // reset the DOM to simulate refreshing a browser window
-  elmish.mount(5, update, view, id); // 5 ignored! read model from localStorage
-  // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-    "elmish_store still 8 from increment (above) saved in localStorage");
-  t.end()
-});
+//
+// // use view and update from counter-reset example
+// // to confirm that our elmish.mount function is generic!
+// const { view, update } = require('../examples/counter-reset/counter.js');
+//
+// test('elmish.mount app expect state to be Zero', function (t) {
+//   const root = document.getElementById(id);
+//   elmish.mount(7, update, view, id);
+//   const actual = document.getElementById(id).textContent;
+//   const actual_stripped = parseInt(actual.replace('+', '')
+//     .replace('-Reset', ''), 10);
+//   const expected = 7;
+//   t.equal(expected, actual_stripped, "Inital state set to 7.");
+//   // reset to zero:
+//   const btn = root.getElementsByClassName("reset")[0]; // click reset button
+//   btn.click(); // Click the Reset button!
+//   const state = parseInt(root.getElementsByClassName('count')[0]
+//     .textContent, 10);
+//   t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
+//   elmish.empty(root); // clean up after tests
+//   t.end()
+// });
+//
+//
+// test('elmish.add_attributes adds "autofocus" attribute', function (t) {
+//   document.getElementById(id).appendChild(
+//     elmish.add_attributes(["class=new-todo", "autofocus", "id=new"],
+//       document.createElement('input')
+//     )
+//   );
+//   // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
+//   t.equal(document.getElementById('new'), document.activeElement,
+//     '<input autofocus> is "activeElement"');
+//   elmish.empty(document.getElementById(id));
+//   t.end();
+// });
+//
+// test('elmish.add_attributes applies HTML class attribute to el', function (t) {
+//   const root = document.getElementById(id);
+//   let div = document.createElement('div');
+//   div.id = 'divid';
+//   div = elmish.add_attributes(["class=apptastic"], div);
+//   root.appendChild(div);
+//   // test the div has the desired class:
+//   const nodes = document.getElementsByClassName('apptastic');
+//   t.equal(nodes.length, 1, "<div> has 'apptastic' CSS class applied");
+//   t.end();
+// });
+//
+// test('elmish.add_attributes applies id HTML attribute to a node', function (t) {
+//   const root = document.getElementById(id);
+//   let el = document.createElement('section');
+//   el = elmish.add_attributes(["id=myid"], el);
+//   const text = 'hello world!'
+//   var txt = document.createTextNode(text);
+//   el.appendChild(txt);
+//   root.appendChild(el);
+//   const actual = document.getElementById('myid').textContent;
+//   t.equal(actual, text, "<section> has 'myid' id attribute");
+//   elmish.empty(root); // clear the "DOM"/"state" before next test
+//   t.end();
+// });
+//
+// test('elmish.add_attributes applies multiple attribute to node', function (t) {
+//   const root = document.getElementById(id);
+//   elmish.empty(root);
+//   let el = document.createElement('span');
+//   el = elmish.add_attributes(["id=myid", "class=totes mcawesome"], el);
+//   const text = 'hello world'
+//   var txt = document.createTextNode(text);
+//   el.appendChild(txt);
+//   root.appendChild(el);
+//   const actual = document.getElementById('myid').textContent;
+//   t.equal(actual, text, "<section> has 'myid' id attribute");
+//   t.equal(el.className, 'totes mcawesome', "CSS class applied: ", el.className);
+//   t.end();
+// });
+//
+// test('elmish.add_attributes set placeholder on <input> element', function (t) {
+//   const root = document.getElementById(id);
+//   let input = document.createElement('input');
+//   input.id = 'new-todo';
+//   input = elmish.add_attributes(["placeholder=What needs to be done?"], input);
+//   root.appendChild(input);
+//   const placeholder = document.getElementById('new-todo')
+//     .getAttribute("placeholder");
+//   t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
+//   t.end();
+// });
+//
+// test('elmish.add_attributes set data-id on <li> element', function (t) {
+//   const root = document.getElementById(id);
+//   let li = document.createElement('li');
+//   li.id = 'task1';
+//   li = elmish.add_attributes(["data-id=123"], li);
+//   root.appendChild(li);
+//   const data_id = document.getElementById('task1').getAttribute("data-id");
+//   t.equal(data_id, '123', "data-id successfully added to <li> element");
+//   t.end();
+// });
+//
+// test('elmish.add_attributes set "for" attribute <label> element', function (t) {
+//   const root = document.getElementById(id);
+//   let li = document.createElement('li');
+//   li.id = 'toggle';
+//   li = elmish.add_attributes(["for=toggle-all"], li);
+//   root.appendChild(li);
+//   const label_for = document.getElementById('toggle').getAttribute("for");
+//   t.equal(label_for, "toggle-all", '<label for="toggle-all">');
+//   t.end();
+// });
+//
+// test('elmish.add_attributes type="checkbox" on <input> element', function (t) {
+//   const root = document.getElementById(id);
+//   let input = document.createElement('input');
+//   input = elmish.add_attributes(["type=checkbox", "id=toggle-all"], input);
+//   root.appendChild(input);
+//   const type_atrr = document.getElementById('toggle-all').getAttribute("type");
+//   t.equal(type_atrr, "checkbox", '<input id="toggle-all" type="checkbox">');
+//   t.end();
+// });
+//
+// test('elmish.add_attributes apply style="display: block;"', function (t) {
+//   const root = document.getElementById(id);
+//   elmish.empty(root);
+//   let sec = document.createElement('section');
+//   root.appendChild(
+//     elmish.add_attributes(["id=main", "style=display: block;"], sec)
+//   );
+//   const style = window.getComputedStyle(document.getElementById('main'));
+//   t.equal(style._values.display, 'block', 'style="display: block;" applied!')
+//   t.end();
+// });
+//
+// test('elmish.add_attributes checked=true on "done" item', function (t) {
+//   const root = document.getElementById(id);
+//   elmish.empty(root);
+//   let input = document.createElement('input');
+//   input = elmish.add_attributes(["type=checkbox", "id=item1", "checked=true"],
+//     input);
+//   root.appendChild(input);
+//   const checked = document.getElementById('item1').checked;
+//   t.equal(checked, true, '<input type="checkbox" checked=true>');
+//   // test "checked=false" so we know we are able to "toggle" a todo item:
+//   root.appendChild(
+//     elmish.add_attributes(
+//       ["type=checkbox", "id=item2", "checked=false"],
+//       document.createElement('input')
+//     )
+//   );
+//   t.equal(document.getElementById('item2').checked, false, 'checked=false');
+//   t.end();
+// });
+//
+// test('elmish.add_attributes <a href="#/active">Active</a>', function (t) {
+//   const root = document.getElementById(id);
+//   elmish.empty(root);
+//   root.appendChild(
+//     elmish.add_attributes(["href=#/active", "class=selected", "id=active"],
+//       document.createElement('a')
+//     )
+//   );
+//   // note: "about:blank" is the JSDOM default "window.location.href"
+//   console.log('JSDOM window.location.href:', window.location.href);
+//   // so when an href is set *relative* to this it becomes "about:blank#/my-link"
+//   // so we *remove* it before the assertion below, but it works fine in browser!
+//   const href = document.getElementById('active').href.replace('about:blank', '')
+//   t.equal(href, "#/active", 'href="#/active" applied to "active" link');
+//   t.end();
+// });
+//
+// /** DEFAULT BRANCH **/
+// test('test default branch of elmish.add_attributes (no effect)', function (t) {
+//   const root = document.getElementById(id);
+//   let div = document.createElement('div');
+//   div.id = 'divid';
+//   // "Clone" the div DOM node before invoking elmish.attributes to compare
+//   const clone = div.cloneNode(true);
+//   div = elmish.add_attributes(["unrecognised_attribute=noise"], div);
+//   t.deepEqual(div, clone, "<div> has not been altered");
+//   t.end();
+// });
+//
+// test('elmish.append_childnodes append child DOM nodes to parent', function (t) {
+//   const root = document.getElementById(id);
+//   elmish.empty(root); // clear the test DOM before!
+//   let div = document.createElement('div');
+//   let p = document.createElement('p');
+//   let section = document.createElement('section');
+//   elmish.append_childnodes([div, p, section], root);
+//   t.equal(root.childElementCount, 3, "Root element " + id + " has 3 child els");
+//   t.end();
+// });
+//
+// test('elmish.section creates a <section> HTML element', function (t) {
+//   const p = document.createElement('p');
+//   p.id = 'para';
+//   const text = 'Hello World!'
+//   const txt = document.createTextNode(text);
+//   p.appendChild(txt);
+//   // create the `<section>` HTML element using our section function
+//   const section = elmish.section(["class=new-todo"], [p])
+//   document.getElementById(id).appendChild(section); // add section with <p>
+//   // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
+//   t.equal(document.getElementById('para').textContent, text,
+//     '<section> <p>' + text + '</p></section> works as expected!');
+//   elmish.empty(document.getElementById(id));
+//   t.end();
+// });
+//
+// test('elmish create <header> view using HTML element functions', function (t) {
+//   const { append_childnodes, section, header, h1, text, input } = elmish;
+//   append_childnodes([
+//     section(["class=todoapp"], [ // array of "child" elements
+//       header(["class=header"], [
+//         h1([], [
+//           text("todos")
+//         ]), // </h1>
+//         input([
+//           "id=new",
+//           "class=new-todo",
+//           "placeholder=What needs to be done?",
+//           "autofocus"
+//         ], []) // <input> is "self-closing"
+//       ]) // </header>
+//     ])
+//   ], document.getElementById(id));
+//
+//   const place = document.getElementById('new').getAttribute('placeholder');
+//   t.equal(place, "What needs to be done?", "placeholder set in <input> el");
+//   t.equal(document.querySelector('h1').textContent, 'todos', '<h1>todos</h1>');
+//   elmish.empty(document.getElementById(id));
+//   t.end();
+// });
+//
+// test('elmish create "main" view using HTML DOM functions', function (t) {
+//   const { section, input, label, ul, li, div, button, text } = elmish;
+//   elmish.append_childnodes([
+//     section(["class=main", "style=display: block;"], [
+//       input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
+//       label(["for=toggle-all"], [ text("Mark all as complete") ]),
+//       ul(["class=todo-list"], [
+//         li(["data-id=123", "class=completed"], [
+//           div(["class=view"], [
+//             input(["class=toggle", "type=checkbox", "checked=true"], []),
+//             label([], [text('Learn The Elm Architecture ("TEA")')]),
+//             button(["class=destroy"])
+//           ]) // </div>
+//         ]), // </li>
+//         li(["data-id=234"], [
+//           div(["class=view"], [
+//             input(["class=toggle", "type=checkbox"], []),
+//             label([], [text("Build TEA Todo List App")]),
+//             button(["class=destroy"])
+//           ]) // </div>
+//         ]) // </li>
+//       ]) // </ul>
+//     ])
+//   ], document.getElementById(id));
+//   const done = document.querySelectorAll('.completed')[0].textContent;
+//   t.equal(done, 'Learn The Elm Architecture ("TEA")', 'Done: Learn "TEA"');
+//   const todo = document.querySelectorAll('.view')[1].textContent;
+//   t.equal(todo, 'Build TEA Todo List App', 'Todo: Build TEA Todo List App');
+//   elmish.empty(document.getElementById(id));
+//   t.end();
+// });
+//
+// test('elmish create <footer> view using HTML DOM functions', function (t) {
+//   const { footer, span, strong, text, ul, li, a, button } = elmish;
+//   elmish.append_childnodes([
+//     footer(["class=footer", "style=display: block;"], [
+//       span(["class=todo-count", "id=count"], [
+//         strong("1"),
+//         text("item left")
+//       ]),
+//       ul(["class=filters"], [
+//         li([], [
+//           a(["href=#/", "class=selected"], [text("All")])
+//         ]),
+//         li([], [
+//           a(["href=#/active"], [text("Active")])
+//         ]),
+//         li([], [
+//           a(["href=#/completed"], [text("Completed")])
+//         ])
+//       ]), // </ul>
+//       button(["class=clear-completed", "style=display:block;"],
+//         [text("Clear completed")]
+//       )
+//     ])
+//   ], document.getElementById(id));
+//
+//   const left = document.getElementById('count').textContent;
+//   t.equal(left, "item left", 'there is 1 todo item left');
+//   const clear = document.querySelectorAll('button')[1].textContent;
+//   t.equal(clear, "Clear completed", '<button> text is "Clear completed"');
+//   const selected = document.querySelectorAll('.selected')[1].textContent;
+//   t.equal(selected, "All", "All is selected by default");
+//   elmish.empty(document.getElementById(id));
+//   t.end();
+// });
+//
+// test('elmish.route updates the url hash and sets history', function (t) {
+//   const initial_hash = window.location.hash
+//   console.log('START window.location.hash:', initial_hash, '(empty string)');
+//   const initial_history_length = window.history.length;
+//   console.log('START window.history.length:', initial_history_length);
+//   // update the URL Hash and Set Browser History
+//   const state = { hash: '' };
+//   const new_hash = '#/active'
+//   const new_state = elmish.route(state, 'Active', new_hash);
+//   console.log('UPDATED window.history.length:', window.history.length);
+//   console.log('UPDATED state:', new_state);
+//   console.log('UPDATED window.location.hash:', window.location.hash);
+//   t.notEqual(initial_hash, window.location.hash, "location.hash has changed!");
+//   t.equal(new_hash, new_state.hash, "state.hash is now: " + new_state.hash);
+//   t.equal(new_hash, window.location.hash, "window.location.hash: "
+//     + window.location.hash);
+//   t.equal(initial_history_length + 1, window.history.length,
+//     "window.history.length increased from: " + initial_history_length + ' to: '
+//     + window.history.length);
+//   t.end();
+// });
+//
+//
+// // Testing localStorage requires "polyfil" because:
+// // https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
+// global.localStorage = { // globals are bad! but a "necessary evil" here ...
+//   getItem: function(key) {
+//    const value = this[key];
+//    return typeof value === 'undefined' ? null : value;
+//  },
+//  setItem: function (key, value) {
+//    this[key] = value;
+//  }
+// }
+// localStorage.setItem('hello', 'world!');
+// console.log('localStorage (polyfil) hello', localStorage.getItem('hello'));
+//
+// // Test mount's localStorage using view and update from counter-reset example
+// // to confirm that our elmish.mount localStorage works and is "generic".
+//
+// test('elmish.mount sets model in localStorage', function (t) {
+//   const { view, update } = require('../examples/counter-reset/counter.js');
+//
+//   const root = document.getElementById(id);
+//   elmish.mount(7, update, view, id);
+//   // the "model" stored in localStorage should be 7 now:
+//   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+//     "elmish_store is 7 (as expected). initial state saved to localStorage.");
+//   // test that mount still works as expected (check initial state of counter):
+//   const actual = document.getElementById(id).textContent;
+//   const actual_stripped = parseInt(actual.replace('+', '')
+//     .replace('-Reset', ''), 10);
+//   const expected = 7;
+//   t.equal(expected, actual_stripped, "Inital state set to 7.");
+//   // attempting to "re-mount" with a different model value should not work
+//   // because mount should retrieve the value from localStorage
+//   elmish.mount(42, update, view, id); // model (42) should be ignored this time!
+//   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+//     "elmish_store is 7 (as expected). initial state saved to localStorage.");
+//   // increment the counter
+//   const btn = root.getElementsByClassName("inc")[0]; // click increment button
+//   btn.click(); // Click the Increment button!
+//   const state = parseInt(root.getElementsByClassName('count')[0]
+//     .textContent, 10);
+//   t.equal(state, 8, "State is 8 after increment.");
+//   // the "model" stored in localStorage should also be 8 now:
+//   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+//     "elmish_store is 8 (as expected).");
+//   elmish.empty(root); // reset the DOM to simulate refreshing a browser window
+//   elmish.mount(5, update, view, id); // 5 ignored! read model from localStorage
+//   // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
+//   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+//     "elmish_store still 8 from increment (above) saved in localStorage");
+//   t.end()
+// });

From 7efdaf0257681773a5616e308157c69a7340e626 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 29 Jul 2018 22:08:32 +0100
Subject: [PATCH 055/164] add screenshot of init + empty tests passing
 https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45#issuecomment-408705886
 for #44

---
 elmish.md                    | 30 ++++++++++++++++++++++++------
 examples/todo-list/elmish.js |  4 ++--
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/elmish.md b/elmish.md
index 7c627af8..a697d66a 100644
--- a/elmish.md
+++ b/elmish.md
@@ -192,6 +192,10 @@ function init(doc){
 }
 ```
 
+> If the **comment syntax** above the function definition is _unfamiliar_,
+please see:
+[https://github.com/dwyl/**learn-jsdoc**](https://github.com/dwyl/learn-jsdoc)
+
 This code is simply to allow us to "initialise" `Elm`(_ish_)
 with a "fake" DOM (`JSDOM`) so that we can _test_ it.
 
@@ -213,8 +217,6 @@ if (typeof module !== 'undefined' && module.exports) {
 ```
 
 
-
-
 ### `empty` the DOM
 
 Start by _describing_ what the `empty` function _does_. <br />
@@ -304,6 +306,14 @@ issue***!](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues)
 _It's **essential** that you **understand** each **character**
 in the code **before** continuing to **avoid** "**confusion**" later._
 
+Run the test:
+```sh
+node test/elmish.test.js
+```
+You should see the following:
+![tests-fail](https://user-images.githubusercontent.com/194400/43370657-fe6d82c8-937a-11e8-951d-ed4d9849f876.png)
+
+
 #### `empty` Function _Implementation_
 
 Now that we have the **test** for our `empty` function written,
@@ -324,17 +334,25 @@ function empty(node) {
   }
 }
 ```
+remember to add a line in the `module.exports` Object at the end of the file:
+```js
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    empty: empty, // add this line to export the `empty` function
+    init: init,
+  }
+} else { init(document); }
+```
 
-If the **comment syntax** above the function definition is _unfamiliar_,
-please see:
-[https://github.com/dwyl/**learn-jsdoc**](https://github.com/dwyl/learn-jsdoc)
 
 When you run the test in your terminal with the command
 `node test/elmish.test.js`
 you should see something _similar_ to this:
 
+![empty-function-tests-pass](https://user-images.githubusercontent.com/194400/43370682-5ff0726c-937b-11e8-944f-b46b71da7f6c.png)
 
-
+Boom! our first test is passing! <br />
+(_it has **3 assertions**, that's why Tape says "tests 3"_).
 
 
 
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index f7e076e1..19c854c7 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -226,9 +226,9 @@ if (typeof module !== 'undefined' && module.exports) {
     // a: a,
     // button: button,
     // div: div,
-    // empty: empty,
+    empty: empty,
     // footer: footer,
-    // init: init,
+    init: init,
     // input: input,
     // h1, h1,
     // header: header,

From 2e4622ff985b9cf0dcee2399f7c073e50e895c3e Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 29 Jul 2018 23:00:25 +0100
Subject: [PATCH 056/164] finish "transferring" the elm(ish) related code and
 docs to elmish.md for #44 https://youtu.be/OBAsPSVrBvQ

---
 README.md                    |    2 +-
 elmish.md                    | 1256 ++++++++++++++++++++++++++++++++--
 examples/todo-list/elmish.js |   44 +-
 test/counter-reset.test.js   |  202 +++---
 test/elmish.test.js          |   70 +-
 todo-list.md                 | 1140 +-----------------------------
 6 files changed, 1367 insertions(+), 1347 deletions(-)

diff --git a/README.md b/README.md
index ac259ef4..9d5f94cb 100644
--- a/README.md
+++ b/README.md
@@ -34,7 +34,7 @@ apps.<br />
 the Elm Architecture, <br />
 for people who write JavaScript and want
 a _**functional**, **elegant** and **fast**_ <br />
-way of organizing their JavaScript _without_
+way of organizing their JavaScript code _without_
 having the learning curve <br />
 of a completely new (_functional_) programming language!
 
diff --git a/elmish.md b/elmish.md
index a697d66a..6c6a695f 100644
--- a/elmish.md
+++ b/elmish.md
@@ -7,9 +7,9 @@
 this is a "inspired by" but really a "poor immitation" of Elm! -->
 
 `Elm`(_ish_) is an **`Elm`**-_inspired_ `JavaScript` (**ES5**)
-fully functional front-end _micro_-framework.[<sup>1</sup>](#notes) <br />
-
+fully functional front-end _micro_-framework.[<sup>1</sup>](#notes)
 
+<br /><br />
 
 ## _Why?_
 
@@ -34,6 +34,7 @@ one of the **best habits** to form in your software development career.
 This walkthrough shows **how** you can do it **the right way**
 from the **start** of a project._
 
+<br /><br />
 
 ## _What?_
 
@@ -46,6 +47,8 @@ because we will be analysing, documenting, testing
 and writing each function required
 to architect and render the our Todo List (TodoMVC) App.
 
+<br /><br />
+
 ## _Who?_
 
 People who wants to gain an _in-depth_ understanding
@@ -59,6 +62,7 @@ please open an issue:
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues <br />
 @dwyl is a "safe space" and we are all here to help don't be shy/afraid.
 
+<br /><br />
 
 ## _How_?
 
@@ -197,14 +201,14 @@ please see:
 [https://github.com/dwyl/**learn-jsdoc**](https://github.com/dwyl/learn-jsdoc)
 
 This code is simply to allow us to "initialise" `Elm`(_ish_)
-with a "fake" DOM (`JSDOM`) so that we can _test_ it.
+with a "simulated" browser `document` (`JSDOM`) so that we can _test_ the code.
 
 
 ### Add `module.exports` to "export" the `init` function
 
 Adding the function to the `elmish.js` file is a good _start_,
-but we need to ***`export`*** it to be able to _invoke_ it in our test.
-Let's add the following code at the end of `examples/todo-list/elmish.js`:
+but we need to ***`export`*** it to be able to _invoke_ it in our test. <br />
+Add the following code at the end of `examples/todo-list/elmish.js`:
 
 ```js
 /* module.exports is needed to run the functions using Node.js for testing! */
@@ -216,6 +220,10 @@ if (typeof module !== 'undefined' && module.exports) {
 } else { init(document);
 ```
 
+Now if you attempt to run the test file: `node test/elmish.test.js`
+you should see no output.
+(_this is expected as we haven't written any tests yet!_)
+
 
 ### `empty` the DOM
 
@@ -226,9 +234,9 @@ and to _clearly communicate_ with the **`humans` _reading_** the code.
 
 #### `empty` Function _Description_
 
-The `empty` function deletes all DOM elements
-from within a specific "root" element.
-We use it to erase the DOM before re-rendering our app.
+The `empty` function deletes all the DOM elements
+from within a specific "root" element. <br />
+it is used to erase the DOM before re-rendering the app.
 
 Following "**_Document(ation)_ Driven Development**",
 we create a **`JSDOC`** comment block
@@ -251,30 +259,20 @@ always imagine that you are "_pairing_" with someone
 who does _not_ (_already_) "know the solution"
 and you are _explaining_ it to them.
 
-
 #### `empty` Function _Test_
 
 We previously used the `empty` function in our `counter`,
 `counter-reset` and `multiple-counters` examples (_in the "basic" TEA tutorial_)
 so we have a "head start" on writing the test.
 
+<!--
 > _The **reason**(s) we write the **test first**
 even when we (already) know the "solution" is:_ <br />
 >
+-->
 
-
-In the `test/elmish.test.js` file, type the following code:
+In the `test/elmish.test.js` file, append the following code:
 ```js
-const test = require('tape');       // https://github.com/dwyl/learn-tape
-const fs = require('fs');           // to read html files (see below)
-const path = require('path');       // so we can open files cross-platform
-const elmish = require('../examples/todo-list/elmish.js'); // functions to test
-const html = fs.readFileSync(path.resolve(__dirname,
-  '../examples/todo-list/index.html')); // sample HTML file to initialise JSDOM.
-require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
-elmish.init(document);              // pass JSDOM into elmish for DOM functions
-const id = 'test-app';              // all tests use 'test-app' as root element
-
 test('empty("root") removes DOM elements from container', function (t) {
   // setup the test div:
   const text = 'Hello World!'
@@ -290,7 +288,7 @@ test('empty("root") removes DOM elements from container', function (t) {
   t.equal(root.childElementCount, 1, "Root element " + id + " has 1 child el");
   // empty the root DOM node:
   elmish.empty(root); // <-- exercise the `empty` function!
-  t.equal(root.childElementCount, 0, "After empty(root) has 0 child elements!")
+  t.equal(root.childElementCount, 0, "After empty(root) has 0 child elements!");
   t.end();
 });
 ```
@@ -351,8 +349,8 @@ you should see something _similar_ to this:
 
 ![empty-function-tests-pass](https://user-images.githubusercontent.com/194400/43370682-5ff0726c-937b-11e8-944f-b46b71da7f6c.png)
 
-Boom! our first test is passing! <br />
-(_it has **3 assertions**, that's why Tape says "tests 3"_).
+Boom! our first test is passing!
+(_the test has **3 assertions**, that's why Tape says "tests 3. pass 3"_).
 
 
 
@@ -361,7 +359,27 @@ Boom! our first test is passing! <br />
 The `mount` function is the "glue" or "wiring" function that
 connects the `model`, `update` and `view`; we _can_ _generalise_ it.
 
-In the `test/elmish.test.js` file, type the following code:
+#### `mount` function _Documentation_
+
+Think about what the `mount` function _does_;
+it "mounts" ("_renders_") the App in the "root" DOM element.
+It also tells our app to "re-render"
+when a `signal` with an `action` is received.
+
+In `examples/todo-list/elmish.js` add the following `JSDOC` comment:
+```js
+/**
+ * `mount` mounts the app in the "root" DOM Element.
+ * @param  {Object} model store of the application's state.
+ * @param  {Function} update how the application state is updated ("controller")
+ * @param  {Function} view function that renders HTML/DOM elements with model.
+ * @param  {String} root_element_id root DOM element in which the app is mounted
+ */
+```
+
+#### `mount` function _Test_
+
+In the `test/elmish.test.js` file, append the following code:
 ```js
 // use view and update from counter-reset example
 // to invoke elmish.mount() function and confirm it is generic!
@@ -388,8 +406,11 @@ test('elmish.mount app expect state to be Zero', function (t) {
 > _**Note**: we have "**borrowed**" this test from our previous example.
 see:_ `test/counter-reset.test.js`
 
-The corresponding code with JSDOC for the `mount` function
-in `examples/todo-list/elmish.js` is:
+
+#### `mount` Function _Implementation_
+
+Add the following code to the `mount` function body to make the test _pass_
+in `examples/todo-list/elmish.js`:
 ```js
 /**
  * `mount` mounts the app in the "root" DOM Element.
@@ -411,27 +432,12 @@ function mount(model, update, view, root_element_id) {
 }
 ```
 
-### `module.exports`
+#### Add `mount` to `module.exports` Object
 
-In order to test the `elmish` functions we need to `export` them.
-Additionally, because we are using JSDOM
-to test our front-end functions using `tape`,
-we need an `init` function to pass in the JSDOM `document`.
-add the following lines to `examples/todo-list/elmish.js`:
+Recall that in order to test the `elmish` functions we need to `export` them.
+Your `module.exports` statement should now look something like this:
 
 ```js
-/**
- * init initialises the document (Global) variable for DOM operations.
- * @param  {Object} doc window.document in browser and JSDOM.document in tests.
- * @return {Object} document returns whatever is passed in.
- */
-function init(doc){
-  document = doc; // this is used for instantiating JSDOM for testing.
-  return document;
-}
-
-/* module.exports is needed to run the functions using Node.js for testing! */
-/* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     empty: empty,
@@ -441,13 +447,26 @@ if (typeof module !== 'undefined' && module.exports) {
 } else { init(document); }
 ```
 
+#### Re-Run the Test(s)
+
+Re-run the test suite:
+```sh
+node test/elmish.test.js
+```
+
+You should expect to see: (_tests passing_)
+![image](https://user-images.githubusercontent.com/194400/43387393-3718dcae-93de-11e8-89c1-bb353ede49cd.png)
+
+
+
 Now that we have started creating the `elmish` generic functions,
 we need to know which _other_ functions we need. <br />
 Let's take a look at the TodoMVC App to "_analyse_ the requirements".
 
 ### _Analyse_ the TodoMVC App to "Gather Requirements"
 
-Our _next_ step is to _analyse_ the required functionality of a Todo List.
+In our quest to _analyse_ the required functionality of a Todo List,
+the _easiest_ way is to _observe_ a functioning TodoMVC Todo List.
 
 ### _Recommended_ Background Reading: TodoMVC "_Vanilla_" JS
 
@@ -471,15 +490,1154 @@ http://todomvc.com/examples/vanillajs
 _Play_ with the app by adding a few items,
 checking-off and toggling the views in the footer.
 
-> _**Note**: IMO the "**Vanilla**" **JS** implementation
-is quite complex and insufficiently documented_
+> _**Note**: having read through the the "**Vanilla**" **JS** implementation
+we feel it is quite complex and insufficiently documented_
 (_very few code comments and sparse_
 [`README.md`](https://github.com/tastejs/todomvc/tree/25a9e31eb32db752d959df18e4d214295a2875e8/examples/vanillajs)),
-_so don't expect to **understand** it all the first time without study._
+_so don't expect to **understand** it all the first time without "study"._
 _Don't worry, we will walk through building each feature in detail._
 
 
 
+
+
+### Todo List _Basic_ Functionality
+
+A todo list has only 2 _basic_ functions:
+
+1. **Add** a `new` item to the list when the **`[Enter]`** key is pressed
+2. **Check-off** an item as "**completed**" (_done/finished_)
+
+> **Add** item and **Check-off** is _exactly_ the "functionality"
+you would have in a _paper_-based Todo List.
+
+#### TodoMVC "Advanced" Functionality
+
+In _addition_ to these basic functions,
+**TodoMVC** has the ability to:
++ **Un-check** an item as to make it "**active**" (_still to be done_)
++ **Double-click/tap** on todo **item description** to **`edit` it**.
++ **Mark _all_ as complete**
++ **Click `X`** on item row to remove from list.
+
+#### `<footer>` Menu
+
+below the main interface there is a `<footer>`
+with a **count**, **3 view toggles** and **one action**:
+![image](https://user-images.githubusercontent.com/194400/42633421-5eb20f24-85d8-11e8-94ad-bb653dd93ab0.png)
++ "{cont} item(s) left": <br />
+  `{store.items.filter(complete==false)}` item`{store.items.length > 1 ? 's' : '' }` left
++ Show **`All`**
++ Show **`Active`**
++ Show **`Completed`**
++ **_Clear_ `Completed`**
+
+#### Routing / Navigation
+
+Finally, if you click around the `<footer>` toggle menu,
+you will notice that the Web Bowser Address bar
+changes to reflect the chosen view.
+
+![tea-todomvc-routing](https://user-images.githubusercontent.com/194400/42633291-edef3082-85d7-11e8-93c4-5e5f2a5264a1.png)
+
+> Thinking about a task or challenge from
+["first principals"](https://en.wikipedia.org/wiki/First_principle)
+is ~~a great~~ the best way to _understand_ it. <br />
+This is the "physics" approach. see: https://youtu.be/L-s_3b5fRd8?t=22m37s
+
+
+### HTML Elements (Functions)
+
+The _requirements_ for the HTML elements we _need_ for a Todo List
+can be _gathered_ by viewing the source code of the VanillaJS TodoMVC
+in a web browser:
+
+![todomvc-elements-browser-devtools](https://user-images.githubusercontent.com/194400/42635773-daa1ccae-85de-11e8-9f41-51d8b552ebd2.png)
+
+This is a "copy-paste" of the _generated_ code including the Todo items:
+
+```html
+<section class="todoapp">
+  <header class="header">
+    <h1>todos</h1>
+    <input class="new-todo" placeholder="What needs to be done?" autofocus="">
+  </header>
+  <section class="main" style="display: block;">
+    <input id="toggle-all" class="toggle-all" type="checkbox">
+    <label for="toggle-all">Mark all as complete</label>
+    <ul class="todo-list">
+      <li data-id="1531397960010" class="completed">
+        <div class="view">
+          <input class="toggle" type="checkbox" checked="">
+          <label>Learn The Elm Architecture ("TEA")</label>
+          <button class="destroy"></button>
+        </div>
+      </li>
+      <li data-id="1531397981603" class="">
+        <div class="view">
+          <input class="toggle" type="checkbox">
+          <label>Build TEA Todo List App</label>
+          <button class="destroy">
+          </button>
+        </div>
+      </li>
+    </ul>
+  </section>
+  <footer class="footer" style="display: block;">
+    <span class="todo-count"><strong>1</strong> item left</span>
+    <ul class="filters">
+      <li>
+        <a href="#/" class="selected">All</a>
+      </li>
+      <li>
+        <a href="#/active" class="">Active</a>
+      </li>
+      <li>
+        <a href="#/completed">Completed</a>
+      </li>
+    </ul>
+    <button class="clear-completed" style="display: block;">Clear completed</button>
+  </footer>
+</section>
+```
+
+Let's split each one of these elements into it's own `function`
+(_with any necessary "helpers"_) in the order they appear.
+
+When building a House we don't think "build house" as our _first_ action. <br />
+_Instead_ we think: what are the "foundations" that need to be in place
+***before*** we lay the _first_ "brick"?
+
+In our Todo List App we need a few "Helper Functions"
+before we start building the App.
+
+### HTML / DOM Creation Generic Helper Functions
+
+All "grouping" or "container" HTML elements
+e.g: `<div>`, `<section>` or `<span>`
+will be called with ***two arguments***:
+e.g: `var sec = section(attributes, childnodes)`
++ `attributes` - a list (Array) of HTML attributes/properties
+  e.g: `id` or `class`.
++ `childnodes` - a list (Array) of child HTML elements
+(_nested within the_ `<section>` _element_)
+
+Each of these function arguments will be "_applied_" to the HTML element.
+We therefore need a pair of "helper" functions (_one for each argument_).
+
+
+### `add_attributes`
+
+The `JSDOC` comment for our `add_attributes` function is:
+```js
+/**
+* add_attributes applies the desired attributes to the desired node.
+* Note: this function is "impure" because it "mutates" the node.
+* however it is idempotent; the "side effect" is only applied once.
+* @param {Array.<String>} attrlist list of attributes to be applied to the node
+* @param {Object} node DOM node upon which attribute(s) should be applied
+* @example
+* // returns node with attributes applied
+* div = add_attributes(["class=item", "id=mydiv", "active=true"], div);
+*/
+```
+This should give you a _good idea_ of what code needs to be written.
+
+But let's write the _test_ first!
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.add_attributes applies class HTML attribute to a node', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  div = elmish.add_attributes(["class=apptastic"], div);
+  root.appendChild(div);
+  // test the div has the desired class:
+  const nodes = document.getElementsByClassName('apptastic');
+  t.equal(nodes.length, 1, "<div> has 'apptastic' class applied");
+  t.end();
+});
+```
+
+Given the code in the test above,
+take a moment to think of how _you_ would write,
+the `add_attributes` function to apply a CSS `class` to an element. <br />
+Note: we have _seen_ the code _before_ in the `counter` example.
+The difference is this time we want it to be "generic";
+we want to apply a CSS `class` to _any_ DOM node.
+
+If you can, make the test _pass_
+by writing the `add_attributes` function.
+(_don't forget to_ `export` _the function at the end of the file_).
+
+If you get "stuck", checkout:
+https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
+
+
+> **Note**: The `add_attributes` function is "impure" as it "mutates"
+the target DOM `node`, this is more of a "fact of life" in JavaScript,
+and given that the application of attributes
+to DOM node(s) is idempotent we aren't "concerned" with "side effects";
+the attribute will only be applied _once_ to the node
+regardless of how many times the `add_attributes` function is called.
+see: https://en.wikipedia.org/wiki/Idempotence
+
+
+For reference, the Elm HTML Attributes function on Elm package is:
+http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes
+
+#### Input `placeholder` Attribute
+
+The `<input>` form element (_where we create new Todo List items_)
+has a helpful `placeholder` _prompting_ us with a question:
+"_What needs to be done?_"
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.add_attributes set placeholder on <input> element', function (t) {
+  const root = document.getElementById(id);
+  let input = document.createElement('input');
+  input.id = 'new-todo';
+  input = elmish.add_attributes(["placeholder=What needs to be done?"], input);
+  root.appendChild(input);
+  const placeholder = document.getElementById('new-todo')
+    .getAttribute("placeholder");
+  t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
+  t.end();
+});
+```
+
+Write the necessary code to make this test _pass_ in `elmish.js`.
+
+
+#### Input `autofocus`
+
+In order to "_guide_" the person using our Todo List app
+to create their _first_ Todo List _item_,
+**we want** the `<input>` field to be automatically "active"
+**so that** they can just start typing as soon as the app loads.
+
+This is achieved using the `autofocus` attribute.
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test.only('elmish.add_attributes add "autofocus" attribute', function (t) {
+  document.getElementById(id).appendChild(
+    elmish.add_attributes(["class=new-todo", "autofocus", "id=new"],
+      document.createElement('input')
+    )
+  );
+  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
+  t.equal(document.getElementById('new'), document.activeElement,
+    '<input autofocus> is "activeElement"');
+  elmish.empty(document);
+  t.end();
+});
+```
+
+Write the necessary code to make this test _pass_ in `elmish.js`.
+
+Relevant reading:
++ `<input>` attributes:
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
++ https://caniuse.com/#feat=autofocus (_**unavailable** on **iOS Safari**!_)
+
+> **Note**: while _all_ our _other_ HTML attributes
+follow the `key="value"` syntax,
+according to the W3C _specification_,
+simply adding the attribute _key_ in the element is "valid"
+e.g: `<input placeholder="What needs to be done?" autofocus>`
+see: https://stackoverflow.com/questions/4445765/html5-is-it-autofocus-autofocus-or-autofocus
+
+
+#### add `data-id` attribute to `<li>`
+
+`data-*` attributes allow us to store extra information on standard,
+semantic HTML elements without affecting regular attributes.
+For example in the case of a Todo List item,
+we want to store a reference to the "item id" in the DOM
+for that item, so that we know which item to check-off when
+the checkbox is clicked/tapped. _However_ we don't want to use the
+"traditional" `id` attribute, we can use `data-id`
+to keep a clear separation between the data and presentation.
+
+See: "Using data attributes"
+https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
+
+In the TodoMVC HTML code
+there are two `<li>` (_list elements_)
+which have the `data-id` attribute (_see above_).
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.add_attributes set data-id on <li> element', function (t) {
+  const root = document.getElementById(id);
+  let li = document.createElement('li');
+  li.id = 'task1';
+  li = elmish.add_attributes(["data-id=123"], li);
+  root.appendChild(li);
+  const data_id = document.getElementById('task1').getAttribute("data-id");
+  t.equal(data_id, '123', "data-id successfully added to <li> element");
+  t.end();
+});
+```
+Write the "case" in to make this test _pass_ in `elmish.js`.
+
+Tip: use `setAttribute()` method:
+https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
+
+#### label `for` attribute
+
+Apply the `for` attribute to a `<label>`
+e.g: `<label for="toggle-all">`
+
+HTML `<label>` attributes `for`:
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Attributes
+
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test.only('elmish.add_attributes set "for" attribute <label> element', function (t) {
+  const root = document.getElementById(id);
+  let li = document.createElement('li');
+  li.id = 'toggle';
+  li = elmish.add_attributes(["for=toggle-all"], li);
+  root.appendChild(li);
+  const label_for = document.getElementById('toggle').getAttribute("for");
+  t.equal(label_for, "toggle-all", '<label for="toggle-all">');
+  t.end();
+});
+```
+
+Write the "case" in to make this test _pass_ in `elmish.js`.
+
+
+#### `<input>` attribute `type`
+
+In order to use a Checkbox in our Todo List UI,
+we need to set the `type=checkbox` on the `<input>` element.
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.add_attributes type="checkbox" on <input> element', function (t) {
+  const root = document.getElementById(id);
+  let input = document.createElement('input');
+  input = elmish.add_attributes(["type=checkbox", "id=toggle-all"], input);
+  root.appendChild(input);
+  const type_atrr = document.getElementById('toggle-all').getAttribute("type");
+  t.equal(type_atrr, "checkbox", '<input id="toggle-all" type="checkbox">');
+  t.end();
+});
+```
+
+Write the "case" in to make this test _pass_ in `elmish.js`.
+
+`<input>` attribute `type`:
+https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
+
+
+#### Add `style` attribute to HTML element?
+
+In TodoMVC there are _three_ instances of in-line CSS styles.
+they are _all_ `style="display: block;"`.
+It's _unclear_ why setting _inline_ styles is _necessary_;
+we _prefer_ to be _consistent_ and
+***either*** use CSS `classes`
+with an _external_ stylesheet (_which TodoMVC already does!_)
+***or*** go _full_ "inline styles"
+e.g: http://package.elm-lang.org/packages/mdgriffith/style-elements/latest
+
+For now, let's add the `style` attribute
+to our `add_attributes` function for "completeness".
+
+see:
+https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test.only('elmish.add_attributes apply style="display: block;"', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let sec = document.createElement('section');
+  root.appendChild(
+    elmish.add_attributes(["id=main", "style=display: block;"], sec)
+  );
+  const style = window.getComputedStyle(document.getElementById('main'));
+  t.equal(style._values.display, 'block', 'style="display: block;" applied!')
+  t.end();
+});
+```
+
+Write the "case" in to make this test _pass_ in `elmish.js`.
+
+If you get "stuck", checkout:
+https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
+
+
+#### `checked=true` attribute for "complete"/"done" items
+
+Todo List items that have been marked as "done" will have the `checked=true`
+attribute applied to them.
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.add_attributes checked=true on "done" item', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let input = document.createElement('input');
+  input = elmish.add_attributes(["type=checkbox", "id=item1", "checked=true"],
+    input);
+  root.appendChild(input);
+  const checked = document.getElementById('item1').checked;
+  t.equal(checked, true, '<input type="checkbox" checked=true>');
+  let input2
+  t.end();
+});
+```
+
+Write the code to make the test pass!
+
+> _**Implementation note**: while the VanillaJS TodoMVC view has
+`checked=""` (just an attribute with **no value**),
+we find this "unfriendly" to beginners
+so instead we are using `checked=true` instead because it's clearer.
+See: https://stackoverflow.com/a/10650302/1148249
+"Use true as it is marginally more efficient
+and is **more intention revealing** to maintainers._"
+
+For more detail on the `<input type="checkbox">`
+see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+
+#### Set `href` on `<a>` (anchor) element
+
+The "filters" in the `<footer>` of TodoMVC contain 3 links ("anchors") `<a>`
+each of which have an `href` attribute indicating where
+clicking/tapping on the link (filter) should "route" to.
+
+> We will return to routing later (_below_),
+for now we simply need to set the `href` attribute.
+
+Add the following test to the `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.add_attributes <a href="#/active">Active</a>', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  root.appendChild(
+    elmish.add_attributes(["href=#/active", "class=selected", "id=active"],
+      document.createElement('a')
+    )
+  );
+  // note: "about:blank" is the JSDOM default "window.location.href"
+  console.log('JSDOM window.location.href:', window.location.href);
+  // so when an href is set *relative* to this it becomes "about:blank#/my-link"
+  // so we *remove* it before the assertion below, but it works fine in browser!
+  const href = document.getElementById('active').href.replace('about:blank', '')
+  t.equal(href, "#/active", 'href="#/active" applied to "active" link');
+  t.end();
+});
+```
+
+Write the code to make the test pass!
+
+
+Useful knowledge:
++ What: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
++ Why: https://stackoverflow.com/questions/4855168/what-is-href-and-why-is-it-used
++ How:  https://stackoverflow.com/questions/4689344/how-can-i-add-href-attribute-to-a-link-dynamically-using-javascript
+
+
+### `append_childnodes`
+
+The `append_childnodes` _functionality_ is a "_one-liner_": <br />
+```js
+childnodes.forEach(function (el) { parent.appendChild(el) });
+```
+It's easy to think: "_why bother to create a_ `function`...?" <br />
+The _reasons_ to create _small_ functions are: <br />
+**a)** Keep the _functionality_ "DRY" https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
+which means we can _easily_ track down all instances of function invocation.
+<br />
+**b)** If we ever need to modify the function, e.g: to performance optimise it, there is a _single_ definition.
+<br />
+**c)** It makes unit-testing the functionality easy;
+that's _great_ news for reliability!
+
+With that in mind, let's write a _test_ for the `childnodes` function!
+Add the following code to the `test/elmish.test.js` file: <br />
+
+```js
+test.only('elmish.append_childnodes appends child DOM nodes to parent', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root); // clear the test DOM before!
+  let div = document.createElement('div');
+  let p = document.createElement('p');
+  let section = document.createElement('section');
+  elmish.append_childnodes([div, p, section], root);
+  t.equal(root.childElementCount, 3, "Root element " + id + " has 3 child els");
+  t.end();
+});
+```
+
+Now, based on the following `JSDOC` comment:
+```js
+/**
+ * `append_childnodes` appends an array of HTML elements to a parent DOM node.
+ * @param  {Array.<Object>} childnodes array of child DOM nodes.
+ * @param  {Object} parent the "parent" DOM node where children will be added.
+ * @return {Object} returns parent DOM node with appended children
+ * @example
+ * // returns the parent node with the "children" appended
+ * var parent = elmish.append_childnodes([div, p, section], parent);
+ */
+```
+
+_Implement_ this function to make the test pass.
+It _should_ be the _easiest_ one so far.
+(_see above for "one-liner" clue_...). <br />
+
+Don't forget to remove the `.only` from the test, once you finish.
+
+If you get "stuck", checkout:
+https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
+
+
+### `<section>` HTML Element
+
+The _first_ HTML element we encounter in the TodoMVC app is `<section>`. <br />
+`<section>` represents a standalone section — which doesn't have
+a more specific semantic element to represent it —
+it's an alternative way to group elements to a `<div>`.
+
+> info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section <br />
+> difference:
+https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div
+
+We want to make our `view` function "***declarative***",
+this means our `view` should contain **no** "**control flow**"
+(i.e. `if` statements).
+The function invocations should reflect the final DOM quite closely
+see: https://en.wikipedia.org/wiki/Declarative_programming
+
+Example `view`:
+```js
+elmish.append_childnodes([
+  section(["class=todoapp"], [ // array of "child" elements
+    header(["class=header"], [
+      h1([], [
+        text("todos")
+      ]), // </h1>
+      input([
+        "class=new-todo",
+        "placeholder=What needs to be done?",
+        "autofocus"
+      ]) // <input> is "self-closing"
+    ]) // </header>
+  ])
+], document.getElementById('my-app'));
+```
+
+Add the following _test_ to your `test/elmish.test.js` file: <br />
+
+```js
+test('elmish.section creates a <section> HTML element', function (t) {
+  const p = document.createElement('p');
+  p.id = 'para';
+  const text = 'Hello World!'
+  const txt = document.createTextNode(text);
+  p.appendChild(txt);
+  // create the `<section>` HTML element using our section function
+  const section = elmish.section(["class=new-todo"], [p])
+  document.getElementById(id).appendChild(section); // add section with <p>
+  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
+  t.equal(document.getElementById('para').textContent, text,
+    '<section> <p>' + text + '</p></section> works as expected!');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+```
+
+Based on the following `JSDOC` comment:
+```js
+/**
+ * section creates a <section> HTML element with attributes and childnodes
+ * @param {Array.<String>} attrlist list of attributes to be applied to the node
+ * @param {Array.<Object>} childnodes array of child DOM nodes.
+ * @return {Object} returns the <section> DOM node with appended children
+ * @example
+ * // returns <section> DOM element with attributes applied & children appended
+ * var section = elmish.section(["class=todoapp"], [h1, input]);
+ */
+```
+Attempt to create the `section` function
+using the `add_attributes` and `append_childnodes` "helper" functions.
+
+If you get "stuck", checkout:
+https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
+> _**Note**: in our "solution" we created a "helper" function
+called `create_element` to "DRY" the HTML element creation code;
+this is a *recommended** "best practice"._
+
+The `JSDOC` comment for our `create_element` function is:
+```js
+/**
+ * create_element is a "helper" function to "DRY" HTML element creation code
+ * creat *any* element with attributes and childnodes.
+ * @param {String} type of element to be created e.g: 'div', 'section'
+ * @param {Array.<String>} attrlist list of attributes to be applied to the node
+ * @param {Array.<Object>} childnodes array of child DOM nodes.
+ * @return {Object} returns the <section> DOM node with appended children
+ * @example
+ * // returns the parent node with the "children" appended
+ * var div = elmish.create_element('div', ["class=todoapp"], [h1, input]);
+ */
+```
+`try` to write it for yourself before looking at the "answer".
+
+
+For reference, the section function in Elm:
+http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
+<br />
+Demo: https://ellie-app.com/LTtNVQjfWVa1
+![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)
+
+
+### Create a `view` using HTML Element Functions!
+
+Once we know how to create _one_ HTML element,
+it's _easy_ to create _all_ of them!
+Consider the following HTML for the `<header>` section of the TodoMVC App:
+
+```html
+<section class="todoapp">
+  <header class="header">
+    <h1>todos</h1>
+    <input class="new-todo" placeholder="What needs to be done?" autofocus="">
+  </header>
+</section>
+```
+
+There are five HTML elements: `<section>`, `<header>`, `<h1>`
+(_which has a `text` element_) and `<input>`.
+We need a _function_ to represent (_create_) each one of these HTML elements.
+
+Here is a **test** that creates the "real" header `view`:
+(_notice how the "shape" of the "elmish" functions matches the HTML_)
+
+```js
+test('elmish create <header> view using HTML element functions', function (t) {
+  const { append_childnodes, section, header, h1, text, input } = elmish;
+  append_childnodes([
+    section(["class=todoapp"], [ // array of "child" elements
+      header(["class=header"], [
+        h1([], [
+          text("todos")
+        ]), // </h1>
+        input([
+          "id=new",
+          "class=new-todo",
+          "placeholder=What needs to be done?",
+          "autofocus"
+        ], []) // <input> is "self-closing"
+      ]) // </header>
+    ])
+  ], document.getElementById(id));
+
+  const place = document.getElementById('new').getAttribute('placeholder');
+  t.equal(place, "What needs to be done?", "placeholder set in <input> el");
+  t.equal(document.querySelector('h1').textContent, 'todos', '<h1>todos</h1>');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+```
+We can define the required HTML element creation functions
+in only a few lines of code.
+
+Create (_and export_) the necessary functions to make the test pass:
+`header`, `h1`, `input` and `text`.
+
+**Tip**: each one of these HTML creation functions is a "_one-liner_" function body
+that invokes the `create_element` function defined above.
+Except the `text` function, which is still a "_one-liner_",
+but has only one argument and invokes a native method.
+
+If you get stuck trying to make this test pass,
+refer to the completed code:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js )
+
+
+#### Create the "main" `view` functions
+
+Once you have the code to pass the above test(s),
+you will be ready to tackle something a bit bigger.
+Our next `view` is the `main` App:
+
+```html
+<section class="main" style="display: block;">
+  <input id="toggle-all" class="toggle-all" type="checkbox">
+  <label for="toggle-all">Mark all as complete</label>
+  <ul class="todo-list">
+    <li data-id="1531397960010" class="completed">
+      <div class="view">
+        <input class="toggle" type="checkbox" checked="">
+        <label>Learn The Elm Architecture ("TEA")</label>
+        <button class="destroy"></button>
+      </div>
+    </li>
+    <li data-id="1531397981603" class="">
+      <div class="view">
+        <input class="toggle" type="checkbox">
+        <label>Build TEA Todo List App</label>
+        <button class="destroy">
+        </button>
+      </div>
+    </li>
+  </ul>
+</section>
+```
+
+The corresponding _test_ for the above `view` is:
+
+```js
+test.only('elmish create "main" view using HTML DOM functions', function (t) {
+  const { section, input, label, ul, li, div, button, text } = elmish;
+  elmish.append_childnodes([
+    section(["class=main", "style=display: block;"], [
+      input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
+      label(["for=toggle-all"], [ text("Mark all as complete") ]),
+      ul(["class=todo-list"], [
+        li(["data-id=123", "class=completed"], [
+          div(["class=view"], [
+            input(["class=toggle", "type=checkbox", "checked=true"], []),
+            label([], [text('Learn The Elm Architecture ("TEA")')]),
+            button(["class=destroy"])
+          ]) // </div>
+        ]), // </li>
+        li(["data-id=234"], [
+          div(["class=view"], [
+            input(["class=toggle", "type=checkbox"], []),
+            label([], [text("Build TEA Todo List App")]),
+            button(["class=destroy"])
+          ]) // </div>
+        ]) // </li>
+      ]) // </ul>
+    ])
+  ], document.getElementById(id));
+  const done = document.querySelectorAll('.completed')[0].textContent;
+  t.equal(done, 'Learn The Elm Architecture ("TEA")', 'Done: Learn "TEA"');
+  const todo = document.querySelectorAll('.view')[1].textContent;
+  t.equal(todo, 'Build TEA Todo List App', 'Todo: Build TEA Todo List App');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+```
+Add the _test_ to your `test/elmish.test.js` file.
+
+To make this test pass you will need to write (_and `export`_)
+5 new functions: `label`, `ul`, `li`, `div` and `button`.
+
+These five functions are all _almost_ identical so you _should_
+be able to get these done in under 5 minutes. (_don't over-think it_!)
+Just make the tests pass and try to keep your code _maintainable_.
+
+Again, if you get stuck trying to make this test pass,
+refer to the completed code:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
+
+
+#### Create the `<footer>` view functions
+
+The final `view` we need functions for is `<footer>`:
+
+```js
+<footer class="footer" style="display: block;">
+  <span class="todo-count"><strong>1</strong> item left</span>
+  <ul class="filters">
+    <li>
+      <a href="#/" class="selected">All</a>
+    </li>
+    <li>
+      <a href="#/active" class="">Active</a>
+    </li>
+    <li>
+      <a href="#/completed">Completed</a>
+    </li>
+  </ul>
+  <button class="clear-completed" style="display: block;">
+    Clear completed
+  </button>
+</footer>
+```
+This `view` introduces 4 new tags:
+`<footer>`, `<span>`, `<strong>` and `<a>` (_in the order they appear_).
+
+Add the following _test_ for this `view`
+to your `test/elmish.test.js` file: <br />:
+```js
+test.only('elmish create <footer> view using HTML DOM functions', function (t) {
+  const { footer, span, strong, text, ul, li, a, button } = elmish;
+  elmish.append_childnodes([
+    footer(["class=footer", "style=display: block;"], [
+      span(["class=todo-count", "id=count"], [
+        strong("1"),
+        text("item left")
+      ]),
+      ul(["class=filters"], [
+        li([], [
+          a(["href=#/", "class=selected"], [text("All")])
+        ]),
+        li([], [
+          a(["href=#/active"], [text("Active")])
+        ]),
+        li([], [
+          a(["href=#/completed"], [text("Completed")])
+        ])
+      ]), // </ul>
+      button(["class=clear-completed", "style=display:block;"],
+        [text("Clear completed")]
+      )
+    ])
+  ], document.getElementById(id));
+
+  const left = document.getElementById('count').textContent;
+  t.equal(left, "item left", 'there is 1 todo item left');
+  const clear = document.querySelectorAll('button')[1].textContent;
+  t.equal(clear, "Clear completed", '<button> text is "Clear completed"');
+  const selected = document.querySelectorAll('.selected')[1].textContent;
+  t.equal(selected, "All", "All is selected by default");
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+```
+
+Add the 4 functions `footer`, `span`, `strong` and `a`
+to `elmish.js` and `export` them so the test will pass.
+
+if you get stuck trying to make this test pass,
+refer to the completed code:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
+
+
+### Routing
+
+Routing is how we use the browser URL/Address
+to keep track of what should be displayed in the browser window.
+
+#### Acceptance Criteria
+
++ [ ] URL (hash) should change to reflect navigation in the app
++ [ ] History of navigation should be preserved
+  + [ ] Browser "back button" should _work_.
++ [ ] Pasting (_or Book-marking_) a URL should display the desired content
+when the "page" is loaded.
+
+#### Background reading
+
+Routing uses _two_ web browser APIs:
+
++ Location: https://developer.mozilla.org/en-US/docs/Web/API/Location
++ History: https://developer.mozilla.org/en-US/docs/Web/API/History_API
+
+`location` allows us to "**get**" and "**set**" the URL (`href`)
+and `history` lets us set the page history (_before changing the `href`_)
+so that the user can use their browser's "back button"
+(_or other native browser navigation to go "back" through the history_).
+
+> Note: Internet Explorer <11 does not support `history.pushState`:
+https://caniuse.com/#search=pushstate
+
+#### Try it!
+
+Open a web browser window, open the "Developer Tools"
+then type (_or copy-paste_) the following code into the Console:
+
+```js
+setTimeout(function () { // delay for 1 second then run:
+  console.log('window.location.href:', window.location.href);
+  var base = window.location.href.split('#')[0];
+  var active = '#/active';
+  console.log('Setting the window.location.href to:', base + active);
+  window.location.href = base + active;
+  console.log('window.location.href:', window.location.href, 'updated!');
+  console.log('window.history.length:', window.history.length);
+  window.history.pushState(null, 'Active', active);
+  console.log('window.history.length:', window.history.length);
+}, 1000)
+```
+
+You should see something like this:
+![browser-routing-example](https://user-images.githubusercontent.com/194400/43035907-f3a1adac-8cee-11e8-9122-43fb756749a3.png) <br />
+
+The values for `window.history.length` will be different
+(_depending on how many times you run the code_).
+
+But that's "_all_" there is to it!
+Now let's define some "helper functions"
+so that we can use routing in our Todo List App!
+
+
+#### Implementation
+
+##### JSDOC
+
+We are _huge_ proponents of "document driven development"
+this includes writing _both_ `markdown` _and_ code comments.
+
+Consider the following JSDOC for the `route` function:
+
+```js
+/**
+ * route sets the hash portion of the URL in a web browser
+ * and sets the browser history so that the "back button" works.
+ * @param {Object} state - the current state of the application.
+ * @param {String} title - the title of the "page" being navigated to
+ * @param {String} hash - the hash (URL) to be navigated to.
+ * @return {Object} new_state - state with hash updated to the *new* hash.
+ * @example
+ * // returns the state object with updated hash value:
+ * var new_state = elmish.route(state, 'Active', '#/active');
+ */
+```
+
+
+#### `route` _Test_!
+
+Add the following _test_ to your `test/elmish.test.js` file: <br />:
+
+```js
+test.only('elmish.route updates the url hash and sets history', function (t) {
+  const initial_hash = window.location.hash
+  console.log('START window.location.hash:', initial_hash, '(empty string)');
+  const initial_history_length = window.history.length;
+  console.log('START window.history.length:', initial_history_length);
+  // update the URL Hash and Set Browser History
+  const state = { hash: '' };
+  const new_hash = '#/active'
+  const new_state = elmish.route(state, 'Active', new_hash);
+  console.log('UPDATED window.history.length:', window.history.length);
+  console.log('UPDATED state:', new_state);
+  console.log('UPDATED window.location.hash:', window.location.hash);
+  t.notEqual(initial_hash, window.location.hash, "location.hash has changed!");
+  t.equal(new_hash, new_state.hash, "state.hash is now: " + new_state.hash);
+  t.equal(new_hash, window.location.hash, "window.location.hash: "
+    + window.location.hash);
+  t.equal(initial_history_length + 1, window.history.length,
+    "window.history.length increased from: " + initial_history_length + ' to: '
+    + window.history.length);
+  t.end();
+});
+```
+
+#### `route` Implementation (_to make test(s) pass_)
+
+The code to make these tests pass is only 3 or 4 lines.
+(_depending on your implementation ..._)
+Provided the tests pass and you haven't "hard coded" the `return`,
+there is no "wrong answer".
+Try and figure it out for yourself before checking a solution.
+
+**`if`** you get stuck trying to make this test pass,
+refer to the completed code:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
+
+
+> _**Note**: do not "worry" about how to render the "right" content on the "page"
+in response to the URL (hash) changing, we will come to that when
+writing the "business logic" of the Todo List Application,
+because it will "make more sense" in context._
+
+
+### Elm(ish) Store > Save Model (Data) to `localStorage`
+
+The _final_ piece in the "Elm(ish)" puzzle is saving data on the device
+so that the Todo List items (_and history_) is not "_lost_" when
+when the user refreshes the browser or navigates away (_and back_).
+
+The relevant Web Browser API is `localStorage`:
+https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage <br />
+
+
+We are only using _two_ methods of the `localStorage` API:
++ `setItem` - save a `value` (`String`) to the borwser/device's `localStorage`
+with a specific `key`
++ `getItem` - retrieve the `value` `String` from `localStorage` by `key`
+
+Example:
+```js
+localStorage.setItem('key', "World");
+console.log("Hello " + localStorage.getItem('key')); // Hello World
+```
+
+#### Acceptance Criteria
+
++ [ ] `model` is ***retrieved*** from `localStorage`
+if it has been (_previously_) set when `mount` is invoked
++ [ ] Initial `model` is ***saved*** to `localStorage` when `mount` is invoked
++ [ ] ***Updated*** `model` is ***saved*** to `localStorage`
+when `update` is called. (_thus_ `localStorage` _always has the latest version_)
+
+#### Try it!
+
+As always, the best way to familiarise yourself with a DOM API
+is to `try` it in your web browser!
+Open a browser tab, open Dev Tools and type the following code:
+
+```js
+var model = { 'one': 1, 'two': 2, 'three': 3 };
+
+// save the model (data) into storage as a stringified object:
+localStorage.setItem('elmish_store', JSON.stringify(model));
+
+// Retrieve the stringified object from localStorage:
+var retrieved_model = localStorage.getItem('elmish_store');
+
+console.log('Retrieved model: ', JSON.parse(retrieved_model));
+```
+You should see something like this:
+
+![localStorage-example-run-in-browser](https://user-images.githubusercontent.com/194400/43045550-6f06b082-8db2-11e8-80a8-8489f158c2ac.png)
+
+
++ Further reading & discussion:
+https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localStorage <br />
++ Spec: https://www.w3.org/TR/webstorage/#the-localstorage-attribute
+
+#### Implementation
+
+_Given_ that saving and retrieving the Todo List `model` to/from `localStorage`
+uses two "native" DOM API functions, we can _avoid_ writing our own functions
+which are just going to "_wrap_" `setItem` and `getItem`.
+
+We can simply _use_ the `setItem` and `getItem` where we _need_ them!
+The best place to handle the "set" and "get" logic is in the `mount` function.
+You will recall from earlier (_above_) that the Elm(ish) `mount` function
+looks like this:
+
+```js
+/**
+ * `mount` mounts the app in the "root" DOM Element.
+ * @param  {Object} model store of the application's state.
+ * @param  {Function} update how the application state is updated ("controller")
+ * @param  {Function} view function that renders HTML/DOM elements with model.
+ * @param  {String} root_element_id root DOM element in which the app is mounted
+ */
+function mount(model, update, view, root_element_id) {
+  var root = document.getElementById(root_element_id); // root DOM element
+  function signal(action) {                     // signal function takes action
+    return function callback() {                // and returns callback
+      var updatedModel = update(model, action); // update model for the action
+      empty(root);                              // clear root el before rerender
+      view(signal, updatedModel, root);         // subsequent re-rendering
+    };
+  };
+  view(signal, model, root);                    // render initial model (once)
+}
+```
+
+We are going to make **3 adjustments** to this code
+to use `setItem` and `getItem`,
+but _first_ let's write a ***test*** for the desired outcome!
+
+Add the following _test code_ to your `test/elmish.test.js` file: <br />:
+
+```js
+// Testing localStorage requires a "polyfil" because it's unavailable in JSDOM:
+// https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
+global.localStorage = { // globals are bad! but a "necessary evil" here ...
+  getItem: function(key) {
+   const value = this[key];
+   return typeof value === 'undefined' ? null : value;
+ },
+ setItem: function (key, value) {
+   this[key] = value;
+ }
+}
+localStorage.setItem('hello', 'world!');
+console.log('localStorage (polyfil) hello', localStorage.getItem('hello'));
+
+// Test mount's localStorage using view and update from counter-reset example
+// to confirm that our elmish.mount localStorage works and is "generic".
+
+test.only('elmish.mount sets model in localStorage', function (t) {
+  const { view, update } = require('../examples/counter-reset/counter.js');
+
+  const root = document.getElementById(id);
+  elmish.mount(7, update, view, id);
+  // the "model" stored in localStorage should be 7 now:
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+    "elmish_store is 7 (as expected). initial state saved to localStorage.");
+  // test that mount still works as expected (check initial state of counter):
+  const actual = document.getElementById(id).textContent;
+  const actual_stripped = parseInt(actual.replace('+', '')
+    .replace('-Reset', ''), 10);
+  const expected = 7;
+  t.equal(expected, actual_stripped, "Inital state set to 7.");
+  // attempting to "re-mount" with a different model value should not work
+  // because mount should retrieve the value from localStorage
+  elmish.mount(42, update, view, id); // model (42) should be ignored this time!
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+    "elmish_store is 7 (as expected). initial state saved to localStorage.");
+  // increment the counter
+  const btn = root.getElementsByClassName("inc")[0]; // click increment button
+  btn.click(); // Click the Increment button!
+  const state = parseInt(root.getElementsByClassName('count')[0]
+    .textContent, 10);
+  t.equal(state, 8, "State is 8 after increment.");
+  // the "model" stored in localStorage should also be 8 now:
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+    "elmish_store is 8 (as expected).");
+  elmish.empty(root); // reset the DOM to simulate refreshing a browser window
+  elmish.mount(5, update, view, id); // 5 ignored! model read from localStorage.
+  // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+    "elmish_store still 8 from increment (above) saved in localStorage");
+  t.end()
+});
+```
+
+There is quite a lot to "unpack" in this test but let's walk through the steps:
+
+1. Require the `view` and `update` from our counter reset example.
+2. `mount` the counter reset app
+3. ***test*** that the `model` (7) is being saved to `localStorage`
+by `mount` function.
+4. Attempt to "***re-mount***" the counter app with an initial model of `42`
+should not work because `mount` will "read"
+the initial model from `localStorage` if it is defined.
+5. `update` the model using the `inc` (_increment_) action
+6. ***test*** that `localStorage` was updated to reflect the increment (8)
+7. ***`empty`*** the DOM. (_to simulate a page being refreshed_)
+8. ***test*** that `localStorage` still contains our saved data.
+
+Based on this test, try to add the necessary lines to the `mount` function,
+to make the test pass.
+
+**`if`** you get stuck trying to make this test pass,
+refer to the completed code:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
+
+
+### Why _Not_ use HTML5 `<template>`
+
+Templates are an _awesome_ feature in HTML5 which
+allow the creation of reusable markup!
+
+_Sadly_, they are unavailable in Internet Explorer.
+https://caniuse.com/#feat=template <br />
+If you don't _need_ to "cater" for Internet Explorer,
+then checkout:
+https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
+
+
+
 ## Notes
 
 <sup>1</sup><small>The reason for calling the micro-framework `Elm`(_ish_)
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 19c854c7..f27d678c 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -14,27 +14,27 @@ function empty(node) {
   }
 } // this function produces a (DOM) "mutation" but has no other "side effects".
 
-// /**
-//  * `mount` mounts the app in the "root" DOM Element.
-//  * @param  {Object} model store of the application's state.
-//  * @param  {Function} update how the application state is updated ("controller")
-//  * @param  {Function} view function that renders HTML/DOM elements with model.
-//  * @param  {String} root_element_id root DOM element in which the app is mounted
-//  */
-// function mount(model, update, view, root_element_id) {
-//   var root = document.getElementById(root_element_id); // root DOM element
-//   function signal(action) {                     // signal function takes action
-//     return function callback() {                // and returns callback
-//       var updatedModel = update(model, action); // update model for the action
-//       localStorage.setItem('elmish_store', JSON.stringify(updatedModel));
-//       empty(root);                              // clear root el before rerender
-//       view(signal, updatedModel, root);         // subsequent re-rendering
-//     };
-//   };
-//   model = JSON.parse(localStorage.getItem('elmish_store')) || model;
-//   view(signal, model, root);                    // render initial model (once)
-//   localStorage.setItem('elmish_store', JSON.stringify(model)); // save model!
-// }
+/**
+ * `mount` mounts the app in the "root" DOM Element.
+ * @param  {Object} model store of the application's state.
+ * @param  {Function} update how the application state is updated ("controller")
+ * @param  {Function} view function that renders HTML/DOM elements with model.
+ * @param  {String} root_element_id root DOM element in which the app is mounted
+ */
+function mount(model, update, view, root_element_id) {
+  var root = document.getElementById(root_element_id); // root DOM element
+  function signal(action) {                     // signal function takes action
+    return function callback() {                // and returns callback
+      var updatedModel = update(model, action); // update model for the action
+      localStorage.setItem('elmish_store', JSON.stringify(updatedModel));
+      empty(root);                              // clear root el before rerender
+      view(signal, updatedModel, root);         // subsequent re-rendering
+    };
+  };
+  model = JSON.parse(localStorage.getItem('elmish_store')) || model;
+  view(signal, model, root);                    // render initial model (once)
+  localStorage.setItem('elmish_store', JSON.stringify(model)); // save model!
+}
 //
 //
 // /**
@@ -234,7 +234,7 @@ if (typeof module !== 'undefined' && module.exports) {
     // header: header,
     // label: label,
     // li: li,
-    // mount: mount,
+    mount: mount,
     // route: route,
     // section: section,
     // span: span,
diff --git a/test/counter-reset.test.js b/test/counter-reset.test.js
index 4442ddbc..30e434e0 100644
--- a/test/counter-reset.test.js
+++ b/test/counter-reset.test.js
@@ -1,101 +1,101 @@
-// const test = require('tape'); // see: https://github.com/dwyl/learn-tape
-// const fs = require('fs');
-// const path = require('path');
-// const html = fs.readFileSync(path.resolve(__dirname,
-//   '../examples/counter-reset/index.html'));
-// require('jsdom-global')(html);
-// const counter = require(path.resolve(__dirname,
-//   '../examples/counter-reset/counter.js'));
-// const { view, mount, update, div, button, empty, init} = counter;
-// init(document); // pass the JSDOM into counter.js
-// const id = 'test-app';
-//
-// test('Mount app expect state to be Zero', function (t) {
-//   // console.log('mount', mount);
-//   mount(0, update, view, id);
-//   // console.log('document.getElementById(id)', document.getElementById(id), document.getElementById(id).childElementCount);
-//   var actual = document.getElementById(id).textContent;
-//   // console.log('actual:', actual);
-//   var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
-//   var expected = 0;
-//   t.equal(actual_stripped, expected, "Inital state set to 0.");
-//   t.end()
-// });
-//
-// test('Test Update update(0) returns 0 (current state)', function (t) {
-//   var result = update(0);
-//   t.equal(result, 0, "Initial state: 0, No Action, Final state: 0");
-//   t.end();
-// });
-//
-// test('Test Update increment: update(1, "inc") returns 2', function (t) {
-//   var result = update(1, "inc");
-//   t.equal(result, 2, "Initial state: 1, Increment once, Final state: 2");
-//   t.end();
-// });
-//
-// test('Test Update decrement: update(3, "dec") returns 2', function (t) {
-//   var result = update(1, "dec");
-//   t.equal(result, 0, "Initial state: 1, Decrement once, Final state: 0");
-//   t.end();
-// });
-//
-//
-// test('click on "+" button (increment model by 1)', function (t) {
-//   // console.log('document', typeof document, document);
-//   document.body.appendChild(div(id));
-//   mount(7, update, view, id);
-//
-//   // see: http://stackoverflow.com/questions/27557624/simulating-click-jsdom
-//   // var evt = document.createEvent("HTMLEvents");
-//   const evt = document.createEvent("MouseEvents");
-//   evt.initEvent("click", false, true);
-//   var btn = document.getElementById('inc');
-//
-//   btn.addEventListener('click', function() {
-//     // console.log('increment button CLICKed!!');
-//     var state = parseInt( document.getElementById(id)
-//       .getElementsByClassName('count')[0].innerHTML, 10);
-//     // console.log('state:', state, 'typeof state:', typeof state);
-//     t.equal(state, 8,
-//     "End State is 8 after incrementing 7 by 1 (as expected)"); // incremented
-//     t.end();
-//   });
-//
-//   btn.dispatchEvent(evt);
-// });
-//
-// test('Click reset button resets state to 0', function (t) {
-//   mount(7, update, view, id);
-//   var root = document.getElementById(id);
-//   var state7 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
-//   t.equal(state7, 7, "State is 7 after mounting with initial state=7");
-//   var btn = root.getElementsByClassName("reset")[0]; // click reset button
-//   btn.click(); // Click the Reset button!
-//   var state0 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
-//   t.equal(state0, 0, "State is 0 (Zero) after reset."); // state reset to 0!
-//   empty(root); // clean up after tests
-//   // console.log('STATE:', state);
-//   t.end()
-// });
-//
-// // Reset Functionality
-//
-// test('Test reset counter when model/state is 6 returns 0', function(t) {
-//   var result = update(6, "reset");
-//   t.equal(result, 0, "counter reset to 0 (Zero)");
-//   t.end()
-// });
-//
-// test('Click reset button resets state to 0', function(t) {
-//   mount(7, update, view, id);
-//   var root = document.getElementById(id);
-//   var state7 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
-//   t.equal(state7, 7, "initial state is 7 as expected");
-//   var btn = root.getElementsByClassName("reset")[0]; // click reset button
-//   btn.click(); // Click the Reset button!
-//   var state = parseInt(root.getElementsByClassName('count')[0].textContent, 10);
-//   t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
-//   empty(root); // clean up after tests
-//   t.end()
-// });
+const test = require('tape'); // see: https://github.com/dwyl/learn-tape
+const fs = require('fs');
+const path = require('path');
+const html = fs.readFileSync(path.resolve(__dirname,
+  '../examples/counter-reset/index.html'));
+require('jsdom-global')(html);
+const counter = require(path.resolve(__dirname,
+  '../examples/counter-reset/counter.js'));
+const { view, mount, update, div, button, empty, init} = counter;
+init(document); // pass the JSDOM into counter.js
+const id = 'test-app';
+
+test('Mount app expect state to be Zero', function (t) {
+  // console.log('mount', mount);
+  mount(0, update, view, id);
+  // console.log('document.getElementById(id)', document.getElementById(id), document.getElementById(id).childElementCount);
+  var actual = document.getElementById(id).textContent;
+  // console.log('actual:', actual);
+  var actual_stripped = parseInt(actual.replace('+', '').replace('-Reset', ''), 10);
+  var expected = 0;
+  t.equal(actual_stripped, expected, "Inital state set to 0.");
+  t.end()
+});
+
+test('Test Update update(0) returns 0 (current state)', function (t) {
+  var result = update(0);
+  t.equal(result, 0, "Initial state: 0, No Action, Final state: 0");
+  t.end();
+});
+
+test('Test Update increment: update(1, "inc") returns 2', function (t) {
+  var result = update(1, "inc");
+  t.equal(result, 2, "Initial state: 1, Increment once, Final state: 2");
+  t.end();
+});
+
+test('Test Update decrement: update(3, "dec") returns 2', function (t) {
+  var result = update(1, "dec");
+  t.equal(result, 0, "Initial state: 1, Decrement once, Final state: 0");
+  t.end();
+});
+
+
+test('click on "+" button (increment model by 1)', function (t) {
+  // console.log('document', typeof document, document);
+  document.body.appendChild(div(id));
+  mount(7, update, view, id);
+
+  // see: http://stackoverflow.com/questions/27557624/simulating-click-jsdom
+  // var evt = document.createEvent("HTMLEvents");
+  const evt = document.createEvent("MouseEvents");
+  evt.initEvent("click", false, true);
+  var btn = document.getElementById('inc');
+
+  btn.addEventListener('click', function() {
+    // console.log('increment button CLICKed!!');
+    var state = parseInt( document.getElementById(id)
+      .getElementsByClassName('count')[0].innerHTML, 10);
+    // console.log('state:', state, 'typeof state:', typeof state);
+    t.equal(state, 8,
+    "End State is 8 after incrementing 7 by 1 (as expected)"); // incremented
+    t.end();
+  });
+
+  btn.dispatchEvent(evt);
+});
+
+test('Click reset button resets state to 0', function (t) {
+  mount(7, update, view, id);
+  var root = document.getElementById(id);
+  var state7 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
+  t.equal(state7, 7, "State is 7 after mounting with initial state=7");
+  var btn = root.getElementsByClassName("reset")[0]; // click reset button
+  btn.click(); // Click the Reset button!
+  var state0 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
+  t.equal(state0, 0, "State is 0 (Zero) after reset."); // state reset to 0!
+  empty(root); // clean up after tests
+  // console.log('STATE:', state);
+  t.end()
+});
+
+// Reset Functionality
+
+test('Test reset counter when model/state is 6 returns 0', function(t) {
+  var result = update(6, "reset");
+  t.equal(result, 0, "counter reset to 0 (Zero)");
+  t.end()
+});
+
+test('Click reset button resets state to 0', function(t) {
+  mount(7, update, view, id);
+  var root = document.getElementById(id);
+  var state7 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
+  t.equal(state7, 7, "initial state is 7 as expected");
+  var btn = root.getElementsByClassName("reset")[0]; // click reset button
+  btn.click(); // Click the Reset button!
+  var state = parseInt(root.getElementsByClassName('count')[0].textContent, 10);
+  t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
+  empty(root); // clean up after tests
+  t.end()
+});
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 8054e75b..d552b3ed 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -27,28 +27,28 @@ test('elmish.empty("root") removes DOM elements from container', function (t) {
   t.equal(root.childElementCount, 0, "After empty(root) has 0 child elements!")
   t.end();
 });
-//
-// // use view and update from counter-reset example
-// // to confirm that our elmish.mount function is generic!
-// const { view, update } = require('../examples/counter-reset/counter.js');
-//
-// test('elmish.mount app expect state to be Zero', function (t) {
-//   const root = document.getElementById(id);
-//   elmish.mount(7, update, view, id);
-//   const actual = document.getElementById(id).textContent;
-//   const actual_stripped = parseInt(actual.replace('+', '')
-//     .replace('-Reset', ''), 10);
-//   const expected = 7;
-//   t.equal(expected, actual_stripped, "Inital state set to 7.");
-//   // reset to zero:
-//   const btn = root.getElementsByClassName("reset")[0]; // click reset button
-//   btn.click(); // Click the Reset button!
-//   const state = parseInt(root.getElementsByClassName('count')[0]
-//     .textContent, 10);
-//   t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
-//   elmish.empty(root); // clean up after tests
-//   t.end()
-// });
+
+// use view and update from counter-reset example
+// to confirm that our elmish.mount function is generic!
+const { view, update } = require('../examples/counter-reset/counter.js');
+
+test('elmish.mount app expect state to be Zero', function (t) {
+  const root = document.getElementById(id);
+  elmish.mount(7, update, view, id);
+  const actual = document.getElementById(id).textContent;
+  const actual_stripped = parseInt(actual.replace('+', '')
+    .replace('-Reset', ''), 10);
+  const expected = 7;
+  t.equal(expected, actual_stripped, "Inital state set to 7.");
+  // reset to zero:
+  const btn = root.getElementsByClassName("reset")[0]; // click reset button
+  btn.click(); // Click the Reset button!
+  const state = parseInt(root.getElementsByClassName('count')[0]
+    .textContent, 10);
+  t.equal(state, 0, "State is 0 (Zero) after reset."); // state reset to 0!
+  elmish.empty(root); // clean up after tests
+  t.end()
+});
 //
 //
 // test('elmish.add_attributes adds "autofocus" attribute', function (t) {
@@ -352,20 +352,20 @@ test('elmish.empty("root") removes DOM elements from container', function (t) {
 // });
 //
 //
-// // Testing localStorage requires "polyfil" because:
-// // https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
-// global.localStorage = { // globals are bad! but a "necessary evil" here ...
-//   getItem: function(key) {
-//    const value = this[key];
-//    return typeof value === 'undefined' ? null : value;
-//  },
-//  setItem: function (key, value) {
-//    this[key] = value;
-//  }
-// }
-// localStorage.setItem('hello', 'world!');
+// Testing localStorage requires "polyfil" because:
+// https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
+global.localStorage = { // globals are bad! but a "necessary evil" here ...
+  getItem: function(key) {
+   const value = this[key];
+   return typeof value === 'undefined' ? null : value;
+ },
+ setItem: function (key, value) {
+   this[key] = value;
+ }
+}
+localStorage.setItem('hello', 'world!');
 // console.log('localStorage (polyfil) hello', localStorage.getItem('hello'));
-//
+
 // // Test mount's localStorage using view and update from counter-reset example
 // // to confirm that our elmish.mount localStorage works and is "generic".
 //
diff --git a/todo-list.md b/todo-list.md
index 9f635c3c..a0af47e1 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -105,1152 +105,14 @@ and
 
 
 
-
-
-
-
-### Todo List _Basic_ Functionality
-
-A todo list has only 2 _basic_ functions:
-
-1. **Add** a `new` item to the list when the **`[Enter]`** key is pressed
-2. **Check-off** an item as "**completed**" (_done/finished_)
-
-> **Add** item and **Check-off** is _exactly_ the "functionality"
-you would have in a _paper_-based Todo List.
-
-#### TodoMVC "Advanced" Functionality
-
-In _addition_ to these basic functions,
-**TodoMVC** has the ability to:
-+ **Un-check** an item as to make it "**active**" (_still to be done_)
-+ **Double-click/tap** on todo **item description** to **`edit` it**.
-+ **Mark _all_ as complete**
-+ **Click `X`** on item row to remove from list.
-
-#### `<footer>` Menu
-
-below the main interface there is a `<footer>`
-with a **count**, **3 view toggles** and **one action**:
-![image](https://user-images.githubusercontent.com/194400/42633421-5eb20f24-85d8-11e8-94ad-bb653dd93ab0.png)
-+ "{cont} item(s) left": <br />
-  `{store.items.filter(complete==false)}` item`{store.items.length > 1 ? 's' : '' }` left
-+ Show **`All`**
-+ Show **`Active`**
-+ Show **`Completed`**
-+ **_Clear_ `Completed`**
-
-#### Routing / Navigation
-
-Finally, if you click around the `<footer>` toggle menu,
-you will notice that the Web Bowser Address bar
-changes to reflect the chosen view.
-
-![tea-todomvc-routing](https://user-images.githubusercontent.com/194400/42633291-edef3082-85d7-11e8-93c4-5e5f2a5264a1.png)
-
-> Thinking about a task or challenge from
-["first principals"](https://en.wikipedia.org/wiki/First_principle)
-is ~~a great~~ the best way to _understand_ it. <br />
-This is the "physics" approach. see: https://youtu.be/L-s_3b5fRd8?t=22m37s
-
-
-### HTML Elements (Functions)
-
-The _requirements_ for the HTML elements we _need_ for a Todo List
-can be _gathered_ by viewing the source code of the VanillaJS TodoMVC
-in a web browser:
-
-![todomvc-elements-browser-devtools](https://user-images.githubusercontent.com/194400/42635773-daa1ccae-85de-11e8-9f41-51d8b552ebd2.png)
-
-This is a "copy-paste" of the _generated_ code including the Todo items:
-
-```html
-<section class="todoapp">
-  <header class="header">
-    <h1>todos</h1>
-    <input class="new-todo" placeholder="What needs to be done?" autofocus="">
-  </header>
-  <section class="main" style="display: block;">
-    <input id="toggle-all" class="toggle-all" type="checkbox">
-    <label for="toggle-all">Mark all as complete</label>
-    <ul class="todo-list">
-      <li data-id="1531397960010" class="completed">
-        <div class="view">
-          <input class="toggle" type="checkbox" checked="">
-          <label>Learn The Elm Architecture ("TEA")</label>
-          <button class="destroy"></button>
-        </div>
-      </li>
-      <li data-id="1531397981603" class="">
-        <div class="view">
-          <input class="toggle" type="checkbox">
-          <label>Build TEA Todo List App</label>
-          <button class="destroy">
-          </button>
-        </div>
-      </li>
-    </ul>
-  </section>
-  <footer class="footer" style="display: block;">
-    <span class="todo-count"><strong>1</strong> item left</span>
-    <ul class="filters">
-      <li>
-        <a href="#/" class="selected">All</a>
-      </li>
-      <li>
-        <a href="#/active" class="">Active</a>
-      </li>
-      <li>
-        <a href="#/completed">Completed</a>
-      </li>
-    </ul>
-    <button class="clear-completed" style="display: block;">Clear completed</button>
-  </footer>
-</section>
-```
-
-Let's split each one of these elements into it's own `function`
-(_with any necessary "helpers"_) in the order they appear.
-
-When building a House we don't think "build house" as our _first_ action. <br />
-_Instead_ we think: what are the "foundations" that need to be in place
-***before*** we lay the _first_ "brick"?
-
-In our Todo List App we need a few "Helper Functions"
-before we start building the App.
-
-### HTML / DOM Creation Generic Helper Functions
-
-All "grouping" or "container" HTML elements
-e.g: `<div>`, `<section>` or `<span>`
-will be called with ***two arguments***:
-e.g: `var sec = section(attributes, childnodes)`
-+ `attributes` - a list (Array) of HTML attributes/properties
-  e.g: `id` or `class`.
-+ `childnodes` - a list (Array) of child HTML elements
-(_nested within the_ `<section>` _element_)
-
-Each of these function arguments will be "_applied_" to the HTML element.
-We therefore need a pair of "helper" functions (_one for each argument_).
-
-
-### `add_attributes`
-
-The `JSDOC` comment for our `add_attributes` function is:
-```js
-/**
-* add_attributes applies the desired attributes to the desired node.
-* Note: this function is "impure" because it "mutates" the node.
-* however it is idempotent; the "side effect" is only applied once.
-* @param {Array.<String>} attrlist list of attributes to be applied to the node
-* @param {Object} node DOM node upon which attribute(s) should be applied
-* @example
-* // returns node with attributes applied
-* div = add_attributes(["class=item", "id=mydiv", "active=true"], div);
-*/
-```
-This should give you a _good idea_ of what code needs to be written.
-
-But let's write the _test_ first!
-Add the following test to the `test/elmish.test.js` file: <br />
-
-```js
-test('elmish.add_attributes applies class HTML attribute to a node', function (t) {
-  const root = document.getElementById(id);
-  let div = document.createElement('div');
-  div.id = 'divid';
-  div = elmish.add_attributes(["class=apptastic"], div);
-  root.appendChild(div);
-  // test the div has the desired class:
-  const nodes = document.getElementsByClassName('apptastic');
-  t.equal(nodes.length, 1, "<div> has 'apptastic' class applied");
-  t.end();
-});
-```
-
-Given the code in the test above,
-take a moment to think of how _you_ would write,
-the `add_attributes` function to apply a CSS `class` to an element. <br />
-Note: we have _seen_ the code _before_ in the `counter` example.
-The difference is this time we want it to be "generic";
-we want to apply a CSS `class` to _any_ DOM node.
-
-If you can, make the test _pass_
-by writing the `add_attributes` function.
-(_don't forget to_ `export` _the function at the end of the file_).
-
-If you get "stuck", checkout:
-https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
-
-
-> **Note**: The `add_attributes` function is "impure" as it "mutates"
-the target DOM `node`, this is more of a "fact of life" in JavaScript,
-and given that the application of attributes
-to DOM node(s) is idempotent we aren't "concerned" with "side effects";
-the attribute will only be applied _once_ to the node
-regardless of how many times the `add_attributes` function is called.
-see: https://en.wikipedia.org/wiki/Idempotence
-
-
-For reference, the Elm HTML Attributes function on Elm package is:
-http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes
-
-#### Input `placeholder` Attribute
-
-The `<input>` form element (_where we create new Todo List items_)
-has a helpful `placeholder` _prompting_ us with a question:
-"_What needs to be done?_"
-
-Add the following test to the `test/elmish.test.js` file: <br />
-
-```js
-test('elmish.add_attributes set placeholder on <input> element', function (t) {
-  const root = document.getElementById(id);
-  let input = document.createElement('input');
-  input.id = 'new-todo';
-  input = elmish.add_attributes(["placeholder=What needs to be done?"], input);
-  root.appendChild(input);
-  const placeholder = document.getElementById('new-todo')
-    .getAttribute("placeholder");
-  t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
-  t.end();
-});
-```
-
-Write the necessary code to make this test _pass_ in `elmish.js`.
-
-
-#### Input `autofocus`
-
-In order to "_guide_" the person using our Todo List app
-to create their _first_ Todo List _item_,
-**we want** the `<input>` field to be automatically "active"
-**so that** they can just start typing as soon as the app loads.
-
-This is achieved using the `autofocus` attribute.
-
-Add the following test to the `test/elmish.test.js` file: <br />
-
-```js
-test.only('elmish.add_attributes add "autofocus" attribute', function (t) {
-  document.getElementById(id).appendChild(
-    elmish.add_attributes(["class=new-todo", "autofocus", "id=new"],
-      document.createElement('input')
-    )
-  );
-  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
-  t.equal(document.getElementById('new'), document.activeElement,
-    '<input autofocus> is "activeElement"');
-  elmish.empty(document);
-  t.end();
-});
-```
-
-Write the necessary code to make this test _pass_ in `elmish.js`.
-
-Relevant reading:
-+ `<input>` attributes:
-https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
-+ https://caniuse.com/#feat=autofocus (_**unavailable** on **iOS Safari**!_)
-
-> **Note**: while _all_ our _other_ HTML attributes
-follow the `key="value"` syntax,
-according to the W3C _specification_,
-simply adding the attribute _key_ in the element is "valid"
-e.g: `<input placeholder="What needs to be done?" autofocus>`
-see: https://stackoverflow.com/questions/4445765/html5-is-it-autofocus-autofocus-or-autofocus
-
-
-#### add `data-id` attribute to `<li>`
-
-`data-*` attributes allow us to store extra information on standard,
-semantic HTML elements without affecting regular attributes.
-For example in the case of a Todo List item,
-we want to store a reference to the "item id" in the DOM
-for that item, so that we know which item to check-off when
-the checkbox is clicked/tapped. _However_ we don't want to use the
-"traditional" `id` attribute, we can use `data-id`
-to keep a clear separation between the data and presentation.
-
-See: "Using data attributes"
-https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
-
-In the TodoMVC HTML code
-there are two `<li>` (_list elements_)
-which have the `data-id` attribute (_see above_).
-
-Add the following test to the `test/elmish.test.js` file: <br />
-
-```js
-test('elmish.add_attributes set data-id on <li> element', function (t) {
-  const root = document.getElementById(id);
-  let li = document.createElement('li');
-  li.id = 'task1';
-  li = elmish.add_attributes(["data-id=123"], li);
-  root.appendChild(li);
-  const data_id = document.getElementById('task1').getAttribute("data-id");
-  t.equal(data_id, '123', "data-id successfully added to <li> element");
-  t.end();
-});
-```
-Write the "case" in to make this test _pass_ in `elmish.js`.
-
-Tip: use `setAttribute()` method:
-https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute
-
-#### label `for` attribute
-
-Apply the `for` attribute to a `<label>`
-e.g: `<label for="toggle-all">`
-
-HTML `<label>` attributes `for`:
-https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label#Attributes
-
-
-Add the following test to the `test/elmish.test.js` file: <br />
-
-```js
-test.only('elmish.add_attributes set "for" attribute <label> element', function (t) {
-  const root = document.getElementById(id);
-  let li = document.createElement('li');
-  li.id = 'toggle';
-  li = elmish.add_attributes(["for=toggle-all"], li);
-  root.appendChild(li);
-  const label_for = document.getElementById('toggle').getAttribute("for");
-  t.equal(label_for, "toggle-all", '<label for="toggle-all">');
-  t.end();
-});
-```
-
-Write the "case" in to make this test _pass_ in `elmish.js`.
-
-
-#### `<input>` attribute `type`
-
-In order to use a Checkbox in our Todo List UI,
-we need to set the `type=checkbox` on the `<input>` element.
-
-Add the following test to the `test/elmish.test.js` file: <br />
-
-```js
-test('elmish.add_attributes type="checkbox" on <input> element', function (t) {
-  const root = document.getElementById(id);
-  let input = document.createElement('input');
-  input = elmish.add_attributes(["type=checkbox", "id=toggle-all"], input);
-  root.appendChild(input);
-  const type_atrr = document.getElementById('toggle-all').getAttribute("type");
-  t.equal(type_atrr, "checkbox", '<input id="toggle-all" type="checkbox">');
-  t.end();
-});
-```
-
-Write the "case" in to make this test _pass_ in `elmish.js`.
-
-`<input>` attribute `type`:
-https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
-
-
-#### Add `style` attribute to HTML element?
-
-In TodoMVC there are _three_ instances of in-line CSS styles.
-they are _all_ `style="display: block;"`.
-It's _unclear_ why setting _inline_ styles is _necessary_;
-we _prefer_ to be _consistent_ and
-***either*** use CSS `classes`
-with an _external_ stylesheet (_which TodoMVC already does!_)
-***or*** go _full_ "inline styles"
-e.g: http://package.elm-lang.org/packages/mdgriffith/style-elements/latest
-
-For now, let's add the `style` attribute
-to our `add_attributes` function for "completeness".
-
-see:
-https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
-
-Add the following test to the `test/elmish.test.js` file: <br />
-
-```js
-test.only('elmish.add_attributes apply style="display: block;"', function (t) {
-  const root = document.getElementById(id);
-  elmish.empty(root);
-  let sec = document.createElement('section');
-  root.appendChild(
-    elmish.add_attributes(["id=main", "style=display: block;"], sec)
-  );
-  const style = window.getComputedStyle(document.getElementById('main'));
-  t.equal(style._values.display, 'block', 'style="display: block;" applied!')
-  t.end();
-});
-```
-
-Write the "case" in to make this test _pass_ in `elmish.js`.
-
-If you get "stuck", checkout:
-https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
-
-
-#### `checked=true` attribute for "complete"/"done" items
-
-Todo List items that have been marked as "done" will have the `checked=true`
-attribute applied to them.
-
-Add the following test to the `test/elmish.test.js` file: <br />
-
-```js
-test('elmish.add_attributes checked=true on "done" item', function (t) {
-  const root = document.getElementById(id);
-  elmish.empty(root);
-  let input = document.createElement('input');
-  input = elmish.add_attributes(["type=checkbox", "id=item1", "checked=true"],
-    input);
-  root.appendChild(input);
-  const checked = document.getElementById('item1').checked;
-  t.equal(checked, true, '<input type="checkbox" checked=true>');
-  let input2
-  t.end();
-});
-```
-
-Write the code to make the test pass!
-
-> _**Implementation note**: while the VanillaJS TodoMVC view has
-`checked=""` (just an attribute with **no value**),
-we find this "unfriendly" to beginners
-so instead we are using `checked=true` instead because it's clearer.
-See: https://stackoverflow.com/a/10650302/1148249
-"Use true as it is marginally more efficient
-and is **more intention revealing** to maintainers._"
-
-For more detail on the `<input type="checkbox">`
-see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
-
-#### Set `href` on `<a>` (anchor) element
-
-The "filters" in the `<footer>` of TodoMVC contain 3 links ("anchors") `<a>`
-each of which have an `href` attribute indicating where
-clicking/tapping on the link (filter) should "route" to.
-
-> We will return to routing later (_below_),
-for now we simply need to set the `href` attribute.
-
-Add the following test to the `test/elmish.test.js` file: <br />
-
-```js
-test('elmish.add_attributes <a href="#/active">Active</a>', function (t) {
-  const root = document.getElementById(id);
-  elmish.empty(root);
-  root.appendChild(
-    elmish.add_attributes(["href=#/active", "class=selected", "id=active"],
-      document.createElement('a')
-    )
-  );
-  // note: "about:blank" is the JSDOM default "window.location.href"
-  console.log('JSDOM window.location.href:', window.location.href);
-  // so when an href is set *relative* to this it becomes "about:blank#/my-link"
-  // so we *remove* it before the assertion below, but it works fine in browser!
-  const href = document.getElementById('active').href.replace('about:blank', '')
-  t.equal(href, "#/active", 'href="#/active" applied to "active" link');
-  t.end();
-});
-```
-
-Write the code to make the test pass!
-
-
-Useful knowledge:
-+ What: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Attributes
-+ Why: https://stackoverflow.com/questions/4855168/what-is-href-and-why-is-it-used
-+ How:  https://stackoverflow.com/questions/4689344/how-can-i-add-href-attribute-to-a-link-dynamically-using-javascript
-
-
-### `append_childnodes`
-
-The `append_childnodes` _functionality_ is a "_one-liner_": <br />
-```js
-childnodes.forEach(function (el) { parent.appendChild(el) });
-```
-It's easy to think: "_why bother to create a_ `function`...?" <br />
-The _reasons_ to create _small_ functions are: <br />
-**a)** Keep the _functionality_ "DRY" https://en.wikipedia.org/wiki/Don%27t_repeat_yourself
-which means we can _easily_ track down all instances of function invocation.
-<br />
-**b)** If we ever need to modify the function, e.g: to performance optimise it, there is a _single_ definition.
-<br />
-**c)** It makes unit-testing the functionality easy;
-that's _great_ news for reliability!
-
-With that in mind, let's write a _test_ for the `childnodes` function!
-Add the following code to the `test/elmish.test.js` file: <br />
-
-```js
-test.only('elmish.append_childnodes appends child DOM nodes to parent', function (t) {
-  const root = document.getElementById(id);
-  elmish.empty(root); // clear the test DOM before!
-  let div = document.createElement('div');
-  let p = document.createElement('p');
-  let section = document.createElement('section');
-  elmish.append_childnodes([div, p, section], root);
-  t.equal(root.childElementCount, 3, "Root element " + id + " has 3 child els");
-  t.end();
-});
-```
-
-Now, based on the following `JSDOC` comment:
-```js
-/**
- * `append_childnodes` appends an array of HTML elements to a parent DOM node.
- * @param  {Array.<Object>} childnodes array of child DOM nodes.
- * @param  {Object} parent the "parent" DOM node where children will be added.
- * @return {Object} returns parent DOM node with appended children
- * @example
- * // returns the parent node with the "children" appended
- * var parent = elmish.append_childnodes([div, p, section], parent);
- */
-```
-
-_Implement_ this function to make the test pass.
-It _should_ be the _easiest_ one so far.
-(_see above for "one-liner" clue_...). <br />
-
-Don't forget to remove the `.only` from the test, once you finish.
-
-If you get "stuck", checkout:
-https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
-
-
-### `<section>` HTML Element
-
-The _first_ HTML element we encounter in the TodoMVC app is `<section>`. <br />
-`<section>` represents a standalone section — which doesn't have
-a more specific semantic element to represent it —
-it's an alternative way to group elements to a `<div>`.
-
-> info: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section <br />
-> difference:
-https://stackoverflow.com/questions/6939864/what-is-the-difference-between-section-and-div
-
-We want to make our `view` function "***declarative***",
-this means our `view` should contain **no** "**control flow**"
-(i.e. `if` statements).
-The function invocations should reflect the final DOM quite closely
-see: https://en.wikipedia.org/wiki/Declarative_programming
-
-Example `view`:
-```js
-elmish.append_childnodes([
-  section(["class=todoapp"], [ // array of "child" elements
-    header(["class=header"], [
-      h1([], [
-        text("todos")
-      ]), // </h1>
-      input([
-        "class=new-todo",
-        "placeholder=What needs to be done?",
-        "autofocus"
-      ]) // <input> is "self-closing"
-    ]) // </header>
-  ])
-], document.getElementById('my-app'));
-```
-
-Add the following _test_ to your `test/elmish.test.js` file: <br />
-
-```js
-test('elmish.section creates a <section> HTML element', function (t) {
-  const p = document.createElement('p');
-  p.id = 'para';
-  const text = 'Hello World!'
-  const txt = document.createTextNode(text);
-  p.appendChild(txt);
-  // create the `<section>` HTML element using our section function
-  const section = elmish.section(["class=new-todo"], [p])
-  document.getElementById(id).appendChild(section); // add section with <p>
-  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
-  t.equal(document.getElementById('para').textContent, text,
-    '<section> <p>' + text + '</p></section> works as expected!');
-  elmish.empty(document.getElementById(id));
-  t.end();
-});
-```
-
-Based on the following `JSDOC` comment:
-```js
-/**
- * section creates a <section> HTML element with attributes and childnodes
- * @param {Array.<String>} attrlist list of attributes to be applied to the node
- * @param {Array.<Object>} childnodes array of child DOM nodes.
- * @return {Object} returns the <section> DOM node with appended children
- * @example
- * // returns <section> DOM element with attributes applied & children appended
- * var section = elmish.section(["class=todoapp"], [h1, input]);
- */
-```
-Attempt to create the `section` function
-using the `add_attributes` and `append_childnodes` "helper" functions.
-
-If you get "stuck", checkout:
-https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
-> _**Note**: in our "solution" we created a "helper" function
-called `create_element` to "DRY" the HTML element creation code;
-this is a *recommended** "best practice"._
-
-The `JSDOC` comment for our `create_element` function is:
-```js
-/**
- * create_element is a "helper" function to "DRY" HTML element creation code
- * creat *any* element with attributes and childnodes.
- * @param {String} type of element to be created e.g: 'div', 'section'
- * @param {Array.<String>} attrlist list of attributes to be applied to the node
- * @param {Array.<Object>} childnodes array of child DOM nodes.
- * @return {Object} returns the <section> DOM node with appended children
- * @example
- * // returns the parent node with the "children" appended
- * var div = elmish.create_element('div', ["class=todoapp"], [h1, input]);
- */
-```
-`try` to write it for yourself before looking at the "answer".
-
-
-For reference, the section function in Elm:
-http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html
-<br />
-Demo: https://ellie-app.com/LTtNVQjfWVa1
-![ellie-elm-section](https://user-images.githubusercontent.com/194400/42708957-bbcc1020-86d6-11e8-97bf-f2f3a1c6fdea.png)
-
-
-### Create a `view` using HTML Element Functions!
-
-Once we know how to create _one_ HTML element,
-it's _easy_ to create _all_ of them!
-Consider the following HTML for the `<header>` section of the TodoMVC App:
-
-```html
-<section class="todoapp">
-  <header class="header">
-    <h1>todos</h1>
-    <input class="new-todo" placeholder="What needs to be done?" autofocus="">
-  </header>
-</section>
-```
-
-There are five HTML elements: `<section>`, `<header>`, `<h1>`
-(_which has a `text` element_) and `<input>`.
-We need a _function_ to represent (_create_) each one of these HTML elements.
-
-Here is a **test** that creates the "real" header `view`:
-(_notice how the "shape" of the "elmish" functions matches the HTML_)
-
-```js
-test('elmish create <header> view using HTML element functions', function (t) {
-  const { append_childnodes, section, header, h1, text, input } = elmish;
-  append_childnodes([
-    section(["class=todoapp"], [ // array of "child" elements
-      header(["class=header"], [
-        h1([], [
-          text("todos")
-        ]), // </h1>
-        input([
-          "id=new",
-          "class=new-todo",
-          "placeholder=What needs to be done?",
-          "autofocus"
-        ], []) // <input> is "self-closing"
-      ]) // </header>
-    ])
-  ], document.getElementById(id));
-
-  const place = document.getElementById('new').getAttribute('placeholder');
-  t.equal(place, "What needs to be done?", "placeholder set in <input> el");
-  t.equal(document.querySelector('h1').textContent, 'todos', '<h1>todos</h1>');
-  elmish.empty(document.getElementById(id));
-  t.end();
-});
-```
-We can define the required HTML element creation functions
-in only a few lines of code.
-
-Create (_and export_) the necessary functions to make the test pass:
-`header`, `h1`, `input` and `text`.
-
-**Tip**: each one of these HTML creation functions is a "_one-liner_" function body
-that invokes the `create_element` function defined above.
-Except the `text` function, which is still a "_one-liner_",
-but has only one argument and invokes a native method.
-
-If you get stuck trying to make this test pass,
-refer to the completed code:
-[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js )
-
-
-#### Create the "main" `view` functions
-
-Once you have the code to pass the above test(s),
-you will be ready to tackle something a bit bigger.
-Our next `view` is the `main` App:
-
-```html
-<section class="main" style="display: block;">
-  <input id="toggle-all" class="toggle-all" type="checkbox">
-  <label for="toggle-all">Mark all as complete</label>
-  <ul class="todo-list">
-    <li data-id="1531397960010" class="completed">
-      <div class="view">
-        <input class="toggle" type="checkbox" checked="">
-        <label>Learn The Elm Architecture ("TEA")</label>
-        <button class="destroy"></button>
-      </div>
-    </li>
-    <li data-id="1531397981603" class="">
-      <div class="view">
-        <input class="toggle" type="checkbox">
-        <label>Build TEA Todo List App</label>
-        <button class="destroy">
-        </button>
-      </div>
-    </li>
-  </ul>
-</section>
-```
-
-The corresponding _test_ for the above `view` is:
-
-```js
-test.only('elmish create "main" view using HTML DOM functions', function (t) {
-  const { section, input, label, ul, li, div, button, text } = elmish;
-  elmish.append_childnodes([
-    section(["class=main", "style=display: block;"], [
-      input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
-      label(["for=toggle-all"], [ text("Mark all as complete") ]),
-      ul(["class=todo-list"], [
-        li(["data-id=123", "class=completed"], [
-          div(["class=view"], [
-            input(["class=toggle", "type=checkbox", "checked=true"], []),
-            label([], [text('Learn The Elm Architecture ("TEA")')]),
-            button(["class=destroy"])
-          ]) // </div>
-        ]), // </li>
-        li(["data-id=234"], [
-          div(["class=view"], [
-            input(["class=toggle", "type=checkbox"], []),
-            label([], [text("Build TEA Todo List App")]),
-            button(["class=destroy"])
-          ]) // </div>
-        ]) // </li>
-      ]) // </ul>
-    ])
-  ], document.getElementById(id));
-  const done = document.querySelectorAll('.completed')[0].textContent;
-  t.equal(done, 'Learn The Elm Architecture ("TEA")', 'Done: Learn "TEA"');
-  const todo = document.querySelectorAll('.view')[1].textContent;
-  t.equal(todo, 'Build TEA Todo List App', 'Todo: Build TEA Todo List App');
-  elmish.empty(document.getElementById(id));
-  t.end();
-});
-```
-Add the _test_ to your `test/elmish.test.js` file.
-
-To make this test pass you will need to write (_and `export`_)
-5 new functions: `label`, `ul`, `li`, `div` and `button`.
-
-These five functions are all _almost_ identical so you _should_
-be able to get these done in under 5 minutes. (_don't over-think it_!)
-Just make the tests pass and try to keep your code _maintainable_.
-
-Again, if you get stuck trying to make this test pass,
-refer to the completed code:
-[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
-
-
-#### Create the `<footer>` view functions
-
-The final `view` we need functions for is `<footer>`:
-
-```js
-<footer class="footer" style="display: block;">
-  <span class="todo-count"><strong>1</strong> item left</span>
-  <ul class="filters">
-    <li>
-      <a href="#/" class="selected">All</a>
-    </li>
-    <li>
-      <a href="#/active" class="">Active</a>
-    </li>
-    <li>
-      <a href="#/completed">Completed</a>
-    </li>
-  </ul>
-  <button class="clear-completed" style="display: block;">
-    Clear completed
-  </button>
-</footer>
-```
-This `view` introduces 4 new tags:
-`<footer>`, `<span>`, `<strong>` and `<a>` (_in the order they appear_).
-
-Add the following _test_ for this `view`
-to your `test/elmish.test.js` file: <br />:
-```js
-test.only('elmish create <footer> view using HTML DOM functions', function (t) {
-  const { footer, span, strong, text, ul, li, a, button } = elmish;
-  elmish.append_childnodes([
-    footer(["class=footer", "style=display: block;"], [
-      span(["class=todo-count", "id=count"], [
-        strong("1"),
-        text("item left")
-      ]),
-      ul(["class=filters"], [
-        li([], [
-          a(["href=#/", "class=selected"], [text("All")])
-        ]),
-        li([], [
-          a(["href=#/active"], [text("Active")])
-        ]),
-        li([], [
-          a(["href=#/completed"], [text("Completed")])
-        ])
-      ]), // </ul>
-      button(["class=clear-completed", "style=display:block;"],
-        [text("Clear completed")]
-      )
-    ])
-  ], document.getElementById(id));
-
-  const left = document.getElementById('count').textContent;
-  t.equal(left, "item left", 'there is 1 todo item left');
-  const clear = document.querySelectorAll('button')[1].textContent;
-  t.equal(clear, "Clear completed", '<button> text is "Clear completed"');
-  const selected = document.querySelectorAll('.selected')[1].textContent;
-  t.equal(selected, "All", "All is selected by default");
-  elmish.empty(document.getElementById(id));
-  t.end();
-});
-```
-
-Add the 4 functions `footer`, `span`, `strong` and `a`
-to `elmish.js` and `export` them so the test will pass.
-
-if you get stuck trying to make this test pass,
-refer to the completed code:
-[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
-
-
-### Routing
-
-Routing is how we use the browser URL/Address
-to keep track of what should be displayed in the browser window.
-
-#### Acceptance Criteria
-
-+ [ ] URL (hash) should change to reflect navigation in the app
-+ [ ] History of navigation should be preserved
-  + [ ] Browser "back button" should _work_.
-+ [ ] Pasting (_or Book-marking_) a URL should display the desired content
-when the "page" is loaded.
-
-#### Background reading
-
-Routing uses _two_ web browser APIs:
-
-+ Location: https://developer.mozilla.org/en-US/docs/Web/API/Location
-+ History: https://developer.mozilla.org/en-US/docs/Web/API/History_API
-
-`location` allows us to "**get**" and "**set**" the URL (`href`)
-and `history` lets us set the page history (_before changing the `href`_)
-so that the user can use their browser's "back button"
-(_or other native browser navigation to go "back" through the history_).
-
-> Note: Internet Explorer <11 does not support `history.pushState`:
-https://caniuse.com/#search=pushstate
-
-#### Try it!
-
-Open a web browser window, open the "Developer Tools"
-then type (_or copy-paste_) the following code into the Console:
-
-```js
-setTimeout(function () { // delay for 1 second then run:
-  console.log('window.location.href:', window.location.href);
-  var base = window.location.href.split('#')[0];
-  var active = '#/active';
-  console.log('Setting the window.location.href to:', base + active);
-  window.location.href = base + active;
-  console.log('window.location.href:', window.location.href, 'updated!');
-  console.log('window.history.length:', window.history.length);
-  window.history.pushState(null, 'Active', active);
-  console.log('window.history.length:', window.history.length);
-}, 1000)
-```
-
-You should see something like this:
-![browser-routing-example](https://user-images.githubusercontent.com/194400/43035907-f3a1adac-8cee-11e8-9122-43fb756749a3.png) <br />
-
-The values for `window.history.length` will be different
-(_depending on how many times you run the code_).
-
-But that's "_all_" there is to it!
-Now let's define some "helper functions"
-so that we can use routing in our Todo List App!
-
-
-#### Implementation
-
-##### JSDOC
-
-We are _huge_ proponents of "document driven development"
-this includes writing _both_ `markdown` _and_ code comments.
-
-Consider the following JSDOC for the `route` function:
-
-```js
-/**
- * route sets the hash portion of the URL in a web browser
- * and sets the browser history so that the "back button" works.
- * @param {Object} state - the current state of the application.
- * @param {String} title - the title of the "page" being navigated to
- * @param {String} hash - the hash (URL) to be navigated to.
- * @return {Object} new_state - state with hash updated to the *new* hash.
- * @example
- * // returns the state object with updated hash value:
- * var new_state = elmish.route(state, 'Active', '#/active');
- */
-```
-
-
-##### Test!
-
-Add the following _test_ to your `test/elmish.test.js` file: <br />:
-
-```js
-test.only('elmish.route updates the url hash and sets history', function (t) {
-  const initial_hash = window.location.hash
-  console.log('START window.location.hash:', initial_hash, '(empty string)');
-  const initial_history_length = window.history.length;
-  console.log('START window.history.length:', initial_history_length);
-  // update the URL Hash and Set Browser History
-  const state = { hash: '' };
-  const new_hash = '#/active'
-  const new_state = elmish.route(state, 'Active', new_hash);
-  console.log('UPDATED window.history.length:', window.history.length);
-  console.log('UPDATED state:', new_state);
-  console.log('UPDATED window.location.hash:', window.location.hash);
-  t.notEqual(initial_hash, window.location.hash, "location.hash has changed!");
-  t.equal(new_hash, new_state.hash, "state.hash is now: " + new_state.hash);
-  t.equal(new_hash, window.location.hash, "window.location.hash: "
-    + window.location.hash);
-  t.equal(initial_history_length + 1, window.history.length,
-    "window.history.length increased from: " + initial_history_length + ' to: '
-    + window.history.length);
-  t.end();
-});
-```
-
-##### Code (_to make test(s) pass_)
-
-The code to make these tests pass is only 3 or 4 lines.
-(_depending on your implementation ..._)
-Provided the tests pass and you haven't "hard coded" the `return`,
-there is no "wrong answer".
-Try and figure it out for yourself before checking a solution.
-
-**`if`** you get stuck trying to make this test pass,
-refer to the completed code:
-[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
-
-
-> _**Note**: do not "worry" about how to render the "right" content on the "page"
-in response to the URL (hash) changing, we will come to that when
-writing the "business logic" of the Todo List Application,
-because it will "make more sense" in context._
-
-
-### Elm(ish) Store > Save Model (Data) to `localStorage`
-
-The _final_ piece in the "Elm(ish)" puzzle is saving data on the device
-so that the Todo List items (_and history_) is not "_lost_" when
-when the user refreshes the browser or navigates away (_and back_).
-
-The relevant Web Browser API is `localStorage`:
-https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage <br />
-
-
-We are only using _two_ methods of the `localStorage` API:
-+ `setItem` - save a `value` (`String`) to the borwser/device's `localStorage`
-with a specific `key`
-+ `getItem` - retrieve the `value` `String` from `localStorage` by `key`
-
-Example:
-```js
-localStorage.setItem('key', "World");
-console.log("Hello " + localStorage.getItem('key')); // Hello World
-```
-
-#### Acceptance Criteria
-
-+ [ ] `model` is ***retrieved*** from `localStorage`
-if it has been (_previously_) set when `mount` is invoked
-+ [ ] Initial `model` is ***saved*** to `localStorage` when `mount` is invoked
-+ [ ] ***Updated*** `model` is ***saved*** to `localStorage`
-when `update` is called. (_thus_ `localStorage` _always has the latest version_)
-
-#### Try it!
-
-As always, the best way to familiarise yourself with a DOM API
-is to `try` it in your web browser!
-Open a browser tab, open Dev Tools and type the following code:
-
-```js
-var model = { 'one': 1, 'two': 2, 'three': 3 };
-
-// save the model (data) into storage as a stringified object:
-localStorage.setItem('elmish_store', JSON.stringify(model));
-
-// Retrieve the stringified object from localStorage:
-var retrieved_model = localStorage.getItem('elmish_store');
-
-console.log('Retrieved model: ', JSON.parse(retrieved_model));
-```
-You should see something like this:
-
-![localStorage-example-run-in-browser](https://user-images.githubusercontent.com/194400/43045550-6f06b082-8db2-11e8-80a8-8489f158c2ac.png)
-
-
-+ Further reading & discussion:
-https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localStorage <br />
-+ Spec: https://www.w3.org/TR/webstorage/#the-localstorage-attribute
-
-#### Implementation
-
-_Given_ that saving and retrieving the Todo List `model` to/from `localStorage`
-uses two "native" DOM API functions, we can _avoid_ writing our own functions
-which are just going to "_wrap_" `setItem` and `getItem`.
-
-We can simply _use_ the `setItem` and `getItem` where we _need_ them!
-The best place to handle the "set" and "get" logic is in the `mount` function.
-You will recall from earlier (_above_) that the Elm(ish) `mount` function
-looks like this:
-
-```js
-/**
- * `mount` mounts the app in the "root" DOM Element.
- * @param  {Object} model store of the application's state.
- * @param  {Function} update how the application state is updated ("controller")
- * @param  {Function} view function that renders HTML/DOM elements with model.
- * @param  {String} root_element_id root DOM element in which the app is mounted
- */
-function mount(model, update, view, root_element_id) {
-  var root = document.getElementById(root_element_id); // root DOM element
-  function signal(action) {                     // signal function takes action
-    return function callback() {                // and returns callback
-      var updatedModel = update(model, action); // update model for the action
-      empty(root);                              // clear root el before rerender
-      view(signal, updatedModel, root);         // subsequent re-rendering
-    };
-  };
-  view(signal, model, root);                    // render initial model (once)
-}
-```
-
-We are going to make **3 adjustments** to this code
-to use `setItem` and `getItem`,
-but _first_ let's write a ***test*** for the desired outcome!
-
-Add the following _test code_ to your `test/elmish.test.js` file: <br />:
-
-```js
-// Testing localStorage requires a "polyfil" because it's unavailable in JSDOM:
-// https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
-global.localStorage = { // globals are bad! but a "necessary evil" here ...
-  getItem: function(key) {
-   const value = this[key];
-   return typeof value === 'undefined' ? null : value;
- },
- setItem: function (key, value) {
-   this[key] = value;
- }
-}
-localStorage.setItem('hello', 'world!');
-console.log('localStorage (polyfil) hello', localStorage.getItem('hello'));
-
-// Test mount's localStorage using view and update from counter-reset example
-// to confirm that our elmish.mount localStorage works and is "generic".
-
-test.only('elmish.mount sets model in localStorage', function (t) {
-  const { view, update } = require('../examples/counter-reset/counter.js');
-
-  const root = document.getElementById(id);
-  elmish.mount(7, update, view, id);
-  // the "model" stored in localStorage should be 7 now:
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
-    "elmish_store is 7 (as expected). initial state saved to localStorage.");
-  // test that mount still works as expected (check initial state of counter):
-  const actual = document.getElementById(id).textContent;
-  const actual_stripped = parseInt(actual.replace('+', '')
-    .replace('-Reset', ''), 10);
-  const expected = 7;
-  t.equal(expected, actual_stripped, "Inital state set to 7.");
-  // attempting to "re-mount" with a different model value should not work
-  // because mount should retrieve the value from localStorage
-  elmish.mount(42, update, view, id); // model (42) should be ignored this time!
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
-    "elmish_store is 7 (as expected). initial state saved to localStorage.");
-  // increment the counter
-  const btn = root.getElementsByClassName("inc")[0]; // click increment button
-  btn.click(); // Click the Increment button!
-  const state = parseInt(root.getElementsByClassName('count')[0]
-    .textContent, 10);
-  t.equal(state, 8, "State is 8 after increment.");
-  // the "model" stored in localStorage should also be 8 now:
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-    "elmish_store is 8 (as expected).");
-  elmish.empty(root); // reset the DOM to simulate refreshing a browser window
-  elmish.mount(5, update, view, id); // 5 ignored! model read from localStorage.
-  // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-    "elmish_store still 8 from increment (above) saved in localStorage");
-  t.end()
-});
-```
-
-There is quite a lot to "unpack" in this test but let's walk through the steps:
-
-1. Require the `view` and `update` from our counter reset example.
-2. `mount` the counter reset app
-3. ***test*** that the `model` (7) is being saved to `localStorage`
-by `mount` function.
-4. Attempt to "***re-mount***" the counter app with an initial model of `42`
-should not work because `mount` will "read"
-the initial model from `localStorage` if it is defined.
-5. `update` the model using the `inc` (_increment_) action
-6. ***test*** that `localStorage` was updated to reflect the increment (8)
-7. ***`empty`*** the DOM. (_to simulate a page being refreshed_)
-8. ***test*** that `localStorage` still contains our saved data.
-
-Based on this test, try to add the necessary lines to the `mount` function,
-to make the test pass.
-
-**`if`** you get stuck trying to make this test pass,
-refer to the completed code:
-[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
-
-
 <!--
 
 ## What _Next_?
 
 If you feel _confident_ with your "TEA" skills you can _either_:
 + **`try`** and use them to **create your _own_ App** using "TEA"
+e.g: https://github.com/nelsonic/time-mvp
 + Move on and **Learn Elm**: https://github.com/dwyl/learn-elm
 + (Join the herd and) Learn & use React/Redux.
 
 -->
-
-### Why _Not_ use HTML5 `<template>`
-
-Templates are an _awesome_ feature in HTML5 which
-allow the creation of reusable markup!
-
-_Sadly_, they are unavailable in Internet Explorer.
-https://caniuse.com/#feat=template <br />
-If you don't _need_ to "cater" for Internet Explorer,
-then checkout:
-https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro

From 6898e8bf10a1a5e31eecd7193d6161e010122ec7 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 30 Jul 2018 10:17:37 +0100
Subject: [PATCH 057/164] add link to
 /examples/multiple-counters-instances/index.html for #40
 https://youtu.be/5b-FyvUJsFE

---
 multiple-counters.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/multiple-counters.md b/multiple-counters.md
index afb9cf53..5003f0ac 100644
--- a/multiple-counters.md
+++ b/multiple-counters.md
@@ -18,7 +18,8 @@ each within their own "container" (DOM) element. e.g: <br />
 ```
 
 ![elm-arch-multiple-counters-naive](https://user-images.githubusercontent.com/194400/41302789-5299bd5e-6e63-11e8-8006-84313c54a24c.png)
-see: [link to multiple counter instances code]
+see:
+[/examples/multiple-counters-instances/index.html](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/examples/multiple-counters-instances/index.html)
 
 
 This "_works_" and "_satisfies_ the _requirement_"

From 075c4c438acda3cc0e6c04fe530b161c4a6c7db5 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 30 Jul 2018 10:31:07 +0100
Subject: [PATCH 058/164] minor markdown fixes for #44
 https://youtu.be/E1vXNrN6BbU

---
 README.md            | 10 +++++-----
 elmish.md            |  5 ++---
 multiple-counters.md | 10 ++++++----
 3 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 9d5f94cb..288b2340 100644
--- a/README.md
+++ b/README.md
@@ -746,8 +746,8 @@ and corresponding writeup:
 
 ### 11. Todo List!
 
-The _ultimate_ test of whether you _learned/understood_ something is
-applying it to _different_ context to the one you learned in.
+The _ultimate_ test of whether you _learned/understood_ something is <br />
+_applying_ your knowledge to _different_ context from the one you learned in.
 
 Let's "_turn this up to eleven_" and build something "_useful_"!
 
@@ -839,13 +839,13 @@ to build something full-featured and easy/fast to read!!
 [![babel](https://cloud.githubusercontent.com/assets/194400/25772913/72a818f4-326c-11e7-8020-9b5dab715987.png)](https://twitter.com/iamdevloper/status/787969734918668289 "Babel, how to show off that you don't have core ES5 skills.")
 
 If you can build with "ES5" JavaScript: <br />
-a) you side-step the
+**a)** you side-step the
 [_noise_](https://twitter.com/iamdevloper/status/610191865216786432)
 and focus on core skills that **_already_ work everywhere**! <br />
 (_don't worry you can always "top-up" your
 JS knowledge later with ES6, etc!_)<br />
-b) you **don't** need to **waste time** installing
+**b)** you **don't** need to **waste time** installing
 [_**Two Hundred Megabytes**_](https://cloud.githubusercontent.com/assets/194400/13321493/39fcfa30-dbc7-11e5-8b05-f046675f9cb6.png)
 of dependencies just to run a simple project! <br />
-c) You ***save time*** (_for yourself, your team and end-users!_)
+**c)** You ***save time*** (_for yourself, your team and end-users!_)
 because your code is _already_ optimized to run in _any_ browser!
diff --git a/elmish.md b/elmish.md
index 6c6a695f..eb77ff73 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1,6 +1,6 @@
 # `Elm`(_ish_)
 
-### (How to Build a Front-end Micro-Framework _From Scratch_)
+### (How to Build a Front-end Micro-Framework _From Scratch_)
 
 ![elmlogo-ish](https://user-images.githubusercontent.com/194400/43213139-b70a4c68-902d-11e8-8162-3c7cb56b6360.png)
 <!-- the colors are deliberately "a bit off" to emphasize that
@@ -1510,7 +1510,7 @@ You should see something like this:
 https://stackoverflow.com/questions/2010892/storing-objects-in-html5-localStorage <br />
 + Spec: https://www.w3.org/TR/webstorage/#the-localstorage-attribute
 
-#### Implementation
+#### Implementation
 
 _Given_ that saving and retrieving the Todo List `model` to/from `localStorage`
 uses two "native" DOM API functions, we can _avoid_ writing our own functions
@@ -1637,7 +1637,6 @@ then checkout:
 https://stackoverflow.com/questions/494143/creating-a-new-dom-element-from-an-html-string-using-built-in-dom-methods-or-pro
 
 
-
 ## Notes
 
 <sup>1</sup><small>The reason for calling the micro-framework `Elm`(_ish_)
diff --git a/multiple-counters.md b/multiple-counters.md
index 5003f0ac..e5fd1f04 100644
--- a/multiple-counters.md
+++ b/multiple-counters.md
@@ -23,9 +23,11 @@ see:
 
 
 This "_works_" and "_satisfies_ the _requirement_"
-of having multiple counters on the same "page".
-_However_, it's not a "sustainable" way of "extending" an app for the long term.
-Almost no "_real_" web application uses an `Integer` as the `model`.
+of having multiple counters on the same "page". <br />
+_However_, it's not a "sustainable" way of "extending"
+an app for the long term. <br />
+Almost no "_real_" web application uses an `Integer` as the `model`,
+so the "_complexity_" of the model will be much greater.
 
 We could leave the counter example `model` as an `Integer`
 and move on to the _next_ example (_Todo List_),
@@ -65,7 +67,7 @@ test('Test Update update(0) returns 0 (current state)', function(assert) {
 });
 ```
 This test is still _relevant_ because the Elm Architecture _always_
-returns the `model` _unchanged_ if no `action` is given.
+returns the `model` _unchanged_ if no `action` is given. <br />
 We need to _update_ this test to reflect the change in the `model` signature:
 ```js
 test('update({counters:[0]}) returns {counters:[0]} (current state unmodified)', function(assert) {

From f9ba7aa35dca6e6c3d92c724fe709bb93eb87380 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 30 Jul 2018 14:18:30 +0100
Subject: [PATCH 059/164] remove init function from counter-reset.js &
 counter-reset.test.js fixes
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/49
 https://youtu.be/OawqekA7bgk

---
 examples/counter-reset/counter.js | 9 ++-------
 test/counter-reset.test.js        | 1 -
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/examples/counter-reset/counter.js b/examples/counter-reset/counter.js
index 40bba1dc..2b75e72f 100644
--- a/examples/counter-reset/counter.js
+++ b/examples/counter-reset/counter.js
@@ -66,12 +66,8 @@ function div(divid, text) {
   return div;
 }
 
-function init(doc){
-  document = doc; // this is used for instantiating JSDOM. ignore!
-}
-
 /* The code block below ONLY Applies to tests run using Node.js */
-/* istanbul ignore next */
+/* istanbul ignore else */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     view: view,
@@ -80,6 +76,5 @@ if (typeof module !== 'undefined' && module.exports) {
     div: div,
     button: button,
     empty: empty,
-    init: init
   }
-} else { init(document); }
+}
diff --git a/test/counter-reset.test.js b/test/counter-reset.test.js
index 30e434e0..0a731b25 100644
--- a/test/counter-reset.test.js
+++ b/test/counter-reset.test.js
@@ -7,7 +7,6 @@ require('jsdom-global')(html);
 const counter = require(path.resolve(__dirname,
   '../examples/counter-reset/counter.js'));
 const { view, mount, update, div, button, empty, init} = counter;
-init(document); // pass the JSDOM into counter.js
 const id = 'test-app';
 
 test('Mount app expect state to be Zero', function (t) {

From 6ec9868d04cb06b69ef0a3bc56c67d104965357c Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 30 Jul 2018 14:28:57 +0100
Subject: [PATCH 060/164] remove init function from elmish.js & elmish.md see
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/49
 https://youtu.be/aJOTlE1K90k

---
 elmish.md                    | 113 +++++++++++------------------------
 examples/todo-list/elmish.js |  13 +---
 test/elmish.test.js          |   1 -
 3 files changed, 36 insertions(+), 91 deletions(-)

diff --git a/elmish.md b/elmish.md
index eb77ff73..73b0fc28 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1,6 +1,6 @@
 # `Elm`(_ish_)
 
-### (How to Build a Front-end Micro-Framework _From Scratch_)
+## (How to Build a Front-end Micro-Framework _From Scratch_)
 
 ![elmlogo-ish](https://user-images.githubusercontent.com/194400/43213139-b70a4c68-902d-11e8-8162-3c7cb56b6360.png)
 <!-- the colors are deliberately "a bit off" to emphasize that
@@ -45,42 +45,44 @@ By the end of this exercise you will _understand_
 The Elm Architecture (TEA) _much better_
 because we will be analysing, documenting, testing
 and writing each function required
-to architect and render the our Todo List (TodoMVC) App.
+to architect and render our Todo List (TodoMVC) App.
 
 <br /><br />
 
 ## _Who?_
 
-People who wants to gain an _in-depth_ understanding
+People who want to gain an _in-depth_ understanding
 of The Elm Architecture ("TEA")
-and thus _intrinsically_ grok Redux/React JavaScript apps.
+and thus _intrinsically_
+[grok](https://en.wikipedia.org/wiki/Grok) Redux/React JavaScript apps.
 
-This tutorial is intended for _beginners_ who have _modest_
-JavaScript knowledge (_variables, functions, DOM methods and TDD_). <br />
+This tutorial is intended for _beginners_ with _modest_
+JavaScript knowledge (_variables, functions, DOM methods & TDD_). <br />
 If you have any questions or get "stuck",
 please open an issue:
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues <br />
-@dwyl is a "safe space" and we are all here to help don't be shy/afraid.
+@dwyl is a "safe space" and we are all here to help don't be shy/afraid; <br />
+the _more_ questions you ask, the more you are helping yourself and _others_!
 
 <br /><br />
 
 ## _How_?
 
 _Before_ diving into _writing functions_ for `Elm`(_ish_),
-we need to consider how we are going to _test_ it.
-By ensuring that we follow **TDD** from the _start_ of an App,
+we need to consider how we are going to _test_ it. <br />
+By ensuring that we follow **TDD** from the _start_ of an project,
 we _avoid_ having to "correct" any "**bad habits**" later.
 
-We will be using **Tape** and **`JSDOM`** for testing the functions.
-Tape is a _minimalist_ testing framework
-that is fast and has everything we need.
+We will be using **Tape** & **`JSDOM`** for testing the functions.
+Tape is a _minimalist_ testing library
+that is _fast_ and has _everything we need_.
 **`JSDOM`** is a JavaScript implementation of the
-WHATWG DOM and HTML standards, for use with node.js. <br />
+WHATWG DOM & HTML standards, for use with node.js. <br />
 If _either_ of these tools is _unfamiliar_ to you,
 please see:
 [https://github.com/dwyl/**learn-tape**](https://github.com/dwyl/learn-tape)
 and
-[front-end-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
+[**front-end**-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
 
 
 ### What _Can_ We _Generalise_ ?
@@ -107,20 +109,21 @@ which is the most _widely used_ "software architecture pattern".
 "how code is **organised**" and/or how "data **flows**" through a system.
 Whenever you see the word "**pattern**" it just means
 "a bunch of experienced people have concluded that this works well,
-so as beginners, we don't have to think too hard."
+so as beginners, we don't have to think too hard (up-front)."
 
 The _reason_ Elm refers to the "**Controller**" as "***Update***" is because
 this name _more accurately_ reflects what the function _does_:
 it _updates_ the _state_ (Model) of the application.
 
 Our `update` and `view` functions will form
-the "**domain logic**" of our Todo List App,
+the "**domain logic**" of our Todo List App, <br />
 (_i.e. they are "**specific**" to the Todo List_)
 so we cannot abstract them. <br />
-The `model` will be a JavaScript `Object` where the App's data will be stored.
+The `model` will be a JavaScript `Object` where the App's
+data (todo list items) will be stored.
 
 The `update` function is a simple `switch` statement
-that "decides" how to to _update_ the app's `model`
+that "decides" how to to _`update`_ the app's `model`
 each `case` will call a function
 that _belongs_ to the Todo List App. <br />
 
@@ -145,7 +148,7 @@ The answer is: create **two** new files:
 ### Test Setup
 
 In order to run our test, we need some "setup" code
-that "requires" the libraries so we can _execute_ the functions.
+that "requires" the libraries/files so we can _execute_ the functions.
 
 In the `test/elmish.test.js` file, type the following code:
 ```js
@@ -156,7 +159,6 @@ const html = fs.readFileSync(path.resolve(__dirname,
   '../examples/todo-list/index.html')); // sample HTML file to initialise JSDOM.
 require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
 const elmish = require('../examples/todo-list/elmish.js'); // functions to test
-elmish.init(document);              // pass JSDOM into elmish for DOM functions
 const id = 'test-app';              // all tests use 'test-app' as root element
 ```
 
@@ -166,61 +168,7 @@ if you have followed previous tutorials.
 https://github.com/dwyl/learn-tape
 and
 
-If you attempt to run this code using the command:
-```sh
-node test/elmish.test.js
-```
-
-you will see something like the following:
-![no-init-function](https://user-images.githubusercontent.com/194400/43359605-b8cc9418-929c-11e8-92d6-97feb8c67596.png)
-
-This is because we do not have anything in the `elmish.js`, yet.
-Let's address that now!
-
-
-### Add `init` function
-
-Open the `examples/todo-list/elmish.js` file and add the following code:
-
-```js
-
-
-/**
- * `init` initialises the document (Global) variable for DOM operations.
- * @param  {Object} doc window.document in browser and JSDOM.document in tests.
- * @return {Object} document returns whatever is passed in.
- */
-function init(doc){
-  document = doc; // this is used for instantiating JSDOM for testing.
-  return document;
-}
-```
-
-> If the **comment syntax** above the function definition is _unfamiliar_,
-please see:
-[https://github.com/dwyl/**learn-jsdoc**](https://github.com/dwyl/learn-jsdoc)
-
-This code is simply to allow us to "initialise" `Elm`(_ish_)
-with a "simulated" browser `document` (`JSDOM`) so that we can _test_ the code.
-
-
-### Add `module.exports` to "export" the `init` function
-
-Adding the function to the `elmish.js` file is a good _start_,
-but we need to ***`export`*** it to be able to _invoke_ it in our test. <br />
-Add the following code at the end of `examples/todo-list/elmish.js`:
-
-```js
-/* module.exports is needed to run the functions using Node.js for testing! */
-/* istanbul ignore next */
-if (typeof module !== 'undefined' && module.exports) {
-  module.exports = {
-    init: init
-  }
-} else { init(document);
-```
-
-Now if you attempt to run the test file: `node test/elmish.test.js`
+If you attempt to run the test file: `node test/elmish.test.js`
 you should see no output.
 (_this is expected as we haven't written any tests yet!_)
 
@@ -332,12 +280,21 @@ function empty(node) {
   }
 }
 ```
-remember to add a line in the `module.exports` Object at the end of the file:
+
+#### Add `module.exports` statement to "export" the `empty` function
+
+Remember to add a line in the `module.exports` Object at the end of the file:
+
+Adding the function to the `elmish.js` file is a good _start_,
+but we need to ***`export`*** it to be able to _invoke_ it in our test. <br />
+Add the following code at the end of `examples/todo-list/elmish.js`:
+
 ```js
+/* module.exports is needed to run the functions using Node.js for testing! */
+/* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
-    empty: empty, // add this line to export the `empty` function
-    init: init,
+    empty: empty // export the `empty` function so we can test it.
   }
 } else { init(document); }
 ```
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index f27d678c..d83242e1 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -207,16 +207,6 @@ function mount(model, update, view, root_element_id) {
 //   return new_state;
 // }
 
-/**
- * `init` initialises the document (Global) variable for DOM operations.
- * @param  {Object} doc window.document in browser and JSDOM.document in tests.
- * @return {Object} document returns whatever is passed in.
- */
-function init(doc){
-  document = doc; // this is used for instantiating JSDOM for testing.
-  return document;
-}
-
 /* module.exports is needed to run the functions using Node.js for testing! */
 /* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
@@ -228,7 +218,6 @@ if (typeof module !== 'undefined' && module.exports) {
     // div: div,
     empty: empty,
     // footer: footer,
-    init: init,
     // input: input,
     // h1, h1,
     // header: header,
@@ -242,6 +231,6 @@ if (typeof module !== 'undefined' && module.exports) {
     // text: text,
     // ul: ul
   }
-} else { init(document); }
+}
 
 })();
diff --git a/test/elmish.test.js b/test/elmish.test.js
index d552b3ed..1ce578fd 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -5,7 +5,6 @@ const elmish = require('../examples/todo-list/elmish.js');
 const html = fs.readFileSync(path.resolve(__dirname,
   '../examples/todo-list/index.html'));
 require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
-elmish.init(document);              // pass JSDOM into elmish for DOM functions
 const id = 'test-app';              // all tests use separate root element
 
 test('elmish.empty("root") removes DOM elements from container', function (t) {

From 354685e1b43f720dade5df30472d3c19ddbba79d Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 30 Jul 2018 19:41:12 +0100
Subject: [PATCH 061/164] adds screenshots of tests failing & passing for
 add_attributes function https://vimeo.com/8503138

---
 elmish.md                    | 115 +++++++++++++++++++++++++++--------
 examples/todo-list/elmish.js | 112 +++++++++++++++++-----------------
 test/elmish.test.js          |  22 +++----
 3 files changed, 156 insertions(+), 93 deletions(-)

diff --git a/elmish.md b/elmish.md
index 73b0fc28..d810b3df 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1,15 +1,13 @@
 # `Elm`(_ish_)
 
-## (How to Build a Front-end Micro-Framework _From Scratch_)
-
 ![elmlogo-ish](https://user-images.githubusercontent.com/194400/43213139-b70a4c68-902d-11e8-8162-3c7cb56b6360.png)
 <!-- the colors are deliberately "a bit off" to emphasize that
 this is a "inspired by" but really a "poor immitation" of Elm! -->
 
 `Elm`(_ish_) is an **`Elm`**-_inspired_ `JavaScript` (**ES5**)
-fully functional front-end _micro_-framework.[<sup>1</sup>](#notes)
+fully functional front-end _micro_-framework from _scratch_.[<sup>1</sup>](#notes)
 
-<br /><br />
+<br />
 
 ## _Why?_
 
@@ -22,7 +20,7 @@ into a "micro framework" is to: <br />
 ***simplify*** the Todo List application code
 to _just_
 ["**application logic**"](https://en.wikipedia.org/wiki/Business_logic). <br />
-**b)** _demonstrate_ a ***re-useable*** (_fully-tested_)
+**b)** _demo_ a ***re-useable*** (_fully-tested_)
 "**micro-framework**" that allows us
 to _practice_ using The Elm Architecture ("TEA").<br />
 **c)** promote the **mindset** of writing **tests _first_**
@@ -30,11 +28,11 @@ and **`then`** the _least_ amount of code necessary to pass the test
 (_while meeting the acceptance criteria_).
 
 > _**Test** & **Document-Driven Development** is **easy** and it's **easily**
-one of the **best habits** to form in your software development career.
+one of the **best habits** to form in your software development "career".
 This walkthrough shows **how** you can do it **the right way**
 from the **start** of a project._
 
-<br /><br />
+<br />
 
 ## _What?_
 
@@ -64,7 +62,7 @@ https://github.com/dwyl/learn-elm-architecture-in-javascript/issues <br />
 @dwyl is a "safe space" and we are all here to help don't be shy/afraid; <br />
 the _more_ questions you ask, the more you are helping yourself and _others_!
 
-<br /><br />
+<br />
 
 ## _How_?
 
@@ -131,10 +129,8 @@ The `view` function _invokes_ several "helper" functions
 which create HTML ("DOM") elements e.g: `<section>`, `<div>` & `<button>`;
 these _can_ (_will_) be generalised (_below_).
 
-
 Let's start with a couple of "_familiar_" _generic_ functions
-(_which we used in the "counter-reset" example_):
-`init`, `empty` and `mount`. <br />
+(_which we used in the "counter-reset" example_): `empty` and `mount`. <br />
 
 <br />
 
@@ -283,8 +279,6 @@ function empty(node) {
 
 #### Add `module.exports` statement to "export" the `empty` function
 
-Remember to add a line in the `module.exports` Object at the end of the file:
-
 Adding the function to the `elmish.js` file is a good _start_,
 but we need to ***`export`*** it to be able to _invoke_ it in our test. <br />
 Add the following code at the end of `examples/todo-list/elmish.js`:
@@ -310,7 +304,6 @@ Boom! our first test is passing!
 (_the test has **3 assertions**, that's why Tape says "tests 3. pass 3"_).
 
 
-
 ### `mount` the App
 
 The `mount` function is the "glue" or "wiring" function that
@@ -590,7 +583,8 @@ The `JSDOC` comment for our `add_attributes` function is:
 /**
 * add_attributes applies the desired attributes to the desired node.
 * Note: this function is "impure" because it "mutates" the node.
-* however it is idempotent; the "side effect" is only applied once.
+* however it is idempotent; the "side effect" is only applied once
+* and no other nodes in the DOM are "affected" (undesirably).
 * @param {Array.<String>} attrlist list of attributes to be applied to the node
 * @param {Object} node DOM node upon which attribute(s) should be applied
 * @example
@@ -617,8 +611,57 @@ test('elmish.add_attributes applies class HTML attribute to a node', function (t
 });
 ```
 
-Given the code in the test above,
-take a moment to think of how _you_ would write,
+If you (_attempt to_) run this test (_and you **should**_),
+you will see something like this:
+
+![image](https://user-images.githubusercontent.com/194400/43414770-af5ee0e4-942b-11e8-9d1c-1cbab3adc136.png)
+
+Test is failing because the `elmish.add_attributes` function does not _exist_.
+
+Go ahead and  _create_ the `elmish.add_attributes` function
+(_just the function without passing the test_) and _export_ it in `elmish.js`:
+```js
+/**
+* add_attributes applies the desired attributes to the desired node.
+* Note: this function is "impure" because it "mutates" the node.
+* however it is idempotent; the "side effect" is only applied once
+* and no other nodes in the DOM are "affected" (undesirably).
+* @param {Array.<String>} attrlist list of attributes to be applied to the node
+* @param {Object} node DOM node upon which attribute(s) should be applied
+* @example
+* // returns node with attributes applied
+* div = add_attributes(["class=item", "id=mydiv", "active=true"], div);
+*/
+function add_attributes (attrlist, node) {
+  if(attrlist && attrlist.length) {
+    attrlist.forEach(function (attr) { // apply each prop in array
+      var a = attr.split('=');
+      switch(a[0]) {
+        // code to make test pass goes here ...
+        default:
+          break;
+      }
+    });
+  }
+  return node;
+}
+// ... at the end of the file, "export" the add_attributes funciton:
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    add_attributes: add_attributes, // export the function so we can test it!
+    empty: empty,
+    mount: mount
+  }
+}
+```
+
+When you re-run the test you will see something like this:
+![image](https://user-images.githubusercontent.com/194400/43416008-ff63d70e-942e-11e8-97ee-6544efb7d43a.png)
+The function _exists_ but it does not make the tests pass.
+Your _quest_ is to turn this **`0`** into a **`1`**.
+
+Given the **`JSDOC`** comment and _test_ above,
+take a moment to think of how _you_ would write
 the `add_attributes` function to apply a CSS `class` to an element. <br />
 Note: we have _seen_ the code _before_ in the `counter` example.
 The difference is this time we want it to be "generic";
@@ -626,13 +669,19 @@ we want to apply a CSS `class` to _any_ DOM node.
 
 If you can, make the test _pass_
 by writing the `add_attributes` function.
-(_don't forget to_ `export` _the function at the end of the file_).
+(_don't forget to_ `export` _the function at the bottom of the file_).
 
-If you get "stuck", checkout:
-https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
+If you get "stuck", checkout the _complete_ example:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
 
+> **Note 1**: it's not "cheating" to look at "the solution",
+the whole point of having a step-by-step tutorial
+is that you can fill-in any "gaps" if you get "stuck",
+but you should only check _after_ making
+a good attempt to write the code _yourself_.
+<br />
 
-> **Note**: The `add_attributes` function is "impure" as it "mutates"
+> **Note 2**: The `add_attributes` function is "impure" as it "mutates"
 the target DOM `node`, this is more of a "fact of life" in JavaScript,
 and given that the application of attributes
 to DOM node(s) is idempotent we aren't "concerned" with "side effects";
@@ -640,14 +689,20 @@ the attribute will only be applied _once_ to the node
 regardless of how many times the `add_attributes` function is called.
 see: https://en.wikipedia.org/wiki/Idempotence
 
-
 For reference, the Elm HTML Attributes function on Elm package is:
 http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes
 
+Once you make the test _pass_ you _should_ see the following in your Terminal:
+![image](https://user-images.githubusercontent.com/194400/43416304-d06339da-942f-11e8-9546-06af9c494a45.png)
+
+<!-- Onto the next one! https://vimeo.com/8503138 -->
+
+<br />
+
 #### Input `placeholder` Attribute
 
 The `<input>` form element (_where we create new Todo List items_)
-has a helpful `placeholder` _prompting_ us with a question:
+has a helpful `placeholder` attribute _prompting_ us with a question:
 "_What needs to be done?_"
 
 Add the following test to the `test/elmish.test.js` file: <br />
@@ -666,7 +721,14 @@ test('elmish.add_attributes set placeholder on <input> element', function (t) {
 });
 ```
 
-Write the necessary code to make this test _pass_ in `elmish.js`.
+
+
+
+Write the necessary code in the `add_attributes` function of `elmish.js`
+to make this test _pass_.
+
+If you get "stuck", checkout the _complete_ example:
+[/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
 
 
 #### Input `autofocus`
@@ -771,7 +833,8 @@ test.only('elmish.add_attributes set "for" attribute <label> element', function
 });
 ```
 
-Write the "case" in to make this test _pass_ in `elmish.js`.
+Add the "`case`" in the `add_attributes` function's `switch` statement
+to make this test _pass_ in `elmish.js`.
 
 
 #### `<input>` attribute `type`
@@ -1503,7 +1566,7 @@ We are going to make **3 adjustments** to this code
 to use `setItem` and `getItem`,
 but _first_ let's write a ***test*** for the desired outcome!
 
-Add the following _test code_ to your `test/elmish.test.js` file: <br />:
+Add the following _test code_ to your `test/elmish.test.js` file: <br />
 
 ```js
 // Testing localStorage requires a "polyfil" because it's unavailable in JSDOM:
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index d83242e1..a14b1c5d 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -35,61 +35,61 @@ function mount(model, update, view, root_element_id) {
   view(signal, model, root);                    // render initial model (once)
   localStorage.setItem('elmish_store', JSON.stringify(model)); // save model!
 }
-//
-//
-// /**
-// * `add_attributes` applies the desired attribute(s) to the specified DOM node.
-// * Note: this function is "impure" because it "mutates" the node.
-// * however it is idempotent; the "side effect" is only applied once.
-// * @param {Array.<String>} attrlist list of attributes to be applied to the node
-// * @param {Object} node DOM node upon which attribute(s) should be applied
-// * @example
-// * // returns node with attributes applied
-// * input = add_attributes(["type=checkbox", "id=todo1", "checked=true"], input);
-// */
-// function add_attributes (attrlist, node) {
-//   if(attrlist && attrlist.length) {
-//     attrlist.forEach(function (attr) { // apply all props in array
-//       var a = attr.split('=');
-//       switch(a[0]) {
-//         case 'autofocus':
-//           node.autofocus = "";
-//           node.focus();
-//           break;
-//         case 'checked':
-//           node.checked = (a[1] === 'true' ? true : false);
-//         case 'class':
-//           node.className = a[1]; // apply CSS classes
-//           break;
-//         case 'data-id':
-//           node.setAttribute('data-id', a[1]); // add data-id e.g: to <li>
-//           break;
-//         case 'for':
-//           node.setAttribute('for', a[1]); // e.g: <label for="toggle-all">
-//           break;
-//         case 'href':
-//           node.href = a[1]; // e.g: <a href="#/active">Active</a>
-//           break;
-//         case 'id':
-//           node.id = a[1]; // apply element id e.g: <input id="toggle-all">
-//           break;
-//         case 'placeholder':
-//           node.placeholder = a[1]; // add placeholder to <input> element
-//           break;
-//         case 'style':
-//           node.setAttribute("style", a[1]); // <div style="display: block;">
-//           break;
-//         case 'type':
-//           node.setAttribute('type', a[1]); // <input id="go" type="checkbox">
-//           break;
-//         default:
-//           break;
-//       }
-//     });
-//   }
-//   return node;
-// }
-//
+
+
+/**
+* `add_attributes` applies the desired attribute(s) to the specified DOM node.
+* Note: this function is "impure" because it "mutates" the node.
+* however it is idempotent; the "side effect" is only applied once.
+* @param {Array.<String>} attrlist list of attributes to be applied to the node
+* @param {Object} node DOM node upon which attribute(s) should be applied
+* @example
+* // returns node with attributes applied
+* input = add_attributes(["type=checkbox", "id=todo1", "checked=true"], input);
+*/
+function add_attributes (attrlist, node) {
+  if(attrlist && attrlist.length) {
+    attrlist.forEach(function (attr) { // apply all props in array
+      var a = attr.split('=');
+      switch(a[0]) {
+        // case 'autofocus':
+        //   node.autofocus = "";
+        //   node.focus();
+        //   break;
+        // case 'checked':
+        //   node.checked = (a[1] === 'true' ? true : false);
+        case 'class':
+          node.className = a[1]; // apply CSS classes
+          break;
+        // case 'data-id':
+        //   node.setAttribute('data-id', a[1]); // add data-id e.g: to <li>
+        //   break;
+        // case 'for':
+        //   node.setAttribute('for', a[1]); // e.g: <label for="toggle-all">
+        //   break;
+        // case 'href':
+        //   node.href = a[1]; // e.g: <a href="#/active">Active</a>
+        //   break;
+        // case 'id':
+        //   node.id = a[1]; // apply element id e.g: <input id="toggle-all">
+        //   break;
+        // case 'placeholder':
+        //   node.placeholder = a[1]; // add placeholder to <input> element
+        //   break;
+        // case 'style':
+        //   node.setAttribute("style", a[1]); // <div style="display: block;">
+        //   break;
+        // case 'type':
+        //   node.setAttribute('type', a[1]); // <input id="go" type="checkbox">
+        //   break;
+        default:
+          break;
+      }
+    });
+  }
+  return node;
+}
+
 // /**
 //  * `append_childnodes` appends an array of HTML elements to a parent DOM node.
 //  * @param  {Array.<Object>} childnodes array of child DOM nodes.
@@ -211,7 +211,7 @@ function mount(model, update, view, root_element_id) {
 /* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
-    // add_attributes: add_attributes,
+    add_attributes: add_attributes,
     // append_childnodes: append_childnodes,
     // a: a,
     // button: button,
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 1ce578fd..e492b1e3 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -63,17 +63,17 @@ test('elmish.mount app expect state to be Zero', function (t) {
 //   t.end();
 // });
 //
-// test('elmish.add_attributes applies HTML class attribute to el', function (t) {
-//   const root = document.getElementById(id);
-//   let div = document.createElement('div');
-//   div.id = 'divid';
-//   div = elmish.add_attributes(["class=apptastic"], div);
-//   root.appendChild(div);
-//   // test the div has the desired class:
-//   const nodes = document.getElementsByClassName('apptastic');
-//   t.equal(nodes.length, 1, "<div> has 'apptastic' CSS class applied");
-//   t.end();
-// });
+test('elmish.add_attributes applies HTML class attribute to el', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  div = elmish.add_attributes(["class=apptastic"], div);
+  root.appendChild(div);
+  // test the div has the desired class:
+  const nodes = document.getElementsByClassName('apptastic');
+  t.equal(nodes.length, 1, "<div> has 'apptastic' CSS class applied");
+  t.end();
+});
 //
 // test('elmish.add_attributes applies id HTML attribute to a node', function (t) {
 //   const root = document.getElementById(id);

From 5041de1872c4f14b6e725224a9f3391cff3356c9 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 30 Jul 2018 19:56:07 +0100
Subject: [PATCH 062/164] add further instructions & screenshots for
 placeholder attribute in elmish.md for #44 https://youtu.be/NqwbFsSY9xY

---
 elmish.md                    | 19 ++++++++++++++-----
 examples/todo-list/elmish.js |  6 +++---
 test/elmish.test.js          | 22 +++++++++++-----------
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git a/elmish.md b/elmish.md
index d810b3df..78b71749 100644
--- a/elmish.md
+++ b/elmish.md
@@ -663,8 +663,10 @@ Your _quest_ is to turn this **`0`** into a **`1`**.
 Given the **`JSDOC`** comment and _test_ above,
 take a moment to think of how _you_ would write
 the `add_attributes` function to apply a CSS `class` to an element. <br />
-Note: we have _seen_ the code _before_ in the `counter` example.
-The difference is this time we want it to be "generic";
+
+> **Note 0**: we have "_seen_" the code _before_ in the `counter` example:
+>
+> The difference is this time we want it to be "generic";
 we want to apply a CSS `class` to _any_ DOM node.
 
 If you can, make the test _pass_
@@ -703,7 +705,7 @@ Once you make the test _pass_ you _should_ see the following in your Terminal:
 
 The `<input>` form element (_where we create new Todo List items_)
 has a helpful `placeholder` attribute _prompting_ us with a question:
-"_What needs to be done?_"
+"***What needs to be done?***"
 
 Add the following test to the `test/elmish.test.js` file: <br />
 
@@ -721,15 +723,22 @@ test('elmish.add_attributes set placeholder on <input> element', function (t) {
 });
 ```
 
+_Run_ the test `node test/elmish.test.js`:
 
+![image](https://user-images.githubusercontent.com/194400/43416801-34e48d2c-9431-11e8-8786-7676f9e3972f.png)
 
+You _know_ "the drill"; write the necessary code
+in the `add_attributes` function of `elmish.js`
+to add a `placeholder` to an `<input>` element
+and make this test _pass_:
 
-Write the necessary code in the `add_attributes` function of `elmish.js`
-to make this test _pass_.
+![image](https://user-images.githubusercontent.com/194400/43416921-8506baaa-9431-11e8-9585-814e704a694d.png)
 
 If you get "stuck", checkout the _complete_ example:
 [/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
 
+<br />
+
 
 #### Input `autofocus`
 
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index a14b1c5d..bbd67788 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -73,9 +73,9 @@ function add_attributes (attrlist, node) {
         // case 'id':
         //   node.id = a[1]; // apply element id e.g: <input id="toggle-all">
         //   break;
-        // case 'placeholder':
-        //   node.placeholder = a[1]; // add placeholder to <input> element
-        //   break;
+        case 'placeholder':
+          node.placeholder = a[1]; // add placeholder to <input> element
+          break;
         // case 'style':
         //   node.setAttribute("style", a[1]); // <div style="display: block;">
         //   break;
diff --git a/test/elmish.test.js b/test/elmish.test.js
index e492b1e3..aabe24c1 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -104,17 +104,17 @@ test('elmish.add_attributes applies HTML class attribute to el', function (t) {
 //   t.end();
 // });
 //
-// test('elmish.add_attributes set placeholder on <input> element', function (t) {
-//   const root = document.getElementById(id);
-//   let input = document.createElement('input');
-//   input.id = 'new-todo';
-//   input = elmish.add_attributes(["placeholder=What needs to be done?"], input);
-//   root.appendChild(input);
-//   const placeholder = document.getElementById('new-todo')
-//     .getAttribute("placeholder");
-//   t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
-//   t.end();
-// });
+test('elmish.add_attributes set placeholder on <input> element', function (t) {
+  const root = document.getElementById(id);
+  let input = document.createElement('input');
+  input.id = 'new-todo';
+  input = elmish.add_attributes(["placeholder=What needs to be done?"], input);
+  root.appendChild(input);
+  const placeholder = document.getElementById('new-todo')
+    .getAttribute("placeholder");
+  t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
+  t.end();
+});
 //
 // test('elmish.add_attributes set data-id on <li> element', function (t) {
 //   const root = document.getElementById(id);

From 81928f7de7bffe5897c566436224de2d00acf3de Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 31 Jul 2018 05:35:24 +0100
Subject: [PATCH 063/164] adds default branch test and pre-commit hook
 instructions to elmish.md for #44 https://youtu.be/9JDzlhW3XTM

---
 elmish.md           | 140 ++++++++++++++++++++++++++++++++++++++++++--
 test/elmish.test.js |  35 +++++++----
 2 files changed, 158 insertions(+), 17 deletions(-)

diff --git a/elmish.md b/elmish.md
index 78b71749..5ef73ee3 100644
--- a/elmish.md
+++ b/elmish.md
@@ -664,11 +664,6 @@ Given the **`JSDOC`** comment and _test_ above,
 take a moment to think of how _you_ would write
 the `add_attributes` function to apply a CSS `class` to an element. <br />
 
-> **Note 0**: we have "_seen_" the code _before_ in the `counter` example:
->
-> The difference is this time we want it to be "generic";
-we want to apply a CSS `class` to _any_ DOM node.
-
 If you can, make the test _pass_
 by writing the `add_attributes` function.
 (_don't forget to_ `export` _the function at the bottom of the file_).
@@ -676,9 +671,14 @@ by writing the `add_attributes` function.
 If you get "stuck", checkout the _complete_ example:
 [/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
 
+> **Note 0**: we have "_seen_" the code _before_ in the `counter` example:
+> [counter.js#L51](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/814467e81b1b9739da74378455bd12721b096ebd/examples/counter-reset/counter.js#L51) <br />
+> The _difference_ is this time we want it to be "generic";
+we want to apply a CSS `class` to _any_ DOM node.
+
 > **Note 1**: it's not "cheating" to look at "the solution",
 the whole point of having a step-by-step tutorial
-is that you can fill-in any "gaps" if you get "stuck",
+is that you can check if you get "stuck",
 but you should only check _after_ making
 a good attempt to write the code _yourself_.
 <br />
@@ -739,6 +739,134 @@ If you get "stuck", checkout the _complete_ example:
 
 <br />
 
+#### `default` `case` ("branch") test?
+
+At this point in our `Elm`(_ish_) quest,
+all our tests are _passing_,
+which is good,
+however that is not the "full picture" ...
+
+If you use Istanbul to check the "test coverage"
+(_the measure of which lines/branches of code are being executed during tests_),
+you will see that only **98.5%** of lines of code is being "covered":
+
+![image](https://user-images.githubusercontent.com/194400/43436198-2d156248-947b-11e8-8e5a-03f608424fcb.png)
+
+`@dwyl` we are "_keen_" on having "**100% Test Coverage**" ...
+anything less than **100%** is _guaranteed_ to result in "regressions",
+disappointment and a _lonely loveless life_. 💔
+
+![87% Test Coverage](http://i.imgur.com/NTI4Pxw.png)
+
+See:
+[https://github.com/dwyl/**learn-istanbul**](https://github.com/dwyl/learn-istanbul)
+
+This means that if we have a `switch` statement
+as in the case of the `add_attributes` function we need to add a ***test***,
+that "_exercises_" that "branch" of the code.
+Add the following test code to your `test/elmish.test.js` file: <br />
+
+```js
+/** DEFAULT BRANCH Test **/
+test('test default case of elmish.add_attributes (no effect)', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  // "Clone" the div DOM node before invoking elmish.attributes to compare
+  const clone = div.cloneNode(true);
+  div = elmish.add_attributes(["unrecognised_attribute=noise"], div);
+  t.deepEqual(div, clone, "<div> has not been altered");
+  t.end();
+});
+```
+
+By _definition_ this test will _pass_ without adding any additional code
+because we _already_ added the `default: break;` lines above
+(_which is "good practice" in `switch` statements_). <br />
+Run the test(s) `node test/elmish.test.js`:
+![image](https://user-images.githubusercontent.com/194400/43418987-8c5138f2-9437-11e8-92c5-7c62f1cac2d7.png)
+
+
+So "_why bother_" adding a _test_ if it's _always_ going to _pass_?
+**_Two_ reasons**: <br />
+**First**: It _won't_ "_always pass_".
+if someone decides to _remove_ the "default" `case`
+from `add_attributes` function (_people do "strange things" all the time!_)
+it will _fail_ so by having a test,
+we will _know_ that the `switch` is "_incomplete_". <br />
+**Second**: Having "full coverage" of our code from the _start_ of the project,
+and not having to"debate" or "discuss" the "merits" of it means
+we can have _confidence_ in the code.
+
+#### Test `null` Attribute Value in `add_attributes` Function
+
+Since JavaScript is _not_ statically/strictly typed we need to _consider_
+the situation where someone might _accidentally_ pass a `null` value.
+
+Thankfully, this is _easy_ to write a test for.
+Add the following test to `test/elmish.test.js`: <br />
+
+```js
+test('test elmish.add_attributes attrlist null (no effect)', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  // "Clone" the div DOM node before invoking elmish.attributes to compare
+  const clone = div.cloneNode(true);
+  div = elmish.add_attributes(null, div); // should not "explode"
+  t.deepEqual(div, clone, "<div> has not been altered");
+  t.end();
+});
+```
+
+This test should _also_ pass  without the addition of any code:
+
+![image](https://user-images.githubusercontent.com/194400/43423518-93a8fa74-9444-11e8-97a3-c7e74f71a5f7.png)
+
+Now the Coverage should be 100% when you run `npm test`:
+
+![image](https://user-images.githubusercontent.com/194400/43423046-355f3056-9443-11e8-826f-ed61f76dddc0.png)
+
+In your terminal, type/run the follwoing command: `open coverage/lcov-report/index.html`
+
+![image](https://user-images.githubusercontent.com/194400/43423103-5ebde1a4-9443-11e8-835b-0dd1ef8a513c.png)
+
+
+#### Check-Coverage Pre-Commit Hook
+
+Once you _achieve_ 100% test coverage,
+there is no _reason_ to "compromise"
+by going _below_ this level.
+Let's add a `pre-commit` check
+to make sure we maintain our desired standard.
+
+> We wrote a detailed guide to git pre-commit hooks with npm:
+[https://github.com/dwyl/learn-**pre-commit**]https://github.com/dwyl/learn-pre-commit
+
+Install the `pre-commit` module:
+
+```sh
+npm install pre-commit istanbul --save-dev
+```
+
+In your `package.json` file add:
+
+```js
+{
+  "scripts": {
+    "check-coverage": "istanbul check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
+    "test": "istanbul cover tape ./test/*.test.js | tap-spec"
+  },
+  "pre-commit": [
+    "test",
+    "check-coverage"
+  ]
+}
+```
+
+Now whenever you `commit` your code, your tests will run
+and `istanbul` will check the test coverage level for you.
+
 
 #### Input `autofocus`
 
diff --git a/test/elmish.test.js b/test/elmish.test.js
index aabe24c1..c2afb3b6 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -197,17 +197,30 @@ test('elmish.add_attributes set placeholder on <input> element', function (t) {
 //   t.end();
 // });
 //
-// /** DEFAULT BRANCH **/
-// test('test default branch of elmish.add_attributes (no effect)', function (t) {
-//   const root = document.getElementById(id);
-//   let div = document.createElement('div');
-//   div.id = 'divid';
-//   // "Clone" the div DOM node before invoking elmish.attributes to compare
-//   const clone = div.cloneNode(true);
-//   div = elmish.add_attributes(["unrecognised_attribute=noise"], div);
-//   t.deepEqual(div, clone, "<div> has not been altered");
-//   t.end();
-// });
+/** DEFAULT BRANCH **/
+test('test default branch of elmish.add_attributes (no effect)', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  // "Clone" the div DOM node before invoking elmish.attributes to compare
+  const clone = div.cloneNode(true);
+  div = elmish.add_attributes(["unrecognised_attribute=noise"], div);
+  t.deepEqual(div, clone, "<div> has not been altered");
+  t.end();
+});
+
+/** null attrlist **/
+test('test elmish.add_attributes attrlist null (no effect)', function (t) {
+  const root = document.getElementById(id);
+  let div = document.createElement('div');
+  div.id = 'divid';
+  // "Clone" the div DOM node before invoking elmish.attributes to compare
+  const clone = div.cloneNode(true);
+  div = elmish.add_attributes(null, div); // should not "explode"
+  t.deepEqual(div, clone, "<div> has not been altered");
+  t.end();
+});
+
 //
 // test('elmish.append_childnodes append child DOM nodes to parent', function (t) {
 //   const root = document.getElementById(id);

From b1e3ecf50b8e782631045af8866d45544d6e4a82 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 31 Jul 2018 12:22:05 +0100
Subject: [PATCH 064/164] finish writeup of `Elm`(_ish_) for #44

---
 elmish.md                    |  47 ++-
 examples/todo-list/elmish.js | 312 +++++++++---------
 test/elmish.test.js          | 608 +++++++++++++++++------------------
 3 files changed, 491 insertions(+), 476 deletions(-)

diff --git a/elmish.md b/elmish.md
index 5ef73ee3..ef910bee 100644
--- a/elmish.md
+++ b/elmish.md
@@ -391,8 +391,7 @@ Your `module.exports` statement should now look something like this:
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     empty: empty,
-    mount: mount,
-    init: init
+    mount: mount
   }
 } else { init(document); }
 ```
@@ -455,10 +454,10 @@ _Don't worry, we will walk through building each feature in detail._
 
 A todo list has only 2 _basic_ functions:
 
-1. **Add** a `new` item to the list when the **`[Enter]`** key is pressed
+1. **Add** a `new` item to the list (when the **`[Enter]`** key is pressed)
 2. **Check-off** an item as "**completed**" (_done/finished_)
 
-> **Add** item and **Check-off** is _exactly_ the "functionality"
+> **Add** item and "**Check-off**" is _exactly_ the "functionality"
 you would have in a _paper_-based Todo List.
 
 #### TodoMVC "Advanced" Functionality
@@ -554,6 +553,8 @@ This is a "copy-paste" of the _generated_ code including the Todo items:
 Let's split each one of these elements into it's own `function`
 (_with any necessary "helpers"_) in the order they appear.
 
+> For a "checklist" of these features see: https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/44
+
 When building a House we don't think "build house" as our _first_ action. <br />
 _Instead_ we think: what are the "foundations" that need to be in place
 ***before*** we lay the _first_ "brick"?
@@ -665,7 +666,7 @@ take a moment to think of how _you_ would write
 the `add_attributes` function to apply a CSS `class` to an element. <br />
 
 If you can, make the test _pass_
-by writing the `add_attributes` function.
+by writing the `add_attributes` function. <br />
 (_don't forget to_ `export` _the function at the bottom of the file_).
 
 If you get "stuck", checkout the _complete_ example:
@@ -681,7 +682,6 @@ the whole point of having a step-by-step tutorial
 is that you can check if you get "stuck",
 but you should only check _after_ making
 a good attempt to write the code _yourself_.
-<br />
 
 > **Note 2**: The `add_attributes` function is "impure" as it "mutates"
 the target DOM `node`, this is more of a "fact of life" in JavaScript,
@@ -705,7 +705,7 @@ Once you make the test _pass_ you _should_ see the following in your Terminal:
 
 The `<input>` form element (_where we create new Todo List items_)
 has a helpful `placeholder` attribute _prompting_ us with a question:
-"***What needs to be done?***"
+"_What needs to be done?_"
 
 Add the following test to the `test/elmish.test.js` file: <br />
 
@@ -798,7 +798,7 @@ we will _know_ that the `switch` is "_incomplete_". <br />
 and not having to"debate" or "discuss" the "merits" of it means
 we can have _confidence_ in the code.
 
-#### Test `null` Attribute Value in `add_attributes` Function
+#### Test `null` Attribute Argument (`attrlist`) in `add_attributes` Function
 
 Since JavaScript is _not_ statically/strictly typed we need to _consider_
 the situation where someone might _accidentally_ pass a `null` value.
@@ -867,6 +867,9 @@ In your `package.json` file add:
 Now whenever you `commit` your code, your tests will run
 and `istanbul` will check the test coverage level for you.
 
+Let's get back to our `add_attributes` function!
+
+<br />
 
 #### Input `autofocus`
 
@@ -894,7 +897,8 @@ test.only('elmish.add_attributes add "autofocus" attribute', function (t) {
 });
 ```
 
-Write the necessary code to make this test _pass_ in `elmish.js`.
+Write the necessary code to make this test _pass_
+as a `case` in `add_attributes` in `elmish.js`.
 
 Relevant reading:
 + `<input>` attributes:
@@ -973,6 +977,7 @@ test.only('elmish.add_attributes set "for" attribute <label> element', function
 Add the "`case`" in the `add_attributes` function's `switch` statement
 to make this test _pass_ in `elmish.js`.
 
+<br />
 
 #### `<input>` attribute `type`
 
@@ -993,11 +998,13 @@ test('elmish.add_attributes type="checkbox" on <input> element', function (t) {
 });
 ```
 
-Write the "case" in to make this test _pass_ in `elmish.js`.
+Write the "case" in `add_attributes` to make this test _pass_ in `elmish.js`.
 
-`<input>` attribute `type`:
+Relevant reading
++ `<input>` attribute `type`:
 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes
 
+<br />
 
 #### Add `style` attribute to HTML element?
 
@@ -1035,8 +1042,9 @@ test.only('elmish.add_attributes apply style="display: block;"', function (t) {
 Write the "case" in to make this test _pass_ in `elmish.js`.
 
 If you get "stuck", checkout:
-https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js <br />
+https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js
 
+<br />
 
 #### `checked=true` attribute for "complete"/"done" items
 
@@ -1073,6 +1081,8 @@ and is **more intention revealing** to maintainers._"
 For more detail on the `<input type="checkbox">`
 see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
 
+<br />
+
 #### Set `href` on `<a>` (anchor) element
 
 The "filters" in the `<footer>` of TodoMVC contain 3 links ("anchors") `<a>`
@@ -1111,6 +1121,7 @@ Useful knowledge:
 + Why: https://stackoverflow.com/questions/4855168/what-is-href-and-why-is-it-used
 + How:  https://stackoverflow.com/questions/4689344/how-can-i-add-href-attribute-to-a-link-dynamically-using-javascript
 
+<br />
 
 ### `append_childnodes`
 
@@ -1567,7 +1578,7 @@ Consider the following JSDOC for the `route` function:
 
 #### `route` _Test_!
 
-Add the following _test_ to your `test/elmish.test.js` file: <br />:
+Add the following _test_ to your `test/elmish.test.js` file: <br />
 
 ```js
 test.only('elmish.route updates the url hash and sets history', function (t) {
@@ -1596,7 +1607,7 @@ test.only('elmish.route updates the url hash and sets history', function (t) {
 #### `route` Implementation (_to make test(s) pass_)
 
 The code to make these tests pass is only 3 or 4 lines.
-(_depending on your implementation ..._)
+(_depending on your implementation ..._) <br />
 Provided the tests pass and you haven't "hard coded" the `return`,
 there is no "wrong answer".
 Try and figure it out for yourself before checking a solution.
@@ -1781,8 +1792,14 @@ to make the test pass.
 refer to the completed code:
 [/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
 
+<br />
+
+That's it for now! `Elm`(_ish_) is "ready" to be _used_
+for our TodoMVC App!
+
+<br />
 
-### Why _Not_ use HTML5 `<template>`
+### Why _Not_ use HTML5 `<template>` ??
 
 Templates are an _awesome_ feature in HTML5 which
 allow the creation of reusable markup!
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index bbd67788..2124918a 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -52,36 +52,36 @@ function add_attributes (attrlist, node) {
     attrlist.forEach(function (attr) { // apply all props in array
       var a = attr.split('=');
       switch(a[0]) {
-        // case 'autofocus':
-        //   node.autofocus = "";
-        //   node.focus();
-        //   break;
-        // case 'checked':
-        //   node.checked = (a[1] === 'true' ? true : false);
+        case 'autofocus':
+          node.autofocus = "";
+          node.focus();
+          break;
+        case 'checked':
+          node.checked = (a[1] === 'true' ? true : false);
         case 'class':
           node.className = a[1]; // apply CSS classes
           break;
-        // case 'data-id':
-        //   node.setAttribute('data-id', a[1]); // add data-id e.g: to <li>
-        //   break;
-        // case 'for':
-        //   node.setAttribute('for', a[1]); // e.g: <label for="toggle-all">
-        //   break;
-        // case 'href':
-        //   node.href = a[1]; // e.g: <a href="#/active">Active</a>
-        //   break;
-        // case 'id':
-        //   node.id = a[1]; // apply element id e.g: <input id="toggle-all">
-        //   break;
+        case 'data-id':
+          node.setAttribute('data-id', a[1]); // add data-id e.g: to <li>
+          break;
+        case 'for':
+          node.setAttribute('for', a[1]); // e.g: <label for="toggle-all">
+          break;
+        case 'href':
+          node.href = a[1]; // e.g: <a href="#/active">Active</a>
+          break;
+        case 'id':
+          node.id = a[1]; // apply element id e.g: <input id="toggle-all">
+          break;
         case 'placeholder':
           node.placeholder = a[1]; // add placeholder to <input> element
           break;
-        // case 'style':
-        //   node.setAttribute("style", a[1]); // <div style="display: block;">
-        //   break;
-        // case 'type':
-        //   node.setAttribute('type', a[1]); // <input id="go" type="checkbox">
-        //   break;
+        case 'style':
+          node.setAttribute("style", a[1]); // <div style="display: block;">
+          break;
+        case 'type':
+          node.setAttribute('type', a[1]); // <input id="go" type="checkbox">
+          break;
         default:
           break;
       }
@@ -90,146 +90,146 @@ function add_attributes (attrlist, node) {
   return node;
 }
 
-// /**
-//  * `append_childnodes` appends an array of HTML elements to a parent DOM node.
-//  * @param  {Array.<Object>} childnodes array of child DOM nodes.
-//  * @param  {Object} parent the "parent" DOM node where children will be added.
-//  * @return {Object} returns parent DOM node with appended children
-//  * @example
-//  * // returns the parent node with the "children" appended
-//  * var parent = elmish.append_childnodes([div, p, section], parent);
-//  */
-// function append_childnodes (childnodes, parent) {
-//   if(childnodes &&
-//       Object.prototype.toString.call( childnodes ) === '[object Array]'
-//       && childnodes.length > 0) {
-//     childnodes.forEach(function (el) { parent.appendChild(el) });
-//   }
-//   return parent;
-// }
-//
-// /**
-//  * create_element is a "helper" function to "DRY" HTML element creation code
-//  * creat *any* element with attributes and childnodes.
-//  * @param {String} type of element to be created e.g: 'div', 'section'
-//  * @param {Array.<String>} attrlist list of attributes to be applied to the node
-//  * @param {Array.<Object>} childnodes array of child DOM nodes.
-//  * @return {Object} returns the <section> DOM node with appended children
-//  * @example
-//  * // returns the parent node with the "children" appended
-//  * var div = elmish.create_element('div', ["class=todoapp"], [h1, input]);
-//  */
-// function create_element (type, attrlist, childnodes) {
-//   return append_childnodes(childnodes,
-//     add_attributes(attrlist, document.createElement(type))
-//   );
-// }
-//
-// /**
-//  * section creates a <section> HTML element with attributes and childnodes
-//  * @param {Array.<String>} attrlist list of attributes to be applied to the node
-//  * @param {Array.<Object>} childnodes array of child DOM nodes.
-//  * @return {Object} returns the <section> DOM node with appended children
-//  * @example
-//  * // returns <section> DOM element with attributes applied & children appended
-//  * var section = elmish.section(["class=todoapp"], [h1, input]);
-//  */
-// function section (attrlist, childnodes) {
-//   return create_element('section', attrlist, childnodes);
-// }
-// // these are a *bit* repetitive, if you know a better way, please open an issue!
-// function a (attrlist, childnodes) {
-//   return create_element('a', attrlist, childnodes);
-// }
-//
-// function button (attrlist, childnodes) {
-//   return create_element('button', attrlist, childnodes);
-// }
-//
-// function div (attrlist, childnodes) {
-//   return create_element('div', attrlist, childnodes);
-// }
-//
-// function footer (attrlist, childnodes) {
-//   return create_element('footer', attrlist, childnodes);
-// }
-//
-// function header (attrlist, childnodes) {
-//   return create_element('header', attrlist, childnodes);
-// }
-//
-// function h1 (attrlist, childnodes) {
-//   return create_element('h1', attrlist, childnodes);
-// }
-//
-// function input (attrlist, childnodes) {
-//   return create_element('input', attrlist, childnodes);
-// }
-//
-// function label (attrlist, childnodes) {
-//   return create_element('label', attrlist, childnodes);
-// }
-//
-// function li (attrlist, childnodes) {
-//   return create_element('li', attrlist, childnodes);
-// }
-//
-// function span (attrlist, childnodes) {
-//   return create_element('span', attrlist, childnodes);
-// }
-//
-// function strong (text_str) {
-//   return create_element('strong', [], text(text_str));
-// }
-//
-// function text (text) {
-//   return document.createTextNode(text);
-// }
-//
-// function ul (attrlist, childnodes) {
-//   return create_element('ul', attrlist, childnodes);
-// }
-//
-// /**
-//  * route sets the hash portion of the URL in a web browser.
-//  * @param {Object} model - the current state of the application.
-//  * @param {String} title - the title of the "page" being navigated to
-//  * @param {String} hash - the hash (URL) to be navigated to.
-//  * @return {Object} new_state - state with hash updated to the *new* hash.
-//  * @example
-//  * // returns the state object with updated hash value:
-//  * var new_state = elmish.route(model, 'Active', '#/active');
-//  */
-// function route (model, title, hash) {
-//   window.location.hash = hash;
-//   var new_state = JSON.parse(JSON.stringify(model)); // clone model
-//   new_state.hash = hash;
-//   return new_state;
-// }
+/**
+ * `append_childnodes` appends an array of HTML elements to a parent DOM node.
+ * @param  {Array.<Object>} childnodes array of child DOM nodes.
+ * @param  {Object} parent the "parent" DOM node where children will be added.
+ * @return {Object} returns parent DOM node with appended children
+ * @example
+ * // returns the parent node with the "children" appended
+ * var parent = elmish.append_childnodes([div, p, section], parent);
+ */
+function append_childnodes (childnodes, parent) {
+  if(childnodes &&
+      Object.prototype.toString.call( childnodes ) === '[object Array]'
+      && childnodes.length > 0) {
+    childnodes.forEach(function (el) { parent.appendChild(el) });
+  }
+  return parent;
+}
+
+/**
+ * create_element is a "helper" function to "DRY" HTML element creation code
+ * creat *any* element with attributes and childnodes.
+ * @param {String} type of element to be created e.g: 'div', 'section'
+ * @param {Array.<String>} attrlist list of attributes to be applied to the node
+ * @param {Array.<Object>} childnodes array of child DOM nodes.
+ * @return {Object} returns the <section> DOM node with appended children
+ * @example
+ * // returns the parent node with the "children" appended
+ * var div = elmish.create_element('div', ["class=todoapp"], [h1, input]);
+ */
+function create_element (type, attrlist, childnodes) {
+  return append_childnodes(childnodes,
+    add_attributes(attrlist, document.createElement(type))
+  );
+}
+
+/**
+ * section creates a <section> HTML element with attributes and childnodes
+ * @param {Array.<String>} attrlist list of attributes to be applied to the node
+ * @param {Array.<Object>} childnodes array of child DOM nodes.
+ * @return {Object} returns the <section> DOM node with appended children
+ * @example
+ * // returns <section> DOM element with attributes applied & children appended
+ * var section = elmish.section(["class=todoapp"], [h1, input]);
+ */
+function section (attrlist, childnodes) {
+  return create_element('section', attrlist, childnodes);
+}
+// these are a *bit* repetitive, if you know a better way, please open an issue!
+function a (attrlist, childnodes) {
+  return create_element('a', attrlist, childnodes);
+}
+
+function button (attrlist, childnodes) {
+  return create_element('button', attrlist, childnodes);
+}
+
+function div (attrlist, childnodes) {
+  return create_element('div', attrlist, childnodes);
+}
+
+function footer (attrlist, childnodes) {
+  return create_element('footer', attrlist, childnodes);
+}
+
+function header (attrlist, childnodes) {
+  return create_element('header', attrlist, childnodes);
+}
+
+function h1 (attrlist, childnodes) {
+  return create_element('h1', attrlist, childnodes);
+}
+
+function input (attrlist, childnodes) {
+  return create_element('input', attrlist, childnodes);
+}
+
+function label (attrlist, childnodes) {
+  return create_element('label', attrlist, childnodes);
+}
+
+function li (attrlist, childnodes) {
+  return create_element('li', attrlist, childnodes);
+}
+
+function span (attrlist, childnodes) {
+  return create_element('span', attrlist, childnodes);
+}
+
+function strong (text_str) {
+  return create_element('strong', [], text(text_str));
+}
+
+function text (text) {
+  return document.createTextNode(text);
+}
+
+function ul (attrlist, childnodes) {
+  return create_element('ul', attrlist, childnodes);
+}
+
+/**
+ * route sets the hash portion of the URL in a web browser.
+ * @param {Object} model - the current state of the application.
+ * @param {String} title - the title of the "page" being navigated to
+ * @param {String} hash - the hash (URL) to be navigated to.
+ * @return {Object} new_state - state with hash updated to the *new* hash.
+ * @example
+ * // returns the state object with updated hash value:
+ * var new_state = elmish.route(model, 'Active', '#/active');
+ */
+function route (model, title, hash) {
+  window.location.hash = hash;
+  var new_state = JSON.parse(JSON.stringify(model)); // clone model
+  new_state.hash = hash;
+  return new_state;
+}
 
 /* module.exports is needed to run the functions using Node.js for testing! */
 /* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     add_attributes: add_attributes,
-    // append_childnodes: append_childnodes,
-    // a: a,
-    // button: button,
-    // div: div,
+    append_childnodes: append_childnodes,
+    a: a,
+    button: button,
+    div: div,
     empty: empty,
-    // footer: footer,
-    // input: input,
-    // h1, h1,
-    // header: header,
-    // label: label,
-    // li: li,
+    footer: footer,
+    input: input,
+    h1, h1,
+    header: header,
+    label: label,
+    li: li,
     mount: mount,
-    // route: route,
-    // section: section,
-    // span: span,
-    // strong: strong,
-    // text: text,
-    // ul: ul
+    route: route,
+    section: section,
+    span: span,
+    strong: strong,
+    text: text,
+    ul: ul
   }
 }
 
diff --git a/test/elmish.test.js b/test/elmish.test.js
index c2afb3b6..d0c1dbc1 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -48,21 +48,21 @@ test('elmish.mount app expect state to be Zero', function (t) {
   elmish.empty(root); // clean up after tests
   t.end()
 });
-//
-//
-// test('elmish.add_attributes adds "autofocus" attribute', function (t) {
-//   document.getElementById(id).appendChild(
-//     elmish.add_attributes(["class=new-todo", "autofocus", "id=new"],
-//       document.createElement('input')
-//     )
-//   );
-//   // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
-//   t.equal(document.getElementById('new'), document.activeElement,
-//     '<input autofocus> is "activeElement"');
-//   elmish.empty(document.getElementById(id));
-//   t.end();
-// });
-//
+
+
+test('elmish.add_attributes adds "autofocus" attribute', function (t) {
+  document.getElementById(id).appendChild(
+    elmish.add_attributes(["class=new-todo", "autofocus", "id=new"],
+      document.createElement('input')
+    )
+  );
+  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
+  t.equal(document.getElementById('new'), document.activeElement,
+    '<input autofocus> is "activeElement"');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+
 test('elmish.add_attributes applies HTML class attribute to el', function (t) {
   const root = document.getElementById(id);
   let div = document.createElement('div');
@@ -74,36 +74,36 @@ test('elmish.add_attributes applies HTML class attribute to el', function (t) {
   t.equal(nodes.length, 1, "<div> has 'apptastic' CSS class applied");
   t.end();
 });
-//
-// test('elmish.add_attributes applies id HTML attribute to a node', function (t) {
-//   const root = document.getElementById(id);
-//   let el = document.createElement('section');
-//   el = elmish.add_attributes(["id=myid"], el);
-//   const text = 'hello world!'
-//   var txt = document.createTextNode(text);
-//   el.appendChild(txt);
-//   root.appendChild(el);
-//   const actual = document.getElementById('myid').textContent;
-//   t.equal(actual, text, "<section> has 'myid' id attribute");
-//   elmish.empty(root); // clear the "DOM"/"state" before next test
-//   t.end();
-// });
-//
-// test('elmish.add_attributes applies multiple attribute to node', function (t) {
-//   const root = document.getElementById(id);
-//   elmish.empty(root);
-//   let el = document.createElement('span');
-//   el = elmish.add_attributes(["id=myid", "class=totes mcawesome"], el);
-//   const text = 'hello world'
-//   var txt = document.createTextNode(text);
-//   el.appendChild(txt);
-//   root.appendChild(el);
-//   const actual = document.getElementById('myid').textContent;
-//   t.equal(actual, text, "<section> has 'myid' id attribute");
-//   t.equal(el.className, 'totes mcawesome', "CSS class applied: ", el.className);
-//   t.end();
-// });
-//
+
+test('elmish.add_attributes applies id HTML attribute to a node', function (t) {
+  const root = document.getElementById(id);
+  let el = document.createElement('section');
+  el = elmish.add_attributes(["id=myid"], el);
+  const text = 'hello world!'
+  var txt = document.createTextNode(text);
+  el.appendChild(txt);
+  root.appendChild(el);
+  const actual = document.getElementById('myid').textContent;
+  t.equal(actual, text, "<section> has 'myid' id attribute");
+  elmish.empty(root); // clear the "DOM"/"state" before next test
+  t.end();
+});
+
+test('elmish.add_attributes applies multiple attribute to node', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let el = document.createElement('span');
+  el = elmish.add_attributes(["id=myid", "class=totes mcawesome"], el);
+  const text = 'hello world'
+  var txt = document.createTextNode(text);
+  el.appendChild(txt);
+  root.appendChild(el);
+  const actual = document.getElementById('myid').textContent;
+  t.equal(actual, text, "<section> has 'myid' id attribute");
+  t.equal(el.className, 'totes mcawesome', "CSS class applied: ", el.className);
+  t.end();
+});
+
 test('elmish.add_attributes set placeholder on <input> element', function (t) {
   const root = document.getElementById(id);
   let input = document.createElement('input');
@@ -115,88 +115,88 @@ test('elmish.add_attributes set placeholder on <input> element', function (t) {
   t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
   t.end();
 });
-//
-// test('elmish.add_attributes set data-id on <li> element', function (t) {
-//   const root = document.getElementById(id);
-//   let li = document.createElement('li');
-//   li.id = 'task1';
-//   li = elmish.add_attributes(["data-id=123"], li);
-//   root.appendChild(li);
-//   const data_id = document.getElementById('task1').getAttribute("data-id");
-//   t.equal(data_id, '123', "data-id successfully added to <li> element");
-//   t.end();
-// });
-//
-// test('elmish.add_attributes set "for" attribute <label> element', function (t) {
-//   const root = document.getElementById(id);
-//   let li = document.createElement('li');
-//   li.id = 'toggle';
-//   li = elmish.add_attributes(["for=toggle-all"], li);
-//   root.appendChild(li);
-//   const label_for = document.getElementById('toggle').getAttribute("for");
-//   t.equal(label_for, "toggle-all", '<label for="toggle-all">');
-//   t.end();
-// });
-//
-// test('elmish.add_attributes type="checkbox" on <input> element', function (t) {
-//   const root = document.getElementById(id);
-//   let input = document.createElement('input');
-//   input = elmish.add_attributes(["type=checkbox", "id=toggle-all"], input);
-//   root.appendChild(input);
-//   const type_atrr = document.getElementById('toggle-all').getAttribute("type");
-//   t.equal(type_atrr, "checkbox", '<input id="toggle-all" type="checkbox">');
-//   t.end();
-// });
-//
-// test('elmish.add_attributes apply style="display: block;"', function (t) {
-//   const root = document.getElementById(id);
-//   elmish.empty(root);
-//   let sec = document.createElement('section');
-//   root.appendChild(
-//     elmish.add_attributes(["id=main", "style=display: block;"], sec)
-//   );
-//   const style = window.getComputedStyle(document.getElementById('main'));
-//   t.equal(style._values.display, 'block', 'style="display: block;" applied!')
-//   t.end();
-// });
-//
-// test('elmish.add_attributes checked=true on "done" item', function (t) {
-//   const root = document.getElementById(id);
-//   elmish.empty(root);
-//   let input = document.createElement('input');
-//   input = elmish.add_attributes(["type=checkbox", "id=item1", "checked=true"],
-//     input);
-//   root.appendChild(input);
-//   const checked = document.getElementById('item1').checked;
-//   t.equal(checked, true, '<input type="checkbox" checked=true>');
-//   // test "checked=false" so we know we are able to "toggle" a todo item:
-//   root.appendChild(
-//     elmish.add_attributes(
-//       ["type=checkbox", "id=item2", "checked=false"],
-//       document.createElement('input')
-//     )
-//   );
-//   t.equal(document.getElementById('item2').checked, false, 'checked=false');
-//   t.end();
-// });
-//
-// test('elmish.add_attributes <a href="#/active">Active</a>', function (t) {
-//   const root = document.getElementById(id);
-//   elmish.empty(root);
-//   root.appendChild(
-//     elmish.add_attributes(["href=#/active", "class=selected", "id=active"],
-//       document.createElement('a')
-//     )
-//   );
-//   // note: "about:blank" is the JSDOM default "window.location.href"
-//   console.log('JSDOM window.location.href:', window.location.href);
-//   // so when an href is set *relative* to this it becomes "about:blank#/my-link"
-//   // so we *remove* it before the assertion below, but it works fine in browser!
-//   const href = document.getElementById('active').href.replace('about:blank', '')
-//   t.equal(href, "#/active", 'href="#/active" applied to "active" link');
-//   t.end();
-// });
-//
+
+test('elmish.add_attributes set data-id on <li> element', function (t) {
+  const root = document.getElementById(id);
+  let li = document.createElement('li');
+  li.id = 'task1';
+  li = elmish.add_attributes(["data-id=123"], li);
+  root.appendChild(li);
+  const data_id = document.getElementById('task1').getAttribute("data-id");
+  t.equal(data_id, '123', "data-id successfully added to <li> element");
+  t.end();
+});
+
+test('elmish.add_attributes set "for" attribute <label> element', function (t) {
+  const root = document.getElementById(id);
+  let li = document.createElement('li');
+  li.id = 'toggle';
+  li = elmish.add_attributes(["for=toggle-all"], li);
+  root.appendChild(li);
+  const label_for = document.getElementById('toggle').getAttribute("for");
+  t.equal(label_for, "toggle-all", '<label for="toggle-all">');
+  t.end();
+});
+
+test('elmish.add_attributes type="checkbox" on <input> element', function (t) {
+  const root = document.getElementById(id);
+  let input = document.createElement('input');
+  input = elmish.add_attributes(["type=checkbox", "id=toggle-all"], input);
+  root.appendChild(input);
+  const type_atrr = document.getElementById('toggle-all').getAttribute("type");
+  t.equal(type_atrr, "checkbox", '<input id="toggle-all" type="checkbox">');
+  t.end();
+});
+
+test('elmish.add_attributes apply style="display: block;"', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let sec = document.createElement('section');
+  root.appendChild(
+    elmish.add_attributes(["id=main", "style=display: block;"], sec)
+  );
+  const style = window.getComputedStyle(document.getElementById('main'));
+  t.equal(style._values.display, 'block', 'style="display: block;" applied!')
+  t.end();
+});
+
+test('elmish.add_attributes checked=true on "done" item', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let input = document.createElement('input');
+  input = elmish.add_attributes(["type=checkbox", "id=item1", "checked=true"],
+    input);
+  root.appendChild(input);
+  const checked = document.getElementById('item1').checked;
+  t.equal(checked, true, '<input type="checkbox" checked=true>');
+  // test "checked=false" so we know we are able to "toggle" a todo item:
+  root.appendChild(
+    elmish.add_attributes(
+      ["type=checkbox", "id=item2", "checked=false"],
+      document.createElement('input')
+    )
+  );
+  t.equal(document.getElementById('item2').checked, false, 'checked=false');
+  t.end();
+});
+
+test('elmish.add_attributes <a href="#/active">Active</a>', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  root.appendChild(
+    elmish.add_attributes(["href=#/active", "class=selected", "id=active"],
+      document.createElement('a')
+    )
+  );
+  // note: "about:blank" is the JSDOM default "window.location.href"
+  console.log('JSDOM window.location.href:', window.location.href);
+  // so when an href is set *relative* to this it becomes "about:blank#/my-link"
+  // so we *remove* it before the assertion below, but it works fine in browser!
+  const href = document.getElementById('active').href.replace('about:blank', '')
+  t.equal(href, "#/active", 'href="#/active" applied to "active" link');
+  t.end();
+});
+
 /** DEFAULT BRANCH **/
 test('test default branch of elmish.add_attributes (no effect)', function (t) {
   const root = document.getElementById(id);
@@ -221,149 +221,147 @@ test('test elmish.add_attributes attrlist null (no effect)', function (t) {
   t.end();
 });
 
-//
-// test('elmish.append_childnodes append child DOM nodes to parent', function (t) {
-//   const root = document.getElementById(id);
-//   elmish.empty(root); // clear the test DOM before!
-//   let div = document.createElement('div');
-//   let p = document.createElement('p');
-//   let section = document.createElement('section');
-//   elmish.append_childnodes([div, p, section], root);
-//   t.equal(root.childElementCount, 3, "Root element " + id + " has 3 child els");
-//   t.end();
-// });
-//
-// test('elmish.section creates a <section> HTML element', function (t) {
-//   const p = document.createElement('p');
-//   p.id = 'para';
-//   const text = 'Hello World!'
-//   const txt = document.createTextNode(text);
-//   p.appendChild(txt);
-//   // create the `<section>` HTML element using our section function
-//   const section = elmish.section(["class=new-todo"], [p])
-//   document.getElementById(id).appendChild(section); // add section with <p>
-//   // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
-//   t.equal(document.getElementById('para').textContent, text,
-//     '<section> <p>' + text + '</p></section> works as expected!');
-//   elmish.empty(document.getElementById(id));
-//   t.end();
-// });
-//
-// test('elmish create <header> view using HTML element functions', function (t) {
-//   const { append_childnodes, section, header, h1, text, input } = elmish;
-//   append_childnodes([
-//     section(["class=todoapp"], [ // array of "child" elements
-//       header(["class=header"], [
-//         h1([], [
-//           text("todos")
-//         ]), // </h1>
-//         input([
-//           "id=new",
-//           "class=new-todo",
-//           "placeholder=What needs to be done?",
-//           "autofocus"
-//         ], []) // <input> is "self-closing"
-//       ]) // </header>
-//     ])
-//   ], document.getElementById(id));
-//
-//   const place = document.getElementById('new').getAttribute('placeholder');
-//   t.equal(place, "What needs to be done?", "placeholder set in <input> el");
-//   t.equal(document.querySelector('h1').textContent, 'todos', '<h1>todos</h1>');
-//   elmish.empty(document.getElementById(id));
-//   t.end();
-// });
-//
-// test('elmish create "main" view using HTML DOM functions', function (t) {
-//   const { section, input, label, ul, li, div, button, text } = elmish;
-//   elmish.append_childnodes([
-//     section(["class=main", "style=display: block;"], [
-//       input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
-//       label(["for=toggle-all"], [ text("Mark all as complete") ]),
-//       ul(["class=todo-list"], [
-//         li(["data-id=123", "class=completed"], [
-//           div(["class=view"], [
-//             input(["class=toggle", "type=checkbox", "checked=true"], []),
-//             label([], [text('Learn The Elm Architecture ("TEA")')]),
-//             button(["class=destroy"])
-//           ]) // </div>
-//         ]), // </li>
-//         li(["data-id=234"], [
-//           div(["class=view"], [
-//             input(["class=toggle", "type=checkbox"], []),
-//             label([], [text("Build TEA Todo List App")]),
-//             button(["class=destroy"])
-//           ]) // </div>
-//         ]) // </li>
-//       ]) // </ul>
-//     ])
-//   ], document.getElementById(id));
-//   const done = document.querySelectorAll('.completed')[0].textContent;
-//   t.equal(done, 'Learn The Elm Architecture ("TEA")', 'Done: Learn "TEA"');
-//   const todo = document.querySelectorAll('.view')[1].textContent;
-//   t.equal(todo, 'Build TEA Todo List App', 'Todo: Build TEA Todo List App');
-//   elmish.empty(document.getElementById(id));
-//   t.end();
-// });
-//
-// test('elmish create <footer> view using HTML DOM functions', function (t) {
-//   const { footer, span, strong, text, ul, li, a, button } = elmish;
-//   elmish.append_childnodes([
-//     footer(["class=footer", "style=display: block;"], [
-//       span(["class=todo-count", "id=count"], [
-//         strong("1"),
-//         text("item left")
-//       ]),
-//       ul(["class=filters"], [
-//         li([], [
-//           a(["href=#/", "class=selected"], [text("All")])
-//         ]),
-//         li([], [
-//           a(["href=#/active"], [text("Active")])
-//         ]),
-//         li([], [
-//           a(["href=#/completed"], [text("Completed")])
-//         ])
-//       ]), // </ul>
-//       button(["class=clear-completed", "style=display:block;"],
-//         [text("Clear completed")]
-//       )
-//     ])
-//   ], document.getElementById(id));
-//
-//   const left = document.getElementById('count').textContent;
-//   t.equal(left, "item left", 'there is 1 todo item left');
-//   const clear = document.querySelectorAll('button')[1].textContent;
-//   t.equal(clear, "Clear completed", '<button> text is "Clear completed"');
-//   const selected = document.querySelectorAll('.selected')[1].textContent;
-//   t.equal(selected, "All", "All is selected by default");
-//   elmish.empty(document.getElementById(id));
-//   t.end();
-// });
-//
-// test('elmish.route updates the url hash and sets history', function (t) {
-//   const initial_hash = window.location.hash
-//   console.log('START window.location.hash:', initial_hash, '(empty string)');
-//   const initial_history_length = window.history.length;
-//   console.log('START window.history.length:', initial_history_length);
-//   // update the URL Hash and Set Browser History
-//   const state = { hash: '' };
-//   const new_hash = '#/active'
-//   const new_state = elmish.route(state, 'Active', new_hash);
-//   console.log('UPDATED window.history.length:', window.history.length);
-//   console.log('UPDATED state:', new_state);
-//   console.log('UPDATED window.location.hash:', window.location.hash);
-//   t.notEqual(initial_hash, window.location.hash, "location.hash has changed!");
-//   t.equal(new_hash, new_state.hash, "state.hash is now: " + new_state.hash);
-//   t.equal(new_hash, window.location.hash, "window.location.hash: "
-//     + window.location.hash);
-//   t.equal(initial_history_length + 1, window.history.length,
-//     "window.history.length increased from: " + initial_history_length + ' to: '
-//     + window.history.length);
-//   t.end();
-// });
-//
-//
+test('elmish.append_childnodes append child DOM nodes to parent', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root); // clear the test DOM before!
+  let div = document.createElement('div');
+  let p = document.createElement('p');
+  let section = document.createElement('section');
+  elmish.append_childnodes([div, p, section], root);
+  t.equal(root.childElementCount, 3, "Root element " + id + " has 3 child els");
+  t.end();
+});
+
+test('elmish.section creates a <section> HTML element', function (t) {
+  const p = document.createElement('p');
+  p.id = 'para';
+  const text = 'Hello World!'
+  const txt = document.createTextNode(text);
+  p.appendChild(txt);
+  // create the `<section>` HTML element using our section function
+  const section = elmish.section(["class=new-todo"], [p])
+  document.getElementById(id).appendChild(section); // add section with <p>
+  // document.activeElement via: https://stackoverflow.com/a/17614883/1148249
+  t.equal(document.getElementById('para').textContent, text,
+    '<section> <p>' + text + '</p></section> works as expected!');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+
+test('elmish create <header> view using HTML element functions', function (t) {
+  const { append_childnodes, section, header, h1, text, input } = elmish;
+  append_childnodes([
+    section(["class=todoapp"], [ // array of "child" elements
+      header(["class=header"], [
+        h1([], [
+          text("todos")
+        ]), // </h1>
+        input([
+          "id=new",
+          "class=new-todo",
+          "placeholder=What needs to be done?",
+          "autofocus"
+        ], []) // <input> is "self-closing"
+      ]) // </header>
+    ])
+  ], document.getElementById(id));
+
+  const place = document.getElementById('new').getAttribute('placeholder');
+  t.equal(place, "What needs to be done?", "placeholder set in <input> el");
+  t.equal(document.querySelector('h1').textContent, 'todos', '<h1>todos</h1>');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+
+test('elmish create "main" view using HTML DOM functions', function (t) {
+  const { section, input, label, ul, li, div, button, text } = elmish;
+  elmish.append_childnodes([
+    section(["class=main", "style=display: block;"], [
+      input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
+      label(["for=toggle-all"], [ text("Mark all as complete") ]),
+      ul(["class=todo-list"], [
+        li(["data-id=123", "class=completed"], [
+          div(["class=view"], [
+            input(["class=toggle", "type=checkbox", "checked=true"], []),
+            label([], [text('Learn The Elm Architecture ("TEA")')]),
+            button(["class=destroy"])
+          ]) // </div>
+        ]), // </li>
+        li(["data-id=234"], [
+          div(["class=view"], [
+            input(["class=toggle", "type=checkbox"], []),
+            label([], [text("Build TEA Todo List App")]),
+            button(["class=destroy"])
+          ]) // </div>
+        ]) // </li>
+      ]) // </ul>
+    ])
+  ], document.getElementById(id));
+  const done = document.querySelectorAll('.completed')[0].textContent;
+  t.equal(done, 'Learn The Elm Architecture ("TEA")', 'Done: Learn "TEA"');
+  const todo = document.querySelectorAll('.view')[1].textContent;
+  t.equal(todo, 'Build TEA Todo List App', 'Todo: Build TEA Todo List App');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+
+test('elmish create <footer> view using HTML DOM functions', function (t) {
+  const { footer, span, strong, text, ul, li, a, button } = elmish;
+  elmish.append_childnodes([
+    footer(["class=footer", "style=display: block;"], [
+      span(["class=todo-count", "id=count"], [
+        strong("1"),
+        text("item left")
+      ]),
+      ul(["class=filters"], [
+        li([], [
+          a(["href=#/", "class=selected"], [text("All")])
+        ]),
+        li([], [
+          a(["href=#/active"], [text("Active")])
+        ]),
+        li([], [
+          a(["href=#/completed"], [text("Completed")])
+        ])
+      ]), // </ul>
+      button(["class=clear-completed", "style=display:block;"],
+        [text("Clear completed")]
+      )
+    ])
+  ], document.getElementById(id));
+
+  const left = document.getElementById('count').textContent;
+  t.equal(left, "item left", 'there is 1 todo item left');
+  const clear = document.querySelectorAll('button')[1].textContent;
+  t.equal(clear, "Clear completed", '<button> text is "Clear completed"');
+  const selected = document.querySelectorAll('.selected')[1].textContent;
+  t.equal(selected, "All", "All is selected by default");
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+
+test('elmish.route updates the url hash and sets history', function (t) {
+  const initial_hash = window.location.hash
+  console.log('START window.location.hash:', initial_hash, '(empty string)');
+  const initial_history_length = window.history.length;
+  console.log('START window.history.length:', initial_history_length);
+  // update the URL Hash and Set Browser History
+  const state = { hash: '' };
+  const new_hash = '#/active'
+  const new_state = elmish.route(state, 'Active', new_hash);
+  console.log('UPDATED window.history.length:', window.history.length);
+  console.log('UPDATED state:', new_state);
+  console.log('UPDATED window.location.hash:', window.location.hash);
+  t.notEqual(initial_hash, window.location.hash, "location.hash has changed!");
+  t.equal(new_hash, new_state.hash, "state.hash is now: " + new_state.hash);
+  t.equal(new_hash, window.location.hash, "window.location.hash: "
+    + window.location.hash);
+  t.equal(initial_history_length + 1, window.history.length,
+    "window.history.length increased from: " + initial_history_length + ' to: '
+    + window.history.length);
+  t.end();
+});
+
 // Testing localStorage requires "polyfil" because:
 // https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
 global.localStorage = { // globals are bad! but a "necessary evil" here ...
@@ -381,38 +379,38 @@ localStorage.setItem('hello', 'world!');
 // // Test mount's localStorage using view and update from counter-reset example
 // // to confirm that our elmish.mount localStorage works and is "generic".
 //
-// test('elmish.mount sets model in localStorage', function (t) {
-//   const { view, update } = require('../examples/counter-reset/counter.js');
-//
-//   const root = document.getElementById(id);
-//   elmish.mount(7, update, view, id);
-//   // the "model" stored in localStorage should be 7 now:
-//   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
-//     "elmish_store is 7 (as expected). initial state saved to localStorage.");
-//   // test that mount still works as expected (check initial state of counter):
-//   const actual = document.getElementById(id).textContent;
-//   const actual_stripped = parseInt(actual.replace('+', '')
-//     .replace('-Reset', ''), 10);
-//   const expected = 7;
-//   t.equal(expected, actual_stripped, "Inital state set to 7.");
-//   // attempting to "re-mount" with a different model value should not work
-//   // because mount should retrieve the value from localStorage
-//   elmish.mount(42, update, view, id); // model (42) should be ignored this time!
-//   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
-//     "elmish_store is 7 (as expected). initial state saved to localStorage.");
-//   // increment the counter
-//   const btn = root.getElementsByClassName("inc")[0]; // click increment button
-//   btn.click(); // Click the Increment button!
-//   const state = parseInt(root.getElementsByClassName('count')[0]
-//     .textContent, 10);
-//   t.equal(state, 8, "State is 8 after increment.");
-//   // the "model" stored in localStorage should also be 8 now:
-//   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-//     "elmish_store is 8 (as expected).");
-//   elmish.empty(root); // reset the DOM to simulate refreshing a browser window
-//   elmish.mount(5, update, view, id); // 5 ignored! read model from localStorage
-//   // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
-//   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-//     "elmish_store still 8 from increment (above) saved in localStorage");
-//   t.end()
-// });
+test('elmish.mount sets model in localStorage', function (t) {
+  const { view, update } = require('../examples/counter-reset/counter.js');
+
+  const root = document.getElementById(id);
+  elmish.mount(7, update, view, id);
+  // the "model" stored in localStorage should be 7 now:
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+    "elmish_store is 7 (as expected). initial state saved to localStorage.");
+  // test that mount still works as expected (check initial state of counter):
+  const actual = document.getElementById(id).textContent;
+  const actual_stripped = parseInt(actual.replace('+', '')
+    .replace('-Reset', ''), 10);
+  const expected = 7;
+  t.equal(expected, actual_stripped, "Inital state set to 7.");
+  // attempting to "re-mount" with a different model value should not work
+  // because mount should retrieve the value from localStorage
+  elmish.mount(42, update, view, id); // model (42) should be ignored this time!
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+    "elmish_store is 7 (as expected). initial state saved to localStorage.");
+  // increment the counter
+  const btn = root.getElementsByClassName("inc")[0]; // click increment button
+  btn.click(); // Click the Increment button!
+  const state = parseInt(root.getElementsByClassName('count')[0]
+    .textContent, 10);
+  t.equal(state, 8, "State is 8 after increment.");
+  // the "model" stored in localStorage should also be 8 now:
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+    "elmish_store is 8 (as expected).");
+  elmish.empty(root); // reset the DOM to simulate refreshing a browser window
+  elmish.mount(5, update, view, id); // 5 ignored! read model from localStorage
+  // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+    "elmish_store still 8 from increment (above) saved in localStorage");
+  t.end()
+});

From 47caf12e169b02fa745be7695e8eb5dfc18591a7 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 1 Aug 2018 05:58:23 +0100
Subject: [PATCH 065/164] add test setup lines to test/todo-app.test.js for #44

---
 test/todo-app.test.js | 8 ++++++++
 1 file changed, 8 insertions(+)
 create mode 100644 test/todo-app.test.js

diff --git a/test/todo-app.test.js b/test/todo-app.test.js
new file mode 100644
index 00000000..3533a387
--- /dev/null
+++ b/test/todo-app.test.js
@@ -0,0 +1,8 @@
+const test = require('tape');       // https://github.com/dwyl/learn-tape
+const fs = require('fs');           // to read html files (see below)
+const path = require('path');       // so we can open files cross-platform
+const html = fs.readFileSync(path.resolve(__dirname,
+  '../examples/todo-list/index.html')); // sample HTML file to initialise JSDOM.
+require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
+const app = require('../examples/todo-list/todo-app.js'); // functions to test
+const id = 'test-app';              // all tests use 'test-app' as root element

From 0ff09c202d521bc028bcd57289224f9eda7f4b2f Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 1 Aug 2018 05:59:14 +0100
Subject: [PATCH 066/164] add sample `model` to todo-list.md for #44

---
 todo-list.md | 79 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 77 insertions(+), 2 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index a0af47e1..c892208e 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1,4 +1,4 @@
-# Elm(ish) Todo List (TodoMVC) Mini App (Real World TDD Tutorial!)
+# Elm(ish) Todo List (TodoMVC) App (_Real World TDD Tutorial!_)
 
 If you've made it this far, give yourself a pat on the back!
 Your persistence is about to pay off as you
@@ -88,6 +88,12 @@ by opening a question you help _everyone_ learn more effectively!
 
 ## _How?_
 
+### `Elm`(_ish_) ?
+
+`Elm`(_ish_)
+[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md)
+
+
 ### Testing?
 
 _Before_ diving into _building_ the Todo List App,
@@ -101,7 +107,76 @@ If you are `new` to either of these tools,
 please see:
 [https://github.com/dwyl/**learn-tape**](https://github.com/dwyl/learn-tape)
 and
-[front-end-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
+[**front-end**-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
+
+
+### Create Files
+
+In your editor/terminal create the following files:
+
++ `test/todo-app.test.js`
++ `examples/todo-list/todo-app.js`
+
+These file names should be self-explanatory, but if unclear,
+`todo-app.test.js` is where we will write the tests for our
+Todo List App.
+`todo-app.js` is where all the JSDOCs and functions
+for our Todo List App will be written.
+
+### Test Setup
+
+In order to run our test(s), we need some "setup" code
+that "requires" the libraries/files so we can _execute_ the functions.
+
+In the `test/todo-app.test.js` file, type the following code:
+```js
+const test = require('tape');       // https://github.com/dwyl/learn-tape
+const fs = require('fs');           // to read html files (see below)
+const path = require('path');       // so we can open files cross-platform
+const html = fs.readFileSync(path.resolve(__dirname,
+  '../examples/todo-list/index.html')); // sample HTML file to initialise JSDOM.
+require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
+const app = require('../examples/todo-list/todo-app.js'); // functions to test
+const id = 'test-app';              // all tests use 'test-app' as root element
+```
+
+> Most of this code should be _familiar_ to you
+if you have followed previous tutorials.
+> If anything is _unclear_ please revisit
+[https://github.com/dwyl/**learn-tape**](https://github.com/dwyl/learn-tape)
+and
+[**front-end**-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
+
+If you attempt to run the test file: `node test/todo-app.test.js`
+you should see no output.
+(_this is expected as we haven't written any tests yet!_)
+
+
+
+### `model`
+
+The `model` for our Todo List App is remarkably simple.
+All we need is an `Object` containing two keys:
+
+```js
+{
+  todos: [
+    { id: 1, title: "Learn Elm Architecture", completed: true },
+    { id: 2, title: "Build Todo List App",    completed: false },
+    { id: 3, title: "Win the Internet!",      completed, false }
+  ],
+  hash: '#/active' // the "route" to display
+}
+```
+
+#### What about `metadata` ?
+
+Rather than storing "metadata"
+(_e.g: the count of active and completed Todo items_)
+we will "compute" (derive) what we _need_ at "runtime",
+this may "waste" a few CPU cycles, but that's "OK"!
+Even on an _ancient_ Android device
+this will only take a milisecond to compute
 
 
 

From e1f98516a84d8c58d474956739d3d4aa660c7c88 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 1 Aug 2018 06:00:48 +0100
Subject: [PATCH 067/164] fix typo in elmish.md

---
 elmish.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elmish.md b/elmish.md
index ef910bee..2bebf7cb 100644
--- a/elmish.md
+++ b/elmish.md
@@ -12,7 +12,7 @@ fully functional front-end _micro_-framework from _scratch_.[<sup>1</sup>](#note
 ## _Why?_
 
 The purpose of building `Elm`(_ish_) is _not_ to "_replace_" Elm
-or to create _yet another_ front-end JS framework!
+or to create [_yet another_ front-end JS framework](https://medium.com/tastejs-blog/yet-another-framework-syndrome-yafs-cf5f694ee070)!
 
 The purpose of _separating_ the `Elm`(_ish_) functions
 into a "micro framework" is to: <br />

From 820250b514c97121ea5723fe410ef6aa2d85722d Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 1 Aug 2018 07:47:58 +0100
Subject: [PATCH 068/164] add section on learning style and three options for
 when people can read the elm(ish) docs/tutorial for #44

---
 examples/todo-list/elmish.js   |  3 +-
 examples/todo-list/todo-app.js | 58 +++++-------------------------
 todo-list.md                   | 66 ++++++++++++++++++++++++++++------
 3 files changed, 66 insertions(+), 61 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 2124918a..7538d677 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -14,6 +14,8 @@ function empty(node) {
   }
 } // this function produces a (DOM) "mutation" but has no other "side effects".
 
+
+
 /**
  * `mount` mounts the app in the "root" DOM Element.
  * @param  {Object} model store of the application's state.
@@ -36,7 +38,6 @@ function mount(model, update, view, root_element_id) {
   localStorage.setItem('elmish_store', JSON.stringify(model)); // save model!
 }
 
-
 /**
 * `add_attributes` applies the desired attribute(s) to the specified DOM node.
 * Note: this function is "impure" because it "mutates" the node.
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index a28d87c4..85f4913e 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -1,3 +1,11 @@
+(function() { // scope functions to prevent naming conflicts
+/* if require is available, it means we are in Node.js Land i.e. testing! */
+/* istanbul ignore next */
+if (typeof require !== 'undefined' ) { // require elm(ish) creating local copy
+  const { a, button, div, empty, footer, input, h1, header, label, li, mount,
+    route, section, span, strong, text, ul } = require('./elmish.js');
+} // in the browser elm(ish) functions are automatically be available
+
 // Define the Component's Actions:
 var Inc = 'inc';                     // increment the counter
 var Dec = 'dec';                     // decrement the counter
@@ -35,55 +43,7 @@ function view(signal, model, root) {
   }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+
 }
 
-// Mount Function receives all MUV and mounts the app in the "root" DOM Element
-function mount(model, update, view, root_element_id) {
-  var root = document.getElementById(root_element_id); // root DOM element
-  function signal(action) {   // signal function takes action
-    return function callback() {     // and returns callback
-      model = update(model, action); // update model according to action
-      view(signal, model, root);     // subsequent re-rendering
-    };
-  };
-  view(signal, model, root);         // render initial model (once)
-}
-
-// The following are "Helper" Functions which each "Do ONLY One Thing" and are
-// used in the "View" function to render the Model (State) to the Browser DOM:
-
-// empty the contents of a given DOM element "node" (before re-rendering)
-function empty(node) {
-  while (node.firstChild) {
-    node.removeChild(node.firstChild);
-  }
-} // Inspired by: stackoverflow.com/a/3955238/1148249
 
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
-function container(index, elements) {
-  var con = document.createElement('section');
-  con.id = index;
-  con.className = 'counter';
-  elements.forEach(function(el) { con.appendChild(el) });
-  return con;
-}
 
-function button(text, signal, action) {
-  var button = document.createElement('button');
-  var text = document.createTextNode(text);    // human-readable button text
-  button.appendChild(text);                    // text goes *inside* not attrib
-  button.className = action.split('-')[0];                   // use action as CSS class
-  button.id = action;
-  // console.log(signal, ' action:', action)
-  button.onclick = signal(action);             // onclick tells how to process
-  return button;                               // return the DOM node(s)
-} // how to create a button in JavaScript: stackoverflow.com/a/8650996/1148249
 
-function div(divid, text) {
-  var div = document.createElement('div');
-  div.id = divid;
-  div.className = divid;
-  if(text !== undefined) { // if text is passed in render it in a "Text Node"
-    var txt = document.createTextNode(text);
-    div.appendChild(txt);
-  }
-  return div;
-}
+})(); // https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
diff --git a/todo-list.md b/todo-list.md
index c892208e..d7d6b5be 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -90,8 +90,31 @@ by opening a question you help _everyone_ learn more effectively!
 
 ### `Elm`(_ish_) ?
 
-`Elm`(_ish_)
+In order to _simplify_ the code for our Todo List App,
+we _abstracted_ much of the "_generic_" code
+into a "front-end micro framework" called `Elm`(_ish_).
+The functions & functionality of `Elm`(_ish_) should be _familiar_ to you
+so you _should_ be able to build the Todo List using the `Elm`(_ish_)
+helper functions e.g: `mount`, `div`, `input` and `route`.
+
+You can _opt_ to _either_:
+**a)** read the `Elm`(_ish_) docs/tutorial
 [`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md)
+***`before`*** building the Todo List App -
+this will give you both TDD practice
+and a deeper understanding of building a micro framework.
+i.e. "**_prospective_ learning**"<br />
+**b)** refer the `Elm`(_ish_) docs/tutorial
+[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md)
+***`while`*** building the Todo List App when you "**_need_ to know**"
+how one of the helper functions works. i.e. "**_contextual_ learning**" <br />
+**c)** **only _consult_** the `Elm`(_ish_) docs/tutorial
+[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md)
+***`if`*** you are "stuck" ***`while`*** building the Todo List App.
+i.e. "**_debug_ learning**" <br />
+
+The choice is yours; there is no "right" way.
+
 
 
 ### Testing?
@@ -110,7 +133,7 @@ and
 [**front-end**-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
 
 
-### Create Files
+#### Create Files
 
 In your editor/terminal create the following files:
 
@@ -123,7 +146,7 @@ Todo List App.
 `todo-app.js` is where all the JSDOCs and functions
 for our Todo List App will be written.
 
-### Test Setup
+#### Test Setup
 
 In order to run our test(s), we need some "setup" code
 that "requires" the libraries/files so we can _execute_ the functions.
@@ -153,30 +176,51 @@ you should see no output.
 
 
 
+
 ### `model`
 
 The `model` for our Todo List App is remarkably simple.
-All we need is an `Object` containing two keys:
+All we need is an `Object` containing two keys `todos` and `hash`:
 
 ```js
 {
   todos: [
-    { id: 1, title: "Learn Elm Architecture", completed: true },
-    { id: 2, title: "Build Todo List App",    completed: false },
-    { id: 3, title: "Win the Internet!",      completed, false }
+    { id: 1, title: "Learn Elm Architecture", done: true },
+    { id: 2, title: "Build Todo List App",    done: false },
+    { id: 3, title: "Win the Internet!",      done, false }
   ],
   hash: '#/active' // the "route" to display
 }
 ```
 
+
+
 #### What about `metadata` ?
 
-Rather than storing "metadata"
+> Metadata is a set of data that describes
+and gives information about other data.
+https://en.wikipedia.org/wiki/Metadata
+
+There are two types of `metadata` in a Todo List App:
++ `id` - each todo item has an `id`, this is the item's position in the list.
++ count - the count of items according to their state of _completion_.
+e.g: in the model above there are
+2 items which are "active"
+and 1 which is "done".
+
+Rather than _storing_ "metadata" in the model
 (_e.g: the count of active and completed Todo items_)
-we will "compute" (derive) what we _need_ at "runtime",
-this may "waste" a few CPU cycles, but that's "OK"!
+we will "compute" (derive) it "runtime" to keep the `model` simple.
+This may "waste" a few CPU cycles computing the count but that's "OK"!
 Even on an _ancient_ Android device
-this will only take a milisecond to compute
+this will only take a millisecond to compute,
+will not "slow down" the app or affect UX.
+
+
+
+
+
+
 
 
 

From 39779b2a0a147fc6ce9912393d5aad243fbded18 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 1 Aug 2018 15:12:17 +0100
Subject: [PATCH 069/164] re-order params of update function in counter.js and
 elmish.js for clarity see:
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/44#issuecomment-409588708

---
 elmish.md                         |  4 ++--
 examples/counter-reset/counter.js |  4 ++--
 test/counter-reset.test.js        | 14 +++++++-------
 3 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/elmish.md b/elmish.md
index 2bebf7cb..1bffb4dc 100644
--- a/elmish.md
+++ b/elmish.md
@@ -373,7 +373,7 @@ function mount(model, update, view, root_element_id) {
   var root = document.getElementById(root_element_id); // root DOM element
   function signal(action) {                     // signal function takes action
     return function callback() {                // and returns callback
-      var updatedModel = update(model, action); // update model for the action
+      var updatedModel = update(action, model); // update model for the action
       empty(root);                              // clear root el before rerender
       view(signal, updatedModel, root);         // subsequent re-rendering
     };
@@ -1701,7 +1701,7 @@ function mount(model, update, view, root_element_id) {
   var root = document.getElementById(root_element_id); // root DOM element
   function signal(action) {                     // signal function takes action
     return function callback() {                // and returns callback
-      var updatedModel = update(model, action); // update model for the action
+      var updatedModel = update(action, model); // update model for the action
       empty(root);                              // clear root el before rerender
       view(signal, updatedModel, root);         // subsequent re-rendering
     };
diff --git a/examples/counter-reset/counter.js b/examples/counter-reset/counter.js
index 2b75e72f..9c55d091 100644
--- a/examples/counter-reset/counter.js
+++ b/examples/counter-reset/counter.js
@@ -3,7 +3,7 @@ var Inc = 'inc';                     // increment the counter
 var Dec = 'dec';                     // decrement the counter
 var Res = 'reset';                   // reset counter: git.io/v9KJk
 
-function update(model, action) {     // Update function takes the current state
+function update (action, model) {     // Update function takes the current state
   switch(action) {                   // and an action (String) runs a switch
     case Inc: return model + 1;      // add 1 to the model
     case Dec: return model - 1;      // subtract 1 from model
@@ -27,7 +27,7 @@ function mount(model, update, view, root_element_id) {
   var root = document.getElementById(root_element_id); // root DOM element
   function signal(action) {          // signal function takes action
     return function callback() {     // and returns callback
-      model = update(model, action); // update model according to action
+      model = update(action, model); // update model according to action
       view(signal, model, root);     // subsequent re-rendering
     };
   };
diff --git a/test/counter-reset.test.js b/test/counter-reset.test.js
index 0a731b25..ace1db6b 100644
--- a/test/counter-reset.test.js
+++ b/test/counter-reset.test.js
@@ -21,20 +21,20 @@ test('Mount app expect state to be Zero', function (t) {
   t.end()
 });
 
-test('Test Update update(0) returns 0 (current state)', function (t) {
-  var result = update(0);
+test('Test Update update("", 0) returns 0 (current state)', function (t) {
+  var result = update('', 0);
   t.equal(result, 0, "Initial state: 0, No Action, Final state: 0");
   t.end();
 });
 
-test('Test Update increment: update(1, "inc") returns 2', function (t) {
-  var result = update(1, "inc");
+test('Test Update increment: update("inc", 1) returns 2', function (t) {
+  var result = update("inc", 1);
   t.equal(result, 2, "Initial state: 1, Increment once, Final state: 2");
   t.end();
 });
 
-test('Test Update decrement: update(3, "dec") returns 2', function (t) {
-  var result = update(1, "dec");
+test('Test Update decrement: update("dec", 1) returns 0', function (t) {
+  var result = update("dec", 1);
   t.equal(result, 0, "Initial state: 1, Decrement once, Final state: 0");
   t.end();
 });
@@ -81,7 +81,7 @@ test('Click reset button resets state to 0', function (t) {
 // Reset Functionality
 
 test('Test reset counter when model/state is 6 returns 0', function(t) {
-  var result = update(6, "reset");
+  var result = update("reset", 6);
   t.equal(result, 0, "counter reset to 0 (Zero)");
   t.end()
 });

From caf8165c8fff528156f79dca3a33f13bac42c4a2 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 2 Aug 2018 12:04:23 +0100
Subject: [PATCH 070/164] [WiP] link back to Todo List from elmish.md & add
 `update` section for #44

---
 elmish.md                      |   2 +
 examples/todo-list/elmish.js   |  10 ++--
 examples/todo-list/todo-app.js |  41 +++++++------
 test/todo-app.test.js          |   7 +++
 todo-list.md                   | 101 ++++++++++++++++++++++++++++++++-
 5 files changed, 135 insertions(+), 26 deletions(-)

diff --git a/elmish.md b/elmish.md
index 1bffb4dc..34a36a1d 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1797,6 +1797,8 @@ refer to the completed code:
 That's it for now! `Elm`(_ish_) is "ready" to be _used_
 for our TodoMVC App!
 
+# [< _Back_ To Todo List App!](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/todo-list.md#how)
+
 <br />
 
 ### Why _Not_ use HTML5 `<template>` ??
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 7538d677..2a2e9415 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -18,16 +18,16 @@ function empty(node) {
 
 /**
  * `mount` mounts the app in the "root" DOM Element.
- * @param  {Object} model store of the application's state.
- * @param  {Function} update how the application state is updated ("controller")
- * @param  {Function} view function that renders HTML/DOM elements with model.
- * @param  {String} root_element_id root DOM element in which the app is mounted
+ * @param {Object} model store of the application's state.
+ * @param {Function} update how the application state is updated ("controller")
+ * @param {Function} view function that renders HTML/DOM elements with model.
+ * @param {String} root_element_id root DOM element in which the app is mounted
  */
 function mount(model, update, view, root_element_id) {
   var root = document.getElementById(root_element_id); // root DOM element
   function signal(action) {                     // signal function takes action
     return function callback() {                // and returns callback
-      var updatedModel = update(model, action); // update model for the action
+      var updatedModel = update(action, model); // update model for the action
       localStorage.setItem('elmish_store', JSON.stringify(updatedModel));
       empty(root);                              // clear root el before rerender
       view(signal, updatedModel, root);         // subsequent re-rendering
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 85f4913e..516ef4c9 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -6,26 +6,23 @@ if (typeof require !== 'undefined' ) { // require elm(ish) creating local copy
     route, section, span, strong, text, ul } = require('./elmish.js');
 } // in the browser elm(ish) functions are automatically be available
 
-// Define the Component's Actions:
-var Inc = 'inc';                     // increment the counter
-var Dec = 'dec';                     // decrement the counter
-var Res = 'reset';                   // reset counter: git.io/v9KJk
+var initial_model = {
+  todos: [],
+  hash: "#/"
+}
 
 function update(model, action) {     // Update function takes the current state
-  var parts = action ? action.split('-') : []; // e.g: inc-0 where 0 is the counter "id"
-  var act = parts[0];
-  var index = parts[1] || 0;
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
-  switch(act) {                   // and an action (String) runs a switch
-    case Inc:
-      new_model.counters[index] = model.counters[index] + 1;
-      break;
-    case Dec:
-      new_model.counters[index] = model.counters[index] - 1;
-      break;
-    case Res: // use ES6 Array.fill to create a new array with values set to 0:
-      new_model.counters[index] = 0;
-      break;
+  switch(action) {                   // and an action (String) runs a switch
+    // case 'CREATE':
+    //   new_model.counters[index] = model.counters[index] + 1;
+    //   break;
+    // case Dec:
+    //   new_model.counters[index] = model.counters[index] - 1;
+    //   break;
+    // case Res: // use ES6 Array.fill to create a new array with values set to 0:
+    //   new_model.counters[index] = 0;
+    //   break;
     default: return model; // if action not defined, return curent state.
   }
   return new_model;
@@ -43,7 +40,15 @@ function view(signal, model, root) {
   }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+
 }
 
-
+/* module.exports is needed to run the functions using Node.js for testing! */
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    model: initial_model,
+    update: update,
+    view: view
+  }
+}
 
 
 })(); // https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 3533a387..47550c0a 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -6,3 +6,10 @@ const html = fs.readFileSync(path.resolve(__dirname,
 require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
 const app = require('../examples/todo-list/todo-app.js'); // functions to test
 const id = 'test-app';              // all tests use 'test-app' as root element
+
+test('todo `model` (Object) has desired keys', function (t) {
+  const keys = Object.keys(app.model);
+  t.deepEqual(keys, ['todos', 'hash'], "`todos` and `hash` keys are present.");
+  t.true(Array.isArray(app.model.todos), "model.todos is an Array")
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index d7d6b5be..6a843266 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -176,10 +176,9 @@ you should see no output.
 
 
 
-
 ### `model`
 
-The `model` for our Todo List App is remarkably simple.
+The `model` for our Todo List App is **_boringly_ simple**.
 All we need is an `Object` containing two keys `todos` and `hash`:
 
 ```js
@@ -192,7 +191,11 @@ All we need is an `Object` containing two keys `todos` and `hash`:
   hash: '#/active' // the "route" to display
 }
 ```
-
+`todos` is an `Array` of `Objects` and each Todo (Array) item
+has 3 keys:
++ `id`: the index in the list.
++ `title`: the title/description of the todo item.
++ `done`: a `boolean` indicating if the item is complete or still "todo".
 
 
 #### What about `metadata` ?
@@ -217,10 +220,102 @@ this will only take a millisecond to compute,
 will not "slow down" the app or affect UX.
 
 
+#### `model` _Test_
+
+Given that the `model` is "just data"
+(
+_it has **no** "**methods**" because `Elm`(ish) is_
+["***Functional***"](https://en.wikipedia.org/wiki/Functional_programming)
+_**not**_
+["***Object Oriented***"](https://en.wikipedia.org/wiki/Object-oriented_programming)
+),
+there is no _functionality_ to test.
+We are merely going to test for the "shape" of the data.
+
+In the `test/todo-app.test.js` file, append following test code:
 
+```js
+test('todo `model` (Object) has desired keys', function (t) {
+  const keys = Object.keys(app.model);
+  t.deepEqual(keys, ['todos', 'hash'], "`todos` and `hash` keys are present.");
+  t.true(Array.isArray(app.model.todos), "model.todos is an Array")
+  t.end();
+});
+```
+
+If you _run_ this test in your terminal:
+```sh
+node test/todo-app.test.js
+```
+You should see _both_ assertions _fail_:
+![model-tests-failing](https://user-images.githubusercontent.com/194400/43508841-e8473e90-9568-11e8-85fd-6e0e30f244cb.png)
+
+
+
+#### `model` _Implementation_
+
+Write the _minimum_ code required to _pass_ this test in `todo-app.js`.
+e.g:
+
+```js
+/**
+ * initial_model is a simple JavaScript Object with two keys and no methods.
+ * it is used both as the "initial" model when mounting the Todo List App
+ * and as the "reset" state when all todos are deleted at once.
+ */
+var initial_model = {
+  todos: [],me
+  hash: "#/"
+}
+
+/* module.exports is needed to run the functions using Node.js for testing! */
+/* istanbul ignore next */
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    model: initial_model
+  }
+}
+```
+
+Once you save the `todo-app.js` file and re-run the tests.
+```sh
+node test/todo-app.test.js
+```
+You _should_ expect to see both assertions _passing_:
+![model-tests-passing](https://user-images.githubusercontent.com/194400/43508894-0df475cc-9569-11e8-8665-14320138ba79.png)
+
+We're off to a _great_ start! Let's tackle some actual _functionality_ next!
+
+<br />
+
+### `update`
+
+The `update` function is the
+["brain"](https://www.youtube.com/results?search_query=Pinky+and+The+Brain)
+of the App.
+
+#### `update` JSDOC
+
+The **`JSDOC`** for our `update` function is:
+```js
+/**
+ * `update` transforms the `model` based on the `action`.
+ * @param {String} action - the desired action to perform on the model.
+ * @param {Object} model - the App's data ("state").
+ * @return {Object} updated_model - the transformed model.
+ */
+
+```
 
+#### `update` Test
 
+As with the `update` in our `counter` example
+the function body is a `switch` statement
+that "decides" how to handle a request based on the `action` (_also known as the "message"_).
 
+Given that we _know_ that our `update` function "skeleton"
+(_because this is the "TEA" pattern_)
+good test to _start_ with is the `default case`.
 
 
 

From 34c2a05cdd33f8a65537fc7c7a85caacc13c8616 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 2 Aug 2018 12:35:50 +0100
Subject: [PATCH 071/164] add code to pass default branch update test for #44

---
 examples/todo-list/todo-app.js | 41 ++++++++++++++-----------
 test/todo-app.test.js          |  7 +++++
 todo-list.md                   | 56 ++++++++++++++++++++++++++++++++--
 3 files changed, 85 insertions(+), 19 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 516ef4c9..9cb2903a 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -11,8 +11,14 @@ var initial_model = {
   hash: "#/"
 }
 
-function update(model, action) {     // Update function takes the current state
-  var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
+/**
+ * `update` transforms the `model` based on the `action`.
+ * @param {String} action - the desired action to perform on the model.
+ * @param {Object} model - the App's data ("state").
+ * @return {Object} updated_model - the transformed model.
+ */
+function update(action, model) {     // Update function takes the current state
+  // var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
   switch(action) {                   // and an action (String) runs a switch
     // case 'CREATE':
     //   new_model.counters[index] = model.counters[index] + 1;
@@ -23,22 +29,23 @@ function update(model, action) {     // Update function takes the current state
     // case Res: // use ES6 Array.fill to create a new array with values set to 0:
     //   new_model.counters[index] = 0;
     //   break;
-    default: return model; // if action not defined, return curent state.
-  }
-  return new_model;
+    default: // if action unrecognised or undefined,
+      return model; // return model unmodified
+  }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
+  // return new_model;
 }
 
-function view(signal, model, root) {
-  empty(root); // clear root element before re-rendering the App (DOM).
-  model.counters.map(function(counter, index) {
-    return container(index, [                // wrap DOM nodes in an "container"
-      button('+', signal, Inc + '-' + index),    // append index to action
-      div('count', counter),       // create div w/ count as text
-      button('-', signal, Dec + '-' + index),    // decrement counter
-      button('Reset', signal, Res + '-' + index) // reset counter
-    ]);
-  }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+
-}
+// function view(signal, model, root) {
+//   empty(root); // clear root element before re-rendering the App (DOM).
+//   model.counters.map(function(counter, index) {
+//     return container(index, [                // wrap DOM nodes in an "container"
+//       button('+', signal, Inc + '-' + index),    // append index to action
+//       div('count', counter),       // create div w/ count as text
+//       button('-', signal, Dec + '-' + index),    // decrement counter
+//       button('Reset', signal, Res + '-' + index) // reset counter
+//     ]);
+//   }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+
+// }
 
 /* module.exports is needed to run the functions using Node.js for testing! */
 /* istanbul ignore next */
@@ -46,7 +53,7 @@ if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     model: initial_model,
     update: update,
-    view: view
+    // view: view
   }
 }
 
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 47550c0a..267204aa 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -13,3 +13,10 @@ test('todo `model` (Object) has desired keys', function (t) {
   t.true(Array.isArray(app.model.todos), "model.todos is an Array")
   t.end();
 });
+
+test('todo `update` default case should return model unmodified', function (t) {
+  const model = JSON.parse(JSON.stringify(app.model));
+  const unmodified_model = app.update('UNKNOWN_ACTION', model);
+  t.deepEqual(model, unmodified_model, "model returned unmodified");
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index 6a843266..bb9b0b8b 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -304,7 +304,6 @@ The **`JSDOC`** for our `update` function is:
  * @param {Object} model - the App's data ("state").
  * @return {Object} updated_model - the transformed model.
  */
-
 ```
 
 #### `update` Test
@@ -314,10 +313,63 @@ the function body is a `switch` statement
 that "decides" how to handle a request based on the `action` (_also known as the "message"_).
 
 Given that we _know_ that our `update` function "skeleton"
-(_because this is the "TEA" pattern_)
+will be a `switch` statement
+(_because that is the "TEA" pattern_)
 good test to _start_ with is the `default case`.
 
+Append following test code in `test/todo-app.test.js`:
+
+```js
+test('todo `update` default case should return model unmodified', function (t) {
+  const model = JSON.parse(JSON.stringify(app.model));
+  const unmodified_model = app.update('UNKNOWN_ACTION', model);
+  t.deepEqual(model, unmodified_model, "model returned unmodified");
+  t.end();
+});
+```
+
+If you _run_ this test in your terminal:
+```sh
+node test/todo-app.test.js
+```
+You should see the assertion _fail_:
+![update-default-branch-test-failing](https://user-images.githubusercontent.com/194400/43580847-b78105c0-964e-11e8-81ac-61a1dd8ec535.png)
+
+#### `update` Function Implementation > `switch default case`
+
+Write the _minimum_ code necessary to pass the test.
+
+> Yes, we could just write:
+```js
+function update (action, model) { return model; }
+```
+And that _would_ make the test _pass_. <br />
+But, in light of the fact that we **know** the `update`
+function body will contain a `switch` statement,
+make the test pass by returning the `model` _unmodified_ in the `default` case.
+
+e.g:
+```js
+/**
+ * `update` transforms the `model` based on the `action`.
+ * @param {String} action - the desired action to perform on the model.
+ * @param {Object} model - the App's data ("state").
+ * @return {Object} updated_model - the transformed model.
+ */
+function update(action, model) {     // Update function takes the current state
+  switch (action) {                  // and an action (String) runs a switch
+    default: // if action unrecognised or undefined,
+      return model; // return model unmodified
+  }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
+}
+```
 
+When you re-run the test(s) in your terminal:
+```sh
+node test/todo-app.test.js
+```
+You should see this assertion pass:
+![update-default-branch-test-passing](https://user-images.githubusercontent.com/194400/43581137-c6aa236e-964f-11e8-96d0-ef724659761e.png)
 
 <!--
 

From 23c9d4726ac5f11dfabf638d2ed9b003dff04c79 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 3 Aug 2018 10:37:31 +0100
Subject: [PATCH 072/164] ADD item acceptance criteria for
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/48 #44

---
 examples/todo-list/todo-app.js |   3 +-
 todo-list.md                   | 116 +++++++++++++++++++++++++++++++--
 2 files changed, 114 insertions(+), 5 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 9cb2903a..56630dbd 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -15,9 +15,10 @@ var initial_model = {
  * `update` transforms the `model` based on the `action`.
  * @param {String} action - the desired action to perform on the model.
  * @param {Object} model - the App's data ("state").
+ * @param {String} data - the data we want to "apply" to the item.
  * @return {Object} updated_model - the transformed model.
  */
-function update(action, model) {     // Update function takes the current state
+function update(action, model, data) {
   // var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
   switch(action) {                   // and an action (String) runs a switch
     // case 'CREATE':
diff --git a/todo-list.md b/todo-list.md
index bb9b0b8b..055305d1 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1,6 +1,6 @@
 # Elm(ish) Todo List (TodoMVC) App (_Real World TDD Tutorial!_)
 
-If you've made it this far, give yourself a pat on the back!
+If you've made it this far, give yourself a pat on the back! <br />
 Your persistence is about to pay off as you
 "_level up_" _both_ your **`JavaScript`** and "TEA" skills!
 
@@ -15,7 +15,7 @@ Documentation and Test Driven Development.
 This will _show_ you that it's not only _possible_
 to write docs and tests _first_,
 you will see _first hand_ that **`code`** is **more concise**,
-well-documented and thus **_easier_ to maintain**
+**well-documented** and thus **_easier_ to maintain**
 and you will get your "work" done ***much faster***.
 
 These are _foundational_ skills that will
@@ -306,7 +306,7 @@ The **`JSDOC`** for our `update` function is:
  */
 ```
 
-#### `update` Test
+#### `update` Test > `default case`
 
 As with the `update` in our `counter` example
 the function body is a `switch` statement
@@ -335,7 +335,7 @@ node test/todo-app.test.js
 You should see the assertion _fail_:
 ![update-default-branch-test-failing](https://user-images.githubusercontent.com/194400/43580847-b78105c0-964e-11e8-81ac-61a1dd8ec535.png)
 
-#### `update` Function Implementation > `switch default case`
+#### `update` Function Implementation > `default case`
 
 Write the _minimum_ code necessary to pass the test.
 
@@ -371,6 +371,114 @@ node test/todo-app.test.js
 You should see this assertion pass:
 ![update-default-branch-test-passing](https://user-images.githubusercontent.com/194400/43581137-c6aa236e-964f-11e8-96d0-ef724659761e.png)
 
+Now that we have a _passing_ test
+for the `default case` in our `update` function,
+we can move on to
+thinking about the first (_and most fundamental_) piece
+of _functionality_ in the Todo List App: Adding an item to the list.
+
+
+### `ADD` an `item` to the Todo List
+
+This is both the _first_ "feature" a "user" will encounter and
+_by_ far the most _used_ feature of a Todo List. <br />
+
+#### `ADD` item _Acceptance Criteria_
+
+Adding a new todo item's text should
+append the item `Object` to the `model.items` Array.
+Such that the `model` is transformed (_data is added_) in the following way:
+
+_BEFORE_:
+```js
+{
+  todos: [],
+  hash: "#/"
+}
+```
+_AFTER_:
+```js
+{
+  todos: [
+    {id: 1, "Add Todo List Item", done: false }
+  ],
+  hash: "#/"
+}
+```
+
+
+#### Hold On, How Does Todo Item _Text_ Get "Passed Into" `update`...?
+
+While thinking of the "Acceptance Criteria"
+for adding an item to the Todo List,
+we _notice_ that our `update` **`JSDOC`**
+and corresponding function "signature" (_defined above_) as:
+```js
+/**
+ * `update` transforms the `model` based on the `action`.
+ * @param {String} action - the desired action to perform on the model.
+ * @param {Object} model - the App's data ("state").
+ * @return {Object} updated_model - the transformed model.
+ */
+function update(action, model) {     // Update function takes the current state
+  switch (action) {                  // and an action (String) runs a switch
+    default:                         // if action unrecognised or undefined,
+      return model;                  // return model unmodified
+  }    // default? https://softwareengineering.stackexchange.com/a/201786/211301
+}
+```
+does not have a **parameter** for passing in the Todo List item Text (`title`),
+i.e. how do we add "data" to the `model`...?
+
+
+That's "_Oh kay_"! (_don't panic_!) <br />
+If we **`try`** to think about implementation up-front,
+we would _invariably_ be "over-thinking"
+it's called "***Waterfall***"".
+
+As you are _about_ to see, we can _easily_ change the function signature,
+in the _next_ test _without affecting_ our exiting (_passing_) test!
+
+As you _practice_ "DDD" & "TDD" you will begin to _appreciate_
+and even _embrace_ the _mental agility_ that comes from
+_not_ "over-thinking" things.
+
+Whenever you encounter a "New Requirement"
+(_or realise that you didn't **fully consider** the **original requirements**_),
+you know that your _suite_ of tests has
+["got your back"](https://www.urbandictionary.com/define.php?term=Got%20your%20back).
+
+
+
+
+#### `ADD` item _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test('`ADD` a new todo item to model.todos Array via `update`', function (t) {
+  const model = JSON.parse(JSON.stringify(app.model)); // initial state
+  const updated_model = app.update('ADD', model, "Add Todo List Item");
+  const expected = { id: 1, title: "Add Todo List Item", done: false }
+  t.deepEqual(model, unmodified_model, "model returned unmodified");
+  t.end();
+});
+```
+
+
+
+
+If you _run_ this test in your terminal:
+```sh
+node test/todo-app.test.js
+```
+You should see the assertion _fail_:
+
+
+#### `ADD` item _Implementation_
+
+
+
 <!--
 
 ## What _Next_?

From dba0be7c92c5097505b9340d36cec4711b98dbd6 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 3 Aug 2018 10:50:30 +0100
Subject: [PATCH 073/164] add section on refactoring update JSDOC and function
 signature or #44 #48 https://youtu.be/gk2yOxTuLck

---
 examples/todo-list/todo-app.js |  2 +-
 todo-list.md                   | 70 ++++++++++++++++++++++++++--------
 2 files changed, 56 insertions(+), 16 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 56630dbd..2852879c 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -14,7 +14,7 @@ var initial_model = {
 /**
  * `update` transforms the `model` based on the `action`.
  * @param {String} action - the desired action to perform on the model.
- * @param {Object} model - the App's data ("state").
+ * @param {Object} model - the App's (current) model (or "state").
  * @param {String} data - the data we want to "apply" to the item.
  * @return {Object} updated_model - the transformed model.
  */
diff --git a/todo-list.md b/todo-list.md
index 055305d1..5c2b6a9c 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -353,14 +353,14 @@ e.g:
 /**
  * `update` transforms the `model` based on the `action`.
  * @param {String} action - the desired action to perform on the model.
- * @param {Object} model - the App's data ("state").
+ * @param {Object} model - the App's (current) model (or "state").
  * @return {Object} updated_model - the transformed model.
  */
-function update(action, model) {     // Update function takes the current state
-  switch (action) {                  // and an action (String) runs a switch
-    default: // if action unrecognised or undefined,
-      return model; // return model unmodified
-  }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
+function update(action, model) {
+ switch (action) {                  // action (String) determines which case
+   default:                         // if action unrecognised or undefined,
+     return model;                  // return model unmodified
+ }    // default? https://softwareengineering.stackexchange.com/a/201786/211301
 }
 ```
 
@@ -406,10 +406,9 @@ _AFTER_:
 }
 ```
 
-
 #### Hold On, How Does Todo Item _Text_ Get "Passed Into" `update`...?
 
-While thinking of the "Acceptance Criteria"
+While considering the "Acceptance Criteria"
 for adding an item to the Todo List,
 we _notice_ that our `update` **`JSDOC`**
 and corresponding function "signature" (_defined above_) as:
@@ -417,19 +416,22 @@ and corresponding function "signature" (_defined above_) as:
 /**
  * `update` transforms the `model` based on the `action`.
  * @param {String} action - the desired action to perform on the model.
- * @param {Object} model - the App's data ("state").
+ * @param {Object} model - the App's (current) model (or "state").
  * @return {Object} updated_model - the transformed model.
  */
-function update(action, model) {     // Update function takes the current state
-  switch (action) {                  // and an action (String) runs a switch
-    default:                         // if action unrecognised or undefined,
-      return model;                  // return model unmodified
-  }    // default? https://softwareengineering.stackexchange.com/a/201786/211301
+function update(action, model) {
+ switch (action) {                  // action (String) determines which case
+   default:                         // if action unrecognised or undefined,
+     return model;                  // return model unmodified
+ }    // default? https://softwareengineering.stackexchange.com/a/201786/211301
 }
 ```
 does not have a **parameter** for passing in the Todo List item Text (`title`),
 i.e. how do we add "data" to the `model`...?
 
+We don't want to "mess with" either of the other two parameters,
+both `action` and `model` have clearly defined
+
 
 That's "_Oh kay_"! (_don't panic_!) <br />
 If we **`try`** to think about implementation up-front,
@@ -446,7 +448,42 @@ _not_ "over-thinking" things.
 Whenever you encounter a "New Requirement"
 (_or realise that you didn't **fully consider** the **original requirements**_),
 you know that your _suite_ of tests has
-["got your back"](https://www.urbandictionary.com/define.php?term=Got%20your%20back).
+"
+[got your](https://www.urbandictionary.com/define.php?term=Got%20your%20back)
+[back](https://youtu.be/gk2yOxTuLck)
+". <br />
+You can "_refactor_" a function's _implementation_ to your heart's content,
+safe in the knowledge that all your _existing_ tests still pass.
+i.e. the _rest_ of the app "**still works**" **_exactly_ as expected**.
+
+With that in mind, let's _amend_ the `update` **`JSDOC`** comment
+and function signature to:
+
+```js
+/**
+ * `update` transforms the `model` based on the `action`.
+ * @param {String} action - the desired action to perform on the model.
+ * @param {Object} model - the App's (current) model (or "state").
+ * @param {String} data - data we want to "apply" to the item. e.g: item Title.
+ * @return {Object} updated_model - the transformed model.
+ */
+function update(action, model, data) {
+  switch (action) {                  // action (String) determines which case
+    default:                         // if action unrecognised or undefined,
+      return model;                  // return model unmodified
+  }    // default? https://softwareengineering.stackexchange.com/a/201786/211301
+}
+```
+
+Without making _any_ other changes, re-run the tests:
+
+```sh
+node test/todo-app.test.js
+```
+You should see this assertion pass:
+![update-default-branch-test-passing](https://user-images.githubusercontent.com/194400/43581137-c6aa236e-964f-11e8-96d0-ef724659761e.png)
+
+
 
 
 
@@ -468,6 +505,9 @@ test('`ADD` a new todo item to model.todos Array via `update`', function (t) {
 
 
 
+
+
+
 If you _run_ this test in your terminal:
 ```sh
 node test/todo-app.test.js

From 4571db0af4aa8149484fda201dd9473f63e0cbc4 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 3 Aug 2018 11:49:13 +0100
Subject: [PATCH 074/164] add update ADD todo item test for #48

---
 examples/todo-list/todo-app.js | 14 ++++++++++----
 test/todo-app.test.js          | 10 ++++++++++
 todo-list.md                   | 23 +++++++++++------------
 3 files changed, 31 insertions(+), 16 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 2852879c..16cd7ece 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -19,10 +19,16 @@ var initial_model = {
  * @return {Object} updated_model - the transformed model.
  */
 function update(action, model, data) {
-  // var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
+  // console.log('model:', model);
+  var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
+  // console.log('new_model:', new_model);
   switch(action) {                   // and an action (String) runs a switch
-    // case 'CREATE':
-    //   new_model.counters[index] = model.counters[index] + 1;
+    // case 'ADD':
+    //   new_model.todos.push({
+    //     id: model.todos.length + 1,
+    //     title: data,
+    //     done: false
+    //   });
     //   break;
     // case Dec:
     //   new_model.counters[index] = model.counters[index] - 1;
@@ -33,7 +39,7 @@ function update(action, model, data) {
     default: // if action unrecognised or undefined,
       return model; // return model unmodified
   }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
-  // return new_model;
+  return new_model;
 }
 
 // function view(signal, model, root) {
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 267204aa..1d9dcd07 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -20,3 +20,13 @@ test('todo `update` default case should return model unmodified', function (t) {
   t.deepEqual(model, unmodified_model, "model returned unmodified");
   t.end();
 });
+
+test('`ADD` a new todo item to model.todos Array via `update`', function (t) {
+  const model = JSON.parse(JSON.stringify(app.model)); // initial state
+  t.equal(model.todos.length, 0, "initial model.todos.length is 0");
+  const updated_model = app.update('ADD', model, "Add Todo List Item");
+  const expected = { id: 1, title: "Add Todo List Item", done: false };
+  t.equal(updated_model.todos.length, 1, "updated_model.todos.length is 1");
+  t.deepEqual(expected, updated_model.todos[0], "Todo list item added.");
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index 5c2b6a9c..cac0743a 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -480,12 +480,10 @@ Without making _any_ other changes, re-run the tests:
 ```sh
 node test/todo-app.test.js
 ```
-You should see this assertion pass:
+_Everything_ should still pass:
 ![update-default-branch-test-passing](https://user-images.githubusercontent.com/194400/43581137-c6aa236e-964f-11e8-96d0-ef724659761e.png)
 
-
-
-
+Congratulations! You just _refactored_ a function (_signature_).
 
 
 #### `ADD` item _Test_
@@ -495,30 +493,31 @@ Append following test code to your `test/todo-app.test.js` file:
 ```js
 test('`ADD` a new todo item to model.todos Array via `update`', function (t) {
   const model = JSON.parse(JSON.stringify(app.model)); // initial state
+  t.equal(model.todos.length, 0, "initial model.todos.length is 0");
   const updated_model = app.update('ADD', model, "Add Todo List Item");
-  const expected = { id: 1, title: "Add Todo List Item", done: false }
-  t.deepEqual(model, unmodified_model, "model returned unmodified");
+  const expected = { id: 1, title: "Add Todo List Item", done: false };
+  t.equal(updated_model.todos.length, 1, "updated_model.todos.length is 1");
+  t.deepEqual(expected, updated_model.todos[0], "Todo list item added.");
   t.end();
 });
 ```
 
-
-
-
-
-
-
 If you _run_ this test in your terminal:
 ```sh
 node test/todo-app.test.js
 ```
 You should see the assertion _fail_:
 
+![update-add-item-test-failing](https://user-images.githubusercontent.com/194400/43639131-206b632c-9713-11e8-83ee-d0ecab0ac4ef.png)
+
+
+
 
 #### `ADD` item _Implementation_
 
 
 
+
 <!--
 
 ## What _Next_?

From a19da15ebb483e6b2deb0e03529ffdf2d19a880d Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 3 Aug 2018 12:14:22 +0100
Subject: [PATCH 075/164] adds sample implementation for update ADD case for
 #48

---
 examples/todo-list/todo-app.js | 23 ++++++++---------------
 todo-list.md                   | 32 +++++++++++++++++++++++++++++++-
 2 files changed, 39 insertions(+), 16 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 16cd7ece..6de7850e 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -6,6 +6,7 @@ if (typeof require !== 'undefined' ) { // require elm(ish) creating local copy
     route, section, span, strong, text, ul } = require('./elmish.js');
 } // in the browser elm(ish) functions are automatically be available
 
+
 var initial_model = {
   todos: [],
   hash: "#/"
@@ -19,23 +20,15 @@ var initial_model = {
  * @return {Object} updated_model - the transformed model.
  */
 function update(action, model, data) {
-  // console.log('model:', model);
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
-  // console.log('new_model:', new_model);
   switch(action) {                   // and an action (String) runs a switch
-    // case 'ADD':
-    //   new_model.todos.push({
-    //     id: model.todos.length + 1,
-    //     title: data,
-    //     done: false
-    //   });
-    //   break;
-    // case Dec:
-    //   new_model.counters[index] = model.counters[index] - 1;
-    //   break;
-    // case Res: // use ES6 Array.fill to create a new array with values set to 0:
-    //   new_model.counters[index] = 0;
-    //   break;
+    case 'ADD':
+      new_model.todos.push({
+        id: model.todos.length + 1,
+        title: data,
+        done: false
+      });
+      break;
     default: // if action unrecognised or undefined,
       return model; // return model unmodified
   }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
diff --git a/todo-list.md b/todo-list.md
index cac0743a..93818c30 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -511,9 +511,39 @@ You should see the assertion _fail_:
 ![update-add-item-test-failing](https://user-images.githubusercontent.com/194400/43639131-206b632c-9713-11e8-83ee-d0ecab0ac4ef.png)
 
 
+#### `ADD` item _Implementation_
 
+With the above test as your "guide",
+write the _bare minimum_ code necessary to make all assertions pass.
 
-#### `ADD` item _Implementation_
+_Sample_ implementation:
+```js
+/**
+ * `update` transforms the `model` based on the `action`.
+ * @param {String} action - the desired action to perform on the model.
+ * @param {Object} model - the App's (current) model (or "state").
+ * @param {String} data - the data we want to "apply" to the item.
+ * @return {Object} updated_model - the transformed model.
+ */
+function update(action, model, data) {
+  var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
+  switch(action) {                   // and an action (String) runs a switch
+    case 'ADD':
+      new_model.todos.push({
+        id: model.todos.length + 1,
+        title: data,
+        done: false
+      });
+      break;
+    default: // if action unrecognised or undefined,
+      return model; // return model unmodified
+  }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
+  return new_model;
+}
+```
+the `case 'ADD'` is the _relevant_ code. <br />
+
+> Was _your_ implementation _similar_...?
 
 
 

From de9797e3969240c81254f59d91311f2d3b2cdff9 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 4 Aug 2018 17:02:39 +0100
Subject: [PATCH 076/164] finish writeup on ADD new todo item to list. #48

---
 README.md    |  2 +-
 todo-list.md | 38 ++++++++++++++++++++++++++++----------
 2 files changed, 29 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index 288b2340..6f5105ff 100644
--- a/README.md
+++ b/README.md
@@ -14,7 +14,7 @@ the Elm ("Model Update View") Architecture in "_plain_" JavaScript.
 > We think Elm is the _future_ of Front End Web Development <br />
 for all the _reasons_ described in:
 [github.com/dwyl/**learn-elm#why**](https://github.com/dwyl/learn-elm#why) <br />
-_However_ we _acknowledge_ that Elm is _not_ for _everyone_! <br />
+_However_ we _acknowledge_ that Elm is "_**not everyone's taste**_"! <br />
 
 > What [_many_](https://youtu.be/VNGFep6rncY)
 Front-End Developers _are_ learning/using is
diff --git a/todo-list.md b/todo-list.md
index 93818c30..eb1b3c5b 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -386,7 +386,7 @@ _by_ far the most _used_ feature of a Todo List. <br />
 #### `ADD` item _Acceptance Criteria_
 
 Adding a new todo item's text should
-append the item `Object` to the `model.items` Array.
+append the todo item `Object` to the `model.todos` Array. <br />
 Such that the `model` is transformed (_data is added_) in the following way:
 
 _BEFORE_:
@@ -406,7 +406,9 @@ _AFTER_:
 }
 ```
 
-#### Hold On, How Does Todo Item _Text_ Get "Passed Into" `update`...?
+#### Hold On, That Doesn't Seem "_Right_" How Does Todo Item _Text_ Get Added?
+
+![sotp-sign-fail](https://user-images.githubusercontent.com/194400/43678248-ba12f248-9807-11e8-8ebc-0afd8fd8bb0e.jpg)
 
 While considering the "Acceptance Criteria"
 for adding an item to the Todo List,
@@ -429,14 +431,14 @@ function update(action, model) {
 does not have a **parameter** for passing in the Todo List item Text (`title`),
 i.e. how do we add "data" to the `model`...?
 
-We don't want to "mess with" either of the other two parameters,
-both `action` and `model` have clearly defined
-
 
 That's "_Oh kay_"! (_don't panic_!) <br />
 If we **`try`** to think about implementation up-front,
-we would _invariably_ be "over-thinking"
-it's called "***Waterfall***"".
+we would _invariably_ be "over-thinking" things
+and get "stuck" in the
+["analysis paralysis"](https://en.wikipedia.org/wiki/Analysis_paralysis)
+of
+["***waterfall***"](https://en.wikipedia.org/wiki/Waterfall_model)
 
 As you are _about_ to see, we can _easily_ change the function signature,
 in the _next_ test _without affecting_ our exiting (_passing_) test!
@@ -456,6 +458,10 @@ You can "_refactor_" a function's _implementation_ to your heart's content,
 safe in the knowledge that all your _existing_ tests still pass.
 i.e. the _rest_ of the app "**still works**" **_exactly_ as expected**.
 
+We don't want to "mess with" either of the other two (_existing_) parameters,
+both `action` and `model` have clearly defined purposes,
+but we _need_ a way to pass "data" into the `update` function!
+
 With that in mind, let's _amend_ the `update` **`JSDOC`** comment
 and function signature to:
 
@@ -483,7 +489,9 @@ node test/todo-app.test.js
 _Everything_ should still pass:
 ![update-default-branch-test-passing](https://user-images.githubusercontent.com/194400/43581137-c6aa236e-964f-11e8-96d0-ef724659761e.png)
 
-Congratulations! You just _refactored_ a function (_signature_).
+Congratulations! You just _extended_ a function (_signature_)
+without affecting any _existing_ tests.
+
 
 
 #### `ADD` item _Test_
@@ -543,7 +551,18 @@ function update(action, model, data) {
 ```
 the `case 'ADD'` is the _relevant_ code. <br />
 
-> Was _your_ implementation _similar_...?
+> Was _your_ implementation _similar_...? <br />
+> If you were able to make it _simpler_,
+[please share!](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/48)
+
+Once you have the test(s) _passing_ e.g:
+![todo-add-item-tests-passing](https://user-images.githubusercontent.com/194400/43678110-2688ea7a-9805-11e8-9003-97b5450d0cf1.png)
+
+Let's move on to the _next_ functionality!
+
+<br />
+
+### `ADD` an `item` to the Todo List
 
 
 
@@ -557,5 +576,4 @@ If you feel _confident_ with your "TEA" skills you can _either_:
 e.g: https://github.com/nelsonic/time-mvp
 + Move on and **Learn Elm**: https://github.com/dwyl/learn-elm
 + (Join the herd and) Learn & use React/Redux.
-
 -->

From 5d4ebc546101efe05644a05833d73caec77c32ae Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 5 Aug 2018 14:52:49 +0100
Subject: [PATCH 077/164] add sample code for making TOGGLE todo item test pass
 for #48

---
 examples/todo-list/todo-app.js |  7 +++++++
 test/todo-app.test.js          | 29 ++++++++++++++++++++++++++++-
 2 files changed, 35 insertions(+), 1 deletion(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 6de7850e..73d6f342 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -29,6 +29,13 @@ function update(action, model, data) {
         done: false
       });
       break;
+    case 'TOGGLE':
+      new_model.todos.forEach(function (item) { // takes 1ms on a "slow mobile"
+        if(item.id === data) {    // this should only "match" one item.
+          item.done = !item.done; // invert state of "done" e.g false >> true
+        }
+      });
+      break;
     default: // if action unrecognised or undefined,
       return model; // return model unmodified
   }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 1d9dcd07..0c8caf42 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -27,6 +27,33 @@ test('`ADD` a new todo item to model.todos Array via `update`', function (t) {
   const updated_model = app.update('ADD', model, "Add Todo List Item");
   const expected = { id: 1, title: "Add Todo List Item", done: false };
   t.equal(updated_model.todos.length, 1, "updated_model.todos.length is 1");
-  t.deepEqual(expected, updated_model.todos[0], "Todo list item added.");
+  t.deepEqual(updated_model.todos[0], expected, "Todo list item added.");
+  t.end();
+});
+
+test('`TOGGLE` a todo item from done=false to done=true', function (t) {
+  const model = JSON.parse(JSON.stringify(app.model)); // initial state
+  const model_with_todo = app.update('ADD', model, "Toggle a todo list item");
+  const item = model_with_todo.todos[0];
+  const model_todo_done = app.update('TOGGLE', model_with_todo, item.id);
+  const expected = { id: 1, title: "Toggle a todo list item", done: true };
+  t.deepEqual(model_todo_done.todos[0], expected, "Todo list item Toggled.");
+  t.end();
+});
+
+test('`TOGGLE` (undo) a todo item from done=true to done=false', function (t) {
+  const model = JSON.parse(JSON.stringify(app.model)); // initial state
+  const model_with_todo = app.update('ADD', model, "Toggle a todo list item");
+  const item = model_with_todo.todos[0];
+  const model_todo_done = app.update('TOGGLE', model_with_todo, item.id);
+  const expected = { id: 1, title: "Toggle a todo list item", done: true };
+  t.deepEqual(model_todo_done.todos[0], expected, "Todo list item Toggled.");
+  // add another item before "undoing" the original one:
+  const model_second_item = app.update('ADD', model_todo_done, "Another todo");
+  t.equal(model_second_item.todos.length, 2, "there are two todo items");
+  // Toggle the original item such that: done=true >> done=false
+  const model_todo_undone = app.update('TOGGLE', model_second_item, item.id);
+  const undone = { id: 1, title: "Toggle a todo list item", done: false };
+  t.deepEqual(model_todo_undone.todos[0],undone, "Todo item Toggled > undone!");
   t.end();
 });

From e29da0ee077ee01fbc97ff310c0288d3d9802869 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 5 Aug 2018 14:57:08 +0100
Subject: [PATCH 078/164] add writeup instructions for how to "undo" a todo
 item using TOGGLE action for #48

---
 test/todo-app.test.js |   4 +-
 todo-list.md          | 104 +++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 104 insertions(+), 4 deletions(-)

diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 0c8caf42..98610b61 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -47,10 +47,10 @@ test('`TOGGLE` (undo) a todo item from done=true to done=false', function (t) {
   const item = model_with_todo.todos[0];
   const model_todo_done = app.update('TOGGLE', model_with_todo, item.id);
   const expected = { id: 1, title: "Toggle a todo list item", done: true };
-  t.deepEqual(model_todo_done.todos[0], expected, "Todo list item Toggled.");
+  t.deepEqual(model_todo_done.todos[0], expected, "Toggled done=false >> true");
   // add another item before "undoing" the original one:
   const model_second_item = app.update('ADD', model_todo_done, "Another todo");
-  t.equal(model_second_item.todos.length, 2, "there are two todo items");
+  t.equal(model_second_item.todos.length, 2, "there are TWO todo items");
   // Toggle the original item such that: done=true >> done=false
   const model_todo_undone = app.update('TOGGLE', model_second_item, item.id);
   const undone = { id: 1, title: "Toggle a todo list item", done: false };
diff --git a/todo-list.md b/todo-list.md
index eb1b3c5b..7c906b1e 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -505,7 +505,7 @@ test('`ADD` a new todo item to model.todos Array via `update`', function (t) {
   const updated_model = app.update('ADD', model, "Add Todo List Item");
   const expected = { id: 1, title: "Add Todo List Item", done: false };
   t.equal(updated_model.todos.length, 1, "updated_model.todos.length is 1");
-  t.deepEqual(expected, updated_model.todos[0], "Todo list item added.");
+  t.deepEqual(updated_model.todos[0], expected, "Todo list item added.");
   t.end();
 });
 ```
@@ -562,9 +562,109 @@ Let's move on to the _next_ functionality!
 
 <br />
 
-### `ADD` an `item` to the Todo List
+### `TOGGLE` a Todo `item` to `done=true`
+
+![todomvc-two-items-1-done](https://user-images.githubusercontent.com/194400/43686242-150d8f66-98ba-11e8-9f63-df7523666fd8.png)
+
+Checking off a todo item involves changing the value of the `done` property
+from `false` to `true`. e.g:
+
+_FROM_:
+```js
+{
+  todos: [
+    {id: 1, "Toggle a todo list item", done: false }
+  ],
+  hash: "#/"
+}
+```
+_TO_:
+```js
+{
+  todos: [
+    {id: 1, "Toggle a todo list item", done: true }
+  ],
+  hash: "#/"
+}
+```
+
+Given that we have already defined our `update` function above,
+we can dive straight into writing a _test_:
+
+
+#### `TOGGLE` item _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test('`TOGGLE` a todo item from done=false to done=true', function (t) {
+  const model = JSON.parse(JSON.stringify(app.model)); // initial state
+  const model_with_todo = app.update('ADD', model, "Toggle a todo list item");
+  const item = model_with_todo.todos[0];
+  const model_todo_done = app.update('TOGGLE', model_with_todo, item.id);
+  const expected = { id: 1, title: "Toggle a todo list item", done: true };
+  t.deepEqual(model_todo_done.todos[0], expected, "Todo list item Toggled.");
+  t.end();
+});
+```
+_execute_ the test:
+```sh
+node test/todo-app.test.js
+```
+You should see something _similar_ to the following:
+![toggle-todo-list-item](https://user-images.githubusercontent.com/194400/43686329-8cdffc12-98bb-11e8-9b04-5d2ef2dc54a3.png)
+
+
+#### `TOGGLE` item _Implementation_
+
+With the above test as your "guide",
+write the _minimum_ code necessary to make the test pass.
+(_ensure that you continue to make a "copy" of the `model`
+rather than "mutate" it_)
+
+Once you make it _pass_ you should see:
+
+![todo-item-toggled](https://user-images.githubusercontent.com/194400/43686401-fcdd417c-98bc-11e8-8766-2b967b6e4481.png)
+
+> Try to make the test pass alone (or with your pairing partner).
+If you get "stuck" see: [**`todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/commits/5d4ebc546101efe05644a05833d73caec77c32ae)
+
+
+#### Hold On, Does This Work _Both_ Ways?
+
+_Yes_, You _guessed_ it,
+choosing to name the `action` as "`TOGGLE`"
+is _precisely_ because we don't _need_
+to have a _**separate**_ function
+to "undo" an item if it has been "checked off".
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test('`TOGGLE` (undo) a todo item from done=true to done=false', function (t) {
+  const model = JSON.parse(JSON.stringify(app.model)); // initial state
+  const model_with_todo = app.update('ADD', model, "Toggle a todo list item");
+  const item = model_with_todo.todos[0];
+  const model_todo_done = app.update('TOGGLE', model_with_todo, item.id);
+  const expected = { id: 1, title: "Toggle a todo list item", done: true };
+  t.deepEqual(model_todo_done.todos[0], expected, "Toggled done=false >> true");
+  // add another item before "undoing" the original one:
+  const model_second_item = app.update('ADD', model_todo_done, "Another todo");
+  t.equal(model_second_item.todos.length, 2, "there are TWO todo items");
+  // Toggle the original item such that: done=true >> done=false
+  const model_todo_undone = app.update('TOGGLE', model_second_item, item.id);
+  const undone = { id: 1, title: "Toggle a todo list item", done: false };
+  t.deepEqual(model_todo_undone.todos[0],undone, "Todo item Toggled > undone!");
+  t.end();
+});
+```
 
+You should not _need_ to modify any of the code in the `update` function.
+The above test should just _pass_ based on the code you wrote above.
+If it does _not_, then _revise_ your implementation
+of the `TOGGLE case` in `upadate` until _all_ tests pass:
 
+![undo-a-todo-item](https://user-images.githubusercontent.com/194400/43686533-b25d4608-98bf-11e8-809e-1153fcfb1db1.png)
 
 
 <!--

From ff4d297ad610a5e977fe39cfa87d93e4a1e4cf14 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 5 Aug 2018 21:49:12 +0100
Subject: [PATCH 079/164] adds section for creating the `view` for Elm(ish)
 Todo List App #44 / #48

---
 todo-list.md | 55 +++++++++++++++++++++++++++++++++++++++++++++++-----
 1 file changed, 50 insertions(+), 5 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index 7c906b1e..5c56edb6 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -188,7 +188,7 @@ All we need is an `Object` containing two keys `todos` and `hash`:
     { id: 2, title: "Build Todo List App",    done: false },
     { id: 3, title: "Win the Internet!",      done, false }
   ],
-  hash: '#/active' // the "route" to display
+  hash: '#/' // the "route" to display
 }
 ```
 `todos` is an `Array` of `Objects` and each Todo (Array) item
@@ -206,10 +206,10 @@ https://en.wikipedia.org/wiki/Metadata
 
 There are two types of `metadata` in a Todo List App:
 + `id` - each todo item has an `id`, this is the item's position in the list.
-+ count - the count of items according to their state of _completion_.
-e.g: in the model above there are
-2 items which are "active"
-and 1 which is "done".
++ `count` - the count of items according to their state of _completion_.
+e.g: in the model above there are 3 todo items in the `todos` Array;
+2 items which are "active" (`done=false`)
+and 1 which is "done" (`done=true`).
 
 Rather than _storing_ "metadata" in the model
 (_e.g: the count of active and completed Todo items_)
@@ -666,6 +666,51 @@ of the `TOGGLE case` in `upadate` until _all_ tests pass:
 
 ![undo-a-todo-item](https://user-images.githubusercontent.com/194400/43686533-b25d4608-98bf-11e8-809e-1153fcfb1db1.png)
 
+### `view` Function
+
+It won't have "_escaped_" you that _so far_ we have not written _any_ code
+that a _user_ can actually _interact_ with.
+
+_So far_ we have _successfully_ added two `case` blocks in the `switch` statement
+of our `update` function. We now have the two _basic_ functions required
+to both `ADD` a new todo list item to the `model.todos` Array
+_and_ check-off a todo list item as "done" using the `TOGGLE action`.
+This is "_enough_" functionality to start _using_ the todo list (_ourselves_)
+and **UX-testing** it with _prospective_ "***users***".
+
+If you followed through the "Elm(ish)" tutorial
+[`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md)
+you will have seen that we created a _sample_ `view` in the last few _tests_
+to "_exercise_" the DOM element creation functions.
+This means that we _already know_ how to build a `view` for our Todo List App!
+We "_just_" need to _adapt_ the `view` we made in `Elm`(_ish_) to display
+the data in our `model`.
+
+#### Sample `model` to Render in Our `view`
+
+Let's return to the sample `model` from above:
+
+```js
+{
+  todos: [
+    { id: 1, title: "Learn Elm Architecture", done: true },
+    { id: 2, title: "Build Todo List App",    done: false },
+    { id: 3, title: "Win the Internet!",      done, false }
+  ],
+  hash: '#/' // the "route" to display
+}
+```
+The model contains _three_ items in the `todos` Array. <br />
+The first is complete (`done=true`)
+whereas the second and third items are still "todo" (`done=false`).
+
+This is what this `model` looks like in the "VanillaJS"
+TodoMVC:
+echo ![todomvc-3-items-1-done](https://user-images.githubusercontent.com/194400/43689907-e9caa548-98f8-11e8-8fd1-7b63e7fc5e30.png)
+
+Our quest in the next "pomodoro" is to re-create this
+using the DOM functions we created in `Elm`(_ish_)!
+
 
 <!--
 

From afaed24cea77efbce584277669c72026c1d02d24 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 5 Aug 2018 22:14:15 +0100
Subject: [PATCH 080/164] for now, ignore the <footer> and focus on rendering
 the Todo List! see:
 https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45#issuecomment-410547764

---
 todo-list.md | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/todo-list.md b/todo-list.md
index 5c56edb6..cf7e5ce7 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -708,9 +708,17 @@ This is what this `model` looks like in the "VanillaJS"
 TodoMVC:
 echo ![todomvc-3-items-1-done](https://user-images.githubusercontent.com/194400/43689907-e9caa548-98f8-11e8-8fd1-7b63e7fc5e30.png)
 
-Our quest in the next "pomodoro" is to re-create this
+Our _quest_ in the next "pomodoro" is to re-create this
 using the DOM functions we created in `Elm`(_ish_)!
 
+#### Focus on Rendering The _List_ First
+
+For now, _ignore_ the `<footer>` (_below the Todo List_)
+and _just_ focus on rendering the _list_ itself.
+
+![todomvc-3-items-1-done](https://user-images.githubusercontent.com/194400/43690122-b72bcb0e-98fc-11e8-83c2-8b8703b177ed.png)
+
+
 
 <!--
 

From dd51dcbf35fd372da865f09227af654014391566 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 6 Aug 2018 21:50:07 +0100
Subject: [PATCH 081/164] add (human readable) Acceptance Criteria and Test
 Assertions for "main" List view
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/51

---
 examples/todo-list/elmish.js   |  2 -
 examples/todo-list/todo-app.js |  2 +
 todo-list.md                   | 72 ++++++++++++++++++++++++++++++++++
 3 files changed, 74 insertions(+), 2 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 2a2e9415..16cf96fe 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -14,8 +14,6 @@ function empty(node) {
   }
 } // this function produces a (DOM) "mutation" but has no other "side effects".
 
-
-
 /**
  * `mount` mounts the app in the "root" DOM Element.
  * @param {Object} model store of the application's state.
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 73d6f342..938d27b1 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -42,6 +42,8 @@ function update(action, model, data) {
   return new_model;
 }
 
+
+
 // function view(signal, model, root) {
 //   empty(root); // clear root element before re-rendering the App (DOM).
 //   model.counters.map(function(counter, index) {
diff --git a/todo-list.md b/todo-list.md
index cf7e5ce7..bd7e55d4 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -719,6 +719,78 @@ and _just_ focus on rendering the _list_ itself.
 ![todomvc-3-items-1-done](https://user-images.githubusercontent.com/194400/43690122-b72bcb0e-98fc-11e8-83c2-8b8703b177ed.png)
 
 
+In your web browser, open **Dev**eloper **Tools**
+and _inspect_ the HTML for the Todo list:
+
+![todomvc-main-section-todo-list-html](https://user-images.githubusercontent.com/194400/43717480-9fb80982-997f-11e8-9ffe-6aa90a89a042.png)
+
+This is the HTML copied directly from the browser:
+```html
+<section class="main" style="display: block;">
+  <input class="toggle-all" type="checkbox">
+  <label for="toggle-all">Mark all as complete</label>
+  <ul class="todo-list">
+    <li data-id="1533501855500" class="completed">
+      <div class="view">
+        <input class="toggle" type="checkbox">
+        <label>Learn Elm Architecture</label>
+        <button class="destroy"></button>
+      </div>
+    </li>
+    <li data-id="1533501861171" class="">
+      <div class="view">
+        <input class="toggle" type="checkbox">
+        <label>Build Todo List App</label>
+        <button class="destroy"></button>
+      </div>
+    </li>
+    <li data-id="1533501867123" class="">
+      <div class="view"><input class="toggle" type="checkbox">
+        <label>Win the Internet!</label>
+        <button class="destroy"></button>
+      </div>
+    </li>
+  </ul>
+</section>
+```
+> _**Note**: there is "redundant" markup in this HTML in the form of a `<div>`
+inside the `<li>`, for now we are just replicating the HTML "faithfully",
+we can "prune" it later._
+
+From this HTMl we can write our
+["**_Technical_ Acceptance Criteria**"](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/51):
+
++ [ ] Todo List items should be displayed as list items **`<li>`**
+in an _unordered list_ **`<ul>`**.
++ [ ] Each Todo List item **`<li>`**  should contain a **`<div>`**
+with a **`class="view"`** which "wraps":
+  + [ ] **`<input class="toggle" type="checkbox">`** - the "checkbox"
+  that people can "Toggle" to change the "state"
+  of the Todo item from "active" to "done"
+  (_which updates the model
+    From: `model.todos[id].done=false`
+    To: `model.todos[id].done=true`_)
+  + [ ] **`<label>`** - the text content of the todo list item
+  + [ ] **`<button class="destroy">`** - the button the person
+  can click/tap to **`delete`** a Todo item.
+
+
+### Todo List `view` Test Assertions
+
+Given the `model` (_above_),
++ [ ] There is a `<ul class="todo-list">` with 3 **`<li>`** (_list items_)
+rendered in the `view`.
++ [ ] The ***first*** **`<li>`** has an **`<input type="checkbox">`**
+which is _checked_ (`done=true`)
++ [ ] The ***remaining*** **`<li>'s`** have **`<input type="checkbox">`**
+that are _unchecked_ (`done=false`)
+
+
+We can _easily_ write a _test_ that includes these 3 assertions:
+
+
+
+
 
 <!--
 

From 6137d41594d031e045f2961ff63ed4282e0979d8 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 6 Aug 2018 22:03:16 +0100
Subject: [PATCH 082/164] [WiP] add test for "main" view #51

---
 todo-list.md | 24 ++++++++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index bd7e55d4..69832409 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -786,9 +786,29 @@ which is _checked_ (`done=true`)
 that are _unchecked_ (`done=false`)
 
 
-We can _easily_ write a _test_ that includes these 3 assertions:
-
+We can _easily_ write a _test_ that includes these 3 assertions.
+Append following test code to your `test/todo-app.test.js` file:
 
+```js
+test('render "main" view using (elmish) HTML DOM functions', function (t) {
+  const model = {
+    todos: [
+      { id: 1, title: "Learn Elm Architecture", done: true },
+      { id: 2, title: "Build Todo List App",    done: false },
+      { id: 3, title: "Win the Internet!",      done, false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  const html = app.main(model);
+  
+  const done = document.querySelectorAll('.completed')[0].textContent;
+  t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
+  const todo = document.querySelectorAll('.view')[1].textContent;
+  t.equal(todo, 'Build Todo List App', 'Todo: Build Todo List App');
+  elmish.empty(document.getElementById(id));
+  t.end();
+});
+```
 
 
 

From 91efbbd60ca45ff45c8255bcfa6a9b4c74ade305 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 6 Aug 2018 22:16:47 +0100
Subject: [PATCH 083/164] add assertions to main view test for #51

---
 todo-list.md | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index 69832409..ca5e874d 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -799,13 +799,17 @@ test('render "main" view using (elmish) HTML DOM functions', function (t) {
     ],
     hash: '#/' // the "route" to display
   };
-  const html = app.main(model);
-  
+  // render the "main" view and append it to the DOM inside the `test-app` node:
+  elmish.append_childnodes(app.render_main(model), document.getElementById(id));
   const done = document.querySelectorAll('.completed')[0].textContent;
   t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
   const todo = document.querySelectorAll('.view')[1].textContent;
   t.equal(todo, 'Build Todo List App', 'Todo: Build Todo List App');
-  elmish.empty(document.getElementById(id));
+  const todos = document.querySelectorAll('.toggle');
+  [true, false, false].forEach(function(state, index){
+    t.equal(todos.checked, state, "Todo #" + index + " is done=" + state)
+  })
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
   t.end();
 });
 ```

From e7d6784b89f723e44195d3ac780293d4b582c056 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Mon, 6 Aug 2018 22:22:20 +0100
Subject: [PATCH 084/164] adds screenshot of failng test
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/51#issuecomment-410856984

---
 todo-list.md | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index ca5e874d..f4a64556 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -695,7 +695,7 @@ Let's return to the sample `model` from above:
   todos: [
     { id: 1, title: "Learn Elm Architecture", done: true },
     { id: 2, title: "Build Todo List App",    done: false },
-    { id: 3, title: "Win the Internet!",      done, false }
+    { id: 3, title: "Win the Internet!",      done: false }
   ],
   hash: '#/' // the "route" to display
 }
@@ -795,7 +795,7 @@ test('render "main" view using (elmish) HTML DOM functions', function (t) {
     todos: [
       { id: 1, title: "Learn Elm Architecture", done: true },
       { id: 2, title: "Build Todo List App",    done: false },
-      { id: 3, title: "Win the Internet!",      done, false }
+      { id: 3, title: "Win the Internet!",      done: false }
     ],
     hash: '#/' // the "route" to display
   };
@@ -814,6 +814,14 @@ test('render "main" view using (elmish) HTML DOM functions', function (t) {
 });
 ```
 
+If you attempt to run this test:
+```sh
+node test/todo-app.test.js
+```
+
+you will see something like this:
+![main-test-failing](https://user-images.githubusercontent.com/194400/43741630-f03f1fe8-99c6-11e8-8b7b-e44ee397b38e.png)
+
 
 
 <!--

From 3cbb25b099c88c310f4d994ef3317c6b1fb18aa2 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 7 Aug 2018 08:53:01 +0100
Subject: [PATCH 085/164] add code to make render_item test pass see:
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/52

---
 elmish.md                      |  2 +-
 examples/todo-list/index.html  | 41 +--------------
 examples/todo-list/todo-app.js | 40 +++++++++++---
 test/todo-app.test.js          | 45 ++++++++++++++++
 todo-list.md                   | 96 ++++++++++++++++++++++++++++++++++
 5 files changed, 177 insertions(+), 47 deletions(-)

diff --git a/elmish.md b/elmish.md
index 34a36a1d..f0f6cc7e 100644
--- a/elmish.md
+++ b/elmish.md
@@ -29,7 +29,7 @@ and **`then`** the _least_ amount of code necessary to pass the test
 
 > _**Test** & **Document-Driven Development** is **easy** and it's **easily**
 one of the **best habits** to form in your software development "career".
-This walkthrough shows **how** you can do it **the right way**
+This walkthrough shows **how** you can do it **the right way**;
 from the **start** of a project._
 
 <br />
diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
index 808b762b..fd11ca1c 100644
--- a/examples/todo-list/index.html
+++ b/examples/todo-list/index.html
@@ -13,46 +13,7 @@
 
 </head>
 <body>
-  <section class="todoapp">
-    <header class="header">
-      <h1>todos</h1>
-      <input class="new-todo" placeholder="What needs to be done?" autofocus>
-    </header>
-    <section class="main">
-      <input id="toggle-all" class="toggle-all" type="checkbox">
-      <label for="toggle-all">Mark all as complete</label>
-      <ul class="todo-list"></ul>
-    </section>
-    <footer class="footer">
-      <span class="todo-count"></span>
-      <ul class="filters">
-        <li>
-          <a href="#/" class="selected">All</a>
-        </li>
-        <li>
-          <a href="#/active">Active</a>
-        </li>
-        <li>
-          <a href="#/completed">Completed</a>
-        </li>
-      </ul>
-      <button class="clear-completed">Clear completed</button>
-    </footer>
-  </section>
-  <footer class="info">
-    <p>Double-click to edit a todo</p>
-    <p>Created by <a href="https://github.com/dwyl">@dwyl community</a></p>
-    <p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
-  </footer>
-  <!-- <script src="node_modules/todomvc-common/base.js"></script>
-  <script src="js/helpers.js"></script>
-  <script src="js/store.js"></script>
-  <script src="js/model.js"></script>
-  <script src="js/template.js"></script>
-  <script src="js/view.js"></script>
-  <script src="js/controller.js"></script>
-  <script src="js/app.js"></script> -->
-
+  
 <!--
   <script src="todo-app.js" data-cover></script> load counter
 
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 938d27b1..a9f75fa0 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -1,11 +1,9 @@
 (function() { // scope functions to prevent naming conflicts
 /* if require is available, it means we are in Node.js Land i.e. testing! */
 /* istanbul ignore next */
-if (typeof require !== 'undefined' ) { // require elm(ish) creating local copy
-  const { a, button, div, empty, footer, input, h1, header, label, li, mount,
-    route, section, span, strong, text, ul } = require('./elmish.js');
-} // in the browser elm(ish) functions are automatically be available
-
+const { a, button, div, empty, footer, input, h1, header, label, li, mount,
+  route, section, span, strong, text, ul } =
+    (typeof require !== 'undefined') ? require('./elmish.js') : {};
 
 var initial_model = {
   todos: [],
@@ -42,6 +40,36 @@ function update(action, model, data) {
   return new_model;
 }
 
+/**
+ * `render_item` creates an DOM "tree" with a single Todo List Item
+ * using the "elmish" DOM functions (`li`, `div`, `input`, `label` and `button`)
+ * returns an `<li>` HTML element with a nested `<div>` which in turn has the:
+ * + `<input type=checkbox>` which lets users to "Toggle" the status of the item
+ * + `<label>` which displays the Todo item text (`title`) in a `<text>` node
+ * + `<button class="destroy">` lets people "delete" a todo item.
+ * see: https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/52
+ * @param  {Object} item the todo item object
+ * @return {Object} <li> DOM Tree which is nested in the <ul>.
+ * @example
+ * // returns <li> DOM element with <div>, <input>. <label> & <button> nested
+ * var DOM = render_item({id: 1, title: "Build Todo List App", done: false});
+ */
+function render_item(item) {
+  return (
+    li([
+      "data-id=" + item.id,
+      "id=" + item.id,
+      item.done ? "class=completed" : ""
+    ], [
+      div(["class=view"], [
+        input(["class=toggle", "type=checkbox",
+          (item.done ? "checked=true" : "")], []),
+        label([], [text(item.title)]),
+        button(["class=destroy"])
+      ]) // </div>
+    ]) // </li>
+  )
+}
 
 
 // function view(signal, model, root) {
@@ -62,7 +90,7 @@ if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     model: initial_model,
     update: update,
-    // view: view
+    render_item: render_item, // export so that we can unit test
   }
 }
 
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 98610b61..51b99451 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -6,6 +6,7 @@ const html = fs.readFileSync(path.resolve(__dirname,
 require('jsdom-global')(html);      // https://github.com/rstacruz/jsdom-global
 const app = require('../examples/todo-list/todo-app.js'); // functions to test
 const id = 'test-app';              // all tests use 'test-app' as root element
+const elmish = require('../examples/todo-list/elmish.js'); // import "empty" etc
 
 test('todo `model` (Object) has desired keys', function (t) {
   const keys = Object.keys(app.model);
@@ -57,3 +58,47 @@ test('`TOGGLE` (undo) a todo item from done=true to done=false', function (t) {
   t.deepEqual(model_todo_undone.todos[0],undone, "Todo item Toggled > undone!");
   t.end();
 });
+
+test('render_item HTML for a single Todo Item', function (t) {
+  const model = {
+    todos: [
+      { id: 1, title: "Learn Elm Architecture", done: true },
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the ONE todo list item:
+  document.getElementById(id).appendChild(app.render_item(model.todos[0]))
+
+  const done = document.querySelectorAll('.completed')[0].textContent;
+  t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
+
+  const checked = document.querySelectorAll('input')[0].checked;
+  t.equal(checked, true, 'Done: ' + model.todos[0].title + " is done=true");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
+
+test('render "main" view using (elmish) HTML DOM functions', function (t) {
+  const model = {
+    todos: [
+      { id: 1, title: "Learn Elm Architecture", done: true },
+      { id: 2, title: "Build Todo List App",    done: false },
+      { id: 3, title: "Win the Internet!",      done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the "main" view and append it to the DOM inside the `test-app` node:
+  console.log(app.render_item(model.todos[0]));
+  // elmish.append_childnodes(app.render_main(model), document.getElementById(id));
+  // const done = document.querySelectorAll('.completed')[0].textContent;
+  // t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
+  // const todo = document.querySelectorAll('.view')[1].textContent;
+  // t.equal(todo, 'Build Todo List App', 'Todo: Build Todo List App');
+  // const todos = document.querySelectorAll('.toggle');
+  // [true, false, false].forEach(function(state, index){
+  //   t.equal(todos.checked, state, "Todo #" + index + " is done=" + state)
+  // })
+  // elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index f4a64556..597d5188 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -785,6 +785,100 @@ which is _checked_ (`done=true`)
 + [ ] The ***remaining*** **`<li>'s`** have **`<input type="checkbox">`**
 that are _unchecked_ (`done=false`)
 
+Let's "tackle" the _first_ assertion _first_:
+
+#### Render a _Single_ Todo List Item Using `render_list` Test
+
+It's _always_ a good idea to "break apart" a test into smaller tests
+because it means we will write smaller
+(_and thus **more maintainable**_) "_composable_" functions.
+With that in mind, let's add the following _test_ to `test/todo-app.test.js`:
+
+```js
+test.only('render_item HTML for a single Todo Item', function (t) {
+  const model = {
+    todos: [
+      { id: 1, title: "Learn Elm Architecture", done: true },
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the ONE todo list item:
+  document.getElementById(id).appendChild(app.render_item(model.todos[0]))
+
+  const done = document.querySelectorAll('.completed')[0].textContent;
+  t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
+
+  const checked = document.querySelectorAll('input')[0].checked;
+  t.equal(checked, true, 'Done: ' + model.todos[0].title + " is done=true");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
+```
+
+After saving the `test/todo-app.test.js` file, if you attempt to run it:
+```sh
+node test/todo-app.test.js
+```
+you will see something like this:
+
+![render_item-test-failing](https://user-images.githubusercontent.com/194400/43743931-b397cd7a-99cf-11e8-81a6-3218207ca05b.png)
+
+#### `render_list` Implementation
+
+Given the test above, I added the following code to my `todo-app.js` file:
+
+```js
+/**
+ * `render_item` creates an DOM "tree" with a single Todo List Item
+ * using the "elmish" DOM functions (`li`, `div`, `input`, `label` and `button`)
+ * returns an `<li>` HTML element with a nested `<div>` which in turn has the:
+ * + `<input type=checkbox>` which lets users to "Toggle" the status of the item
+ * + `<label>` which displays the Todo item text (`title`) in a `<text>` node
+ * + `<button class="destroy">` lets people "delete" a todo item.
+ * see: https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/52
+ * @param  {Object} item the todo item object
+ * @return {Object} <li> DOM Tree which is nested in the <ul>.
+ * @example
+ * // returns <li> DOM element with <div>, <input>. <label> & <button> nested
+ * var DOM = render_item({id: 1, title: "Build Todo List App", done: false});
+ */
+function render_item(item) {
+  return (
+    li([
+      "data-id=" + item.id,
+      "id=" + item.id,
+      item.done ? "class=completed" : ""
+    ], [
+      div(["class=view"], [
+        input(["class=toggle", "type=checkbox",
+          (item.done ? "checked=true" : "")], []),
+        label([], [text(item.title)]),
+        button(["class=destroy"])
+      ]) // </div>
+    ]) // </li>
+  )
+}
+```
+Add the `render_item` to the `module.exports` at the end of the file:
+```js
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    model: initial_model,
+    update: update,
+    render_item: render_item, // export so that we can unit test
+  }
+}
+```
+
+This will make the test pass:
+![image](https://user-images.githubusercontent.com/194400/43762133-f6c21de0-9a1e-11e8-871d-e6f5b86d1d55.png)
+
+
+
+
+
+
 
 We can _easily_ write a _test_ that includes these 3 assertions.
 Append following test code to your `test/todo-app.test.js` file:
@@ -824,6 +918,8 @@ you will see something like this:
 
 
 
+
+
 <!--
 
 ## What _Next_?

From 864f4ccadc737dde65629d3de3c9ec515849196e Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 7 Aug 2018 08:57:21 +0100
Subject: [PATCH 086/164] update test/elmish.test.js assertions in light of the
 removal of default dom in examples/todo-list/index.html

---
 test/elmish.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/elmish.test.js b/test/elmish.test.js
index d0c1dbc1..360c9f95 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -332,9 +332,9 @@ test('elmish create <footer> view using HTML DOM functions', function (t) {
 
   const left = document.getElementById('count').textContent;
   t.equal(left, "item left", 'there is 1 todo item left');
-  const clear = document.querySelectorAll('button')[1].textContent;
+  const clear = document.querySelectorAll('button')[0].textContent;
   t.equal(clear, "Clear completed", '<button> text is "Clear completed"');
-  const selected = document.querySelectorAll('.selected')[1].textContent;
+  const selected = document.querySelectorAll('.selected')[0].textContent;
   t.equal(selected, "All", "All is selected by default");
   elmish.empty(document.getElementById(id));
   t.end();

From b6607478c3dbed048781932261af2981f4c6c405 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 7 Aug 2018 09:41:33 +0100
Subject: [PATCH 087/164] add code to make render_main pass see/fixes #51

---
 examples/todo-list/elmish.js   |  6 +++++-
 examples/todo-list/todo-app.js | 16 +++++++++++++++-
 test/todo-app.test.js          | 24 +++++++++++++-----------
 todo-list.md                   | 13 +++++++------
 4 files changed, 40 insertions(+), 19 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 16cf96fe..4ec58d0f 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -102,7 +102,11 @@ function append_childnodes (childnodes, parent) {
   if(childnodes &&
       Object.prototype.toString.call( childnodes ) === '[object Array]'
       && childnodes.length > 0) {
-    childnodes.forEach(function (el) { parent.appendChild(el) });
+    childnodes.forEach(function (el) {
+      if (typeof el !== 'undefined') {
+        parent.appendChild(el)
+      }
+    });
   }
   return parent;
 }
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index a9f75fa0..8f9a8637 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -55,6 +55,7 @@ function update(action, model, data) {
  * var DOM = render_item({id: 1, title: "Build Todo List App", done: false});
  */
 function render_item(item) {
+  console.log('item', item);
   return (
     li([
       "data-id=" + item.id,
@@ -63,7 +64,8 @@ function render_item(item) {
     ], [
       div(["class=view"], [
         input(["class=toggle", "type=checkbox",
-          (item.done ? "checked=true" : "")], []),
+            item.done ? "checked=true" : ""],
+          []), // <input> does not have any nested elements
         label([], [text(item.title)]),
         button(["class=destroy"])
       ]) // </div>
@@ -71,6 +73,17 @@ function render_item(item) {
   )
 }
 
+function render_main(model) {
+  return (
+    section(["class=main", "style=display: block;"], [
+      input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
+      label(["for=toggle-all"], [ text("Mark all as complete") ]),
+      ul(["class=todo-list"],
+        model.todos.map(function (item) { return render_item(item) })
+      ) // </ul>
+    ]) // </section>
+  )
+}
 
 // function view(signal, model, root) {
 //   empty(root); // clear root element before re-rendering the App (DOM).
@@ -91,6 +104,7 @@ if (typeof module !== 'undefined' && module.exports) {
     model: initial_model,
     update: update,
     render_item: render_item, // export so that we can unit test
+    render_main: render_main,
   }
 }
 
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 51b99451..2cfe3b6a 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -89,16 +89,18 @@ test('render "main" view using (elmish) HTML DOM functions', function (t) {
     hash: '#/' // the "route" to display
   };
   // render the "main" view and append it to the DOM inside the `test-app` node:
-  console.log(app.render_item(model.todos[0]));
-  // elmish.append_childnodes(app.render_main(model), document.getElementById(id));
-  // const done = document.querySelectorAll('.completed')[0].textContent;
-  // t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
-  // const todo = document.querySelectorAll('.view')[1].textContent;
-  // t.equal(todo, 'Build Todo List App', 'Todo: Build Todo List App');
-  // const todos = document.querySelectorAll('.toggle');
-  // [true, false, false].forEach(function(state, index){
-  //   t.equal(todos.checked, state, "Todo #" + index + " is done=" + state)
-  // })
-  // elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  document.getElementById(id).appendChild(app.render_main(model));
+  // test that the title text in the model.todos was rendered to <label> nodes:
+  document.querySelectorAll('.view').forEach(function (item, index) {
+    t.equal(item.textContent, model.todos[index].title,
+      "index #" + index + " <label> text: " + item.textContent)
+  })
+
+  const inputs = document.querySelectorAll('input'); // todo items are 1,2,3
+  [true, false, false].forEach(function(state, index){
+    t.equal(inputs[index + 1].checked, state,
+      "Todo #" + index + " is done=" + state)
+  })
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
   t.end();
 });
diff --git a/todo-list.md b/todo-list.md
index 597d5188..73dc43f1 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -875,12 +875,11 @@ This will make the test pass:
 ![image](https://user-images.githubusercontent.com/194400/43762133-f6c21de0-9a1e-11e8-871d-e6f5b86d1d55.png)
 
 
+Now that we have a `render_item` function
+that renders a _single_ `<li>` (_todo list item_),
+we can create another function which _uses_ the `render_item` in a "loop",
+to create _several_ `<li>` nested in a `<ul>`.
 
-
-
-
-
-We can _easily_ write a _test_ that includes these 3 assertions.
 Append following test code to your `test/todo-app.test.js` file:
 
 ```js
@@ -894,7 +893,8 @@ test('render "main" view using (elmish) HTML DOM functions', function (t) {
     hash: '#/' // the "route" to display
   };
   // render the "main" view and append it to the DOM inside the `test-app` node:
-  elmish.append_childnodes(app.render_main(model), document.getElementById(id));
+  document.getElementById(id).appendChild(app.render_main(model));
+
   const done = document.querySelectorAll('.completed')[0].textContent;
   t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
   const todo = document.querySelectorAll('.view')[1].textContent;
@@ -920,6 +920,7 @@ you will see something like this:
 
 
 
+
 <!--
 
 ## What _Next_?

From 82bd69d86d42bfef7a686d40e66749d6f1343cd6 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 7 Aug 2018 09:43:34 +0100
Subject: [PATCH 088/164] remove (debuggin) console.log from render_item ...
 fix #52

---
 examples/todo-list/elmish.js   | 6 +-----
 examples/todo-list/todo-app.js | 1 -
 2 files changed, 1 insertion(+), 6 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 4ec58d0f..16cf96fe 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -102,11 +102,7 @@ function append_childnodes (childnodes, parent) {
   if(childnodes &&
       Object.prototype.toString.call( childnodes ) === '[object Array]'
       && childnodes.length > 0) {
-    childnodes.forEach(function (el) {
-      if (typeof el !== 'undefined') {
-        parent.appendChild(el)
-      }
-    });
+    childnodes.forEach(function (el) { parent.appendChild(el) });
   }
   return parent;
 }
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 8f9a8637..97891163 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -55,7 +55,6 @@ function update(action, model, data) {
  * var DOM = render_item({id: 1, title: "Build Todo List App", done: false});
  */
 function render_item(item) {
-  console.log('item', item);
   return (
     li([
       "data-id=" + item.id,

From 171f34a46b9d77aa3cc73264a92e0b0e365de666 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 7 Aug 2018 10:14:38 +0100
Subject: [PATCH 089/164] add screenshot and text reminding readers that we
 have 100% test coverage at the end of render_main
 https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45#issuecomment-410990271
 for #51

---
 examples/todo-list/todo-app.js | 10 +++++++--
 todo-list.md                   | 37 ++++++++++++++++++++++++++++------
 2 files changed, 39 insertions(+), 8 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 97891163..8d85ed1a 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -54,7 +54,7 @@ function update(action, model, data) {
  * // returns <li> DOM element with <div>, <input>. <label> & <button> nested
  * var DOM = render_item({id: 1, title: "Build Todo List App", done: false});
  */
-function render_item(item) {
+function render_item (item) {
   return (
     li([
       "data-id=" + item.id,
@@ -72,7 +72,13 @@ function render_item(item) {
   )
 }
 
-function render_main(model) {
+/**
+ * `render_main` renders the `<section class="main">` of the Todo List App
+ * which contains all the "main" controls and the `<ul>` with the todo items.
+ * @param {Object} model - the App's (current) model (or "state").
+ * @return {Object} <section> DOM Tree which containing the todo list <ul>, etc.
+ */
+function render_main (model) {
   return (
     section(["class=main", "style=display: block;"], [
       input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
diff --git a/todo-list.md b/todo-list.md
index 73dc43f1..beefded8 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -829,6 +829,12 @@ you will see something like this:
 Given the test above, I added the following code to my `todo-app.js` file:
 
 ```js
+/* if require is available, it means we are in Node.js Land i.e. testing! */
+/* istanbul ignore next */
+const { a, button, div, empty, footer, input, h1, header, label, li, mount,
+  route, section, span, strong, text, ul } =
+    (typeof require !== 'undefined') ? require('./elmish.js') : {};
+
 /**
  * `render_item` creates an DOM "tree" with a single Todo List Item
  * using the "elmish" DOM functions (`li`, `div`, `input`, `label` and `button`)
@@ -880,6 +886,8 @@ that renders a _single_ `<li>` (_todo list item_),
 we can create another function which _uses_ the `render_item` in a "loop",
 to create _several_ `<li>` nested in a `<ul>`.
 
+#### `render_main` Test
+
 Append following test code to your `test/todo-app.test.js` file:
 
 ```js
@@ -894,14 +902,16 @@ test('render "main" view using (elmish) HTML DOM functions', function (t) {
   };
   // render the "main" view and append it to the DOM inside the `test-app` node:
   document.getElementById(id).appendChild(app.render_main(model));
+  // test that the title text in the model.todos was rendered to <label> nodes:
+  document.querySelectorAll('.view').forEach(function (item, index) {
+    t.equal(item.textContent, model.todos[index].title,
+      "index #" + index + " <label> text: " + item.textContent)
+  })
 
-  const done = document.querySelectorAll('.completed')[0].textContent;
-  t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
-  const todo = document.querySelectorAll('.view')[1].textContent;
-  t.equal(todo, 'Build Todo List App', 'Todo: Build Todo List App');
-  const todos = document.querySelectorAll('.toggle');
+  const inputs = document.querySelectorAll('input'); // todo items are 1,2,3
   [true, false, false].forEach(function(state, index){
-    t.equal(todos.checked, state, "Todo #" + index + " is done=" + state)
+    t.equal(inputs[index + 1].checked, state,
+      "Todo #" + index + " is done=" + state)
   })
   elmish.empty(document.getElementById(id)); // clear DOM ready for next test
   t.end();
@@ -917,6 +927,21 @@ you will see something like this:
 ![main-test-failing](https://user-images.githubusercontent.com/194400/43741630-f03f1fe8-99c6-11e8-8b7b-e44ee397b38e.png)
 
 
+Given your knowledge of implementing the `render_item` function above,
+and your skills with JavaScript loops, create your `render_main` function,
+to make the tests pass.
+
+> If you get "stuck" there is a _reference_ implementation in:
+[**`todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/commits/b6607478c3dbed048781932261af2981f4c6c405#diff-6be3e16fe7cfb4c00788d4d587374afdR76)
+
+All our tests pass _and_ we have **100% test coverage**:
+
+![render_main-tests-pass-100-coverage](https://user-images.githubusercontent.com/194400/43766409-4189ce4e-9a2a-11e8-8d73-3ea636b22928.png)
+
+This means we are writing the "_bare minimum_" code necessary
+to meet all acceptance criteria (requirements),
+which is both faster and more maintainable! <br />
+Onwards!
 
 
 

From 8a50b251a76e6a6da98a6ab18d2361adbb3754a7 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 7 Aug 2018 12:04:47 +0100
Subject: [PATCH 090/164] add acceptance criteria for Todo List <footer>
 element
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/53

---
 todo-list.md | 122 ++++++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 120 insertions(+), 2 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index beefded8..91990485 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -939,11 +939,129 @@ All our tests pass _and_ we have **100% test coverage**:
 ![render_main-tests-pass-100-coverage](https://user-images.githubusercontent.com/194400/43766409-4189ce4e-9a2a-11e8-8d73-3ea636b22928.png)
 
 This means we are writing the "_bare minimum_" code necessary
-to meet all acceptance criteria (requirements),
-which is both faster and more maintainable! <br />
+to meet all acceptance criteria (_requirements_),
+which is _both **faster** and **more maintainable**_! <br />
 Onwards!
 
 
+```html
+<footer class="footer" style="display: block;">
+  <span class="todo-count">
+    <strong>2</strong> items left
+  </span>
+  <ul class="filters">
+    <li>
+      <a href="#/" class="selected">All</a>
+    </li>
+    <li>
+      <a href="#/active">Active</a>
+    </li>
+    <li>
+      <a href="#/completed">Completed</a>
+    </li>
+  </ul>
+  <button class="clear-completed" style="display: block;">
+    Clear completed
+  </button>
+</footer>
+```
+
+
+### `<footer>` Element [issues/53](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/53)
+
+Referring again to the _rendered_ HTML
+on http://todomvc.com/examples/vanillajs as our "guide":
+![image](https://user-images.githubusercontent.com/194400/42633421-5eb20f24-85d8-11e8-94ad-bb653dd93ab0.png)
+there is:
++ [ ] a **`<footer>`** element with
+  + [ ] a **`<span>`** element which contains
+    + [ ] a **`text`** node with: **"`{count}` item(s) left"**.
+  + [ ] a **`<ul>`** containing
+    + [ ] 3 **`<li>`** elements each with
+     + [ ] a link (**`<a>`**) which allow the "user"
+     to ***filter*** which items appear in the **`<view>`**.
+  + [ ] a **`<button class="clear-completed">`**
+  which will **_Clear_ all `Completed`** items when clicked.
+
+####  Dev Tools > Elements (inspector)
+
+![todo-list-mvc-](https://user-images.githubusercontent.com/194400/43768735-f1f7798e-9a2f-11e8-9f73-c69ea63b1064.png)
+
+#### Copy-paste the _rendered_ HTML
+
+"_copy-pasted_" of the _rendered_ HTML from the Dev Tools:
+![todo-list-mvc-copy-html](https://user-images.githubusercontent.com/194400/43769759-6f18ca4c-9a32-11e8-8f96-7b19ed364c07.png)
+
+```html
+<footer class="footer" style="display: block;">
+  <span class="todo-count">
+    <strong>2</strong> items left
+  </span>
+  <ul class="filters">
+    <li>
+      <a href="#/" class="selected">All</a>
+    </li>
+    <li>
+      <a href="#/active">Active</a>
+    </li>
+    <li>
+      <a href="#/completed">Completed</a>
+    </li>
+  </ul>
+  <button class="clear-completed" style="display: block;">
+    Clear completed
+  </button>
+</footer>
+```
+
+#### Technical Acceptance Criteria
+
+These are the criteria (_checklist_) as described in [issues/53](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/53):
+
++ [ ] **`render_footer`** returns a  **`<footer>`** DOM element which can be rendered directly to the `document` or _nested_ in another DOM element.
++ [ ]  **`<footer>`** contains:
+  + [ ] **`<span class="todo-count">`** which contains
+    + [ ] a **`text`** node with: **"`{count}` item(s) left"**.
+   _pseudocode_:
+  `{model.todos.filter(done==false)}` item`{model.todo.length > 1 ? 's' : '' }` left
+  + [ ] **`<ul>`** containing 3 **`<li>`** with the following links (**`<a>`**):
+    + [ ] Show **`All`**: **`<a href="#/" class="selected">All</a>`**
+      + [ ] **`class="selected"`** should only appear on the selected menu/navigation item.
+       this should be "driven" by the `model.hash` property.
+    + [ ] Show **`Active`**: **` <a href="#/active">Active</a>`**
+    + [ ] Show **`Completed`**: **`<a href="#/completed">Completed</a>`**
+  + [ ] **`<button class="clear-completed" style="display: block;">`** will **_Clear_ all `Completed`** items.
+    _pseudocode_:
+`var new_model =  model.todos.filter(function(item) { return item.done === false})`
+
+#### _Estimate_ Time Required to Write `render_footer` Function
+
+"_armed_" with the acceptance criteria _checklist_
+and the
+["***informative prior***"](https://en.wikipedia.org/wiki/Prior_probability#Informative_priors)
+(_the **experience** we have **already** gained_)
+from building the previous view functions
+**`render_item`** and **`render_main`**
+we ***estimate*** with _reasonable confidence_
+that it will take us
+**_25 minutes** (_**one** "**pomodoro**_)
+to:
++ [ ] Craft the **`JSDOC`** comment _documenting_ the `render_footer` function
+so that all future developers will _easily_ understand what the function does.
++ [ ] Write a (unit) **test** covering the acceptance criteria (_test first!_)
++ [ ] Write the (_bare minimum_) code to ***pass*** the test assertions.
+
+> _**Note On Time Estimates**: if it takes **longer** than **25 mins** "budget",
+**don't panic** or feel like you have "failed",
+it's not a "problem" ...
+it's just "**more data**" (knowledge/experience)
+that you can incorporate into improving **future estimates**!
+over time you will get **really good** at estimating,
+this is just a **starting point**_
+
+#### `render` `JSDOC` Comment Documentation
+
+
 
 
 <!--

From 8f2252ab0b5254cad798e3e89991e59fa3b89fc9 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 7 Aug 2018 12:27:12 +0100
Subject: [PATCH 091/164] add JSDOC comment for render_footer #53

---
 examples/todo-list/todo-app.js |  6 +++++-
 todo-list.md                   | 14 +++++++++++++-
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 8d85ed1a..0ff34743 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -90,6 +90,9 @@ function render_main (model) {
   )
 }
 
+
+
+
 // function view(signal, model, root) {
 //   empty(root); // clear root element before re-rendering the App (DOM).
 //   model.counters.map(function(counter, index) {
@@ -109,7 +112,8 @@ if (typeof module !== 'undefined' && module.exports) {
     model: initial_model,
     update: update,
     render_item: render_item, // export so that we can unit test
-    render_main: render_main,
+    render_main: render_main, // export for unit testing
+    
   }
 }
 
diff --git a/todo-list.md b/todo-list.md
index 91990485..4ea92618 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1059,8 +1059,20 @@ that you can incorporate into improving **future estimates**!
 over time you will get **really good** at estimating,
 this is just a **starting point**_
 
-#### `render` `JSDOC` Comment Documentation
+#### `render_footer` `JSDOC` Comment Documentation
 
+```js
+/**
+ * `render_footer` renders the `<footer class="footer">` of the Todo List App
+ * which contains count of items to (still) to be done and a `<ul>` "menu"
+ * with links to filter which todo items appear in the list view.
+ * @param {Object} model - the App's (current) model (or "state").
+ * @return {Object} <section> DOM Tree which containing the <footer> element.
+ * @example
+ * // returns <footer> DOM element with other DOM elements nested:
+ * var DOM = render_footer(model);
+ */
+```
 
 
 

From 68e2afa3bd95c46da7df559007d90dedcbae500f Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 7 Aug 2018 13:35:29 +0100
Subject: [PATCH 092/164] add render_footer function implementation for #53

---
 examples/todo-list/elmish.js   |   4 +-
 examples/todo-list/todo-app.js |  40 ++++++++++-
 test/elmish.test.js            |   6 +-
 test/todo-app.test.js          |  59 ++++++++++++++++-
 todo-list.md                   | 118 +++++++++++++++++++++++++++------
 5 files changed, 200 insertions(+), 27 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 16cf96fe..54e3e054 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -178,7 +178,9 @@ function span (attrlist, childnodes) {
 }
 
 function strong (text_str) {
-  return create_element('strong', [], text(text_str));
+  var el = document.createElement ("strong");
+  el.innerHTML = text_str;
+  return el;
 }
 
 function text (text) {
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 0ff34743..f4bb0d1d 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -90,7 +90,45 @@ function render_main (model) {
   )
 }
 
+/**
+ * `render_footer` renders the `<footer class="footer">` of the Todo List App
+ * which contains count of items to (still) to be done and a `<ul>` "menu"
+ * with links to filter which todo items appear in the list view.
+ * @param {Object} model - the App's (current) model (or "state").
+ * @return {Object} <section> DOM Tree which containing the <footer> element.
+ * @example
+ * // returns <footer> DOM element with other DOM elements nested:
+ * var DOM = render_footer(model);
+ */
+function render_footer (model) {
+  var count = model.todos.filter(
+      function (i) { return i.done === false }
+    ).length.toString();
+  var left = (" item" + (model.todos.length > 1 ? 's' : '') + " left");
 
+  return (
+    footer(["class=footer", "style=display: block;"], [
+      span(["class=todo-count", "id=count"], [
+        strong(count),
+        text(left)
+      ]),
+      ul(["class=filters"], [
+        li([], [
+          a(["href=#/", "class=selected"], [text("All")])
+        ]),
+        li([], [
+          a(["href=#/active"], [text("Active")])
+        ]),
+        li([], [
+          a(["href=#/completed"], [text("Completed")])
+        ])
+      ]), // </ul>
+      button(["class=clear-completed", "style=display:block;"],
+        [text("Clear completed")]
+      )
+    ])
+  )
+}
 
 
 // function view(signal, model, root) {
@@ -113,7 +151,7 @@ if (typeof module !== 'undefined' && module.exports) {
     update: update,
     render_item: render_item, // export so that we can unit test
     render_main: render_main, // export for unit testing
-    
+    render_footer: render_footer // export for unit testing
   }
 }
 
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 360c9f95..6825da51 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -311,7 +311,7 @@ test('elmish create <footer> view using HTML DOM functions', function (t) {
     footer(["class=footer", "style=display: block;"], [
       span(["class=todo-count", "id=count"], [
         strong("1"),
-        text("item left")
+        text(" item left")
       ]),
       ul(["class=filters"], [
         li([], [
@@ -330,8 +330,10 @@ test('elmish create <footer> view using HTML DOM functions', function (t) {
     ])
   ], document.getElementById(id));
 
+  // count of items left:
   const left = document.getElementById('count').textContent;
-  t.equal(left, "item left", 'there is 1 todo item left');
+  t.equal("1 item left", left, 'there is 1 (ONE) todo item left');
+
   const clear = document.querySelectorAll('button')[0].textContent;
   t.equal(clear, "Clear completed", '<button> text is "Clear completed"');
   const selected = document.querySelectorAll('.selected')[0].textContent;
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 2cfe3b6a..f94b1e70 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -79,7 +79,7 @@ test('render_item HTML for a single Todo Item', function (t) {
   t.end();
 });
 
-test('render "main" view using (elmish) HTML DOM functions', function (t) {
+test('render_main "main" view using (elmish) HTML DOM functions', function (t) {
   const model = {
     todos: [
       { id: 1, title: "Learn Elm Architecture", done: true },
@@ -104,3 +104,60 @@ test('render "main" view using (elmish) HTML DOM functions', function (t) {
   elmish.empty(document.getElementById(id)); // clear DOM ready for next test
   t.end();
 });
+
+test('render_footer view using (elmish) HTML DOM functions', function (t) {
+  const model = {
+    todos: [
+      { id: 1, title: "Learn Elm Architecture", done: true },
+      { id: 2, title: "Build Todo List App",    done: false },
+      { id: 3, title: "Win the Internet!",      done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render_footer view and append it to the DOM inside the `test-app` node:
+  document.getElementById(id).appendChild(app.render_footer(model));
+
+  // todo-count should display 2 items left (still to be done):
+  const left = document.getElementById('count').innerHTML;
+  t.equal(left, "<strong>2</strong> items left", "Todos remaining: " + left);
+
+  // count number of footer <li> items:
+  t.equal(document.querySelectorAll('li').length, 3, "3 <li> in <footer>");
+
+  // check footer link text and href:
+  const link_text = ['All', 'Active', 'Completed'];
+  const hrefs = ['#/', '#/active', '#/completed'];
+  document.querySelectorAll('a').forEach(function (a, index) {
+    // check link text:
+    t.equal(a.textContent, link_text[index], "<footer> link #" + index
+      + " is: " + a.textContent + " === " + link_text[index]);
+    // check hrefs:
+    t.equal(a.href.replace('about:blank', ''), hrefs[index],
+    "<footer> link #" + index + " href is: " + hrefs[index]);
+  });
+
+  // check for "Clear completed" button in footer:
+  const clear = document.querySelectorAll('.clear-completed')[0].textContent;
+  t.equal(clear, 'Clear completed', '<button> in <footer> "Clear completed"');
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
+
+test('render_footer 1 item left (pluarisation test)', function (t) {
+  const model = {
+    todos: [
+      { id: 1, title: "Be excellent to each other!", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render_footer view and append it to the DOM inside the `test-app` node:
+  document.getElementById(id).appendChild(app.render_footer(model));
+
+  // todo-count should display "1 item left" (still to be done):
+  const left = document.getElementById('count').innerHTML;
+  t.equal(left, "<strong>1</strong> item left", "Todos remaining: " + left);
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index 4ea92618..3d346b4b 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -944,27 +944,7 @@ which is _both **faster** and **more maintainable**_! <br />
 Onwards!
 
 
-```html
-<footer class="footer" style="display: block;">
-  <span class="todo-count">
-    <strong>2</strong> items left
-  </span>
-  <ul class="filters">
-    <li>
-      <a href="#/" class="selected">All</a>
-    </li>
-    <li>
-      <a href="#/active">Active</a>
-    </li>
-    <li>
-      <a href="#/completed">Completed</a>
-    </li>
-  </ul>
-  <button class="clear-completed" style="display: block;">
-    Clear completed
-  </button>
-</footer>
-```
+<br />
 
 
 ### `<footer>` Element [issues/53](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/53)
@@ -1023,7 +1003,8 @@ These are the criteria (_checklist_) as described in [issues/53](https://github.
   + [ ] **`<span class="todo-count">`** which contains
     + [ ] a **`text`** node with: **"`{count}` item(s) left"**.
    _pseudocode_:
-  `{model.todos.filter(done==false)}` item`{model.todo.length > 1 ? 's' : '' }` left
+  `{model.todos.filter( (i) => { i.done==false })}`
+    item`{model.todos.length > 1 ? 's' : '' }` left
   + [ ] **`<ul>`** containing 3 **`<li>`** with the following links (**`<a>`**):
     + [ ] Show **`All`**: **`<a href="#/" class="selected">All</a>`**
       + [ ] **`class="selected"`** should only appear on the selected menu/navigation item.
@@ -1061,6 +1042,8 @@ this is just a **starting point**_
 
 #### `render_footer` `JSDOC` Comment Documentation
 
+Here is a sample comment which documents the **`render_footer`** function:
+
 ```js
 /**
  * `render_footer` renders the `<footer class="footer">` of the Todo List App
@@ -1074,7 +1057,98 @@ this is just a **starting point**_
  */
 ```
 
+Write your _own_ JSDOC or add these lines to your **`todo-app.js`** file.
+
+#### `render_footer` Test
+
+Here is a sample test you can add to your `test/todo-app.test.js` file:
+(_if you feel confident in your TDD skills,
+  you could **`try`** to write your own test/assertions..._)
+
+```js
+test.only('render_footer view using (elmish) HTML DOM functions', function (t) {
+  const model = {
+    todos: [
+      { id: 1, title: "Learn Elm Architecture", done: true },
+      { id: 2, title: "Build Todo List App",    done: false },
+      { id: 3, title: "Win the Internet!",      done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render_footer view and append it to the DOM inside the `test-app` node:
+  document.getElementById(id).appendChild(app.render_footer(model));
+
+  // todo-count should display 2 items left (still to be done):
+  const left = document.getElementById('count').innerHTML;
+  t.equal(left, "<strong>2</strong> items left", "Todos remaining: " + left);
+
+  // count number of footer <li> items:
+  t.equal(document.querySelectorAll('li').length, 3, "3 <li> in <footer>");
+
+  // check footer link text and href:
+  const link_text = ['All', 'Active', 'Completed'];
+  const hrefs = ['#/', '#/active', '#/completed'];
+  document.querySelectorAll('a').forEach(function (a, index) {
+    // check link text:
+    t.equal(a.textContent, link_text[index], "<footer> link #" + index
+      + " is: " + a.textContent + " === " + link_text[index]);
+    // check hrefs:
+    t.equal(a.href.replace('about:blank', ''), hrefs[index],
+    "<footer> link #" + index + " href is: " + hrefs[index]);
+  });
+
+  // check for "Clear completed" button in footer:
+  const clear = document.querySelectorAll('.clear-completed')[0].textContent;
+  t.equal(clear, 'Clear completed', '<button> in <footer> "Clear completed"');
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
+```
+
+Run this test:
+```sh
+node test/todo-app.test.js
+```
+
+you will see something like this:
+![render_footer-test-failing](https://user-images.githubusercontent.com/194400/43774185-3be99666-9a40-11e8-9387-f172f95dd80b.png)
+
+#### `render_footer` Implementation
+
+Given the docs and test above, attempt to write the `render_footer` function.
 
+> _**Note**: for now we are **not** "concerned"
+with what happens when the "Clear completed" **`<buton>`** is clicked/tapped.
+We will "cover" that below. For now, focus on rendering the DOM._
+
+> If you get "stuck" trying to make the tests pass, first keep tring!
+Then "as a friend" and finally, consult the _reference_ implementation in:
+[**`todo-app.js`**]()
+
+
+For good measure, we add a _second_ test to check our "pluarisation":
+
+```js
+test('render_footer 1 item left (pluarisation test)', function (t) {
+  const model = {
+    todos: [
+      { id: 1, title: "Be excellent to each other!", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render_footer view and append it to the DOM inside the `test-app` node:
+  document.getElementById(id).appendChild(app.render_footer(model));
+
+  // todo-count should display "1 item left" (still to be done):
+  const left = document.getElementById('count').innerHTML;
+  t.equal(left, "<strong>1</strong> item left", "Todos remaining: " + left);
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
+```
+This test _should_ pass without any further code needing to be written.
 
 <!--
 

From aae049017925d36746dff0c77303b4735963a91f Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 7 Aug 2018 15:27:01 +0100
Subject: [PATCH 093/164] adds JSDOC and test for view function #54

---
 examples/todo-list/todo-app.js |   4 +-
 test/todo-app.test.js          |  21 +++++++
 todo-list.md                   | 106 +++++++++++++++++++++++++++++++++
 3 files changed, 130 insertions(+), 1 deletion(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index f4bb0d1d..170beda7 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -104,7 +104,9 @@ function render_footer (model) {
   var count = model.todos.filter(
       function (i) { return i.done === false }
     ).length.toString();
-  var left = (" item" + (model.todos.length > 1 ? 's' : '') + " left");
+  // pluarisation of number of items:
+  var left = (" item" +
+    (model.todos.length > 1 || model.todos.length === 0 ? 's' : '') + " left");
 
   return (
     footer(["class=footer", "style=display: block;"], [
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index f94b1e70..ca54d88a 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -161,3 +161,24 @@ test('render_footer 1 item left (pluarisation test)', function (t) {
   elmish.empty(document.getElementById(id)); // clear DOM ready for next test
   t.end();
 });
+
+test.only('view renders the whole todo app using "partials"', function (t) {
+  // render the view and append it to the DOM inside the `test-app` node:
+  document.getElementById(id).appendChild(app.view(app.model)); // initial_model
+
+  t.equal(document.querySelectorAll('h1').textContent, "todos", "<h1>todos");
+  // placeholder:
+  const placeholder = document.getElementById('new-todo')
+    .getAttribute("placeholder");
+  t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
+
+  const empty = document.querySelectorAll('.todo-list')
+  console.log('empty', empty);
+
+  // todo-count should display 0 items left (based on initial_model):
+  const left = document.getElementById('count').innerHTML;
+  t.equal(left, "<strong>0</strong> items left", "Todos remaining: " + left);
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index 3d346b4b..fb6884a6 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1150,6 +1150,112 @@ test('render_footer 1 item left (pluarisation test)', function (t) {
 ```
 This test _should_ pass without any further code needing to be written.
 
+Once you have written the code to pass the tests,
+you should see something like this:
+
+![render_footer-tests-passing-coverage-100percent](https://user-images.githubusercontent.com/194400/43776336-6a3b8fe0-9a47-11e8-8155-deb0fcf44e5a.png)
+
+
+### `view` Function
+
+Now that we have the individual ("_lower order_") functions
+**`render_main`** #51, **`render_item`** #52, and **`render_footer`** #53
+for rendering the _sections_ of the todo app,
+we can write the `view` function to render the _entire_ app!
+
+With the `main` and `footer` "_partial_" views built,
+the overall **`view`** is quite simple:
+
+![todoapp-view](https://user-images.githubusercontent.com/194400/43779964-6fb92176-9a51-11e8-8b78-64c60242990d.png)
+
+To save on repetition, and illustrate just how _simple_
+the **`view`** is,
+this is the "HTML" with the
+**`<section class"main">`** and **`<footer class="footer">`**
+partials replaced by invocations
+to the respective functions
+**`render_main`** and **`render_footer`**:
+
+```html
+<section class="todoapp">
+  <header class="header">
+    <h1>todos</h1>
+    <input class="new-todo" placeholder="What needs to be done?" autofocus="">
+  </header>
+  render_main(model)
+  render_footer(model)
+</section>
+```
+
+#### `view` Acceptance Criteria
+
+The `view` displays:
++ [ ] **`<section class="todo-app">`** inside which the app is rendered.
++ [ ] **`<h1>`** containing the title text "**todos**".
++ [ ] **`<input class="new-todo">`**
+  has placeholder text **"What needs to be done?"**
++ [ ] **`<ul class="todo-list">`** list of todo items
+  has `zero` items by default (_based on the `initial_model`_)
++ [ ] `<footer>` count is Zero when the app is first
+  rendered with no todos in the `model`.
+
+#### `view` JSDOC Comment Documentation
+
+Here is a sample JSDOC comment you can add to your **`todo-app.js`** file:
+
+```js
+/**
+ * `view` renders the entire Todo List App
+ * which contains count of items to (still) to be done and a `<ul>` "menu"
+ * with links to filter which todo items appear in the list view.
+ * @param {Object} model - the App's (current) model (or "state").
+ * @return {Object} <section> DOM Tree which containing all other DOM elements.
+ * @example
+ * // returns <section class="todo-app"> DOM element with other DOM els nested:
+ * var DOM = view(model);
+ */
+```
+These should be pretty familiar to you by now.
+If you feel comfortable extending it with more detail, go for it!
+
+#### `view` Tests
+
+A sample test for the `view` function
+you can add to your `test/todo-app.test.js` file:
+(_if you feel confident in your TDD skills,
+  you could **`try`** to write your own test/assertions..._)
+
+```js
+test.only('view renders the whole todo app using "partials"', function (t) {
+  // render the view and append it to the DOM inside the `test-app` node:
+  document.getElementById(id).appendChild(app.view(app.model)); // initial_model
+
+  t.equal(document.querySelectorAll('h1').textContent, "todos", "<h1>todos");
+  // placeholder:
+  const placeholder = document.getElementById('new-todo')
+    .getAttribute("placeholder");
+  t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
+
+  const empty = document.querySelectorAll('.todo-list')
+  console.log('empty', empty);
+
+  // todo-count should display 0 items left (based on initial_model):
+  const left = document.getElementById('count').innerHTML;
+  t.equal(left, "<strong>0</strong> items left", "Todos remaining: " + left);
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
+```
+
+Run this test:
+```sh
+node test/todo-app.test.js
+```
+
+you will see something like this ("_Red_"):
+
+
 <!--
 
 ## What _Next_?

From 3096d81a777392c07a132136db496224871ff4c9 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 7 Aug 2018 15:41:53 +0100
Subject: [PATCH 094/164] add view function implementation to pass tests for
 #54

---
 examples/todo-list/todo-app.js | 48 +++++++++++++++++++++++-----------
 test/todo-app.test.js          |  7 ++---
 todo-list.md                   | 15 +++++++----
 3 files changed, 45 insertions(+), 25 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 170beda7..5d196e0c 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -132,18 +132,35 @@ function render_footer (model) {
   )
 }
 
-
-// function view(signal, model, root) {
-//   empty(root); // clear root element before re-rendering the App (DOM).
-//   model.counters.map(function(counter, index) {
-//     return container(index, [                // wrap DOM nodes in an "container"
-//       button('+', signal, Inc + '-' + index),    // append index to action
-//       div('count', counter),       // create div w/ count as text
-//       button('-', signal, Dec + '-' + index),    // decrement counter
-//       button('Reset', signal, Res + '-' + index) // reset counter
-//     ]);
-//   }).forEach(function (el) { root.appendChild(el) }); // forEach is ES5 so IE9+
-// }
+/**
+ * `view` renders the entire Todo List App
+ * which contains count of items to (still) to be done and a `<ul>` "menu"
+ * with links to filter which todo items appear in the list view.
+ * @param {Object} model - the App's (current) model (or "state").
+ * @return {Object} <section> DOM Tree which containing all other DOM elements.
+ * @example
+ * // returns <section class="todo-app"> DOM element with other DOM els nested:
+ * var DOM = view(model);
+ */
+function view(model) {
+  return (
+    section(["class=todoapp"], [ // array of "child" elements
+      header(["class=header"], [
+        h1([], [
+          text("todos")
+        ]), // </h1>
+        input([
+          "id=new-todo",
+          "class=new-todo",
+          "placeholder=What needs to be done?",
+          "autofocus"
+        ], []) // <input> is "self-closing"
+      ]), // </header>
+      render_main(model),
+      render_footer(model)
+    ]) // <section>
+  );
+}
 
 /* module.exports is needed to run the functions using Node.js for testing! */
 /* istanbul ignore next */
@@ -151,9 +168,10 @@ if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     model: initial_model,
     update: update,
-    render_item: render_item, // export so that we can unit test
-    render_main: render_main, // export for unit testing
-    render_footer: render_footer // export for unit testing
+    render_item: render_item,     // export so that we can unit test
+    render_main: render_main,     // export for unit testing
+    render_footer: render_footer, // export for unit testing
+    view: view
   }
 }
 
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index ca54d88a..f9dcfdb5 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -162,19 +162,16 @@ test('render_footer 1 item left (pluarisation test)', function (t) {
   t.end();
 });
 
-test.only('view renders the whole todo app using "partials"', function (t) {
+test('view renders the whole todo app using "partials"', function (t) {
   // render the view and append it to the DOM inside the `test-app` node:
   document.getElementById(id).appendChild(app.view(app.model)); // initial_model
 
-  t.equal(document.querySelectorAll('h1').textContent, "todos", "<h1>todos");
+  t.equal(document.querySelectorAll('h1')[0].textContent, "todos", "<h1>todos");
   // placeholder:
   const placeholder = document.getElementById('new-todo')
     .getAttribute("placeholder");
   t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
 
-  const empty = document.querySelectorAll('.todo-list')
-  console.log('empty', empty);
-
   // todo-count should display 0 items left (based on initial_model):
   const left = document.getElementById('count').innerHTML;
   t.equal(left, "<strong>0</strong> items left", "Todos remaining: " + left);
diff --git a/todo-list.md b/todo-list.md
index fb6884a6..5195099c 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1218,7 +1218,7 @@ Here is a sample JSDOC comment you can add to your **`todo-app.js`** file:
 These should be pretty familiar to you by now.
 If you feel comfortable extending it with more detail, go for it!
 
-#### `view` Tests
+#### `view` _Tests_
 
 A sample test for the `view` function
 you can add to your `test/todo-app.test.js` file:
@@ -1230,15 +1230,12 @@ test.only('view renders the whole todo app using "partials"', function (t) {
   // render the view and append it to the DOM inside the `test-app` node:
   document.getElementById(id).appendChild(app.view(app.model)); // initial_model
 
-  t.equal(document.querySelectorAll('h1').textContent, "todos", "<h1>todos");
+  t.equal(document.querySelectorAll('h1')[0].textContent, "todos", "<h1>todos");
   // placeholder:
   const placeholder = document.getElementById('new-todo')
     .getAttribute("placeholder");
   t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
 
-  const empty = document.querySelectorAll('.todo-list')
-  console.log('empty', empty);
-
   // todo-count should display 0 items left (based on initial_model):
   const left = document.getElementById('count').innerHTML;
   t.equal(left, "<strong>0</strong> items left", "Todos remaining: " + left);
@@ -1254,7 +1251,15 @@ node test/todo-app.test.js
 ```
 
 you will see something like this ("_Red_"):
+![app.view-not-a-function](https://user-images.githubusercontent.com/194400/43782111-721805c2-9a56-11e8-970b-681b1499b3a8.png)
+
+#### `view` Function _Implementation_
+
+
+
 
+When you run `npm test` you should see something like this:
+![image](https://user-images.githubusercontent.com/194400/43782895-48496f22-9a58-11e8-9fde-dbb5554f43a0.png)
 
 <!--
 

From 470ad9f3bf9116f8aded41ecb851b5d36defe89b Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 7 Aug 2018 15:45:31 +0100
Subject: [PATCH 095/164] add link to reference implementation of view function
 fixes #54

---
 todo-list.md | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index 5195099c..e4d76ac1 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1124,7 +1124,7 @@ We will "cover" that below. For now, focus on rendering the DOM._
 
 > If you get "stuck" trying to make the tests pass, first keep tring!
 Then "as a friend" and finally, consult the _reference_ implementation in:
-[**`todo-app.js`**]()
+[**`todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/commits/68e2afa3bd95c46da7df559007d90dedcbae500f#diff-6be3e16fe7cfb4c00788d4d587374afdR103)
 
 
 For good measure, we add a _second_ test to check our "pluarisation":
@@ -1236,7 +1236,7 @@ test.only('view renders the whole todo app using "partials"', function (t) {
     .getAttribute("placeholder");
   t.equal(placeholder, "What needs to be done?", "paceholder set on <input>");
 
-  // todo-count should display 0 items left (based on initial_model):
+  // todo-count should display "0 items left" (based on initial_model):
   const left = document.getElementById('count').innerHTML;
   t.equal(left, "<strong>0</strong> items left", "Todos remaining: " + left);
 
@@ -1255,12 +1255,19 @@ you will see something like this ("_Red_"):
 
 #### `view` Function _Implementation_
 
+You should have the knowledge & skill
+to write the `view` function and make the test pass.
 
-
+> If you get "stuck" trying to make the tests pass, first keep tring!
+Then "as a friend" and finally, consult the _reference_ implementation in:
+[**`todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/commits/3096d81a777392c07a132136db496224871ff4c9#diff-6be3e16fe7cfb4c00788d4d587374afdR145)
 
 When you run `npm test` you should see something like this:
 ![image](https://user-images.githubusercontent.com/194400/43782895-48496f22-9a58-11e8-9fde-dbb5554f43a0.png)
 
+
+
+
 <!--
 
 ## What _Next_?

From ef56c490a48db8a900f1832d0cc373b75838b4d4 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 8 Aug 2018 15:29:14 +0100
Subject: [PATCH 096/164] refactor counter-reset example to use the elmish
 mount function signaure and simplify view
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/5

---
 examples/counter-reset/counter.js | 22 +++++++++-----
 examples/todo-list/elmish.js      | 13 ++++----
 examples/todo-list/index.html     | 45 ++++++++++------------------
 examples/todo-list/todo-app.js    | 20 ++++++-------
 test/counter-reset.test.js        |  4 ++-
 test/elmish.test.js               |  4 +++
 todo-list.md                      | 50 +++++++++++++++++++++++++++++++
 7 files changed, 103 insertions(+), 55 deletions(-)

diff --git a/examples/counter-reset/counter.js b/examples/counter-reset/counter.js
index 9c55d091..f7910634 100644
--- a/examples/counter-reset/counter.js
+++ b/examples/counter-reset/counter.js
@@ -12,14 +12,13 @@ function update (action, model) {     // Update function takes the current state
   }                                  // (default action always returns current)
 }
 
-function view(signal, model, root) {
-  empty(root);                                 // clear root element before
-  [                                            // Store DOM nodes in an array
+function view(model, signal) {
+  return container([                           // Store DOM nodes in an array
     button('+', signal, Inc),                  // then iterate to append them
     div('count', model),                       // create div with stat as text
     button('-', signal, Dec),                  // decrement counter
     button('Reset', signal, Res)               // reset counter
-  ].forEach(function(el){ root.appendChild(el) }); // forEach is ES5 so IE9+
+  ]); // forEach is ES5 so IE9+
 } // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
 
 // Mount Function receives all MUV and mounts the app in the "root" DOM Element
@@ -28,10 +27,11 @@ function mount(model, update, view, root_element_id) {
   function signal(action) {          // signal function takes action
     return function callback() {     // and returns callback
       model = update(action, model); // update model according to action
-      view(signal, model, root);     // subsequent re-rendering
+      empty(root);
+      root.appendChild(view(model, signal)); // subsequent re-rendering
     };
   };
-  view(signal, model, root);         // render initial model (once)
+  root.appendChild(view(model, signal));    // render initial model (once)
 }
 
 // The following are "Helper" Functions which each "Do ONLY One Thing" and are
@@ -40,7 +40,7 @@ function mount(model, update, view, root_element_id) {
 // empty the contents of a given DOM element "node" (before re-rendering)
 function empty(node) {
   while (node.firstChild) {
-      node.removeChild(node.firstChild);
+    node.removeChild(node.firstChild);
   }
 } // Inspired by: stackoverflow.com/a/3955238/1148249
 
@@ -66,6 +66,14 @@ function div(divid, text) {
   return div;
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
+function container(elements) {
+  var con = document.createElement('section');
+  con.className = 'counter';
+  elements.forEach(function(el) { con.appendChild(el) });
+  return con;
+}
+
 /* The code block below ONLY Applies to tests run using Node.js */
 /* istanbul ignore else */
 if (typeof module !== 'undefined' && module.exports) {
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 54e3e054..0d98b492 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -1,4 +1,3 @@
-(function() { // scope elm(ish) functions to prevent conflicts if used elsewhere
 /**
  * `empty` the contents of a given DOM element "node" (before re-rendering).
  * This is the *fastest* way according to: stackoverflow.com/a/3955238/1148249
@@ -8,7 +7,7 @@
  * const node = document.getElementById('app');
  * empty(node);
  */
-function empty(node) {
+function empty (node) {
   while (node.lastChild) {
     node.removeChild(node.lastChild);
   }
@@ -21,18 +20,18 @@ function empty(node) {
  * @param {Function} view function that renders HTML/DOM elements with model.
  * @param {String} root_element_id root DOM element in which the app is mounted
  */
-function mount(model, update, view, root_element_id) {
+function mount (model, update, view, root_element_id) {
   var root = document.getElementById(root_element_id); // root DOM element
   function signal(action) {                     // signal function takes action
     return function callback() {                // and returns callback
       var updatedModel = update(action, model); // update model for the action
       localStorage.setItem('elmish_store', JSON.stringify(updatedModel));
       empty(root);                              // clear root el before rerender
-      view(signal, updatedModel, root);         // subsequent re-rendering
+      root.appendChild(view(updatedModel, signal)); // subsequent re-rendering
     };
   };
   model = JSON.parse(localStorage.getItem('elmish_store')) || model;
-  view(signal, model, root);                    // render initial model (once)
+  root.appendChild(view(model, signal))            // render initial model (once)
   localStorage.setItem('elmish_store', JSON.stringify(model)); // save model!
 }
 
@@ -58,7 +57,7 @@ function add_attributes (attrlist, node) {
         case 'checked':
           node.checked = (a[1] === 'true' ? true : false);
         case 'class':
-          node.className = a[1]; // apply CSS classes
+          node.className = a[1]; // apply one or more CSS classes
           break;
         case 'data-id':
           node.setAttribute('data-id', a[1]); // add data-id e.g: to <li>
@@ -233,5 +232,3 @@ if (typeof module !== 'undefined' && module.exports) {
     ul: ul
   }
 }
-
-})();
diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
index fd11ca1c..5a4e58c8 100644
--- a/examples/todo-list/index.html
+++ b/examples/todo-list/index.html
@@ -7,40 +7,27 @@
   <title>Elm(ish) Todo List!</title>
   <link rel="shortcut icon"
   href="http://www.dwyl.io/images/favicon.ico" type="image/x-icon">
+</head>
+<body>
+  <div id="app"></div>
   <!-- CSS Styles are 100% optional. but they make it look *much* nicer -->
   <link rel="stylesheet" href="todomvc-common-base.css">
   <link rel="stylesheet" href="todomvc-app.css">
+  <script src="elmish.js"></script>
+  <script src="todo-app.js"></script>
+  <script>
+    var model = {
+      todos: [
+        { id: 1, title: "Learn Elm Architecture", done: true },
+        { id: 2, title: "Build Todo List App",    done: false },
+        { id: 3, title: "Win the Internet!",      done: false }
+      ],
+      hash: '#/' // the "route" to display
+    };
+    mount(model, update, view, 'app');
+  </script>
 
-</head>
-<body>
-  
-<!--
-  <script src="todo-app.js" data-cover></script> load counter
-
-  <script> mount({counters:[0, 1, 2]}, update, view, 'app'); </script>
--->
   <!-- Below this point is all related to the Tests for the App -->
   <div id="test-app"></div> <!-- Create a test-app div to mount the app -->
-  <div id="qunit"></div>    <!-- test results are displayed here -->
-  <!-- Load the QUnit CSS file from CDN - require to display our tests -->
-  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.18.0.css">
-  <!-- Load the QUnit Testing Framework from CDN - to run the tests -->
-  <script src="https://code.jquery.com/qunit/qunit-1.18.0.js"></script>
-  <!-- Load Blanket.js from CDN - for test coverage stats -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/blanket.js/1.1.4/blanket.js">
-  </script>
-  <!--  <script src="test.js"></script>  always load test.js last -->
-  <script>
-  setTimeout(function () { // delay for 1 second then run:
-    console.log('window.location.href:', window.location.href);
-    var base = window.location.href.split('#')[0];
-    var active = '#/active';
-    window.location.href = base + active;
-    console.log('window.location.href:', window.location.href, 'updated!');
-    console.log('window.history.length:', window.history.length);
-    window.history.pushState(null, 'Active', active);
-    console.log('window.history.length:', window.history.length);
-  }, 1000)
-  </script>
 </body>
 </html>
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 5d196e0c..a39840aa 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -1,9 +1,9 @@
-(function() { // scope functions to prevent naming conflicts
 /* if require is available, it means we are in Node.js Land i.e. testing! */
 /* istanbul ignore next */
-const { a, button, div, empty, footer, input, h1, header, label, li, mount,
-  route, section, span, strong, text, ul } =
-    (typeof require !== 'undefined') ? require('./elmish.js') : {};
+if (typeof require !== 'undefined' && this.window !== this) {
+  var { a, button, div, empty, footer, input, h1, header, label, li, mount,
+    route, section, span, strong, text, ul } = require('./elmish.js');
+}
 
 var initial_model = {
   todos: [],
@@ -62,8 +62,11 @@ function render_item (item) {
       item.done ? "class=completed" : ""
     ], [
       div(["class=view"], [
-        input(["class=toggle", "type=checkbox",
-            item.done ? "checked=true" : ""],
+        input([
+          item.done ? "checked=true" : "",
+          "class=toggle",
+          "type=checkbox"
+          ],
           []), // <input> does not have any nested elements
         label([], [text(item.title)]),
         button(["class=destroy"])
@@ -142,7 +145,7 @@ function render_footer (model) {
  * // returns <section class="todo-app"> DOM element with other DOM els nested:
  * var DOM = view(model);
  */
-function view(model) {
+function view (model) {
   return (
     section(["class=todoapp"], [ // array of "child" elements
       header(["class=header"], [
@@ -174,6 +177,3 @@ if (typeof module !== 'undefined' && module.exports) {
     view: view
   }
 }
-
-
-})(); // https://en.wikipedia.org/wiki/Immediately-invoked_function_expression
diff --git a/test/counter-reset.test.js b/test/counter-reset.test.js
index ace1db6b..60ee1079 100644
--- a/test/counter-reset.test.js
+++ b/test/counter-reset.test.js
@@ -42,6 +42,7 @@ test('Test Update decrement: update("dec", 1) returns 0', function (t) {
 
 test('click on "+" button (increment model by 1)', function (t) {
   // console.log('document', typeof document, document);
+  empty(document.getElementById(id));
   document.body.appendChild(div(id));
   mount(7, update, view, id);
 
@@ -65,8 +66,9 @@ test('click on "+" button (increment model by 1)', function (t) {
 });
 
 test('Click reset button resets state to 0', function (t) {
-  mount(7, update, view, id);
   var root = document.getElementById(id);
+  empty(root);
+  mount(7, update, view, id);
   var state7 = parseInt(root.getElementsByClassName('count')[0].textContent, 10)
   t.equal(state7, 7, "State is 7 after mounting with initial state=7");
   var btn = root.getElementsByClassName("reset")[0]; // click reset button
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 6825da51..ae95ce53 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -373,9 +373,13 @@ global.localStorage = { // globals are bad! but a "necessary evil" here ...
  },
  setItem: function (key, value) {
    this[key] = value;
+ },
+ removeItem: function (key) {
+   delete this[key]
  }
 }
 localStorage.setItem('hello', 'world!');
+localStorage.removeItem('elmish_store');
 // console.log('localStorage (polyfil) hello', localStorage.getItem('hello'));
 
 // // Test mount's localStorage using view and update from counter-reset example
diff --git a/todo-list.md b/todo-list.md
index e4d76ac1..e78b5b56 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1266,7 +1266,57 @@ When you run `npm test` you should see something like this:
 ![image](https://user-images.githubusercontent.com/194400/43782895-48496f22-9a58-11e8-9fde-dbb5554f43a0.png)
 
 
+## Checkpoint!
 
+So far we have made a _lot_ of progress with our Todo List App _quest_,
+_however_ if we were to _stop_ working on this _now_ we would have
+_nothing_ to show a "user".
+Users can't _interact_ with functions,
+even those with _great_ test coverage!
+
+What we _need_ is to start putting all the pieces together
+into a functioning app!
+
+### Mount the App in `index.html`
+
+Open your **`/examples/todo-list/index.html`** file
+and ensure that the following lines are in the **`<body>`**:
+
+```html
+<body>
+  <div id="app"></div>
+  <!-- CSS Styles are 100% optional. but they make it look *much* nicer -->
+  <link rel="stylesheet" href="todomvc-common-base.css">
+  <link rel="stylesheet" href="todomvc-app.css">
+
+  <script src="elmish.js"></script>
+  <script src="todo-app.js"></script>
+  <script>
+    var model = {
+      todos: [
+        { id: 1, title: "Learn Elm Architecture", done: true },
+        { id: 2, title: "Build Todo List App",    done: false },
+        { id: 3, title: "Win the Internet!",      done: false }
+      ],
+      hash: '#/' // the "route" to display
+    };
+    mount(model, update, view, 'app');
+  </script>
+
+  <!-- Below this point is all related to the Tests for the App -->
+  <div id="test-app"></div> <!-- Create a test-app div to mount the app -->
+</body>
+```
+
+For a "snapshot" of the `index.html` file here,
+see:
+
+
+If you run the project with `npm start`
+and open: http://127.0.0.1:8000/examples/todo-list
+
+You should see:
+![view-working](https://user-images.githubusercontent.com/194400/43786145-e476bdd0-9a5f-11e8-9043-cf997be615ae.png)
 
 <!--
 

From 93f00d02f5c092ab611ff27b4a23e599820c998e Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 8 Aug 2018 23:55:53 +0100
Subject: [PATCH 097/164] add (failing) test and screenshot for "No Todos" test
 case #56

---
 todo-list.md | 107 +++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 103 insertions(+), 4 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index e78b5b56..55da2729 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1308,16 +1308,115 @@ and ensure that the following lines are in the **`<body>`**:
 </body>
 ```
 
-For a "snapshot" of the `index.html` file here,
-see:
+For a complete "snapshot" of the `index.html` file here,
+see: [**`examples/todo-list/index.html`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/ef56c490a48db8a900f1832d0cc373b75838b4d4/examples/todo-list/index.html)
 
 
-If you run the project with `npm start`
-and open: http://127.0.0.1:8000/examples/todo-list
+If you run the project with command **`npm start`**
+and navigate to: http://127.0.0.1:8000/examples/todo-list
 
 You should see:
 ![view-working](https://user-images.githubusercontent.com/194400/43786145-e476bdd0-9a5f-11e8-9043-cf997be615ae.png)
 
+So the **`view`** _looks_ like a TodoMVC Todo List
+(_mostly thanks to the imported CSS_),
+_however_ we still cannot _interact_ with the app.
+
+_Next_ we're going to move to "wiring-up" the _functionality_
+to construct the UX.
+
+### Functionality - The _Fun_ Part!
+
+With all the "foundation" well defined and tested,
+we can _confidently_ move on to building out the _features_
+people _using_ the app will interact with!
+
+#### Requirements?
+
+Take a look at this list of test output:
+https://github.com/tastejs/todomvc/tree/master/tests#example-output
+
+```
+TodoMVC
+  No Todos
+    ✓ should hide #main and #footer (201ms)
+  New Todo
+    ✓ should allow me to add todo items (548ms)
+    ✓ should clear text input field when an item is added (306ms)
+    ✓ should trim text input (569ms)
+    ✓ should show #main and #footer when items added (405ms)
+  Mark all as completed
+    ✓ should allow me to mark all items as completed (1040ms)
+    ✓ should allow me to clear the completion state of all items (1014ms)
+    ✓ complete all checkbox should update state when items are completed (1413ms)
+  Item
+    ✓ should allow me to mark items as complete (843ms)
+    ✓ should allow me to un-mark items as complete (978ms)
+    ✓ should allow me to edit an item (1155ms)
+    ✓ should show the remove button on hover
+  Editing
+    ✓ should hide other controls when editing (718ms)
+    ✓ should save edits on enter (1093ms)
+    ✓ should save edits on blur (1256ms)
+    ✓ should trim entered text (1163ms)
+    ✓ should remove the item if an empty text string was entered (1033ms)
+    ✓ should cancel edits on escape (1115ms)
+  Counter
+    ✓ should display the current number of todo items (462ms)
+  Clear completed button
+    ✓ should display the number of completed items (873ms)
+    ✓ should remove completed items when clicked (898ms)
+    ✓ should be hidden when there are no items that are completed (893ms)
+  Persistence
+    ✓ should persist its data (3832ms)
+  Routing
+    ✓ should allow me to display active items (871ms)
+    ✓ should allow me to display completed items (960ms)
+    ✓ should allow me to display all items (1192ms)
+    ✓ should highlight the currently applied filter (1095ms)
+
+27 passing (1m)
+```
+
+We are going to write each one of these tests and then
+
+#### 1. No Todos, should hide #footer and #main
+
+Add the following test to your `test/todo-app.test.js` file:
+```js
+test.only('No Todos, should hide #footer and #main', function (t) {
+  // render the view and append it to the DOM inside the `test-app` node:
+  document.getElementById(id).appendChild(app.view({todos: []})); // No Todos
+
+  const main_display = window.getComputedStyle(document.getElementById('main'));
+  t.equal('none', main_display._values.display, "No Todos, hide #main");
+
+  const main_footer= window.getComputedStyle(document.getElementById('footer'));
+  t.equal('none', main_footer._values.display, "No Todos, hide #footer");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
+```
+
+Run the test with:
+```sh
+node test/todo-app.js
+```
+You should see the following output:
+![image](https://user-images.githubusercontent.com/194400/43868621-59e1aba0-9b66-11e8-95c1-0034892128cd.png)
+
+
+##### Make it Pass!
+
+
+
+
+Recommended reading:
+https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone
+
+
+
 <!--
 
 ## What _Next_?

From d1bd85e4d75afdc69fcf38b9d58947cdce18a9cf Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 8 Aug 2018 23:59:23 +0100
Subject: [PATCH 098/164] add code to pass test for "No Todos" fixes #56

---
 examples/todo-list/todo-app.js | 29 +++++++++++++++++++++--------
 todo-list.md                   | 12 ++++++++++++
 2 files changed, 33 insertions(+), 8 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index a39840aa..0d44506d 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -82,8 +82,13 @@ function render_item (item) {
  * @return {Object} <section> DOM Tree which containing the todo list <ul>, etc.
  */
 function render_main (model) {
+
+  // Requirement #1 - No Todos, should hide #footer and #main
+  var display = "style=display:"
+    + (model.todos.length > 0 ? + "block" : "none");
+
   return (
-    section(["class=main", "style=display: block;"], [
+    section(["class=main", "id=main", display], [ // hide if no todo items.
       input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
       label(["for=toggle-all"], [ text("Mark all as complete") ]),
       ul(["class=todo-list"],
@@ -104,15 +109,23 @@ function render_main (model) {
  * var DOM = render_footer(model);
  */
 function render_footer (model) {
-  var count = model.todos.filter(
-      function (i) { return i.done === false }
-    ).length.toString();
+
+  // Requirement #1 - No Todos, should hide #footer and #main
+  var display = "style=display:"
+    + (model.todos.length > 0 ? + "block" : "none");
+
+  // count how many "active" (not yet done) items by filtering done === false:
+  var count = model.todos.filter( function (i) { return !i.done; }).length;
+
+  // number of completed items:
+  var done = model.todos.length - count;
+  var display_clear_complete = "style=display:"
+    + (model.todos.length > 0 ? + "block" : "none");
   // pluarisation of number of items:
-  var left = (" item" +
-    (model.todos.length > 1 || model.todos.length === 0 ? 's' : '') + " left");
+  var left = (" item" + (count > 1 || count === 0 ? 's' : '') + " left");
 
   return (
-    footer(["class=footer", "style=display: block;"], [
+    footer(["class=footer", "id=footer", display], [
       span(["class=todo-count", "id=count"], [
         strong(count),
         text(left)
@@ -128,7 +141,7 @@ function render_footer (model) {
           a(["href=#/completed"], [text("Completed")])
         ])
       ]), // </ul>
-      button(["class=clear-completed", "style=display:block;"],
+      button(["class=clear-completed", display_clear_complete],
         [text("Clear completed")]
       )
     ])
diff --git a/todo-list.md b/todo-list.md
index 55da2729..c69f252e 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1409,6 +1409,18 @@ You should see the following output:
 
 ##### Make it Pass!
 
+Simply replace the instances of `"style=display: block;"` in the view code
+with a reference to a "_computed style_" e.g:
+
+```js
+// Requirement #1 - No Todos, should hide #footer and #main
+var display = "style=display:"
+  + (model.todos.length > 0 ? + "block" : "none");
+```
+
+You should see:
+![no-todos-test-passing](https://user-images.githubusercontent.com/194400/43868724-e3e2249c-9b66-11e8-8228-a5c1528c17b0.png)
+
 
 
 

From 3b8eb11a6e7db6b9a77e87f23a7cdfddcea15eb0 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 9 Aug 2018 22:06:52 +0100
Subject: [PATCH 099/164] add render function to DRY code in elmish mount
 function for #44 / #55

---
 examples/todo-list/elmish.js | 27 ++++++++++++++++++---------
 1 file changed, 18 insertions(+), 9 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 0d98b492..79a2951e 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -20,19 +20,28 @@ function empty (node) {
  * @param {Function} view function that renders HTML/DOM elements with model.
  * @param {String} root_element_id root DOM element in which the app is mounted
  */
-function mount (model, update, view, root_element_id) {
+function mount (model, update, view, root_element_id, subscriptions) {
   var root = document.getElementById(root_element_id); // root DOM element
-  function signal(action) {                     // signal function takes action
-    return function callback() {                // and returns callback
+
+  function render (mod, sig, root, subs) {
+    localStorage.setItem('elmish_store', JSON.stringify(mod)); // save model!
+    empty(root); // clear root element (container) before (re)rendering
+    root.appendChild(view(mod, sig)) // render view based on model & signal
+    if (subs && typeof subs === 'function') { subs(sig); } // event listeners
+  }
+
+  function signal(action) { // signal function takes action
+    // console.log('action:', action);
+    return function callback() { // and returns callback
+      model = JSON.parse(localStorage.getItem('elmish_store')) || model;
+      // console.log('model BEFORE:', model);
       var updatedModel = update(action, model); // update model for the action
-      localStorage.setItem('elmish_store', JSON.stringify(updatedModel));
-      empty(root);                              // clear root el before rerender
-      root.appendChild(view(updatedModel, signal)); // subsequent re-rendering
+      // console.log('model AFTER:', updatedModel);
+      render(updatedModel, signal, root, subscriptions);
     };
   };
   model = JSON.parse(localStorage.getItem('elmish_store')) || model;
-  root.appendChild(view(model, signal))            // render initial model (once)
-  localStorage.setItem('elmish_store', JSON.stringify(model)); // save model!
+  render(model, signal, root, subscriptions);
 }
 
 /**
@@ -51,7 +60,7 @@ function add_attributes (attrlist, node) {
       var a = attr.split('=');
       switch(a[0]) {
         case 'autofocus':
-          node.autofocus = "";
+          node.autofocus = "autofocus";
           node.focus();
           break;
         case 'checked':

From a3cf67ebef1c19f0c0faa351ef64845652d7d928 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 9 Aug 2018 23:31:06 +0100
Subject: [PATCH 100/164] add test (failing) for "2. New Todo" #55

---
 todo-list.md | 83 ++++++++++++++++++++++++++++++++++++++++++++--------
 1 file changed, 71 insertions(+), 12 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index c69f252e..72741c50 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1338,38 +1338,38 @@ https://github.com/tastejs/todomvc/tree/master/tests#example-output
 
 ```
 TodoMVC
-  No Todos
+  1. No Todos
     ✓ should hide #main and #footer (201ms)
-  New Todo
+  2. New Todo
     ✓ should allow me to add todo items (548ms)
     ✓ should clear text input field when an item is added (306ms)
     ✓ should trim text input (569ms)
     ✓ should show #main and #footer when items added (405ms)
-  Mark all as completed
+  3. Mark all as completed
     ✓ should allow me to mark all items as completed (1040ms)
     ✓ should allow me to clear the completion state of all items (1014ms)
     ✓ complete all checkbox should update state when items are completed (1413ms)
-  Item
+  4. Item
     ✓ should allow me to mark items as complete (843ms)
     ✓ should allow me to un-mark items as complete (978ms)
     ✓ should allow me to edit an item (1155ms)
     ✓ should show the remove button on hover
-  Editing
+  5. Editing
     ✓ should hide other controls when editing (718ms)
     ✓ should save edits on enter (1093ms)
     ✓ should save edits on blur (1256ms)
     ✓ should trim entered text (1163ms)
     ✓ should remove the item if an empty text string was entered (1033ms)
     ✓ should cancel edits on escape (1115ms)
-  Counter
+  6. Counter
     ✓ should display the current number of todo items (462ms)
-  Clear completed button
+  7. Clear completed button
     ✓ should display the number of completed items (873ms)
     ✓ should remove completed items when clicked (898ms)
     ✓ should be hidden when there are no items that are completed (893ms)
-  Persistence
+  8. Persistence
     ✓ should persist its data (3832ms)
-  Routing
+  9. Routing
     ✓ should allow me to display active items (871ms)
     ✓ should allow me to display completed items (960ms)
     ✓ should allow me to display all items (1192ms)
@@ -1384,7 +1384,7 @@ We are going to write each one of these tests and then
 
 Add the following test to your `test/todo-app.test.js` file:
 ```js
-test.only('No Todos, should hide #footer and #main', function (t) {
+test.only('1. No Todos, should hide #footer and #main', function (t) {
   // render the view and append it to the DOM inside the `test-app` node:
   document.getElementById(id).appendChild(app.view({todos: []})); // No Todos
 
@@ -1406,7 +1406,6 @@ node test/todo-app.js
 You should see the following output:
 ![image](https://user-images.githubusercontent.com/194400/43868621-59e1aba0-9b66-11e8-95c1-0034892128cd.png)
 
-
 ##### Make it Pass!
 
 Simply replace the instances of `"style=display: block;"` in the view code
@@ -1421,12 +1420,72 @@ var display = "style=display:"
 You should see:
 ![no-todos-test-passing](https://user-images.githubusercontent.com/194400/43868724-e3e2249c-9b66-11e8-8228-a5c1528c17b0.png)
 
+Testing it in your web browser you should see the desired result:
 
+![no-todos-hide-main-and-footer](https://user-images.githubusercontent.com/194400/43869170-1982648e-9b69-11e8-8f7a-4730edbc07ca.png)
 
+> If you get stuck trying to make the test pass, see:
+[todo-app.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/commits/d1bd85e4d75afdc69fcf38b9d58947cdce18a9cf#diff-6be3e16fe7cfb4c00788d4d587374afdR85)
 
-Recommended reading:
+Recommended reading on CSS `visibility:hidden` vs. `display:none` :
 https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone
 
+<br />
+
+#### 2. New Todo, should allow me to add todo items
+
+The second batch of tests involves adding a new todo item to the list:
+
+```
+2. New Todo
+  ✓ should allow me to add todo items (548ms)
+  ✓ should clear text input field when an item is added (306ms)
+  ✓ should trim text input (569ms)
+  ✓ should show #main and #footer when items added (405ms)
+```
+Let's create a test with these 4 assertions.
+
+Add the following code/test to your `test/todo-app.test.js` file:
+```js
+test.only('2. New Todo, should allow me to add todo items', function (t) {
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount({todos: []}, app.update, app.view, id, app.subscriptions);
+  const new_todo = document.getElementById('new-todo');
+  // "type" content in the <input id="new-todo">:
+  const todo_text = 'Make Everything Awesome!     '; // deliberate whitespace!
+  new_todo.value = todo_text;
+  // trigger the [Enter] keyboard key to ADD the new todo:
+  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 13}));
+  const items = document.querySelectorAll('.view')
+  t.equal(items.length, 1, "✓ should allow me to add todo items");
+  // check if the new todo was added to the DOM:
+  const actual = document.getElementById('1').textContent;
+  t.equal(todo_text.trim(), actual, "✓ should trim text input")
+
+  // check that the <input id="new-todo"> was reset after the new item was added
+  t.equal(new_todo.value, '',
+    "✓ should clear text input field when an item is added")
+
+  const main_display = window.getComputedStyle(document.getElementById('main'));
+  t.equal('block', main_display._values.display,
+    "✓ should show #main and #footer when items added");
+  const main_footer= window.getComputedStyle(document.getElementById('footer'));
+  t.equal('block', main_footer._values.display, "show #footer");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
+```
+
+Run the test with:
+```sh
+node test/todo-app.js
+```
+You should see the following output:
+
+![test-failing](https://user-images.githubusercontent.com/194400/43929259-1880b41e-9c2c-11e8-9615-1372928c905d.png)
+
+
 
 
 <!--

From 260c104e68b1849b1d911d3239564e984362eb67 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 9 Aug 2018 23:32:06 +0100
Subject: [PATCH 101/164] add support for Subscritions in elmish.js for
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/57

---
 examples/todo-list/elmish.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 79a2951e..3af5e79c 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -19,11 +19,12 @@ function empty (node) {
  * @param {Function} update how the application state is updated ("controller")
  * @param {Function} view function that renders HTML/DOM elements with model.
  * @param {String} root_element_id root DOM element in which the app is mounted
+ * @param {Function} subscriptions any event listeners the application needs
  */
 function mount (model, update, view, root_element_id, subscriptions) {
   var root = document.getElementById(root_element_id); // root DOM element
 
-  function render (mod, sig, root, subs) {
+  function render (mod, sig, root, subs) { // DRY rendering code (invoked twice)
     localStorage.setItem('elmish_store', JSON.stringify(mod)); // save model!
     empty(root); // clear root element (container) before (re)rendering
     root.appendChild(view(mod, sig)) // render view based on model & signal
@@ -31,15 +32,13 @@ function mount (model, update, view, root_element_id, subscriptions) {
   }
 
   function signal(action) { // signal function takes action
-    // console.log('action:', action);
     return function callback() { // and returns callback
       model = JSON.parse(localStorage.getItem('elmish_store')) || model;
-      // console.log('model BEFORE:', model);
       var updatedModel = update(action, model); // update model for the action
-      // console.log('model AFTER:', updatedModel);
       render(updatedModel, signal, root, subscriptions);
     };
   };
+
   model = JSON.parse(localStorage.getItem('elmish_store')) || model;
   render(model, signal, root, subscriptions);
 }

From c79eccffcdab42cc234add8dcb4a920284cf4bc6 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 9 Aug 2018 23:47:52 +0100
Subject: [PATCH 102/164] add additional checks in Elmish/Todo-list App code
 for null values #44

---
 examples/todo-list/elmish.js   |  2 +-
 examples/todo-list/index.html  |  8 ++---
 examples/todo-list/todo-app.js | 59 +++++++++++++++++++++++++---------
 3 files changed, 49 insertions(+), 20 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 3af5e79c..c658e767 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -33,7 +33,7 @@ function mount (model, update, view, root_element_id, subscriptions) {
 
   function signal(action) { // signal function takes action
     return function callback() { // and returns callback
-      model = JSON.parse(localStorage.getItem('elmish_store')) || model;
+      model = JSON.parse(localStorage.getItem('elmish_store')) //|| model;
       var updatedModel = update(action, model); // update model for the action
       render(updatedModel, signal, root, subscriptions);
     };
diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
index 5a4e58c8..7f7a51a1 100644
--- a/examples/todo-list/index.html
+++ b/examples/todo-list/index.html
@@ -18,13 +18,13 @@
   <script>
     var model = {
       todos: [
-        { id: 1, title: "Learn Elm Architecture", done: true },
-        { id: 2, title: "Build Todo List App",    done: false },
-        { id: 3, title: "Win the Internet!",      done: false }
+        // { id: 1, title: "Learn Elm Architecture", done: true },
+        // { id: 2, title: "Build Todo List App",    done: false },
+        // { id: 3, title: "Win the Internet!",      done: false }
       ],
       hash: '#/' // the "route" to display
     };
-    mount(model, update, view, 'app');
+    mount(model, update, view, 'app', subscriptions);
   </script>
 
   <!-- Below this point is all related to the Tests for the App -->
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 0d44506d..168cd01d 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -19,11 +19,17 @@ var initial_model = {
  */
 function update(action, model, data) {
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
+  // console.log('> > > > > > > > > > > model.todos', model.todos);
   switch(action) {                   // and an action (String) runs a switch
     case 'ADD':
+      // console.log('update called with action:', action);
+      // can you see an "issue" with this way of generating the todo id? Bug...?
+      var id = (typeof model.todos !== 'undefined' && model.todos.length > 0) ?
+        (model.todos.length + 1) : 1;
+      var input = document.getElementById('new-todo');
       new_model.todos.push({
-        id: model.todos.length + 1,
-        title: data,
+        id: id,
+        title: data || input.value.trim(),
         done: false
       });
       break;
@@ -82,17 +88,18 @@ function render_item (item) {
  * @return {Object} <section> DOM Tree which containing the todo list <ul>, etc.
  */
 function render_main (model) {
-
   // Requirement #1 - No Todos, should hide #footer and #main
   var display = "style=display:"
-    + (model.todos.length > 0 ? + "block" : "none");
-
+    + (model.todos && model.todos.length > 0 ? "block" : "none");
+  // console.log('display:', display);
   return (
     section(["class=main", "id=main", display], [ // hide if no todo items.
       input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
       label(["for=toggle-all"], [ text("Mark all as complete") ]),
       ul(["class=todo-list"],
+        (model.todos && model.todos.length > 0) ?
         model.todos.map(function (item) { return render_item(item) })
+        : null
       ) // </ul>
     ]) // </section>
   )
@@ -110,17 +117,18 @@ function render_main (model) {
  */
 function render_footer (model) {
 
-  // Requirement #1 - No Todos, should hide #footer and #main
-  var display = "style=display:"
-    + (model.todos.length > 0 ? + "block" : "none");
-
   // count how many "active" (not yet done) items by filtering done === false:
-  var count = model.todos.filter( function (i) { return !i.done; }).length;
+  var count = (model.todos && model.todos.length > 0) ?
+    model.todos.filter( function (i) { return !i.done; }).length : 0;
+
+  // Requirement #1 - No Todos, should hide #footer and #main
+  var display = "style=display:" + (count > 0 ? "block" : "none");
+  // console.log('model:', model, 'count:', count, 'display:', display);
 
   // number of completed items:
-  var done = model.todos.length - count;
-  var display_clear_complete = "style=display:"
-    + (model.todos.length > 0 ? + "block" : "none");
+  var done = (model.todos && model.todos.length > 0) ?
+    (model.todos.length - count) : 0;
+  var display_clear = "style=display:" + (done > 0 ? "block;" : "none;");
   // pluarisation of number of items:
   var left = (" item" + (count > 1 || count === 0 ? 's' : '') + " left");
 
@@ -141,7 +149,7 @@ function render_footer (model) {
           a(["href=#/completed"], [text("Completed")])
         ])
       ]), // </ul>
-      button(["class=clear-completed", display_clear_complete],
+      button(["class=clear-completed", display_clear],
         [text("Clear completed")]
       )
     ])
@@ -158,7 +166,7 @@ function render_footer (model) {
  * // returns <section class="todo-app"> DOM element with other DOM els nested:
  * var DOM = view(model);
  */
-function view (model) {
+function view (model, signal) {
   return (
     section(["class=todoapp"], [ // array of "child" elements
       header(["class=header"], [
@@ -178,6 +186,26 @@ function view (model) {
   );
 }
 
+/**
+ * `subscriptions` let us "listen" for events such as "key press" or "click".
+ * and respond according to a pre-defined update/action.
+ * @param {Function} singal - the Elm Architicture "dispacher" which will run
+ * both the "update" and "render" functions when invoked with singal(action)
+ */
+function subscriptions (signal) {
+	var ENTER_KEY = 13; // add a new todo item when [Enter] key is pressed
+	var ESCAPE_KEY = 27; // used for "escaping" when editing a Todo item
+  var new_todo = document.getElementById('new-todo');
+
+  new_todo.addEventListener('keypress', function (e) {
+    if (e.keyCode === ENTER_KEY && new_todo.value.length > 0) {
+      signal('ADD')(); // invoke the singal function and inner callback
+      new_todo.value = ''; // reset <input> so we can add another todo
+      new_todo.focus(); // ensure that <input id="new-todo"> "in focus"
+    }
+  });
+}
+
 /* module.exports is needed to run the functions using Node.js for testing! */
 /* istanbul ignore next */
 if (typeof module !== 'undefined' && module.exports) {
@@ -187,6 +215,7 @@ if (typeof module !== 'undefined' && module.exports) {
     render_item: render_item,     // export so that we can unit test
     render_main: render_main,     // export for unit testing
     render_footer: render_footer, // export for unit testing
+    subscriptions: subscriptions,
     view: view
   }
 }

From 86dcc83af73d69833bbe2e719df9616af5884082 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 9 Aug 2018 23:48:29 +0100
Subject: [PATCH 103/164] add extra keyCode "trigger" assertion to exercise
 subscrition branch #55

---
 test/elmish.test.js   |  6 ++--
 test/todo-app.test.js | 76 ++++++++++++++++++++++++++++++++++++++++---
 2 files changed, 76 insertions(+), 6 deletions(-)

diff --git a/test/elmish.test.js b/test/elmish.test.js
index ae95ce53..1aaaf0ac 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -366,7 +366,8 @@ test('elmish.route updates the url hash and sets history', function (t) {
 
 // Testing localStorage requires "polyfil" because:
 // https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
-global.localStorage = { // globals are bad! but a "necessary evil" here ...
+// globals are bad! but a "necessary evil" here ...
+global.localStorage = global.localStorage ? global.localStorage : {
   getItem: function(key) {
    const value = this[key];
    return typeof value === 'undefined' ? null : value;
@@ -378,8 +379,8 @@ global.localStorage = { // globals are bad! but a "necessary evil" here ...
    delete this[key]
  }
 }
-localStorage.setItem('hello', 'world!');
 localStorage.removeItem('elmish_store');
+// localStorage.setItem('hello', 'world!');
 // console.log('localStorage (polyfil) hello', localStorage.getItem('hello'));
 
 // // Test mount's localStorage using view and update from counter-reset example
@@ -418,5 +419,6 @@ test('elmish.mount sets model in localStorage', function (t) {
   // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
   t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
     "elmish_store still 8 from increment (above) saved in localStorage");
+  localStorage.removeItem('elmish_store');
   t.end()
 });
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index f9dcfdb5..258aa781 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -8,21 +8,21 @@ const app = require('../examples/todo-list/todo-app.js'); // functions to test
 const id = 'test-app';              // all tests use 'test-app' as root element
 const elmish = require('../examples/todo-list/elmish.js'); // import "empty" etc
 
-test('todo `model` (Object) has desired keys', function (t) {
+test('`model` (Object) has desired keys', function (t) {
   const keys = Object.keys(app.model);
   t.deepEqual(keys, ['todos', 'hash'], "`todos` and `hash` keys are present.");
   t.true(Array.isArray(app.model.todos), "model.todos is an Array")
   t.end();
 });
 
-test('todo `update` default case should return model unmodified', function (t) {
+test('`update` default case should return model unmodified', function (t) {
   const model = JSON.parse(JSON.stringify(app.model));
   const unmodified_model = app.update('UNKNOWN_ACTION', model);
   t.deepEqual(model, unmodified_model, "model returned unmodified");
   t.end();
 });
 
-test('`ADD` a new todo item to model.todos Array via `update`', function (t) {
+test('update `ADD` a new todo item to model.todos Array', function (t) {
   const model = JSON.parse(JSON.stringify(app.model)); // initial state
   t.equal(model.todos.length, 0, "initial model.todos.length is 0");
   const updated_model = app.update('ADD', model, "Add Todo List Item");
@@ -32,7 +32,7 @@ test('`ADD` a new todo item to model.todos Array via `update`', function (t) {
   t.end();
 });
 
-test('`TOGGLE` a todo item from done=false to done=true', function (t) {
+test('update `TOGGLE` a todo item from done=false to done=true', function (t) {
   const model = JSON.parse(JSON.stringify(app.model)); // initial state
   const model_with_todo = app.update('ADD', model, "Toggle a todo list item");
   const item = model_with_todo.todos[0];
@@ -179,3 +179,71 @@ test('view renders the whole todo app using "partials"', function (t) {
   elmish.empty(document.getElementById(id)); // clear DOM ready for next test
   t.end();
 });
+
+test('1. No Todos, should hide #footer and #main', function (t) {
+  // render the view and append it to the DOM inside the `test-app` node:
+  document.getElementById(id).appendChild(app.view({todos: []})); // No Todos
+
+  const main_display = window.getComputedStyle(document.getElementById('main'));
+  t.equal(main_display._values.display, 'none', "No Todos, hide #main");
+
+  const main_footer= window.getComputedStyle(document.getElementById('footer'));
+  t.equal(main_footer._values.display, 'none', "No Todos, hide #footer");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
+
+// Testing localStorage requires "polyfil" because:a
+// https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
+// globals are usually bad! but a "necessary evil" here.
+global.localStorage = global.localStorage ? global.localStorage : {
+  getItem: function(key) {
+   const value = this[key];
+   return typeof value === 'undefined' ? null : value;
+ },
+ setItem: function (key, value) {
+   this[key] = value;
+ },
+ removeItem: function (key) {
+   delete this[key]
+ }
+}
+localStorage.removeItem('elmish_store');
+
+test('2. New Todo, should allow me to add todo items', function (t) {
+  elmish.empty(document.getElementById(id));
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount({todos: []}, app.update, app.view, id, app.subscriptions);
+  const new_todo = document.getElementById('new-todo');
+  // "type" content in the <input id="new-todo">:
+  const todo_text = 'Make Everything Awesome!     '; // deliberate whitespace!
+  new_todo.value = todo_text;
+  // trigger the [Enter] keyboard key to ADD the new todo:
+  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 13}));
+  const items = document.querySelectorAll('.view');
+
+  // subscription keyCode trigger "branch" test (should NOT fire the signal):
+  const clone = document.getElementById(id).cloneNode(true);
+  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42}));
+  t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
+
+  t.equal(items.length, 1, "should allow me to add todo items");
+  // check if the new todo was added to the DOM:
+  const actual = document.getElementById('1').textContent;
+  t.equal(todo_text.trim(), actual, "should trim text input")
+
+  // check that the <input id="new-todo"> was reset after the new item was added
+  t.equal(new_todo.value, '',
+    "should clear text input field when an item is added")
+
+  const main_display = window.getComputedStyle(document.getElementById('main'));
+  t.equal('block', main_display._values.display,
+    "should show #main and #footer when items added");
+  const main_footer= window.getComputedStyle(document.getElementById('footer'));
+  t.equal('block', main_footer._values.display, "item added, show #footer");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('elmish_store');
+  t.end();
+});

From 7b56e5526c65ee7273307078ee927a3cbfd20726 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 9 Aug 2018 23:49:02 +0100
Subject: [PATCH 104/164] update test for "2. New Todo" to test all branches

---
 README.md    |  2 +-
 elmish.md    | 11 +++++++++++
 todo-list.md | 39 ++++++++++++++++++++++++++++++++-------
 3 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/README.md b/README.md
index 6f5105ff..581daca1 100644
--- a/README.md
+++ b/README.md
@@ -824,7 +824,7 @@ part of any "**client-side**" web app. <br />
 (including **Elm**, React and Vue.js) now use a "**Virtual DOM**".
 > For the purposes of `this` tutorial, and for **most small apps**
 Virtual DOM is total **overkill**! <br />
-It's akin to putting a **jet engine** in a **go kart**!_
+It's akin to putting a **jet engine** in a [**go kart**](https://en.wikipedia.org/wiki/Go-kart)!_
 
 ### What is "_Plain_" JavaScript?
 
diff --git a/elmish.md b/elmish.md
index f0f6cc7e..513793d5 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1121,6 +1121,8 @@ Useful knowledge:
 + Why: https://stackoverflow.com/questions/4855168/what-is-href-and-why-is-it-used
 + How:  https://stackoverflow.com/questions/4689344/how-can-i-add-href-attribute-to-a-link-dynamically-using-javascript
 
+
+
 <br />
 
 ### `append_childnodes`
@@ -1493,6 +1495,7 @@ if you get stuck trying to make this test pass,
 refer to the completed code:
 [/examples/todo-list/elmish.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/tree/master/examples/todo-list/elmish.js)
 
+<br />
 
 ### Routing
 
@@ -1794,6 +1797,14 @@ refer to the completed code:
 
 <br />
 
+<br />
+
+### `subscriptions` for event listeners
+
+
+
+
+
 That's it for now! `Elm`(_ish_) is "ready" to be _used_
 for our TodoMVC App!
 
diff --git a/todo-list.md b/todo-list.md
index 72741c50..1bcb46d3 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1447,7 +1447,25 @@ Let's create a test with these 4 assertions.
 
 Add the following code/test to your `test/todo-app.test.js` file:
 ```js
-test.only('2. New Todo, should allow me to add todo items', function (t) {
+// Testing localStorage requires "polyfil" because:
+// https://github.com/jsdom/jsdom/issues/1137 ¯\_(ツ)_/¯
+// globals are usually bad! but a "necessary evil" here.
+global.localStorage = global.localStorage ? global.localStorage : {
+  getItem: function(key) {
+   const value = this[key];
+   return typeof value === 'undefined' ? null : value;
+ },
+ setItem: function (key, value) {
+   this[key] = value;
+ },
+ removeItem: function (key) {
+   delete this[key]
+ }
+}
+localStorage.removeItem('elmish_store');
+
+test('2. New Todo, should allow me to add todo items', function (t) {
+  elmish.empty(document.getElementById(id));
   // render the view and append it to the DOM inside the `test-app` node:
   elmish.mount({todos: []}, app.update, app.view, id, app.subscriptions);
   const new_todo = document.getElementById('new-todo');
@@ -1456,23 +1474,30 @@ test.only('2. New Todo, should allow me to add todo items', function (t) {
   new_todo.value = todo_text;
   // trigger the [Enter] keyboard key to ADD the new todo:
   new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 13}));
-  const items = document.querySelectorAll('.view')
-  t.equal(items.length, 1, "✓ should allow me to add todo items");
+  const items = document.querySelectorAll('.view');
+
+  // subscription keyCode trigger "branch" test (should NOT fire the signal):
+  const clone = document.getElementById(id).cloneNode(true);
+  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42}));
+  t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
+
+  t.equal(items.length, 1, "should allow me to add todo items");
   // check if the new todo was added to the DOM:
   const actual = document.getElementById('1').textContent;
-  t.equal(todo_text.trim(), actual, "✓ should trim text input")
+  t.equal(todo_text.trim(), actual, "should trim text input")
 
   // check that the <input id="new-todo"> was reset after the new item was added
   t.equal(new_todo.value, '',
-    "✓ should clear text input field when an item is added")
+    "should clear text input field when an item is added")
 
   const main_display = window.getComputedStyle(document.getElementById('main'));
   t.equal('block', main_display._values.display,
-    "✓ should show #main and #footer when items added");
+    "should show #main and #footer when items added");
   const main_footer= window.getComputedStyle(document.getElementById('footer'));
-  t.equal('block', main_footer._values.display, "show #footer");
+  t.equal('block', main_footer._values.display, "item added, show #footer");
 
   elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('elmish_store');
   t.end();
 });
 ```

From f37c3984e55b22376b2626c2d5159ee8955741b1 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 9 Aug 2018 23:50:12 +0100
Subject: [PATCH 105/164] reorder New Todo test assertions for clarity #55

---
 test/todo-app.test.js | 10 +++++-----
 todo-list.md          | 10 +++++-----
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 258aa781..256a780d 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -223,16 +223,16 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 13}));
   const items = document.querySelectorAll('.view');
 
-  // subscription keyCode trigger "branch" test (should NOT fire the signal):
-  const clone = document.getElementById(id).cloneNode(true);
-  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42}));
-  t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
-
   t.equal(items.length, 1, "should allow me to add todo items");
   // check if the new todo was added to the DOM:
   const actual = document.getElementById('1').textContent;
   t.equal(todo_text.trim(), actual, "should trim text input")
 
+  // subscription keyCode trigger "branch" test (should NOT fire the signal):
+  const clone = document.getElementById(id).cloneNode(true);
+  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42}));
+  t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
+
   // check that the <input id="new-todo"> was reset after the new item was added
   t.equal(new_todo.value, '',
     "should clear text input field when an item is added")
diff --git a/todo-list.md b/todo-list.md
index 1bcb46d3..c0f031df 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1476,16 +1476,16 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 13}));
   const items = document.querySelectorAll('.view');
 
-  // subscription keyCode trigger "branch" test (should NOT fire the signal):
-  const clone = document.getElementById(id).cloneNode(true);
-  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42}));
-  t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
-
   t.equal(items.length, 1, "should allow me to add todo items");
   // check if the new todo was added to the DOM:
   const actual = document.getElementById('1').textContent;
   t.equal(todo_text.trim(), actual, "should trim text input")
 
+  // subscription keyCode trigger "branch" test (should NOT fire the signal):
+  const clone = document.getElementById(id).cloneNode(true);
+  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42}));
+  t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
+
   // check that the <input id="new-todo"> was reset after the new item was added
   t.equal(new_todo.value, '',
     "should clear text input field when an item is added")

From d6c8b922f87b88a88145612131fd5259d9fad8c1 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 11:19:39 +0100
Subject: [PATCH 106/164] update examples/counter-reset/test.js to reflect
 change in parameter order for #57

---
 examples/counter-reset/test.js | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/examples/counter-reset/test.js b/examples/counter-reset/test.js
index cd2700a7..0a525c5c 100644
--- a/examples/counter-reset/test.js
+++ b/examples/counter-reset/test.js
@@ -1,22 +1,22 @@
 var id = 'test-app';
 
 test('Test Update update(0) returns 0 (current state)', function(assert) {
-  var result = update(0);
+  var result = update('unrecognised', 0);
   assert.equal(result, 0);
 });
 
 test('Test Update increment: update(1, "inc") returns 2', function(assert) {
-  var result = update(1, "inc");
+  var result = update("inc", 1,);
   assert.equal(result, 2);
 });
 
-test('Test Update decrement: update(3, "dec") returns 2', function(assert) {
-  var result = update(1, "dec");
-  assert.equal(result, 0);
+test('Test Update decrement: update("dec", 3) returns 2', function(assert) {
+  var result = update("dec", 3);
+  assert.equal(result, 2);
 });
 
-test('Test negative state: update(-9, "inc") returns -8', function(assert) {
-  var result = update(-9, "inc");
+test('Test negative state: update("inc", -9) returns -8', function(assert) {
+  var result = update("inc", -9, );
   assert.equal(result, -8);
 });
 
@@ -50,7 +50,7 @@ function(assert) {
 // Reset Functionality
 
 test('Test reset counter when model/state is 6 returns 0', function(assert) {
-  var result = update(6, "reset");
+  var result = update("reset", 6);
   assert.equal(result, 0);
 });
 

From e3e5a659ddd53b1b9bf79d9a61ec739b59183a5f Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 11:41:21 +0100
Subject: [PATCH 107/164] cp examples/counter-reset/*
 examples/counter-reset-keyboard/ for #57

---
 examples/counter-reset-keyboard/counter.js | 88 ++++++++++++++++++++++
 examples/counter-reset-keyboard/index.html | 33 ++++++++
 examples/counter-reset-keyboard/test.js    | 71 +++++++++++++++++
 3 files changed, 192 insertions(+)
 create mode 100644 examples/counter-reset-keyboard/counter.js
 create mode 100644 examples/counter-reset-keyboard/index.html
 create mode 100644 examples/counter-reset-keyboard/test.js

diff --git a/examples/counter-reset-keyboard/counter.js b/examples/counter-reset-keyboard/counter.js
new file mode 100644
index 00000000..f7910634
--- /dev/null
+++ b/examples/counter-reset-keyboard/counter.js
@@ -0,0 +1,88 @@
+// Define the Component's Actions:
+var Inc = 'inc';                     // increment the counter
+var Dec = 'dec';                     // decrement the counter
+var Res = 'reset';                   // reset counter: git.io/v9KJk
+
+function update (action, model) {     // Update function takes the current state
+  switch(action) {                   // and an action (String) runs a switch
+    case Inc: return model + 1;      // add 1 to the model
+    case Dec: return model - 1;      // subtract 1 from model
+    case Res: return 0;              // reset state to 0 (Zero) git.io/v9KJk
+    default: return model;           // if no action, return curent state.
+  }                                  // (default action always returns current)
+}
+
+function view(model, signal) {
+  return container([                           // Store DOM nodes in an array
+    button('+', signal, Inc),                  // then iterate to append them
+    div('count', model),                       // create div with stat as text
+    button('-', signal, Dec),                  // decrement counter
+    button('Reset', signal, Res)               // reset counter
+  ]); // forEach is ES5 so IE9+
+} // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
+
+// Mount Function receives all MUV and mounts the app in the "root" DOM Element
+function mount(model, update, view, root_element_id) {
+  var root = document.getElementById(root_element_id); // root DOM element
+  function signal(action) {          // signal function takes action
+    return function callback() {     // and returns callback
+      model = update(action, model); // update model according to action
+      empty(root);
+      root.appendChild(view(model, signal)); // subsequent re-rendering
+    };
+  };
+  root.appendChild(view(model, signal));    // render initial model (once)
+}
+
+// The following are "Helper" Functions which each "Do ONLY One Thing" and are
+// used in the "View" function to render the Model (State) to the Browser DOM:
+
+// empty the contents of a given DOM element "node" (before re-rendering)
+function empty(node) {
+  while (node.firstChild) {
+    node.removeChild(node.firstChild);
+  }
+} // Inspired by: stackoverflow.com/a/3955238/1148249
+
+function button(text, signal, action) {
+  var button = document.createElement('button');
+  var text = document.createTextNode(text);    // human-readable button text
+  button.appendChild(text);                    // text goes *inside* not attrib
+  button.className = action;                   // use action as CSS class
+  button.id = action;
+  // console.log(signal, ' action:', action)
+  button.onclick = signal(action);             // onclick tells how to process
+  return button;                               // return the DOM node(s)
+} // how to create a button in JavaScript: stackoverflow.com/a/8650996/1148249
+
+function div(divid, text) {
+  var div = document.createElement('div');
+  div.id = divid;
+  div.className = divid;
+  if(text !== undefined) { // if text is passed in render it in a "Text Node"
+    var txt = document.createTextNode(text);
+    div.appendChild(txt);
+  }
+  return div;
+}
+
+// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
+function container(elements) {
+  var con = document.createElement('section');
+  con.className = 'counter';
+  elements.forEach(function(el) { con.appendChild(el) });
+  return con;
+}
+
+/* The code block below ONLY Applies to tests run using Node.js */
+/* istanbul ignore else */
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    view: view,
+    mount: mount,
+    update: update,
+    div: div,
+    button: button,
+    empty: empty,
+  }
+}
diff --git a/examples/counter-reset-keyboard/index.html b/examples/counter-reset-keyboard/index.html
new file mode 100644
index 00000000..e6ecb503
--- /dev/null
+++ b/examples/counter-reset-keyboard/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang=”en-GB”>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <meta name="viewport"
+  content="width=device-width, initial-scale=1.0, user-scalable=yes">
+  <title>Elm Architecture in JS - Counter Reset</title>
+  <link rel="shortcut icon"
+  href="http://www.dwyl.io/images/favicon.ico" type="image/x-icon">
+  <!-- CSS Styles are 100% optional. but they make it look *much* nicer -->
+  <link rel="stylesheet" href="../style.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script src="counter.js" data-cover></script> <!-- load counter  -->
+  <script>
+  // Initialise the app by "mounting" it passing in MUV Object & "root" DOM node
+   mount(0, update, view, 'app');
+  </script>
+
+  <!-- Below this point is all related to the Tests for the App -->
+  <div id="test-app"></div> <!-- Create a test-app div to mount the app -->
+  <div id="qunit"></div>    <!-- test results are displayed here -->
+  <!-- Load the QUnit CSS file from CDN - require to display our tests -->
+  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.18.0.css">
+  <!-- Load the QUnit Testing Framework from CDN - to run the tests -->
+  <script src="https://code.jquery.com/qunit/qunit-1.18.0.js"></script>
+  <!-- Load Blanket.js from CDN - for test coverage stats -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/blanket.js/1.1.4/blanket.js">
+  </script>
+  <script src="test.js"></script>  <!-- always load test.js last -->
+</body>
+</html>
diff --git a/examples/counter-reset-keyboard/test.js b/examples/counter-reset-keyboard/test.js
new file mode 100644
index 00000000..0a525c5c
--- /dev/null
+++ b/examples/counter-reset-keyboard/test.js
@@ -0,0 +1,71 @@
+var id = 'test-app';
+
+test('Test Update update(0) returns 0 (current state)', function(assert) {
+  var result = update('unrecognised', 0);
+  assert.equal(result, 0);
+});
+
+test('Test Update increment: update(1, "inc") returns 2', function(assert) {
+  var result = update("inc", 1,);
+  assert.equal(result, 2);
+});
+
+test('Test Update decrement: update("dec", 3) returns 2', function(assert) {
+  var result = update("dec", 3);
+  assert.equal(result, 2);
+});
+
+test('Test negative state: update("inc", -9) returns -8', function(assert) {
+  var result = update("inc", -9, );
+  assert.equal(result, -8);
+});
+
+test('mount({model: 7, update: update, view: view}, "'
+  + id +'") sets initial state to 7', function(assert) {
+  mount(7, update, view, id);
+  var state = document.getElementById(id)
+    .getElementsByClassName('count')[0].textContent;
+  assert.equal(state, 7);
+});
+
+test('empty("test-app") should clear DOM in root node', function(assert) {
+  empty(document.getElementById(id));
+  mount(7, update, view, id);
+  empty(document.getElementById(id));
+  var result = document.getElementById(id).innerHtml
+  assert.equal(result, undefined);
+});
+
+test('click on "+" button to re-render state (increment model by 1)',
+function(assert) {
+  document.body.appendChild(div(id));
+  mount(7, update, view, id);
+  document.getElementById(id).getElementsByClassName('inc')[0].click();
+  var state = document.getElementById(id)
+    .getElementsByClassName('count')[0].textContent;
+  assert.equal(state, 8); // model was incremented successfully
+  empty(document.getElementById(id)); // clean up after tests
+});
+
+// Reset Functionality
+
+test('Test reset counter when model/state is 6 returns 0', function(assert) {
+  var result = update("reset", 6);
+  assert.equal(result, 0);
+});
+
+test('reset button should be present on page', function(assert) {
+  var reset = document.getElementsByClassName('reset');
+  assert.equal(reset.length, 1);
+});
+
+test('Click reset button resets state to 0', function(assert) {
+  mount(7, update, view, id);
+  var root = document.getElementById(id);
+  assert.equal(root.getElementsByClassName('count')[0].textContent, 7);
+  var btn = root.getElementsByClassName("reset")[0]; // click reset button
+  btn.click(); // Click the Reset button!
+  var state = root.getElementsByClassName('count')[0].textContent;
+  assert.equal(state, 0); // state was successfully reset to 0!
+  empty(root); // clean up after tests
+});

From d89074907456745b0acdbe4e105ce807c89a7c9c Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 12:12:42 +0100
Subject: [PATCH 108/164] add test for onclick attribute for #57

---
 test/elmish.test.js | 83 ++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 79 insertions(+), 4 deletions(-)

diff --git a/test/elmish.test.js b/test/elmish.test.js
index 1aaaf0ac..2d5cd74c 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -27,11 +27,12 @@ test('elmish.empty("root") removes DOM elements from container', function (t) {
   t.end();
 });
 
-// use view and update from counter-reset example
-// to confirm that our elmish.mount function is generic!
-const { view, update } = require('../examples/counter-reset/counter.js');
 
 test('elmish.mount app expect state to be Zero', function (t) {
+  // use view and update from counter-reset example
+  // to confirm that our elmish.mount function is generic!
+  const { view, update } = require('../examples/counter-reset/counter.js');
+
   const root = document.getElementById(id);
   elmish.mount(7, update, view, id);
   const actual = document.getElementById(id).textContent;
@@ -385,7 +386,6 @@ localStorage.removeItem('elmish_store');
 
 // // Test mount's localStorage using view and update from counter-reset example
 // // to confirm that our elmish.mount localStorage works and is "generic".
-//
 test('elmish.mount sets model in localStorage', function (t) {
   const { view, update } = require('../examples/counter-reset/counter.js');
 
@@ -422,3 +422,78 @@ test('elmish.mount sets model in localStorage', function (t) {
   localStorage.removeItem('elmish_store');
   t.end()
 });
+
+test.only('elmish.add_attributes onclick=signal(action) events!', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let counter = 0;
+  function signal(action) {
+    return function callback() {
+      counter++
+    }
+  }
+  let btn = document.createElement('button');
+  root.appendChild(
+    elmish.add_attributes(["id=btn", "onclick=" + signal('inc')], btn)
+  );
+
+  // "click" the button!
+  document.getElementById("btn").click()
+  t.equal(counter, 1, "Counter incremented");
+
+  t.end();
+});
+
+
+test.skip('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
+  const { view, update } = require('../examples/counter-reset/counter.js');
+
+  const root = document.getElementById(id);
+  elmish.mount(0, update, view, id);
+  // the "model" stored in localStorage should be 7 now:
+  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 0,
+    "elmish_store is 0 (as expected). initial state saved to localStorage.");
+
+  // trigger the [Enter] keyboard key to ADD the new todo:
+  document.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 38})); // ↑
+  const items = document.querySelectorAll('.view');
+
+  // subscription keyCode trigger "branch" test (should NOT fire the signal):
+  document.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 40})); // ↓
+  // t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
+
+
+  // subscription keyCode trigger "branch" test (should NOT fire the signal):
+  const clone = document.getElementById(id).cloneNode(true);
+  document.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42})); // ↓
+  t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
+
+
+  // // test that mount still works as expected (check initial state of counter):
+  // const actual = document.getElementById(id).textContent;
+  // const actual_stripped = parseInt(actual.replace('+', '')
+  //   .replace('-Reset', ''), 10);
+  // const expected = 7;
+  // t.equal(expected, actual_stripped, "Inital state set to 7.");
+  // // attempting to "re-mount" with a different model value should not work
+  // // because mount should retrieve the value from localStorage
+  // elmish.mount(42, update, view, id); // model (42) should be ignored this time!
+  // t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+  //   "elmish_store is 7 (as expected). initial state saved to localStorage.");
+  // // increment the counter
+  // const btn = root.getElementsByClassName("inc")[0]; // click increment button
+  // btn.click(); // Click the Increment button!
+  // const state = parseInt(root.getElementsByClassName('count')[0]
+  //   .textContent, 10);
+  // t.equal(state, 8, "State is 8 after increment.");
+  // // the "model" stored in localStorage should also be 8 now:
+  // t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+  //   "elmish_store is 8 (as expected).");
+  // elmish.empty(root); // reset the DOM to simulate refreshing a browser window
+  // elmish.mount(5, update, view, id); // 5 ignored! read model from localStorage
+  // // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
+  // t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+  //   "elmish_store still 8 from increment (above) saved in localStorage");
+  localStorage.removeItem('elmish_store');
+  t.end()
+});

From d41c8d87aea1a656b33d450c868bab92eb1d7ae8 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 13:46:25 +0100
Subject: [PATCH 109/164] add test and code for onclick function in attributes
 for/fixes #58

---
 elmish.md                    | 96 ++++++++++++++++++++++++++++++++++++
 examples/todo-list/elmish.js |  8 ++-
 test/elmish.test.js          | 22 ++++++---
 3 files changed, 116 insertions(+), 10 deletions(-)

diff --git a/elmish.md b/elmish.md
index 513793d5..c89478fb 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1797,13 +1797,109 @@ refer to the completed code:
 
 <br />
 
+### `onclick` `attribute` to invoke the "dispatcher" when element clicked
+
+In order to allow click/tap interactions with buttons,
+we need to add an `onclick` attribute which then _invokes_ the desired update.
+
+Add the following _test code_ to your `test/elmish.test.js` file: <br />
+```js
+test.only('elmish.add_attributes onclick=signal(action) events!', function (t) {
+  const root = document.getElementById(id);
+  elmish.empty(root);
+  let counter = 0; // global to this test.
+  function signal (action) { // simplified version of TEA "dispatcher" function
+    return function callback() {
+      switch (action) {
+        case 'inc':
+          counter++; // "mutating" ("impure") counters for test simplicity.
+          break;
+      }
+    }
+  }
+
+  root.appendChild( // signal('inc') should be applied as "onclick" function:
+    elmish.add_attributes(["id=btn", signal('inc')],
+      document.createElement('button'))
+  );
+
+  // "click" the button!
+  document.getElementById("btn").click()
+  // confirm that the counter was incremented by the onclick being triggered:
+  t.equal(counter, 1, "Counter incremented via onclick attribute (function)!");
+  elmish.empty(root);
+  t.end();
+});
+```
+
+Run the test:
+```sh
+node test/elmish.test.js
+```
+![onclick-test-failing](https://user-images.githubusercontent.com/194400/43955072-99712c7e-9c96-11e8-94a0-8c6d6d9169cb.png)
+
+Making this test pass requires a little knowledge of how JavaScript
+does "type checking" and the fact that we can "pass around" functions
+as variables.
+
+The amount of code required to make this test pass is _minimal,_
+you could even get it down to ***1 line***.
+The key is thinking through what the test is doing
+and figuring out how to apply an `onclick` function to a DOM node.
+
+Relevant/useful reading:
+
++ https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onclick
++ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof
++ https://stackoverflow.com/questions/6956258/adding-onclick-event-to-dynamically-added-button
++ https://stackoverflow.com/questions/14569320/simulating-button-click-in-javascript
+
+
+
+
 <br />
 
 ### `subscriptions` for event listeners
 
+In Elm, when we want to "listen" for an event or "external input"
+we use ***`subscriptions`***. Examples are:
+
++ [Keyboard events](http://package.elm-lang.org/packages/elm-lang/keyboard/latest/Keyboard)
++ [Mouse movements](http://package.elm-lang.org/packages/elm-lang/mouse/latest/Mouse)
++ Browser locations changes
++ [Websocket events](http://package.elm-lang.org/packages/elm-lang/websocket/latest/WebSocket)
+
+In order to listen for and respond to Keyboard events,
+specifically the **`Enter`** and **`[Escape]`** key press,
+we need a way of "attaching" event listeners to the DOM
+when mounting our App.
 
+To demonstrate **`subscriptions`**,
+let's _briefly re-visit_ the Counter Example
+and consider an alternative User Interaction/Experience: Keyboard!
 
+#### Use-case: Use Up/Down Keyboard (Arrow) Keys to Increment/Decrement Counter
 
+Let's start by making a "copy" of the code in `/examples/counter-reset`:
+```sh
+mkdir examples/counter-reset-keyboard
+cp examples/counter-reset/* examples/counter-reset-keyboard/
+```
+
+First step is to _re-factor_ the code in
+`examples/counter-reset-keyboard/counter.js`
+to use the "DOM" functions we've been creating for `Elm`(_ish_).
+This will _simplify_ the `counter.js` down to the _bare minimum_.
+
+
+
+
+#### How do We _Test_ for Subscription Events?
+
+
+
+
+<br />
 
 That's it for now! `Elm`(_ish_) is "ready" to be _used_
 for our TodoMVC App!
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index c658e767..e3bc8eb9 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -47,7 +47,8 @@ function mount (model, update, view, root_element_id, subscriptions) {
 * `add_attributes` applies the desired attribute(s) to the specified DOM node.
 * Note: this function is "impure" because it "mutates" the node.
 * however it is idempotent; the "side effect" is only applied once.
-* @param {Array.<String>} attrlist list of attributes to be applied to the node
+* @param {Array.<String>/<Function>} attrlist list of attributes to be applied
+* to the node accepts both String and Function (for onclick handlers).
 * @param {Object} node DOM node upon which attribute(s) should be applied
 * @example
 * // returns node with attributes applied
@@ -56,6 +57,9 @@ function mount (model, update, view, root_element_id, subscriptions) {
 function add_attributes (attrlist, node) {
   if(attrlist && attrlist.length) {
     attrlist.forEach(function (attr) { // apply all props in array
+      // do not attempt to "split" an onclick function as it's not a string!
+      if (typeof attr === 'function') { node.onclick = attr; return node; }
+      // apply any attributes that are *not* functions (i.e. Strings):
       var a = attr.split('=');
       switch(a[0]) {
         case 'autofocus':
@@ -90,7 +94,7 @@ function add_attributes (attrlist, node) {
           break;
         default:
           break;
-      }
+      } // end switch
     });
   }
   return node;
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 2d5cd74c..bf9ecea8 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -423,24 +423,30 @@ test('elmish.mount sets model in localStorage', function (t) {
   t.end()
 });
 
-test.only('elmish.add_attributes onclick=signal(action) events!', function (t) {
+test('elmish.add_attributes onclick=signal(action) events!', function (t) {
   const root = document.getElementById(id);
   elmish.empty(root);
-  let counter = 0;
-  function signal(action) {
+  let counter = 0; // global to this test.
+  function signal (action) { // simplified version of TEA "dispacher" function
     return function callback() {
-      counter++
+      switch (action) {
+        case 'inc':
+          counter++; // "mutating" ("impure") counters for test simplicity.
+          break;
+      }
     }
   }
-  let btn = document.createElement('button');
+
   root.appendChild(
-    elmish.add_attributes(["id=btn", "onclick=" + signal('inc')], btn)
+    elmish.add_attributes(["id=btn", signal('inc')],
+      document.createElement('button'))
   );
 
   // "click" the button!
   document.getElementById("btn").click()
-  t.equal(counter, 1, "Counter incremented");
-
+  // confirm that the counter was incremented by the onclick being triggered:
+  t.equal(counter, 1, "Counter incremented via onclick attribute (function)!");
+  elmish.empty(root);
   t.end();
 });
 

From 73694434f43f12e37bcf60d31c2ce5d7bfd48a31 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 14:07:22 +0100
Subject: [PATCH 110/164] add link to "solution" in onclick section of
 elmish.md

---
 elmish.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/elmish.md b/elmish.md
index c89478fb..ff2e9114 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1854,7 +1854,10 @@ Relevant/useful reading:
 + https://stackoverflow.com/questions/6956258/adding-onclick-event-to-dynamically-added-button
 + https://stackoverflow.com/questions/14569320/simulating-button-click-in-javascript
 
+Try to make the test pass by yourself or with your pairing partner.
 
+If you get "stuck", checkout:
+[**`elmish.js > add_attributes`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/commits/d41c8d87aea1a656b33d450c868bab92eb1d7ae8#diff-61a1967a8f2230abdebea6572ec20c82R61)
 
 
 <br />

From 209d72dc91bc0954f299a7941f618f9df6eb9e7f Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 14:42:52 +0100
Subject: [PATCH 111/164] add sample code after refactoring
 counter-reset-keyboard to use Elm(ish) DOM functions. less than half the
 code! #57

---
 elmish.md                                  | 61 ++++++++++++++--
 examples/counter-reset-keyboard/counter.js | 85 ++++------------------
 examples/counter-reset-keyboard/index.html |  3 +-
 examples/todo-list/elmish.js               | 11 ++-
 4 files changed, 80 insertions(+), 80 deletions(-)

diff --git a/elmish.md b/elmish.md
index ff2e9114..17f1ee68 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1865,12 +1865,12 @@ If you get "stuck", checkout:
 ### `subscriptions` for event listeners
 
 In Elm, when we want to "listen" for an event or "external input"
-we use ***`subscriptions`***. Examples are:
+we use `subscriptions`. Examples include:
 
 + [Keyboard events](http://package.elm-lang.org/packages/elm-lang/keyboard/latest/Keyboard)
-+ [Mouse movements](http://package.elm-lang.org/packages/elm-lang/mouse/latest/Mouse)
-+ Browser locations changes
-+ [Websocket events](http://package.elm-lang.org/packages/elm-lang/websocket/latest/WebSocket)
++ [Mouse movements & clicks](http://package.elm-lang.org/packages/elm-lang/mouse/latest/Mouse)
++ [Browser location changes (Navigation)](https://github.com/elm-lang/navigation)
++ [Websocket events (messages)](http://package.elm-lang.org/packages/elm-lang/websocket/latest/WebSocket)
 
 In order to listen for and respond to Keyboard events,
 specifically the **`Enter`** and **`[Escape]`** key press,
@@ -1889,11 +1889,62 @@ mkdir examples/counter-reset-keyboard
 cp examples/counter-reset/* examples/counter-reset-keyboard/
 ```
 
-First step is to _re-factor_ the code in
+_First step_ is to _re-factor_ the code in
 `examples/counter-reset-keyboard/counter.js`
 to use the "DOM" functions we've been creating for `Elm`(_ish_).
 This will _simplify_ the `counter.js` down to the _bare minimum_.
 
+In your `examples/counter-reset-keyboard/counter.js` file,
+type the following code:
+
+```js
+/* if require is available, it means we are in Node.js Land i.e. testing!
+ in the broweser, the "elmish" DOM functions are loaded in a <script> tag */
+/* istanbul ignore next */
+if (typeof require !== 'undefined' && this.window !== this) {
+  var { button, div, empty, h1, mount, text } = require('./elmish.js');
+}
+
+function update (action, model) {    // Update function takes the current state
+  switch(action) {                   // and an action (String) runs a switch
+    case 'inc': return model + 1;    // add 1 to the model
+    case 'dec': return model - 1;    // subtract 1 from model
+    case 'reset': return 0;          // reset state to 0 (Zero) git.io/v9KJk
+    default: return model;           // if no action, return curent state.
+  }                                  // (default action always returns current)
+}
+
+function view(model, signal) {
+  return div([], [
+    button(["class=inc", "id=inc", signal('inc')], [text('+')]), // increment
+    div(["class=count", "id=count"], [text(model.toString())]), // count
+    button(["class=dec", "id=dec", signal('dec')], [text('-')]), // decrement
+    button(["class=reset", "id=reset", signal('reset')], [text('Reset')])
+  ]); // forEach is ES5 so IE9+
+} // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
+
+/* The code block below ONLY Applies to tests run using Node.js */
+/* istanbul ignore else */
+if (typeof module !== 'undefined' && module.exports) {
+  module.exports = {
+    view: view,
+    update: update,
+  }
+}
+```
+
+Without _touching_ the code/tests
+in **`examples/counter-reset-keyboard/test.js`**,
+You should just be able to _run_ the "liveserver" on your `localhost`:
+
+```sh
+npm start
+```
+
+and when you open: http://127.0.0.1:8000/examples/counter-reset-keyboard
+
+should see the Qunit (Broweser) Tests _passing_:
+![counter-reset-keyboard-broweser-tests-passing](https://user-images.githubusercontent.com/194400/43960760-ed098e80-9caa-11e8-9d8f-08310846dacb.png)
 
 
 
diff --git a/examples/counter-reset-keyboard/counter.js b/examples/counter-reset-keyboard/counter.js
index f7910634..423f6212 100644
--- a/examples/counter-reset-keyboard/counter.js
+++ b/examples/counter-reset-keyboard/counter.js
@@ -1,88 +1,33 @@
-// Define the Component's Actions:
-var Inc = 'inc';                     // increment the counter
-var Dec = 'dec';                     // decrement the counter
-var Res = 'reset';                   // reset counter: git.io/v9KJk
+/* if require is available, it means we are in Node.js Land i.e. testing!
+ in the broweser, the "elmish" DOM functions are loaded in a <script> tag*/
+/* istanbul ignore next */
+if (typeof require !== 'undefined' && this.window !== this) {
+  var { button, div, empty, h1, mount, text } = require('./elmish.js');
+}
 
-function update (action, model) {     // Update function takes the current state
+function update (action, model) {    // Update function takes the current state
   switch(action) {                   // and an action (String) runs a switch
-    case Inc: return model + 1;      // add 1 to the model
-    case Dec: return model - 1;      // subtract 1 from model
-    case Res: return 0;              // reset state to 0 (Zero) git.io/v9KJk
+    case 'inc': return model + 1;    // add 1 to the model
+    case 'dec': return model - 1;    // subtract 1 from model
+    case 'reset': return 0;          // reset state to 0 (Zero) git.io/v9KJk
     default: return model;           // if no action, return curent state.
   }                                  // (default action always returns current)
 }
 
 function view(model, signal) {
-  return container([                           // Store DOM nodes in an array
-    button('+', signal, Inc),                  // then iterate to append them
-    div('count', model),                       // create div with stat as text
-    button('-', signal, Dec),                  // decrement counter
-    button('Reset', signal, Res)               // reset counter
+  return div([], [
+    button(["class=inc", "id=inc", signal('inc')], [text('+')]), // increment
+    div(["class=count", "id=count"], [text(model.toString())]), // count
+    button(["class=dec", "id=dec", signal('dec')], [text('-')]), // decrement
+    button(["class=reset", "id=reset", signal('reset')], [text('Reset')])
   ]); // forEach is ES5 so IE9+
 } // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
 
-// Mount Function receives all MUV and mounts the app in the "root" DOM Element
-function mount(model, update, view, root_element_id) {
-  var root = document.getElementById(root_element_id); // root DOM element
-  function signal(action) {          // signal function takes action
-    return function callback() {     // and returns callback
-      model = update(action, model); // update model according to action
-      empty(root);
-      root.appendChild(view(model, signal)); // subsequent re-rendering
-    };
-  };
-  root.appendChild(view(model, signal));    // render initial model (once)
-}
-
-// The following are "Helper" Functions which each "Do ONLY One Thing" and are
-// used in the "View" function to render the Model (State) to the Browser DOM:
-
-// empty the contents of a given DOM element "node" (before re-rendering)
-function empty(node) {
-  while (node.firstChild) {
-    node.removeChild(node.firstChild);
-  }
-} // Inspired by: stackoverflow.com/a/3955238/1148249
-
-function button(text, signal, action) {
-  var button = document.createElement('button');
-  var text = document.createTextNode(text);    // human-readable button text
-  button.appendChild(text);                    // text goes *inside* not attrib
-  button.className = action;                   // use action as CSS class
-  button.id = action;
-  // console.log(signal, ' action:', action)
-  button.onclick = signal(action);             // onclick tells how to process
-  return button;                               // return the DOM node(s)
-} // how to create a button in JavaScript: stackoverflow.com/a/8650996/1148249
-
-function div(divid, text) {
-  var div = document.createElement('div');
-  div.id = divid;
-  div.className = divid;
-  if(text !== undefined) { // if text is passed in render it in a "Text Node"
-    var txt = document.createTextNode(text);
-    div.appendChild(txt);
-  }
-  return div;
-}
-
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Element/section
-function container(elements) {
-  var con = document.createElement('section');
-  con.className = 'counter';
-  elements.forEach(function(el) { con.appendChild(el) });
-  return con;
-}
-
 /* The code block below ONLY Applies to tests run using Node.js */
 /* istanbul ignore else */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
     view: view,
-    mount: mount,
     update: update,
-    div: div,
-    button: button,
-    empty: empty,
   }
 }
diff --git a/examples/counter-reset-keyboard/index.html b/examples/counter-reset-keyboard/index.html
index e6ecb503..199fa7aa 100644
--- a/examples/counter-reset-keyboard/index.html
+++ b/examples/counter-reset-keyboard/index.html
@@ -4,11 +4,12 @@
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   <meta name="viewport"
   content="width=device-width, initial-scale=1.0, user-scalable=yes">
-  <title>Elm Architecture in JS - Counter Reset</title>
+  <title>Elm Architecture in JS - Counter Reset Keyboard Example!</title>
   <link rel="shortcut icon"
   href="http://www.dwyl.io/images/favicon.ico" type="image/x-icon">
   <!-- CSS Styles are 100% optional. but they make it look *much* nicer -->
   <link rel="stylesheet" href="../style.css">
+  <script src="../todo-list/elmish.js"></script>
 </head>
 <body>
   <div id="app"></div>
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index e3bc8eb9..324c72db 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -23,9 +23,10 @@ function empty (node) {
  */
 function mount (model, update, view, root_element_id, subscriptions) {
   var root = document.getElementById(root_element_id); // root DOM element
+  var store_name = 'elmish_' + root_element_id; // test-app !== app
 
   function render (mod, sig, root, subs) { // DRY rendering code (invoked twice)
-    localStorage.setItem('elmish_store', JSON.stringify(mod)); // save model!
+    localStorage.setItem(store_name, JSON.stringify(mod)); // save model!
     empty(root); // clear root element (container) before (re)rendering
     root.appendChild(view(mod, sig)) // render view based on model & signal
     if (subs && typeof subs === 'function') { subs(sig); } // event listeners
@@ -33,13 +34,14 @@ function mount (model, update, view, root_element_id, subscriptions) {
 
   function signal(action) { // signal function takes action
     return function callback() { // and returns callback
-      model = JSON.parse(localStorage.getItem('elmish_store')) //|| model;
+      console.log('signal action:', action);
+      model = JSON.parse(localStorage.getItem(store_name)) //|| model;
       var updatedModel = update(action, model); // update model for the action
       render(updatedModel, signal, root, subscriptions);
     };
   };
 
-  model = JSON.parse(localStorage.getItem('elmish_store')) || model;
+  model = JSON.parse(localStorage.getItem(store_name)) || model;
   render(model, signal, root, subscriptions);
 }
 
@@ -55,7 +57,8 @@ function mount (model, update, view, root_element_id, subscriptions) {
 * input = add_attributes(["type=checkbox", "id=todo1", "checked=true"], input);
 */
 function add_attributes (attrlist, node) {
-  if(attrlist && attrlist.length) {
+  // console.log(attrlist, node);
+  if(attrlist && Array.isArray(attrlist) &&  attrlist.length > 0) {
     attrlist.forEach(function (attr) { // apply all props in array
       // do not attempt to "split" an onclick function as it's not a string!
       if (typeof attr === 'function') { node.onclick = attr; return node; }

From a3e064468c9d83976928e8c2baf9579ec3b345bc Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 14:45:23 +0100
Subject: [PATCH 112/164] fix failing test due to change in name of
 localstorage key for #57

---
 examples/todo-list/todo-app.js |  2 +-
 test/elmish.test.js            | 10 +++++-----
 test/todo-app.test.js          |  1 -
 todo-list.md                   |  4 ++--
 4 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 168cd01d..48e3c9fc 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -149,7 +149,7 @@ function render_footer (model) {
           a(["href=#/completed"], [text("Completed")])
         ])
       ]), // </ul>
-      button(["class=clear-completed", display_clear],
+      button(["class=clear-completed", "onclick=alert('hello')"],
         [text("Clear completed")]
       )
     ])
diff --git a/test/elmish.test.js b/test/elmish.test.js
index bf9ecea8..e86eb047 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -392,7 +392,7 @@ test('elmish.mount sets model in localStorage', function (t) {
   const root = document.getElementById(id);
   elmish.mount(7, update, view, id);
   // the "model" stored in localStorage should be 7 now:
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 7,
     "elmish_store is 7 (as expected). initial state saved to localStorage.");
   // test that mount still works as expected (check initial state of counter):
   const actual = document.getElementById(id).textContent;
@@ -412,12 +412,12 @@ test('elmish.mount sets model in localStorage', function (t) {
     .textContent, 10);
   t.equal(state, 8, "State is 8 after increment.");
   // the "model" stored in localStorage should also be 8 now:
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 8,
     "elmish_store is 8 (as expected).");
   elmish.empty(root); // reset the DOM to simulate refreshing a browser window
   elmish.mount(5, update, view, id); // 5 ignored! read model from localStorage
   // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
+  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 8,
     "elmish_store still 8 from increment (above) saved in localStorage");
   localStorage.removeItem('elmish_store');
   t.end()
@@ -451,13 +451,13 @@ test('elmish.add_attributes onclick=signal(action) events!', function (t) {
 });
 
 
-test.skip('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
+test.only('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
   const { view, update } = require('../examples/counter-reset/counter.js');
 
   const root = document.getElementById(id);
   elmish.mount(0, update, view, id);
   // the "model" stored in localStorage should be 7 now:
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 0,
+  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 0,
     "elmish_store is 0 (as expected). initial state saved to localStorage.");
 
   // trigger the [Enter] keyboard key to ADD the new todo:
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 256a780d..ccb1c48c 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -222,7 +222,6 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   // trigger the [Enter] keyboard key to ADD the new todo:
   new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 13}));
   const items = document.querySelectorAll('.view');
-
   t.equal(items.length, 1, "should allow me to add todo items");
   // check if the new todo was added to the DOM:
   const actual = document.getElementById('1').textContent;
diff --git a/todo-list.md b/todo-list.md
index c0f031df..058aa3fd 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1497,7 +1497,7 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   t.equal('block', main_footer._values.display, "item added, show #footer");
 
   elmish.empty(document.getElementById(id)); // clear DOM ready for next test
-  localStorage.removeItem('elmish_store');
+  localStorage.removeItem('elmish_store'); // clear "localStorage" for next test
   t.end();
 });
 ```
@@ -1510,7 +1510,7 @@ You should see the following output:
 
 ![test-failing](https://user-images.githubusercontent.com/194400/43929259-1880b41e-9c2c-11e8-9615-1372928c905d.png)
 
-
+Reading: https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically
 
 
 <!--

From 9a10d60edcc7ef05d3f7ffa220e7efd75e462312 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 16:35:50 +0100
Subject: [PATCH 113/164] [WiP] elmish subscription test FAILING for #57

---
 elmish.md                                  | 61 ++++++++++++++++++++--
 examples/counter-reset-keyboard/counter.js | 29 ++++++++--
 examples/todo-list/elmish.js               |  8 +--
 test/elmish.test.js                        | 59 ++++++++-------------
 4 files changed, 108 insertions(+), 49 deletions(-)

diff --git a/elmish.md b/elmish.md
index 17f1ee68..c016cf46 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1883,6 +1883,18 @@ and consider an alternative User Interaction/Experience: Keyboard!
 
 #### Use-case: Use Up/Down Keyboard (Arrow) Keys to Increment/Decrement Counter
 
+As a user <br />
+I would like to use the keyboard **`[↑]`** (Up) and **`[↓]`** (Down) arrow keys
+to signal the **Increment** and **Decrement** action (_respectively_)
+of the Counter.
+So that I don't have to use a mouse to click a button.
+
+![up-down-arrrow-keys](https://user-images.githubusercontent.com/194400/43962720-4cbfb192-9cb0-11e8-9c45-63e7644f1cf6.png)
+
+Background reading: https://webaim.org/techniques/keyboard
+
+#### Baseline Example Code _Without_ Subscription
+
 Let's start by making a "copy" of the code in `/examples/counter-reset`:
 ```sh
 mkdir examples/counter-reset-keyboard
@@ -1920,8 +1932,8 @@ function view(model, signal) {
     div(["class=count", "id=count"], [text(model.toString())]), // count
     button(["class=dec", "id=dec", signal('dec')], [text('-')]), // decrement
     button(["class=reset", "id=reset", signal('reset')], [text('Reset')])
-  ]); // forEach is ES5 so IE9+
-} // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
+  ]);
+}
 
 /* The code block below ONLY Applies to tests run using Node.js */
 /* istanbul ignore else */
@@ -1947,9 +1959,40 @@ should see the Qunit (Broweser) Tests _passing_:
 ![counter-reset-keyboard-broweser-tests-passing](https://user-images.githubusercontent.com/194400/43960760-ed098e80-9caa-11e8-9d8f-08310846dacb.png)
 
 
-
 #### How do We _Test_ for Subscription Events?
 
+As described above in our "use case" we want to create event listeners,
+for the **`[↑]`** (Up) and **`[↓]`** (Down) arrow keyboard keys,
+so the _only_ way to _test_ for these is to "Trigger" the event(s).
+Thankfully, this is _easy_ in JavaScript. Let's write the test!
+
+Add the following _test code_ to your `test/elmish.test.js` file: <br />
+```js
+test here!
+```
+
+Run the test (_watch it fail_!):
+```sh
+node test/elmish.test.js
+```
+![subscriptions-test-failing](https://user-images.githubusercontent.com/194400/43964543-f4a6e520-9cb4-11e8-80f5-ae6bb491b83f.png)
+
+Hopefully it's clear from reading the test _why_ the assertion is _failing_.
+The counter is not being incremented.
+The last assertion passes because
+"_even a broken clock is right twice a day_" ...
+since the counter is never incremented,
+the count is 0 (zero) throughout the test,
+so the last assertion always passes.
+(_this will not be the case
+  once you have the [Up] arrow event listener working_).
+
+#### `subscriptions`_Implementation_: Keyboard Keys Increment/Decrement Counter!
+
+We could spend an hour googling or I can _give_ you the sample code 
+
+
+
 
 
 
@@ -1962,6 +2005,18 @@ for our TodoMVC App!
 
 <br />
 
+
+
+
+
+
+
+
+
+
+
+
+
 ### Why _Not_ use HTML5 `<template>` ??
 
 Templates are an _awesome_ feature in HTML5 which
diff --git a/examples/counter-reset-keyboard/counter.js b/examples/counter-reset-keyboard/counter.js
index 423f6212..e2df779e 100644
--- a/examples/counter-reset-keyboard/counter.js
+++ b/examples/counter-reset-keyboard/counter.js
@@ -1,8 +1,8 @@
 /* if require is available, it means we are in Node.js Land i.e. testing!
- in the broweser, the "elmish" DOM functions are loaded in a <script> tag*/
+ in the broweser, the "elmish" DOM functions are loaded in a <script> tag */
 /* istanbul ignore next */
 if (typeof require !== 'undefined' && this.window !== this) {
-  var { button, div, empty, h1, mount, text } = require('./elmish.js');
+  var { button, div, empty, mount, text } = require('../todo-list/elmish.js');
 }
 
 function update (action, model) {    // Update function takes the current state
@@ -15,18 +15,39 @@ function update (action, model) {    // Update function takes the current state
 }
 
 function view(model, signal) {
+  console.log('model:', model);
   return div([], [
     button(["class=inc", "id=inc", signal('inc')], [text('+')]), // increment
     div(["class=count", "id=count"], [text(model.toString())]), // count
     button(["class=dec", "id=dec", signal('dec')], [text('-')]), // decrement
     button(["class=reset", "id=reset", signal('reset')], [text('Reset')])
-  ]); // forEach is ES5 so IE9+
-} // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
+  ]);
+}
+
+function subscriptions (signal, root) {
+  var UP_KEY = 38; // increment the counter when [↑] (up) key is pressed
+  var DOWN_KEY = 40; // decrement the counter when [↓] (down) key is pressed
+  console.log('root', root);
+  root.addEventListener('keyup', function (e) {
+    console.log('e.keyCode', e.keyCode);
+    switch (e.keyCode) {
+      case UP_KEY:
+        signal('inc')(); // invoke the signal.callback function directly
+        break;
+      case DOWN_KEY:
+        signal('dec')();
+        break;
+      default: // do nothing
+        break;
+    }
+  });
+}
 
 /* The code block below ONLY Applies to tests run using Node.js */
 /* istanbul ignore else */
 if (typeof module !== 'undefined' && module.exports) {
   module.exports = {
+    subscriptions: subscriptions,
     view: view,
     update: update,
   }
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 324c72db..82b3f593 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -22,14 +22,14 @@ function empty (node) {
  * @param {Function} subscriptions any event listeners the application needs
  */
 function mount (model, update, view, root_element_id, subscriptions) {
-  var root = document.getElementById(root_element_id); // root DOM element
+  var ROOT = document.getElementById(root_element_id); // root DOM element
   var store_name = 'elmish_' + root_element_id; // test-app !== app
 
   function render (mod, sig, root, subs) { // DRY rendering code (invoked twice)
     localStorage.setItem(store_name, JSON.stringify(mod)); // save model!
     empty(root); // clear root element (container) before (re)rendering
     root.appendChild(view(mod, sig)) // render view based on model & signal
-    if (subs && typeof subs === 'function') { subs(sig); } // event listeners
+    if (subs && typeof subs === 'function') { subs(sig, root); } // subscription
   }
 
   function signal(action) { // signal function takes action
@@ -37,12 +37,12 @@ function mount (model, update, view, root_element_id, subscriptions) {
       console.log('signal action:', action);
       model = JSON.parse(localStorage.getItem(store_name)) //|| model;
       var updatedModel = update(action, model); // update model for the action
-      render(updatedModel, signal, root, subscriptions);
+      render(updatedModel, signal, ROOT, subscriptions);
     };
   };
 
   model = JSON.parse(localStorage.getItem(store_name)) || model;
-  render(model, signal, root, subscriptions);
+  render(model, signal, ROOT, subscriptions);
 }
 
 /**
diff --git a/test/elmish.test.js b/test/elmish.test.js
index e86eb047..7f28ff3d 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -452,54 +452,37 @@ test('elmish.add_attributes onclick=signal(action) events!', function (t) {
 
 
 test.only('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
-  const { view, update } = require('../examples/counter-reset/counter.js');
-
+  const { view, update, subscriptions } =
+    require('../examples/counter-reset-keyboard/counter.js');
   const root = document.getElementById(id);
-  elmish.mount(0, update, view, id);
-  // the "model" stored in localStorage should be 7 now:
+
+  // mount the counter-reset-keyboard example app WITH subscriptions:
+  elmish.mount(0, update, view, id, subscriptions);
+  // keep a "handle" on the count to reduce test length:
+  const count = document.getElementById('count');
+  // counter starts off at 0 (zero):
+  t.equal(parseInt(count.textContent, 10), 0, "Up key press increment 0 -> 1");
   t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 0,
     "elmish_store is 0 (as expected). initial state saved to localStorage.");
 
-  // trigger the [Enter] keyboard key to ADD the new todo:
-  document.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 38})); // ↑
-  const items = document.querySelectorAll('.view');
-
-  // subscription keyCode trigger "branch" test (should NOT fire the signal):
-  document.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 40})); // ↓
-  // t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
+  // trigger the [↑] (up) keyboard key to increment the counter:
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 38})); // ↑
+  t.equal(parseInt(count.textContent, 10), 1, "Up key press increment 0 -> 1");
+  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 1,
+    "elmish_store 1 (as expected). incremented state saved to localStorage.");
 
+  // trigger the [↓] (down) keyboard key to increment the counter:
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 40})); // ↓
+  t.equal(parseInt(count.textContent, 10), 0, "Up key press dencrement 1 -> 0");
+  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 0,
+    "elmish_store 0. keyboard down key decrement state saved to localStorage.");
 
   // subscription keyCode trigger "branch" test (should NOT fire the signal):
   const clone = document.getElementById(id).cloneNode(true);
-  document.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42})); // ↓
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 42})); //
   t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
 
-
-  // // test that mount still works as expected (check initial state of counter):
-  // const actual = document.getElementById(id).textContent;
-  // const actual_stripped = parseInt(actual.replace('+', '')
-  //   .replace('-Reset', ''), 10);
-  // const expected = 7;
-  // t.equal(expected, actual_stripped, "Inital state set to 7.");
-  // // attempting to "re-mount" with a different model value should not work
-  // // because mount should retrieve the value from localStorage
-  // elmish.mount(42, update, view, id); // model (42) should be ignored this time!
-  // t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
-  //   "elmish_store is 7 (as expected). initial state saved to localStorage.");
-  // // increment the counter
-  // const btn = root.getElementsByClassName("inc")[0]; // click increment button
-  // btn.click(); // Click the Increment button!
-  // const state = parseInt(root.getElementsByClassName('count')[0]
-  //   .textContent, 10);
-  // t.equal(state, 8, "State is 8 after increment.");
-  // // the "model" stored in localStorage should also be 8 now:
-  // t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-  //   "elmish_store is 8 (as expected).");
-  // elmish.empty(root); // reset the DOM to simulate refreshing a browser window
-  // elmish.mount(5, update, view, id); // 5 ignored! read model from localStorage
-  // // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
-  // t.equal(JSON.parse(localStorage.getItem('elmish_store')), 8,
-  //   "elmish_store still 8 from increment (above) saved in localStorage");
   localStorage.removeItem('elmish_store');
+  elmish.empty(root);
   t.end()
 });

From 39d270bd3d41eae123ce7e4af88dd1216b9dfa36 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 20:25:07 +0100
Subject: [PATCH 114/164] add additional assertions for counter-reset-keyboard
 example for #57

---
 examples/counter-reset-keyboard/counter.js | 33 +++++++++--------
 examples/todo-list/elmish.js               |  5 ++-
 test/elmish.test.js                        | 41 ++++++++++++++--------
 3 files changed, 47 insertions(+), 32 deletions(-)

diff --git a/examples/counter-reset-keyboard/counter.js b/examples/counter-reset-keyboard/counter.js
index e2df779e..9e48c991 100644
--- a/examples/counter-reset-keyboard/counter.js
+++ b/examples/counter-reset-keyboard/counter.js
@@ -15,7 +15,6 @@ function update (action, model) {    // Update function takes the current state
 }
 
 function view(model, signal) {
-  console.log('model:', model);
   return div([], [
     button(["class=inc", "id=inc", signal('inc')], [text('+')]), // increment
     div(["class=count", "id=count"], [text(model.toString())]), // count
@@ -27,20 +26,24 @@ function view(model, signal) {
 function subscriptions (signal, root) {
   var UP_KEY = 38; // increment the counter when [↑] (up) key is pressed
   var DOWN_KEY = 40; // decrement the counter when [↓] (down) key is pressed
-  console.log('root', root);
-  root.addEventListener('keyup', function (e) {
-    console.log('e.keyCode', e.keyCode);
-    switch (e.keyCode) {
-      case UP_KEY:
-        signal('inc')(); // invoke the signal.callback function directly
-        break;
-      case DOWN_KEY:
-        signal('dec')();
-        break;
-      default: // do nothing
-        break;
-    }
-  });
+  var called = false; // ensure event hanlder is only called once! #HelpWanted!
+
+  function handler (e) {
+    if (!called) { // had issues with event handler being called multiple!
+      called = true;
+      switch (e.keyCode) {
+        case UP_KEY:
+          signal('inc')(); // invoke the signal.callback function directly
+          break;
+        case DOWN_KEY:
+          signal('dec')();
+          break;
+      }
+    } // only call event handler once!
+  }
+  // event listners were being fired multiple times so, remove before addding:
+  root.removeEventListener('keypress', handler, false); // remove previous
+  root.addEventListener('keypress', handler, false); // add fresh listeners
 }
 
 /* The code block below ONLY Applies to tests run using Node.js */
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 82b3f593..8c4bc29a 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -24,9 +24,9 @@ function empty (node) {
 function mount (model, update, view, root_element_id, subscriptions) {
   var ROOT = document.getElementById(root_element_id); // root DOM element
   var store_name = 'elmish_' + root_element_id; // test-app !== app
-
+  console.log('store_name:', store_name);
   function render (mod, sig, root, subs) { // DRY rendering code (invoked twice)
-    localStorage.setItem(store_name, JSON.stringify(mod)); // save model!
+    localStorage.setItem(store_name, JSON.stringify(mod)); // save the model!
     empty(root); // clear root element (container) before (re)rendering
     root.appendChild(view(mod, sig)) // render view based on model & signal
     if (subs && typeof subs === 'function') { subs(sig, root); } // subscription
@@ -34,7 +34,6 @@ function mount (model, update, view, root_element_id, subscriptions) {
 
   function signal(action) { // signal function takes action
     return function callback() { // and returns callback
-      console.log('signal action:', action);
       model = JSON.parse(localStorage.getItem(store_name)) //|| model;
       var updatedModel = update(action, model); // update model for the action
       render(updatedModel, signal, ROOT, subscriptions);
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 7f28ff3d..c52de1ef 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -380,7 +380,7 @@ global.localStorage = global.localStorage ? global.localStorage : {
    delete this[key]
  }
 }
-localStorage.removeItem('elmish_store');
+localStorage.removeItem('elmish_' + id);
 // localStorage.setItem('hello', 'world!');
 // console.log('localStorage (polyfil) hello', localStorage.getItem('hello'));
 
@@ -388,8 +388,8 @@ localStorage.removeItem('elmish_store');
 // // to confirm that our elmish.mount localStorage works and is "generic".
 test('elmish.mount sets model in localStorage', function (t) {
   const { view, update } = require('../examples/counter-reset/counter.js');
-
   const root = document.getElementById(id);
+
   elmish.mount(7, update, view, id);
   // the "model" stored in localStorage should be 7 now:
   t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 7,
@@ -403,7 +403,8 @@ test('elmish.mount sets model in localStorage', function (t) {
   // attempting to "re-mount" with a different model value should not work
   // because mount should retrieve the value from localStorage
   elmish.mount(42, update, view, id); // model (42) should be ignored this time!
-  t.equal(JSON.parse(localStorage.getItem('elmish_store')), 7,
+
+  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 7,
     "elmish_store is 7 (as expected). initial state saved to localStorage.");
   // increment the counter
   const btn = root.getElementsByClassName("inc")[0]; // click increment button
@@ -419,7 +420,7 @@ test('elmish.mount sets model in localStorage', function (t) {
   // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
   t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 8,
     "elmish_store still 8 from increment (above) saved in localStorage");
-  localStorage.removeItem('elmish_store');
+  localStorage.removeItem('elmish_' + id);
   t.end()
 });
 
@@ -451,38 +452,50 @@ test('elmish.add_attributes onclick=signal(action) events!', function (t) {
 });
 
 
-test.only('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
+test('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
   const { view, update, subscriptions } =
     require('../examples/counter-reset-keyboard/counter.js');
   const root = document.getElementById(id);
 
   // mount the counter-reset-keyboard example app WITH subscriptions:
   elmish.mount(0, update, view, id, subscriptions);
-  // keep a "handle" on the count to reduce test length:
-  const count = document.getElementById('count');
+
   // counter starts off at 0 (zero):
-  t.equal(parseInt(count.textContent, 10), 0, "Up key press increment 0 -> 1");
+  t.equal(parseInt(document.getElementById('count') // always fresh DOM node!
+    .textContent, 10), 0, "Count is 0 (Zero) at start.");
   t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 0,
     "elmish_store is 0 (as expected). initial state saved to localStorage.");
 
   // trigger the [↑] (up) keyboard key to increment the counter:
-  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 38})); // ↑
-  t.equal(parseInt(count.textContent, 10), 1, "Up key press increment 0 -> 1");
+  root.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 38})); // ↑
+  t.equal(parseInt(document.getElementById('count')
+    .textContent, 10), 1, "Up key press increment 0 -> 1");
   t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 1,
     "elmish_store 1 (as expected). incremented state saved to localStorage.");
 
   // trigger the [↓] (down) keyboard key to increment the counter:
-  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 40})); // ↓
-  t.equal(parseInt(count.textContent, 10), 0, "Up key press dencrement 1 -> 0");
+  root.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 40})); // ↓
+  t.equal(parseInt(document.getElementById('count')
+    .textContent, 10), 0, "Up key press dencrement 1 -> 0");
   t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 0,
     "elmish_store 0. keyboard down key decrement state saved to localStorage.");
 
   // subscription keyCode trigger "branch" test (should NOT fire the signal):
   const clone = document.getElementById(id).cloneNode(true);
-  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 42})); //
+  document.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42})); //
   t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
 
-  localStorage.removeItem('elmish_store');
+  // default branch execution:
+  document.getElementById('inc').click();
+  t.equal(parseInt(document.getElementById('count')
+    .textContent, 10), 1, "inc: 0 -> 1");
+  document.getElementById('reset').click();
+  t.equal(parseInt(document.getElementById('count')
+    .textContent, 10), 0, "reset: 1 -> 0");
+  const no_change = update(null, 7);
+  t.equal(no_change, 7, "no change in model if action is unrecognised.");
+
+  localStorage.removeItem('elmish_' + id);
   elmish.empty(root);
   t.end()
 });

From 0fd18b2f5f013409f275f7a0e061ac3cb6e1e7b8 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 21:54:02 +0100
Subject: [PATCH 115/164] tidy-up counter-reset-keyboard example subscrition
 considerably! #57

---
 examples/counter-reset-keyboard/counter.js | 29 ++++++++--------------
 examples/counter-reset-keyboard/index.html | 16 +++---------
 examples/todo-list/elmish.js               | 14 +++++------
 test/elmish.test.js                        |  6 ++---
 4 files changed, 25 insertions(+), 40 deletions(-)

diff --git a/examples/counter-reset-keyboard/counter.js b/examples/counter-reset-keyboard/counter.js
index 9e48c991..ed4d00d2 100644
--- a/examples/counter-reset-keyboard/counter.js
+++ b/examples/counter-reset-keyboard/counter.js
@@ -15,7 +15,7 @@ function update (action, model) {    // Update function takes the current state
 }
 
 function view(model, signal) {
-  return div([], [
+  return div(['id=wrap'], [
     button(["class=inc", "id=inc", signal('inc')], [text('+')]), // increment
     div(["class=count", "id=count"], [text(model.toString())]), // count
     button(["class=dec", "id=dec", signal('dec')], [text('-')]), // decrement
@@ -26,24 +26,17 @@ function view(model, signal) {
 function subscriptions (signal, root) {
   var UP_KEY = 38; // increment the counter when [↑] (up) key is pressed
   var DOWN_KEY = 40; // decrement the counter when [↓] (down) key is pressed
-  var called = false; // ensure event hanlder is only called once! #HelpWanted!
 
-  function handler (e) {
-    if (!called) { // had issues with event handler being called multiple!
-      called = true;
-      switch (e.keyCode) {
-        case UP_KEY:
-          signal('inc')(); // invoke the signal.callback function directly
-          break;
-        case DOWN_KEY:
-          signal('dec')();
-          break;
-      }
-    } // only call event handler once!
-  }
-  // event listners were being fired multiple times so, remove before addding:
-  root.removeEventListener('keypress', handler, false); // remove previous
-  root.addEventListener('keypress', handler, false); // add fresh listeners
+  document.addEventListener('keyup', function handler (e) {
+    switch (e.keyCode) {
+      case UP_KEY:
+        signal('inc')(); // invoke the signal > callback function directly
+        break;
+      case DOWN_KEY:
+        signal('dec')();
+        break;
+    }
+  });
 }
 
 /* The code block below ONLY Applies to tests run using Node.js */
diff --git a/examples/counter-reset-keyboard/index.html b/examples/counter-reset-keyboard/index.html
index 199fa7aa..933b2e12 100644
--- a/examples/counter-reset-keyboard/index.html
+++ b/examples/counter-reset-keyboard/index.html
@@ -13,22 +13,14 @@
 </head>
 <body>
   <div id="app"></div>
+
   <script src="counter.js" data-cover></script> <!-- load counter  -->
   <script>
   // Initialise the app by "mounting" it passing in MUV Object & "root" DOM node
-   mount(0, update, view, 'app');
+   mount(0, update, view, 'app', subscriptions);
+   console.log('subs:', subscriptions.toString());
   </script>
 
-  <!-- Below this point is all related to the Tests for the App -->
-  <div id="test-app"></div> <!-- Create a test-app div to mount the app -->
-  <div id="qunit"></div>    <!-- test results are displayed here -->
-  <!-- Load the QUnit CSS file from CDN - require to display our tests -->
-  <link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.18.0.css">
-  <!-- Load the QUnit Testing Framework from CDN - to run the tests -->
-  <script src="https://code.jquery.com/qunit/qunit-1.18.0.js"></script>
-  <!-- Load Blanket.js from CDN - for test coverage stats -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/blanket.js/1.1.4/blanket.js">
-  </script>
-  <script src="test.js"></script>  <!-- always load test.js last -->
+
 </body>
 </html>
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 8c4bc29a..6fd1b1be 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -19,29 +19,29 @@ function empty (node) {
  * @param {Function} update how the application state is updated ("controller")
  * @param {Function} view function that renders HTML/DOM elements with model.
  * @param {String} root_element_id root DOM element in which the app is mounted
- * @param {Function} subscriptions any event listeners the application needs
+ * @param {Function} subs any event listeners the application needs
  */
-function mount (model, update, view, root_element_id, subscriptions) {
+function mount (model, update, view, root_element_id, subs) {
   var ROOT = document.getElementById(root_element_id); // root DOM element
   var store_name = 'elmish_' + root_element_id; // test-app !== app
-  console.log('store_name:', store_name);
-  function render (mod, sig, root, subs) { // DRY rendering code (invoked twice)
+
+  function render (mod, sig, root) { // DRY rendering code (invoked twice)
     localStorage.setItem(store_name, JSON.stringify(mod)); // save the model!
     empty(root); // clear root element (container) before (re)rendering
     root.appendChild(view(mod, sig)) // render view based on model & signal
-    if (subs && typeof subs === 'function') { subs(sig, root); } // subscription
   }
 
   function signal(action) { // signal function takes action
     return function callback() { // and returns callback
       model = JSON.parse(localStorage.getItem(store_name)) //|| model;
       var updatedModel = update(action, model); // update model for the action
-      render(updatedModel, signal, ROOT, subscriptions);
+      render(updatedModel, signal, ROOT);
     };
   };
 
   model = JSON.parse(localStorage.getItem(store_name)) || model;
-  render(model, signal, ROOT, subscriptions);
+  render(model, signal, ROOT);
+  if (subs && typeof subs === 'function') { subs(signal, ROOT); }
 }
 
 /**
diff --git a/test/elmish.test.js b/test/elmish.test.js
index c52de1ef..8bf70fb2 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -467,14 +467,14 @@ test('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
     "elmish_store is 0 (as expected). initial state saved to localStorage.");
 
   // trigger the [↑] (up) keyboard key to increment the counter:
-  root.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 38})); // ↑
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 38})); // up
   t.equal(parseInt(document.getElementById('count')
     .textContent, 10), 1, "Up key press increment 0 -> 1");
   t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 1,
     "elmish_store 1 (as expected). incremented state saved to localStorage.");
 
   // trigger the [↓] (down) keyboard key to increment the counter:
-  root.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 40})); // ↓
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 40})); // down
   t.equal(parseInt(document.getElementById('count')
     .textContent, 10), 0, "Up key press dencrement 1 -> 0");
   t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 0,
@@ -482,7 +482,7 @@ test('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
 
   // subscription keyCode trigger "branch" test (should NOT fire the signal):
   const clone = document.getElementById(id).cloneNode(true);
-  document.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42})); //
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 42})); //
   t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
 
   // default branch execution:

From a326d583e9e458b74d812dee6ec3ab6a433c7dc7 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 22:09:25 +0100
Subject: [PATCH 116/164] update subscriptions parameter in elmish.mount for
 clarity fixe #57

---
 examples/counter-reset-keyboard/counter.js | 4 ++--
 examples/counter-reset-keyboard/index.html | 3 +--
 examples/todo-list/elmish.js               | 8 +++++---
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/examples/counter-reset-keyboard/counter.js b/examples/counter-reset-keyboard/counter.js
index ed4d00d2..48c9924b 100644
--- a/examples/counter-reset-keyboard/counter.js
+++ b/examples/counter-reset-keyboard/counter.js
@@ -15,7 +15,7 @@ function update (action, model) {    // Update function takes the current state
 }
 
 function view(model, signal) {
-  return div(['id=wrap'], [
+  return div([], [
     button(["class=inc", "id=inc", signal('inc')], [text('+')]), // increment
     div(["class=count", "id=count"], [text(model.toString())]), // count
     button(["class=dec", "id=dec", signal('dec')], [text('-')]), // decrement
@@ -23,7 +23,7 @@ function view(model, signal) {
   ]);
 }
 
-function subscriptions (signal, root) {
+function subscriptions (signal) {
   var UP_KEY = 38; // increment the counter when [↑] (up) key is pressed
   var DOWN_KEY = 40; // decrement the counter when [↓] (down) key is pressed
 
diff --git a/examples/counter-reset-keyboard/index.html b/examples/counter-reset-keyboard/index.html
index 933b2e12..ede013b8 100644
--- a/examples/counter-reset-keyboard/index.html
+++ b/examples/counter-reset-keyboard/index.html
@@ -20,7 +20,6 @@
    mount(0, update, view, 'app', subscriptions);
    console.log('subs:', subscriptions.toString());
   </script>
-
-
+  
 </body>
 </html>
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 6fd1b1be..b0f3ca0a 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -19,9 +19,9 @@ function empty (node) {
  * @param {Function} update how the application state is updated ("controller")
  * @param {Function} view function that renders HTML/DOM elements with model.
  * @param {String} root_element_id root DOM element in which the app is mounted
- * @param {Function} subs any event listeners the application needs
+ * @param {Function} subscriptions any event listeners the application needs
  */
-function mount (model, update, view, root_element_id, subs) {
+function mount (model, update, view, root_element_id, subscriptions) {
   var ROOT = document.getElementById(root_element_id); // root DOM element
   var store_name = 'elmish_' + root_element_id; // test-app !== app
 
@@ -41,7 +41,9 @@ function mount (model, update, view, root_element_id, subs) {
 
   model = JSON.parse(localStorage.getItem(store_name)) || model;
   render(model, signal, ROOT);
-  if (subs && typeof subs === 'function') { subs(signal, ROOT); }
+  if (subscriptions && typeof subscriptions === 'function') {
+    subscriptions(signal);
+  }
 }
 
 /**

From 9471c343c973282a9c60e902af8e4aa6ae0a7aa2 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 22:22:52 +0100
Subject: [PATCH 117/164] add screenshot of counter-reset-keyboard subscription
 tests passing #57

---
 elmish.md | 24 ++++++++++++++++++------
 1 file changed, 18 insertions(+), 6 deletions(-)

diff --git a/elmish.md b/elmish.md
index c016cf46..09c4de3c 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1865,7 +1865,8 @@ If you get "stuck", checkout:
 ### `subscriptions` for event listeners
 
 In Elm, when we want to "listen" for an event or "external input"
-we use `subscriptions`. Examples include:
+we use `subscriptions`. <br />
+Examples include:
 
 + [Keyboard events](http://package.elm-lang.org/packages/elm-lang/keyboard/latest/Keyboard)
 + [Mouse movements & clicks](http://package.elm-lang.org/packages/elm-lang/mouse/latest/Mouse)
@@ -1883,11 +1884,11 @@ and consider an alternative User Interaction/Experience: Keyboard!
 
 #### Use-case: Use Up/Down Keyboard (Arrow) Keys to Increment/Decrement Counter
 
-As a user <br />
-I would like to use the keyboard **`[↑]`** (Up) and **`[↓]`** (Down) arrow keys
+***As a user*** <br />
+***I would like*** to use the keyboard **`[↑]`** (Up) and **`[↓]`** (Down) arrow keys <br />
 to signal the **Increment** and **Decrement** action (_respectively_)
-of the Counter.
-So that I don't have to use a mouse to click a button.
+of the Counter. <br />
+***So that*** I don't have to use a mouse to click a button.
 
 ![up-down-arrrow-keys](https://user-images.githubusercontent.com/194400/43962720-4cbfb192-9cb0-11e8-9c45-63e7644f1cf6.png)
 
@@ -1989,12 +1990,23 @@ so the last assertion always passes.
 
 #### `subscriptions`_Implementation_: Keyboard Keys Increment/Decrement Counter!
 
-We could spend an hour googling or I can _give_ you the sample code 
+Once again, try to _think_ of how you would implement
+a subscriptions function and _attempt_ to write the code.
 
+Don't be disheartened if you have "_no idea_" how to solve this one.
+If you are relatively recent to JavaScript,
+it is _unlikely_ that you have come across event listeners.
 
+It's "OK" to "take a peek" at the sample code:
+[**`examples/counter-reset-keyboard/counter.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-97353eabc55df91dbb3f96ba5a000a1aR26)
 
+Once you add the **`subscriptions`** function to
+**`examples/counter-reset-keyboard/counter.js`**,
+Your tests should pass:
 
+![counter-reset-keyboard-subscriptions-tests-passing](https://user-images.githubusercontent.com/194400/43981911-b6413dda-9ceb-11e8-8514-44fc1f88c3fe.png)
 
+Well done! 
 
 <br />
 

From 193d55e40af24e4b8154613bcc52720174178679 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 10 Aug 2018 22:46:41 +0100
Subject: [PATCH 118/164] add screenshot of 2. New Todo tests passing #57

---
 elmish.md                                  |  6 +++--
 examples/counter-reset-keyboard/index.html |  3 +--
 examples/todo-list/elmish.js               |  4 ++--
 examples/todo-list/todo-app.js             |  2 +-
 test/todo-app.test.js                      |  4 ++--
 todo-list.md                               | 27 +++++++++++++++++++---
 6 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/elmish.md b/elmish.md
index 09c4de3c..f2d4f0a3 100644
--- a/elmish.md
+++ b/elmish.md
@@ -1862,7 +1862,7 @@ If you get "stuck", checkout:
 
 <br />
 
-### `subscriptions` for event listeners
+### `subscriptions` for Event Listeners
 
 In Elm, when we want to "listen" for an event or "external input"
 we use `subscriptions`. <br />
@@ -1988,6 +1988,8 @@ so the last assertion always passes.
 (_this will not be the case
   once you have the [Up] arrow event listener working_).
 
+Recommended reading: https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically
+
 #### `subscriptions`_Implementation_: Keyboard Keys Increment/Decrement Counter!
 
 Once again, try to _think_ of how you would implement
@@ -2006,7 +2008,7 @@ Your tests should pass:
 
 ![counter-reset-keyboard-subscriptions-tests-passing](https://user-images.githubusercontent.com/194400/43981911-b6413dda-9ceb-11e8-8514-44fc1f88c3fe.png)
 
-Well done! 
+Well done!
 
 <br />
 
diff --git a/examples/counter-reset-keyboard/index.html b/examples/counter-reset-keyboard/index.html
index ede013b8..7d72a5d9 100644
--- a/examples/counter-reset-keyboard/index.html
+++ b/examples/counter-reset-keyboard/index.html
@@ -18,8 +18,7 @@
   <script>
   // Initialise the app by "mounting" it passing in MUV Object & "root" DOM node
    mount(0, update, view, 'app', subscriptions);
-   console.log('subs:', subscriptions.toString());
   </script>
-  
+
 </body>
 </html>
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index b0f3ca0a..a05b85ab 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -31,10 +31,10 @@ function mount (model, update, view, root_element_id, subscriptions) {
     root.appendChild(view(mod, sig)) // render view based on model & signal
   }
 
-  function signal(action) { // signal function takes action
+  function signal(action, data) { // signal function takes action
     return function callback() { // and returns callback
       model = JSON.parse(localStorage.getItem(store_name)) //|| model;
-      var updatedModel = update(action, model); // update model for the action
+      var updatedModel = update(action, model, data); // update model for the action
       render(updatedModel, signal, ROOT);
     };
   };
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 48e3c9fc..f7bfc81c 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -197,7 +197,7 @@ function subscriptions (signal) {
 	var ESCAPE_KEY = 27; // used for "escaping" when editing a Todo item
   var new_todo = document.getElementById('new-todo');
 
-  new_todo.addEventListener('keypress', function (e) {
+  new_todo.addEventListener('keyup', function (e) {
     if (e.keyCode === ENTER_KEY && new_todo.value.length > 0) {
       signal('ADD')(); // invoke the singal function and inner callback
       new_todo.value = ''; // reset <input> so we can add another todo
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index ccb1c48c..b0563533 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -220,7 +220,7 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   const todo_text = 'Make Everything Awesome!     '; // deliberate whitespace!
   new_todo.value = todo_text;
   // trigger the [Enter] keyboard key to ADD the new todo:
-  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 13}));
+  new_todo.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
   const items = document.querySelectorAll('.view');
   t.equal(items.length, 1, "should allow me to add todo items");
   // check if the new todo was added to the DOM:
@@ -229,7 +229,7 @@ test('2. New Todo, should allow me to add todo items', function (t) {
 
   // subscription keyCode trigger "branch" test (should NOT fire the signal):
   const clone = document.getElementById(id).cloneNode(true);
-  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42}));
+  new_todo.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 42}));
   t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
 
   // check that the <input id="new-todo"> was reset after the new item was added
diff --git a/todo-list.md b/todo-list.md
index 058aa3fd..8c390746 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1473,7 +1473,7 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   const todo_text = 'Make Everything Awesome!     '; // deliberate whitespace!
   new_todo.value = todo_text;
   // trigger the [Enter] keyboard key to ADD the new todo:
-  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 13}));
+  new_todo.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
   const items = document.querySelectorAll('.view');
 
   t.equal(items.length, 1, "should allow me to add todo items");
@@ -1483,7 +1483,7 @@ test('2. New Todo, should allow me to add todo items', function (t) {
 
   // subscription keyCode trigger "branch" test (should NOT fire the signal):
   const clone = document.getElementById(id).cloneNode(true);
-  new_todo.dispatchEvent(new KeyboardEvent('keypress', {'keyCode': 42}));
+  new_todo.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 42}));
   t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
 
   // check that the <input id="new-todo"> was reset after the new item was added
@@ -1510,7 +1510,28 @@ You should see the following output:
 
 ![test-failing](https://user-images.githubusercontent.com/194400/43929259-1880b41e-9c2c-11e8-9615-1372928c905d.png)
 
-Reading: https://stackoverflow.com/questions/596481/is-it-possible-to-simulate-key-press-events-programmatically
+
+#### Todo List `subscriptions`
+
+So far in the Todo List App
+we have not implemented any **`subscriptions`**,
+however, in order to "listen" for the **`[Enter]`** key "event"
+(_to add a Todo List item_), we need to dive into event listeners.
+
+Thankfully, we touched upon this while building `Elm`(_ish_),
+if you need a recap, see:
+[**elmish.md#subscriptions-for-event-listeners**](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md#subscriptions-for-event-listeners)
+
+Try to make the "**2. New Todo**" batch of tests _pass_
+by creating (_and exporting_) a **`subscriptions`** function
+in your **`examples/todo-list/todo-app.js`** file.
+
+If you get "_stuck_", checkout the sample code:
+[**`todo-app.js > subscriptions`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR189)
+
+0nce you see the tests passing:
+
+![add-todo-tests-passing](https://user-images.githubusercontent.com/194400/43982691-08d81eee-9cef-11e8-92c3-341433884092.png)
 
 
 <!--

From 89de33a8acb1c3ea93ccd4309ea8752dafad9a49 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 11 Aug 2018 01:11:49 +0100
Subject: [PATCH 119/164] add code to make TOGGLE_ALL tests pass. see/fixes
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/50

---
 examples/todo-list/elmish.js   |   2 +-
 examples/todo-list/todo-app.js |  67 ++++++++++++++-------
 test/elmish.test.js            |   4 +-
 test/todo-app.test.js          |  64 +++++++++++++++++++-
 todo-list.md                   | 104 +++++++++++++++++++++++++++++++++
 5 files changed, 216 insertions(+), 25 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index a05b85ab..d50f8697 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -71,7 +71,7 @@ function add_attributes (attrlist, node) {
           node.focus();
           break;
         case 'checked':
-          node.checked = (a[1] === 'true' ? true : false);
+          node.setAttribute('checked', 'checked');
         case 'class':
           node.className = a[1]; // apply one or more CSS classes
           break;
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index f7bfc81c..50f67383 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -19,14 +19,17 @@ var initial_model = {
  */
 function update(action, model, data) {
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
-  // console.log('> > > > > > > > > > > model.todos', model.todos);
+  // console.log('> > > > > > > > > > > model', model);
   switch(action) {                   // and an action (String) runs a switch
     case 'ADD':
-      // console.log('update called with action:', action);
       // can you see an "issue" with this way of generating the todo id? Bug...?
       var id = (typeof model.todos !== 'undefined' && model.todos.length > 0) ?
         (model.todos.length + 1) : 1;
       var input = document.getElementById('new-todo');
+      // console.log('new_model.todos', new_model.todos);
+      new_model.todos = (new_model.todos && new_model.todos.length > 0)
+        ? new_model.todos : [];
+      // console.log('new_model.todos', new_model.todos);
       new_model.todos.push({
         id: id,
         title: data || input.value.trim(),
@@ -39,6 +42,19 @@ function update(action, model, data) {
           item.done = !item.done; // invert state of "done" e.g false >> true
         }
       });
+      // if all todos are done=true then "check" the "toggle-all" checkbox:
+      var all_done = new_model.todos.filter(function(item) {
+        // console.log('> > > > > >item.done:', item.done);
+        return item.done === false; // only care about items that are NOT done
+      }).length;
+      // console.log(' >>>> all_done', all_done);
+      new_model.all_done = all_done === 0 ? true : false;
+      break;
+    case 'TOGGLE_ALL':
+      new_model.all_done = new_model.all_done ? false : true;
+      new_model.todos.forEach(function (item) { // takes 1ms on a "slow mobile"
+        item.done = new_model.all_done;
+      });
       break;
     default: // if action unrecognised or undefined,
       return model; // return model unmodified
@@ -60,7 +76,7 @@ function update(action, model, data) {
  * // returns <li> DOM element with <div>, <input>. <label> & <button> nested
  * var DOM = render_item({id: 1, title: "Build Todo List App", done: false});
  */
-function render_item (item) {
+function render_item (item, signal) {
   return (
     li([
       "data-id=" + item.id,
@@ -71,7 +87,8 @@ function render_item (item) {
         input([
           item.done ? "checked=true" : "",
           "class=toggle",
-          "type=checkbox"
+          "type=checkbox",
+          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
           ],
           []), // <input> does not have any nested elements
         label([], [text(item.title)]),
@@ -87,18 +104,21 @@ function render_item (item) {
  * @param {Object} model - the App's (current) model (or "state").
  * @return {Object} <section> DOM Tree which containing the todo list <ul>, etc.
  */
-function render_main (model) {
+function render_main (model, signal) {
   // Requirement #1 - No Todos, should hide #footer and #main
   var display = "style=display:"
     + (model.todos && model.todos.length > 0 ? "block" : "none");
   // console.log('display:', display);
   return (
     section(["class=main", "id=main", display], [ // hide if no todo items.
-      input(["id=toggle-all", "class=toggle-all", "type=checkbox"], []),
+      input(["id=toggle-all", "class=toggle-all", "type=checkbox",
+        typeof signal === 'function' ? signal('TOGGLE_ALL') : '',
+        (model.all_done ? "checked=checked" : "")
+      ], []),
       label(["for=toggle-all"], [ text("Mark all as complete") ]),
       ul(["class=todo-list"],
         (model.todos && model.todos.length > 0) ?
-        model.todos.map(function (item) { return render_item(item) })
+        model.todos.map(function (item) { return render_item(item, signal) })
         : null
       ) // </ul>
     ]) // </section>
@@ -115,25 +135,29 @@ function render_main (model) {
  * // returns <footer> DOM element with other DOM elements nested:
  * var DOM = render_footer(model);
  */
-function render_footer (model) {
+function render_footer (model, signal) {
 
   // count how many "active" (not yet done) items by filtering done === false:
+  var done = (model.todos && model.todos.length > 0) ?
+    model.todos.filter( function (i) { return i.done; }).length : 0;
+  // console.log('done:', done);
   var count = (model.todos && model.todos.length > 0) ?
     model.todos.filter( function (i) { return !i.done; }).length : 0;
-
+  // console.log('count:', count);
   // Requirement #1 - No Todos, should hide #footer and #main
-  var display = "style=display:" + (count > 0 ? "block" : "none");
+  var display = (count > 0 || done > 0) ? "block" : "none";
   // console.log('model:', model, 'count:', count, 'display:', display);
 
   // number of completed items:
   var done = (model.todos && model.todos.length > 0) ?
     (model.todos.length - count) : 0;
-  var display_clear = "style=display:" + (done > 0 ? "block;" : "none;");
+  var display_clear =  (done > 0) ? "block;" : "none;";
+  // console.log('display_clear:', display_clear);
   // pluarisation of number of items:
-  var left = (" item" + (count > 1 || count === 0 ? 's' : '') + " left");
+  var left = (" item" + ( count > 1 || count === 0 ? 's' : '') + " left");
 
   return (
-    footer(["class=footer", "id=footer", display], [
+    footer(["class=footer", "id=footer", "style=display:" + display], [
       span(["class=todo-count", "id=count"], [
         strong(count),
         text(left)
@@ -149,7 +173,9 @@ function render_footer (model) {
           a(["href=#/completed"], [text("Completed")])
         ])
       ]), // </ul>
-      button(["class=clear-completed", "onclick=alert('hello')"],
+      button(["class=clear-completed", "style=display:" + display_clear,
+        // signal('CLEAR_COMPLETED')
+        ],
         [text("Clear completed")]
       )
     ])
@@ -180,8 +206,8 @@ function view (model, signal) {
           "autofocus"
         ], []) // <input> is "self-closing"
       ]), // </header>
-      render_main(model),
-      render_footer(model)
+      render_main(model, signal),
+      render_footer(model, signal)
     ]) // <section>
   );
 }
@@ -195,13 +221,14 @@ function view (model, signal) {
 function subscriptions (signal) {
 	var ENTER_KEY = 13; // add a new todo item when [Enter] key is pressed
 	var ESCAPE_KEY = 27; // used for "escaping" when editing a Todo item
-  var new_todo = document.getElementById('new-todo');
 
-  new_todo.addEventListener('keyup', function (e) {
+  document.addEventListener('keyup', function handler (e) {
+    var new_todo = document.getElementById('new-todo');
+    console.log('e.keyCode', e);
     if (e.keyCode === ENTER_KEY && new_todo.value.length > 0) {
-      signal('ADD')(); // invoke the singal function and inner callback
+      signal('ADD')(); // invoke singal inner callback
       new_todo.value = ''; // reset <input> so we can add another todo
-      new_todo.focus(); // ensure that <input id="new-todo"> "in focus"
+      document.getElementById('new-todo').focus();
     }
   });
 }
diff --git a/test/elmish.test.js b/test/elmish.test.js
index 8bf70fb2..124986df 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -169,11 +169,11 @@ test('elmish.add_attributes checked=true on "done" item', function (t) {
     input);
   root.appendChild(input);
   const checked = document.getElementById('item1').checked;
-  t.equal(checked, true, '<input type="checkbox" checked=true>');
+  t.equal(checked, true, '<input type="checkbox" checked="checked">');
   // test "checked=false" so we know we are able to "toggle" a todo item:
   root.appendChild(
     elmish.add_attributes(
-      ["type=checkbox", "id=item2", "checked=false"],
+      ["type=checkbox", "id=item2"],
       document.createElement('input')
     )
   );
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index b0563533..8c43a0dc 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -220,7 +220,7 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   const todo_text = 'Make Everything Awesome!     '; // deliberate whitespace!
   new_todo.value = todo_text;
   // trigger the [Enter] keyboard key to ADD the new todo:
-  new_todo.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
   const items = document.querySelectorAll('.view');
   t.equal(items.length, 1, "should allow me to add todo items");
   // check if the new todo was added to the DOM:
@@ -229,7 +229,7 @@ test('2. New Todo, should allow me to add todo items', function (t) {
 
   // subscription keyCode trigger "branch" test (should NOT fire the signal):
   const clone = document.getElementById(id).cloneNode(true);
-  new_todo.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 42}));
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 42}));
   t.deepEqual(document.getElementById(id), clone, "#" + id + " no change");
 
   // check that the <input id="new-todo"> was reset after the new item was added
@@ -242,6 +242,66 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   const main_footer= window.getComputedStyle(document.getElementById('footer'));
   t.equal('block', main_footer._values.display, "item added, show #footer");
 
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('elmish_' + id);
+  t.end();
+});
+
+
+test('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Learn Elm Architecture", done: true },
+      { id: 1, title: "Build Todo List App",    done: false },
+      { id: 2, title: "Win the Internet!",      done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // confirm that the ONLY the first todo item is done=true:
+  const items = document.querySelectorAll('.view');
+
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    t.equal(item.checked, model.todos[index].done,
+      "Todo #" + index + " is done=" + item.checked
+      + " text: " + items[index].textContent)
+  })
+
+  // click the toggle-all checkbox to trigger TOGGLE_ALL: >> true
+  document.getElementById('toggle-all').click(); // click toggle-all checkbox
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    t.equal(item.checked, true,
+      "TOGGLE each Todo #" + index + " is done=" + item.checked
+      + " text: " + items[index].textContent)
+  });
+  t.equal(document.getElementById('toggle-all').checked, true,
+    "should allow me to mark all items as completed")
+
+
+  // click the toggle-all checkbox to TOGGLE_ALL (again!) true >> false
+  document.getElementById('toggle-all').click(); // click toggle-all checkbox
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    t.equal(item.checked, false,
+      "TOGGLE_ALL Todo #" + index + " is done=" + item.checked
+      + " text: " + items[index].textContent)
+  })
+  t.equal(document.getElementById('toggle-all').checked, false,
+    "should allow me to clear the completion state of all items")
+
+  // *manually* "click" each todo item:
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    item.click(); // this should "toggle" the todo checkbox to done=true
+    t.equal(item.checked, true,
+      ".toggle.click() (each) Todo #" + index + " which is done=" + item.checked
+      + " text: " + items[index].textContent)
+  });
+  // the toggle-all checkbox should be "checked" as all todos are done=true!
+  t.equal(document.getElementById('toggle-all').checked, true,
+    "complete all checkbox should update state when items are completed")
+
   elmish.empty(document.getElementById(id)); // clear DOM ready for next test
   localStorage.removeItem('elmish_store');
   t.end();
diff --git a/todo-list.md b/todo-list.md
index 8c390746..eea5eff4 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1534,6 +1534,110 @@ If you get "_stuck_", checkout the sample code:
 ![add-todo-tests-passing](https://user-images.githubusercontent.com/194400/43982691-08d81eee-9cef-11e8-92c3-341433884092.png)
 
 
+#### 3. Mark all as completed
+
+The third batch of tests involves "Toggling" all todos as "done=true":
+
+```
+3. Mark all as completed
+  ✓ should allow me to mark all items as completed
+  ✓ should allow me to clear the completion state of all items
+  ✓ complete all checkbox should update state when items are completed
+```
+Luckily, given that we know how to use a _boolean_ value,
+these _three_ assertions can be "solved" with _minimal_ code.
+Let's create a test with these 3 assertions.
+
+Add the following code/test to your `test/todo-app.test.js` file:
+```js
+test.only('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Learn Elm Architecture", done: true },
+      { id: 1, title: "Build Todo List App",    done: false },
+      { id: 2, title: "Win the Internet!",      done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // confirm that the ONLY the first todo item is done=true:
+  const items = document.querySelectorAll('.view');
+
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    t.equal(item.checked, model.todos[index].done,
+      "Todo #" + index + " is done=" + item.checked
+      + " text: " + items[index].textContent)
+  })
+
+  // click the toggle-all checkbox to trigger TOGGLE_ALL: >> true
+  document.getElementById('toggle-all').click(); // click toggle-all checkbox
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    t.equal(item.checked, true,
+      "TOGGLE each Todo #" + index + " is done=" + item.checked
+      + " text: " + items[index].textContent)
+  });
+  t.equal(document.getElementById('toggle-all').checked, true,
+    "should allow me to mark all items as completed")
+
+
+  // click the toggle-all checkbox to TOGGLE_ALL (again!) true >> false
+  document.getElementById('toggle-all').click(); // click toggle-all checkbox
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    t.equal(item.checked, false,
+      "TOGGLE_ALL Todo #" + index + " is done=" + item.checked
+      + " text: " + items[index].textContent)
+  })
+  t.equal(document.getElementById('toggle-all').checked, false,
+    "should allow me to clear the completion state of all items")
+
+  // *manually* "click" each todo item:
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    item.click(); // this should "toggle" the todo checkbox to done=true
+    t.equal(item.checked, true,
+      ".toggle.click() (each) Todo #" + index + " which is done=" + item.checked
+      + " text: " + items[index].textContent)
+  });
+  // the toggle-all checkbox should be "checked" as all todos are done=true!
+  t.equal(document.getElementById('toggle-all').checked, true,
+    "complete all checkbox should update state when items are completed")
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('elmish_store');
+  t.end();
+});
+```
+
+If you attempt to run the test file:
+```sh
+node test/todo-app.test.js
+```
+You will see something like this:
+
+![toggle-all-test-failing](https://user-images.githubusercontent.com/194400/43985804-3c8dbe02-9d02-11e8-9876-cd7e35602754.png)
+
+While there may _appear_ to be "_many_" assertions in this test,
+in reality there are only two bits of functionality.
+
+_Firstly_, we need a new `case`
+in the `update` `switch` statement: `TOGGLE_ALL`.
+and _second_ we need to add a couple of lines to our `TOGGLE`
+block to _check_ if _all_ todos are `done=true` or `done=false`.
+In the case where _all_ todos are `done=true` we should reflect
+this in the "state" of the `toggle-all` checkbox.
+The _easiest_ way of representing this in the `model` is
+with a new property, e.g: `model.all_done=true`
+when _all_ todos are `done=true`.
+
+The only other thing we need to update is the `render_main`
+function to include `signal('TOGGLE_ALL')` in the attributes array.
+
+Try and make this test pass by yourself before consulting the
+sample code:
+
+
 <!--
 
 ## What _Next_?

From fff65da57b80ba9687edfd4370151f249eb6c586 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 11 Aug 2018 01:14:04 +0100
Subject: [PATCH 120/164] add link to sample code for TOGGLE_ALL #50

---
 todo-list.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/todo-list.md b/todo-list.md
index eea5eff4..4577f7cd 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1636,7 +1636,7 @@ function to include `signal('TOGGLE_ALL')` in the attributes array.
 
 Try and make this test pass by yourself before consulting the
 sample code:
-
+[**`examples/todo-list/todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR46)
 
 <!--
 

From b8bb500721b4a548b8d3f6a9eb2867f69e1d6080 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 11 Aug 2018 01:18:16 +0100
Subject: [PATCH 121/164] for some reason the class attribute *MUST* be last in
 array!

---
 examples/todo-list/elmish.js   | 2 +-
 examples/todo-list/todo-app.js | 5 +++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index d50f8697..35ba5f51 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -71,7 +71,7 @@ function add_attributes (attrlist, node) {
           node.focus();
           break;
         case 'checked':
-          node.setAttribute('checked', 'checked');
+          node.setAttribute('checked', true);
         case 'class':
           node.className = a[1]; // apply one or more CSS classes
           break;
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 50f67383..f08e64c0 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -111,9 +111,10 @@ function render_main (model, signal) {
   // console.log('display:', display);
   return (
     section(["class=main", "id=main", display], [ // hide if no todo items.
-      input(["id=toggle-all", "class=toggle-all", "type=checkbox",
+      input(["id=toggle-all", "type=checkbox",
         typeof signal === 'function' ? signal('TOGGLE_ALL') : '',
-        (model.all_done ? "checked=checked" : "")
+        (model.all_done ? "checked=checked" : ""),
+        "class=toggle-all"
       ], []),
       label(["for=toggle-all"], [ text("Mark all as complete") ]),
       ul(["class=todo-list"],

From b277b6cca3241b83d902af9a59380abf42e60853 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 11 Aug 2018 16:03:58 +0100
Subject: [PATCH 122/164] add test (passing) for 4. Item (toggle) done #44

---
 examples/todo-list/todo-app.js |  5 ---
 test/todo-app.test.js          | 30 +++++++++++++++
 todo-list.md                   | 68 ++++++++++++++++++++++++++++++++++
 3 files changed, 98 insertions(+), 5 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index f08e64c0..d1442be5 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -19,17 +19,14 @@ var initial_model = {
  */
 function update(action, model, data) {
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
-  // console.log('> > > > > > > > > > > model', model);
   switch(action) {                   // and an action (String) runs a switch
     case 'ADD':
       // can you see an "issue" with this way of generating the todo id? Bug...?
       var id = (typeof model.todos !== 'undefined' && model.todos.length > 0) ?
         (model.todos.length + 1) : 1;
       var input = document.getElementById('new-todo');
-      // console.log('new_model.todos', new_model.todos);
       new_model.todos = (new_model.todos && new_model.todos.length > 0)
         ? new_model.todos : [];
-      // console.log('new_model.todos', new_model.todos);
       new_model.todos.push({
         id: id,
         title: data || input.value.trim(),
@@ -44,10 +41,8 @@ function update(action, model, data) {
       });
       // if all todos are done=true then "check" the "toggle-all" checkbox:
       var all_done = new_model.todos.filter(function(item) {
-        // console.log('> > > > > >item.done:', item.done);
         return item.done === false; // only care about items that are NOT done
       }).length;
-      // console.log(' >>>> all_done', all_done);
       new_model.all_done = all_done === 0 ? true : false;
       break;
     case 'TOGGLE_ALL':
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 8c43a0dc..6adb4a05 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -306,3 +306,33 @@ test('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
   localStorage.removeItem('elmish_store');
   t.end();
 });
+
+test.only('4. Item: should allow me to mark items as complete', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  const item = document.getElementById('0')
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in model.');
+  // confirm that the todo item is NOT done (done=false):
+  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
+  'Item starts out "active" (done=false)');
+
+
+  // click the checkbox to toggle it to done=true
+  document.querySelectorAll('.toggle')[0].click()
+  t.equal(document.querySelectorAll('.toggle')[0].checked, true,
+  'Item should allow me to mark items as complete');
+
+  // click the checkbox to toggle it to done=false "undo"
+  document.querySelectorAll('.toggle')[0].click()
+  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
+  'Item should allow me to un-mark items as complete');
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index 4577f7cd..9e75a211 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1382,6 +1382,7 @@ We are going to write each one of these tests and then
 
 #### 1. No Todos, should hide #footer and #main
 
+
 Add the following test to your `test/todo-app.test.js` file:
 ```js
 test.only('1. No Todos, should hide #footer and #main', function (t) {
@@ -1638,6 +1639,73 @@ Try and make this test pass by yourself before consulting the
 sample code:
 [**`examples/todo-list/todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR46)
 
+
+### 4. Item
+
+```
+4. Item
+  ✓ should allow me to mark items as complete (843ms)
+  ✓ should allow me to un-mark items as complete (978ms)
+  ✓ should allow me to edit an item (1155ms)
+  ✓ should show the remove button on hover
+```
+
+Of these requirements, we already have the first two "_covered_"
+because we implemented the `TOGGLE` feature (_above_).
+
+We can add another "proxy" test just for "_completeness_":
+
+```js
+test.only('4. Item: should allow me to mark items as complete', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  const item = document.getElementById('0')
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in model.');
+  // confirm that the todo item is NOT done (done=false):
+  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
+  'Item starts out "active" (done=false)');
+
+
+  // click the checkbox to toggle it to done=true
+  document.querySelectorAll('.toggle')[0].click()
+  t.equal(document.querySelectorAll('.toggle')[0].checked, true,
+  'Item should allow me to mark items as complete');
+
+  // click the checkbox to toggle it to done=false "undo"
+  document.querySelectorAll('.toggle')[0].click()
+  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
+  'Item should allow me to un-mark items as complete');
+  t.end();
+});
+```
+You should not need to write any additional code
+in order to make this test pass; just run it and move on.
+
+![toggle-todo-tests-passing](https://user-images.githubusercontent.com/194400/43992979-a4d00ab6-9d7e-11e8-891b-9f699f474dd5.png)
+
+
+
+#### 4.2 `EDIT` an Item
+
+```
+should allow me to edit an item
+```
+
+#### 4.1 `DELETE` an Item
+
+```
+should show the remove button on hover
+```
+
+
 <!--
 
 ## What _Next_?

From a47b24c18cce5082b0c96cddf9d914950dd19773 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 11 Aug 2018 21:01:15 +0100
Subject: [PATCH 123/164] [WiP] add outline of Acceptance Criteria for Editing
 a Todo List Item for #60 ... putting this "on hold" to focus on
 https://github.com/nelsonic/nelsonic.github.io/issues/511 for the next 36h

---
 examples/counter-basic/index.html | 18 +++++++
 test/todo-app.test.js             | 21 +++++++-
 todo-list.md                      | 85 ++++++++++++++++++++++++++++++-
 3 files changed, 122 insertions(+), 2 deletions(-)

diff --git a/examples/counter-basic/index.html b/examples/counter-basic/index.html
index 3a36af2f..811e1d3d 100644
--- a/examples/counter-basic/index.html
+++ b/examples/counter-basic/index.html
@@ -94,5 +94,23 @@
 </script>
 <script src="../counter-basic-test/test.js"></script> <!-- load test.js last -->
 
+<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
+    <script>
+        function doubleclick(el, onsingle, ondouble) {
+            if (el.getAttribute("data-dblclick") == null) {
+                el.setAttribute("data-dblclick", 1);
+                setTimeout(function () {
+                    if (el.getAttribute("data-dblclick") == 1) {
+                        onsingle();
+                    }
+                    el.removeAttribute("data-dblclick");
+                }, 300);
+            } else {
+                el.removeAttribute("data-dblclick");
+                ondouble();
+            }
+        }
+    </script>
+
 </body>
 </html>
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 6adb4a05..1fe5ca60 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -307,7 +307,7 @@ test('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
   t.end();
 });
 
-test.only('4. Item: should allow me to mark items as complete', function (t) {
+test('4. Item, should allow me to mark items as complete', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('elmish_' + id);
   const model = {
@@ -336,3 +336,22 @@ test.only('4. Item: should allow me to mark items as complete', function (t) {
   'Item should allow me to un-mark items as complete');
   t.end();
 });
+
+test.skip('4.1 Item, should allow me to edit an item ("EDIT")' , function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  const item = document.getElementById('0')
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in model.');
+  // confirm that the todo item is NOT done (done=false):
+
+
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index 9e75a211..1b74269d 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1640,7 +1640,7 @@ sample code:
 [**`examples/todo-list/todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR46)
 
 
-### 4. Item
+### 4. Item (Toggle, Edit & Delete)
 
 ```
 4. Item
@@ -1693,12 +1693,95 @@ in order to make this test pass; just run it and move on.
 
 
 
+
 #### 4.2 `EDIT` an Item
 
 ```
 should allow me to edit an item
 ```
 
+Editing a Todo List item is (_by far_)
+the most "complex" functionality in the TodoMVC app
+because it involves multiple steps and "dynamic UI".
+
+
+
++ [ ] Double-click on Item **`<label>title</label>`** to begin editing.
++ [ ] Render an **`<input class="edit">`** if in "**editing _mode_**"
+(_see screenshot and markup below_)
++ [ ] Add `case` in `keyup` Event Listener for **`[Enter]`** keyup
+(_see **`subscriptions`** above_) if we are in "**editing _mode_**",
+get the text value from the **`<input class="edit">`**
+_instead_ of **`<input id="new-todo">`**
+so that we _update_ the _existing_ Todo Item title (text).
++ [ ] When **`[Enter]`** is pressed while in "**editing _mode_**",
+Dispatch the **`END_EDIT`** action: `signal('END_EDIT')`
+
+![todo-edit-html](https://user-images.githubusercontent.com/194400/43995210-f4f484e0-9da1-11e8-8cc5-09f7309db963.png)
+
+Here is the _sample_ HTML in "**editing _mode_**"
+(_copy-pasted_) from the VanillaJS TodoMVC implementation
+the _second_ **`<li>`** is the one being edited (_as per screenshot above_):
+```HTML
+<ul class="todo-list">
+  <li data-id="1533987109280" class="completed ">
+    <div class="view">
+      <input class="toggle" type="checkbox" checked="">
+      <label>hello world</label>
+      <button class="destroy"></button>
+    </div>
+  </li>
+  <li data-id="1534013859716" class="editing">
+    <div class="view"><input class="toggle" type="checkbox">
+      <label>totes editing this todo item</label>
+      <button class="destroy">
+      </button>
+    </div>
+    <input class="edit">
+  </li>
+</ul>
+```
+
+
+
+```js
+
+```
+
+There are _two_ steps to Editing a Todo List item:
+
++ [ ] Receiving the `singal('EDIT', item.id)` "activates" editing mode.
+
+
+
+
+BEFORE:
+```js
+function render_item (item, signal) {
+  return (
+    li([
+      "data-id=" + item.id,
+      "id=" + item.id,
+      item.done ? "class=completed" : ""
+    ], [
+      div(["class=view"], [
+        input([
+          item.done ? "checked=true" : "",
+          "class=toggle",
+          "type=checkbox",
+          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
+          ],
+          []), // <input> does not have any nested elements
+        label([], [text(item.title)]),
+        button(["class=destroy"])
+      ]) // </div>
+    ]) // </li>
+  )
+}
+```
+
+
+
 #### 4.1 `DELETE` an Item
 
 ```

From aa4d78774f265430936c77c1798218bf080b1ba9 Mon Sep 17 00:00:00 2001
From: iteles <ines+github@dwyl.com>
Date: Sun, 12 Aug 2018 19:42:02 +0100
Subject: [PATCH 124/164] Updates some typos and flow up until no. 7 of the
 basic counter #44

---
 README.md                         | 53 ++++++++++++++++---------------
 examples/counter-basic/index.html |  6 ++--
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/README.md b/README.md
index 581daca1..ac736d8a 100644
--- a/README.md
+++ b/README.md
@@ -65,15 +65,15 @@ When compared to _other_ ways of organizing your code,
 + Easier to _understand_ what is going on in more advanced apps because there is no complex logic,
 only one basic principal
 and the "_flow_" is _always_ the same.
-+ ***Uni-directional data-flow*** means "state"
++ ***Uni-directional data flow*** means the "state"
 of the app is always _predictable_;
-given a specific starting "state" and sequence of update actions
+given a specific starting "state" and sequence of update actions,
 the output/end state will _always_ be the same. This makes testing/testability
 very easy!
 + There's **no** "***middle man***" to complicate things
 (_the way there is in other application architectures
   such as
-[Model-view-Presenter](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter) or "Model-View-ViewModel" (MVVM) which is "overkill" for most apps_.)
+[Model-view-Presenter](https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93presenter) or "Model-View-ViewModel" (MVVM) which is "overkill" for most apps_).
 
 > _**Note**: **don't panic** if any of the terms above are strange
 or even confusing to you right now.
@@ -118,12 +118,12 @@ Start with a few definitions:
 + **Model** - or "data model" is the place where all data is stored;
 often referred to as the application's `state`.
 + **Update** - how the app handles `actions` performed
-by people and `update` the `state`,
+by people and `update`s the `state`,
 usually organised as a `switch` with various `case` statements corresponding
 to the different "_actions_" the user can take in your App.
 + **View** - what people using the app can _see_;
-a way to `view` the Model (counter) as `HTML`
-rendered in a web browser.
+a way to `view` the Model (in the case of the first tutorial below,
+the counter) as `HTML` rendered in a web browser.
 
 ![elm-muv-architecture-diagram](https://cloud.githubusercontent.com/assets/194400/25773775/b6a4b850-327b-11e7-9857-79b6972b49c3.png)
 
@@ -179,18 +179,20 @@ When you open `examples/counter-basic/index.html` you should see:
 
 Try clicking on the buttons to increase/decrease the counter.
 
-### 3. Edit Some Code!
+### 3. Edit Some Code
 
 In your Text Editor of choice,
 edit the _initial value_ of the model
-(_e.g: change the initial value from 0 to 9_):
+(_e.g: change the initial value from 0 to 9_).
+Don't forget to save the file!
 
 ![elm-architecture-code-update](https://cloud.githubusercontent.com/assets/194400/25780662/adff6418-3323-11e7-8089-fae4bdc515e8.gif)
 
 ### 4. Refresh the Web Browser
 
 When you refresh the your Web Browser you will see
-that the "_initial state_" is now **9**:
+that the "_initial state_" is now **9**
+(or whichever number you changed the initial value to):
 
 ![update-initial-model-to-9](https://cloud.githubusercontent.com/assets/194400/25780667/c84d0bf4-3323-11e7-929d-2019f5face2c.png)
 
@@ -245,8 +247,8 @@ where your app will be "_mounted to_". In other words your app
 will be _contained_ within this root element. <br />
 (_so make sure it is empty before `mount`ing_)
 
-The first line in `mount` is to get a _reference_ to the root DOM element <br />
-we do this _once_ in the entire application to _minimze_ DOM lookups.
+The first line in `mount` is to get a _reference_ to the root DOM element; <br />
+we do this _once_ in the entire application to _minimize_ DOM lookups.
 
 #### `mount` > `signal` > `callback` ?
 
@@ -281,7 +283,7 @@ buttons each time it creates a "_chain reaction_" which almost
 instantly _exceeds_ the "***call stack***"
 (_i.e. exhausts the allocated memory_) of the browser!
 
-The putting the `callback` in a _closure_ means we can pass a _reference_
+Putting the `callback` in a _closure_ means we can pass a _reference_
 to the `signal` (_parent/outer_) function to the `view` function.
 
 ##### Further Reading on Closures
@@ -296,7 +298,7 @@ or you want _more_ detail/examples,
 #### 5.1.1 `mount` > render initial view
 
 The last line in the `mount` function is to _render_ the `view` function
-for the first time passing in the `signal` function, initial model ("state")
+for the first time, passing in the `signal` function, initial model ("state")
 and root element. This is the _initial_ rendering of the UI.
 
 
@@ -340,7 +342,7 @@ function update(model, action) {     // Update function takes the current model
   }                                  // (default action always returns current)
 }
 ```
-However this if the "_handlers_" for each `action` were "_bigger_",
+However if the "_handlers_" for each `action` were "_bigger_",
 we would split them out into their own functions e.g:
 
 ```js
@@ -356,12 +358,12 @@ function update(model, action) {     // Update function takes the current state
   switch(action) {                   // and an action (String) runs a switch
     case Inc: return increment(model);  // add 1 to the model
     case Dec: return decrement(model);  // subtract 1 from model
-    default: return model;           // if no action, return curent state.
+    default: return model;           // if no action, return current state.
   }                                  // (default action always returns current)
 }
 ```
 This is _functionally_ equivalent to the simpler `update` (_above_) <br />
-But does not offer any _advantage_ at this stage. (_just remember it for later_)
+But does not offer any _advantage_ at this stage (_just remember it for later_).
 
 ### 5.4 Define the `view` Function
 
@@ -380,8 +382,8 @@ function view(signal, model, root) {
 ```
 
 The `view` receives three arguments:
-+ `signal` defined above in `mount` (_above_) tells each (DOM) element
-how to to "handle" the user input.
++ `signal` defined above in `mount` tells each (DOM) element
+how to "handle" the user input.
 + `model` a reference to the _current_ value of the counter.
 + `root` a reference to the root DOM element where the app is _mounted_.
 
@@ -400,10 +402,10 @@ The `view` creates a _list_ (`Array`) of DOM nodes that need to be rendered.
 The `view` makes use of three "helper" (_DOM manipulation_) functions:
 
 1. `empty`: empty the `root` element of any "child" nodes.
-_Essentially_ `delete` the DOM inside which ever element passed into `empty`.
+_Essentially_ `delete` the DOM inside whichever element's passed into `empty`.
 ```js
 function empty(node) {
-  while (node.firstChild) { // while there are stil nodes inside the "parent"
+  while (node.firstChild) { // while there are still nodes inside the "parent"
       node.removeChild(node.firstChild); // remove any children recursively
   }
 }
@@ -425,9 +427,9 @@ function button(buttontext, signal, action) {
 }
 ```
 
-3. `div`: creates a `<div>` DOM element and apply an `id` to it,
+3. `div`: creates a `<div>` DOM element and applies an `id` to it,
 then if some `text` was supplied in the _second_ argument,
-create a "text node" to display that text.
+creates a "text node" to display that text.
 (_in the case of our counter the `text` is the current value of the model,
   i.e. the count_)
 ```js
@@ -446,7 +448,7 @@ function div(divid, text) {
 [`elm-html`](http://package.elm-lang.org/packages/evancz/elm-html/latest/)
 package, but we have defined them in this counter example
 so there are **no dependencies** and you can see **exactly**
-how everything is "made" from "**first principals**"_
+how everything is "made" from "**first principals**"_.
 
 Once you have read through the functions
 (_and corresponding comments_), <br />
@@ -454,7 +456,7 @@ take a look at the _tests_.
 
 > _**Pro Tip**: Writing code is an **iterative** (repetitive) process,
 **manually refreshing** the web browser each time you update
-some code get's **tedious** quite fast, Live Server to the rescue!_
+some code gets **tedious** quite fast, Live Server to the rescue!_
 
 ### 6. (_Optional_) Install "Live Server" for "_Live Reloading_"
 
@@ -463,7 +465,8 @@ e.g. if you are on a computer where you cannot install anything,
 the examples will still work in your web browser.
 
 Live Reloading helps you iterate/work faster because you don't have to <br />
-_manually_ refresh the page each time, simply run the following command:
+_manually_ refresh the page each time.  
+Simply run the following command:
 
 ```
 npm install && npm start
diff --git a/examples/counter-basic/index.html b/examples/counter-basic/index.html
index 811e1d3d..14b09509 100644
--- a/examples/counter-basic/index.html
+++ b/examples/counter-basic/index.html
@@ -19,7 +19,7 @@
 
 // empty the contents of a given DOM element "node" (before re-rendering)
 function empty(node) {
-  while (node.firstChild) { // while there are stil nodes inside the "parent"
+  while (node.firstChild) { // while there are still nodes inside the "parent"
       node.removeChild(node.firstChild); // remove any children recursively
   }
 } // Inspired by: stackoverflow.com/a/3955238/1148249
@@ -28,7 +28,7 @@
   var div = document.createElement('div');
   div.id = divid;
   div.className = divid;                   // use divid as CSS class name
-  if(text !== undefined) { // if text is passed in render it in a "Text Node"
+  if(text !== undefined) { // if text is passed in, render it in a "Text Node"
     var txt = document.createTextNode(text);
     div.appendChild(txt);
   }
@@ -63,7 +63,7 @@
     button('+', signal, Inc),                  // create button (defined below)
     div('count', model),                       // display the "state" of Model
     button('-', signal, Dec)                   // button to decrement counter
-  ].forEach(function(el){ root.appendChild(el) }); // forEach is ES5 so IE9+
+  ].forEach(function(el){ root.appendChild(el) }); // forEach is ES5, works in IE9+
 } // yes, for loop is "faster" than forEach, but readability trumps "perf" here!
 
 // Mount Function receives all MUV and mounts the app in the "root" DOM Element

From 77546af54c2929358953de6db2905fc822417af7 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sun, 2 Sep 2018 09:56:22 +0200
Subject: [PATCH 125/164] add *failing* test for DELETE an item
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/59

---
 examples/counter-basic/index.html | 30 +++++------
 examples/todo-list/elmish.js      |  2 +-
 examples/todo-list/todo-app.js    | 21 ++++++--
 test/todo-app.test.js             | 20 ++++---
 todo-list.md                      | 89 ++++++++++++++++++++++++++++++-
 5 files changed, 134 insertions(+), 28 deletions(-)

diff --git a/examples/counter-basic/index.html b/examples/counter-basic/index.html
index 811e1d3d..55b1ac11 100644
--- a/examples/counter-basic/index.html
+++ b/examples/counter-basic/index.html
@@ -95,22 +95,22 @@
 <script src="../counter-basic-test/test.js"></script> <!-- load test.js last -->
 
 <div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
-    <script>
-        function doubleclick(el, onsingle, ondouble) {
-            if (el.getAttribute("data-dblclick") == null) {
-                el.setAttribute("data-dblclick", 1);
-                setTimeout(function () {
-                    if (el.getAttribute("data-dblclick") == 1) {
-                        onsingle();
-                    }
-                    el.removeAttribute("data-dblclick");
-                }, 300);
-            } else {
-                el.removeAttribute("data-dblclick");
-                ondouble();
-            }
+<script>
+  function doubleclick(el, onsingle, ondouble) {
+    if (el.getAttribute("data-dblclick") == null) {
+      el.setAttribute("data-dblclick", 1);
+      setTimeout(function () {
+        if (el.getAttribute("data-dblclick") == 1) {
+          onsingle();
         }
-    </script>
+        el.removeAttribute("data-dblclick");
+      }, 300);
+    } else {
+      el.removeAttribute("data-dblclick");
+      ondouble();
+    }
+  }
+</script>
 
 </body>
 </html>
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 35ba5f51..dea10176 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -31,7 +31,7 @@ function mount (model, update, view, root_element_id, subscriptions) {
     root.appendChild(view(mod, sig)) // render view based on model & signal
   }
 
-  function signal(action, data) { // signal function takes action
+  function signal(action, data, model) { // signal function takes action
     return function callback() { // and returns callback
       model = JSON.parse(localStorage.getItem(store_name)) //|| model;
       var updatedModel = update(action, model, data); // update model for the action
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index d1442be5..3c99084d 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -13,11 +13,13 @@ var initial_model = {
 /**
  * `update` transforms the `model` based on the `action`.
  * @param {String} action - the desired action to perform on the model.
- * @param {Object} model - the App's (current) model (or "state").
  * @param {String} data - the data we want to "apply" to the item.
+ * @param {Object} model - the App's (current) model (or "state").
  * @return {Object} updated_model - the transformed model.
  */
 function update(action, model, data) {
+  console.log(arguments)
+  console.log(' - - - - - - - - - - - ');
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
   switch(action) {                   // and an action (String) runs a switch
     case 'ADD':
@@ -51,6 +53,9 @@ function update(action, model, data) {
         item.done = new_model.all_done;
       });
       break;
+    // case 'DELETE':
+    //   console.log('DELETE', data)
+    //   break;
     default: // if action unrecognised or undefined,
       return model; // return model unmodified
   }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
@@ -66,12 +71,14 @@ function update(action, model, data) {
  * + `<button class="destroy">` lets people "delete" a todo item.
  * see: https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/52
  * @param  {Object} item the todo item object
+ * @param {Object} model - the App's (current) model (or "state").
+ * @param {Function} singal - the Elm Architicture "dispacher" which will run
  * @return {Object} <li> DOM Tree which is nested in the <ul>.
  * @example
  * // returns <li> DOM element with <div>, <input>. <label> & <button> nested
  * var DOM = render_item({id: 1, title: "Build Todo List App", done: false});
  */
-function render_item (item, signal) {
+function render_item (item, model, signal) {
   return (
     li([
       "data-id=" + item.id,
@@ -87,7 +94,7 @@ function render_item (item, signal) {
           ],
           []), // <input> does not have any nested elements
         label([], [text(item.title)]),
-        button(["class=destroy"])
+        button(["class=destroy", ]) // signal('DELETE', 'blah!', model)])
       ]) // </div>
     ]) // </li>
   )
@@ -97,6 +104,7 @@ function render_item (item, signal) {
  * `render_main` renders the `<section class="main">` of the Todo List App
  * which contains all the "main" controls and the `<ul>` with the todo items.
  * @param {Object} model - the App's (current) model (or "state").
+ * @param {Function} singal - the Elm Architicture "dispacher" which will run
  * @return {Object} <section> DOM Tree which containing the todo list <ul>, etc.
  */
 function render_main (model, signal) {
@@ -114,8 +122,9 @@ function render_main (model, signal) {
       label(["for=toggle-all"], [ text("Mark all as complete") ]),
       ul(["class=todo-list"],
         (model.todos && model.todos.length > 0) ?
-        model.todos.map(function (item) { return render_item(item, signal) })
-        : null
+        model.todos.map(function (item) {
+          return render_item(item, model, signal)
+        }) : null
       ) // </ul>
     ]) // </section>
   )
@@ -126,6 +135,7 @@ function render_main (model, signal) {
  * which contains count of items to (still) to be done and a `<ul>` "menu"
  * with links to filter which todo items appear in the list view.
  * @param {Object} model - the App's (current) model (or "state").
+ * @param {Function} singal - the Elm Architicture "dispacher" which will run
  * @return {Object} <section> DOM Tree which containing the <footer> element.
  * @example
  * // returns <footer> DOM element with other DOM elements nested:
@@ -183,6 +193,7 @@ function render_footer (model, signal) {
  * which contains count of items to (still) to be done and a `<ul>` "menu"
  * with links to filter which todo items appear in the list view.
  * @param {Object} model - the App's (current) model (or "state").
+ * @param {Function} singal - the Elm Architicture "dispacher" which will run
  * @return {Object} <section> DOM Tree which containing all other DOM elements.
  * @example
  * // returns <section class="todo-app"> DOM element with other DOM els nested:
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 1fe5ca60..28f89e91 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -67,7 +67,9 @@ test('render_item HTML for a single Todo Item', function (t) {
     hash: '#/' // the "route" to display
   };
   // render the ONE todo list item:
-  document.getElementById(id).appendChild(app.render_item(model.todos[0]))
+  document.getElementById(id).appendChild(
+    app.render_item(model.todos[0]),
+  )
 
   const done = document.querySelectorAll('.completed')[0].textContent;
   t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
@@ -307,7 +309,7 @@ test('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
   t.end();
 });
 
-test('4. Item, should allow me to mark items as complete', function (t) {
+test('4. DELETE an item', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('elmish_' + id);
   const model = {
@@ -337,7 +339,7 @@ test('4. Item, should allow me to mark items as complete', function (t) {
   t.end();
 });
 
-test.skip('4.1 Item, should allow me to edit an item ("EDIT")' , function (t) {
+test.only('4.1 DELETE item by clicking <button class="destroy">', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('elmish_' + id);
   const model = {
@@ -348,10 +350,16 @@ test.skip('4.1 Item, should allow me to edit an item ("EDIT")' , function (t) {
   };
   // render the view and append it to the DOM inside the `test-app` node:
   elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // const todo_count = ;
+  t.equal(document.querySelectorAll('.destroy').length, 1, "one destroy button")
+
   const item = document.getElementById('0')
   t.equal(item.textContent, model.todos[0].title, 'Item contained in model.');
-  // confirm that the todo item is NOT done (done=false):
-
-
+  // DELETE the item by clicking on the <button class="destroy">:
+  const button = item.querySelectorAll('button.destroy')[0];
+  button.click()
+  // confirm that there is no loger a <button class="destroy">
+  t.equal(document.querySelectorAll('button.destroy').length, 0,
+    'there is no loger a <button class="destroy"> as the only item was DELETEd')
   t.end();
 });
diff --git a/todo-list.md b/todo-list.md
index 1b74269d..31caa1dd 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1781,13 +1781,100 @@ function render_item (item, signal) {
 ```
 
 
-
 #### 4.1 `DELETE` an Item
 
 ```
 should show the remove button on hover
 ```
 
+##### Acceptance Criteria
+
++ [ ] should show the `<button class="destroy">`
+on hover (over the item) ... thankfully the TodoMVC CSS
+handles this for us, we just need our `view`
+to render the `<button>`
++ [ ] Clicking/tapping the `<button class="destroy">`
+sends the `signal('DELETE', todo.id, model)`
++ [ ] The `DELETE` update case receives the `todo.id`
+and removes it from the `model.todos` Array.
+
+In order to `DELETE` an item from the `model.todos` Array,
+we need to "_supply_" the `model` when invoking the `signal`
+function. This means we need to _extend_ the `signal` function's
+parameters to include the `model` as an _optional_ argument.
+
+In the `elmish.js` file, locate the `mount` function
+and add a `model` parameter to the `signal` function definition.
+Thus it should change from:
+```js
+function signal(action, data) { // signal function takes action
+  return function callback() { // and returns callback
+    model = JSON.parse(localStorage.getItem(store_name)) //|| model;
+    var updatedModel = update(action, model, data); // update model for the action
+    render(updatedModel, signal, ROOT);
+  };
+};
+```
+
+To:
+```js
+function signal(action, data, model) { // signal function takes action
+  return function callback() { // and returns callback
+    model = JSON.parse(localStorage.getItem(store_name)) //|| model;
+    var updatedModel = update(action, model, data); // update model for the action
+    render(updatedModel, signal, ROOT);
+  };
+};
+```
+
+Thankfully, we have a "bank" (or "suite") of tests that cover
+all of our existing functionality,
+so when we make a change like this
+we can _confirm_ that all _existing_ functionality
+still works as expected.
+
+Run the tests: `npm test` and ensure they all still pass
+after making the change to the `signal` function. (_they should!_)
+
+![tests-still-passing](https://user-images.githubusercontent.com/194400/44953303-a109ce00-ae93-11e8-8f0c-c271832df3a5.png)
+
+
+##### `DELETE` Item _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('4.1 DELETE item by clicking <button class="destroy">', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // const todo_count = ;
+  t.equal(document.querySelectorAll('.destroy').length, 1, "one destroy button")
+
+  const item = document.getElementById('0')
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in model.');
+  // DELETE the item by clicking on the <button class="destroy">:
+  const button = item.querySelectorAll('button.destroy')[0];
+  button.click()
+  // confirm that there is no loger a <button class="destroy">
+  t.equal(document.querySelectorAll('button.destroy').length, 0,
+    'there is no loger a <button class="destroy"> as the only item was DELETEd')
+  t.end();
+});
+```
+
+If you run the tests `node test/todo-app.test.js` 
+you should now see:
+![delete-test-one-assertion-failing](https://user-images.githubusercontent.com/194400/44953479-21313300-ae96-11e8-971a-51757702bacc.png)
+
+
 
 <!--
 

From 39ed3742521784a3afabd316d5ed02e20c985225 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Tue, 4 Sep 2018 10:03:51 +0100
Subject: [PATCH 126/164] implement DELETE todo item using least possible code.
 closes #59

---
 examples/todo-list/elmish.js   |   2 +-
 examples/todo-list/todo-app.js |  18 +--
 test/todo-app.test.js          |  38 +++++-
 todo-list.md                   | 214 +++++++++++++++++++--------------
 4 files changed, 170 insertions(+), 102 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index dea10176..89ba7906 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -34,7 +34,7 @@ function mount (model, update, view, root_element_id, subscriptions) {
   function signal(action, data, model) { // signal function takes action
     return function callback() { // and returns callback
       model = JSON.parse(localStorage.getItem(store_name)) //|| model;
-      var updatedModel = update(action, model, data); // update model for the action
+      var updatedModel = update(action, model, data); // update model for action
       render(updatedModel, signal, ROOT);
     };
   };
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 3c99084d..4e1543e6 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -18,8 +18,8 @@ var initial_model = {
  * @return {Object} updated_model - the transformed model.
  */
 function update(action, model, data) {
-  console.log(arguments)
-  console.log(' - - - - - - - - - - - ');
+  // console.log(arguments)
+  // console.log(' - - - - - - - - - - - ');
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
   switch(action) {                   // and an action (String) runs a switch
     case 'ADD':
@@ -53,9 +53,12 @@ function update(action, model, data) {
         item.done = new_model.all_done;
       });
       break;
-    // case 'DELETE':
-    //   console.log('DELETE', data)
-    //   break;
+    case 'DELETE':
+      new_model.todos = new_model.todos.filter(function(item) {
+        console.log(item.id, data);
+        return item.id !== data;
+      });
+      break;
     default: // if action unrecognised or undefined,
       return model; // return model unmodified
   }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
@@ -94,7 +97,8 @@ function render_item (item, model, signal) {
           ],
           []), // <input> does not have any nested elements
         label([], [text(item.title)]),
-        button(["class=destroy", ]) // signal('DELETE', 'blah!', model)])
+        button(["class=destroy",
+        typeof signal === 'function' ? signal('DELETE', item.id) : ''])
       ]) // </div>
     ]) // </li>
   )
@@ -231,7 +235,7 @@ function subscriptions (signal) {
 
   document.addEventListener('keyup', function handler (e) {
     var new_todo = document.getElementById('new-todo');
-    console.log('e.keyCode', e);
+    console.log('e.keyCode:', e.keyCode, '| key:', e.key);
     if (e.keyCode === ENTER_KEY && new_todo.value.length > 0) {
       signal('ADD')(); // invoke singal inner callback
       new_todo.value = ''; // reset <input> so we can add another todo
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 28f89e91..2562bcff 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -59,7 +59,36 @@ test('`TOGGLE` (undo) a todo item from done=true to done=false', function (t) {
   t.end();
 });
 
+// this is used for testing view functions which require a signal function
+function mock_signal () {
+  return function inner_function() {
+    console.log('done');
+  }
+}
+
 test('render_item HTML for a single Todo Item', function (t) {
+  const model = {
+    todos: [
+      { id: 1, title: "Learn Elm Architecture", done: true },
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the ONE todo list item:
+  document.getElementById(id).appendChild(
+    app.render_item(model.todos[0], model, mock_signal),
+  );
+
+  const done = document.querySelectorAll('.completed')[0].textContent;
+  t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
+
+  const checked = document.querySelectorAll('input')[0].checked;
+  t.equal(checked, true, 'Done: ' + model.todos[0].title + " is done=true");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  t.end();
+});
+
+test('render_item HTML without a valid signal function', function (t) {
   const model = {
     todos: [
       { id: 1, title: "Learn Elm Architecture", done: true },
@@ -69,7 +98,7 @@ test('render_item HTML for a single Todo Item', function (t) {
   // render the ONE todo list item:
   document.getElementById(id).appendChild(
     app.render_item(model.todos[0]),
-  )
+  );
 
   const done = document.querySelectorAll('.completed')[0].textContent;
   t.equal(done, 'Learn Elm Architecture', 'Done: Learn "TEA"');
@@ -91,7 +120,7 @@ test('render_main "main" view using (elmish) HTML DOM functions', function (t) {
     hash: '#/' // the "route" to display
   };
   // render the "main" view and append it to the DOM inside the `test-app` node:
-  document.getElementById(id).appendChild(app.render_main(model));
+  document.getElementById(id).appendChild(app.render_main(model, mock_signal));
   // test that the title text in the model.todos was rendered to <label> nodes:
   document.querySelectorAll('.view').forEach(function (item, index) {
     t.equal(item.textContent, model.todos[index].title,
@@ -339,7 +368,7 @@ test('4. DELETE an item', function (t) {
   t.end();
 });
 
-test.only('4.1 DELETE item by clicking <button class="destroy">', function (t) {
+test('4.1 DELETE item by clicking <button class="destroy">', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('elmish_' + id);
   const model = {
@@ -354,12 +383,13 @@ test.only('4.1 DELETE item by clicking <button class="destroy">', function (t) {
   t.equal(document.querySelectorAll('.destroy').length, 1, "one destroy button")
 
   const item = document.getElementById('0')
-  t.equal(item.textContent, model.todos[0].title, 'Item contained in model.');
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in DOM.');
   // DELETE the item by clicking on the <button class="destroy">:
   const button = item.querySelectorAll('button.destroy')[0];
   button.click()
   // confirm that there is no loger a <button class="destroy">
   t.equal(document.querySelectorAll('button.destroy').length, 0,
     'there is no loger a <button class="destroy"> as the only item was DELETEd')
+  t.equal(document.getElementById('0'), null, 'todo item successfully DELETEd');
   t.end();
 });
diff --git a/todo-list.md b/todo-list.md
index 31caa1dd..14dc5f84 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1693,94 +1693,6 @@ in order to make this test pass; just run it and move on.
 
 
 
-
-#### 4.2 `EDIT` an Item
-
-```
-should allow me to edit an item
-```
-
-Editing a Todo List item is (_by far_)
-the most "complex" functionality in the TodoMVC app
-because it involves multiple steps and "dynamic UI".
-
-
-
-+ [ ] Double-click on Item **`<label>title</label>`** to begin editing.
-+ [ ] Render an **`<input class="edit">`** if in "**editing _mode_**"
-(_see screenshot and markup below_)
-+ [ ] Add `case` in `keyup` Event Listener for **`[Enter]`** keyup
-(_see **`subscriptions`** above_) if we are in "**editing _mode_**",
-get the text value from the **`<input class="edit">`**
-_instead_ of **`<input id="new-todo">`**
-so that we _update_ the _existing_ Todo Item title (text).
-+ [ ] When **`[Enter]`** is pressed while in "**editing _mode_**",
-Dispatch the **`END_EDIT`** action: `signal('END_EDIT')`
-
-![todo-edit-html](https://user-images.githubusercontent.com/194400/43995210-f4f484e0-9da1-11e8-8cc5-09f7309db963.png)
-
-Here is the _sample_ HTML in "**editing _mode_**"
-(_copy-pasted_) from the VanillaJS TodoMVC implementation
-the _second_ **`<li>`** is the one being edited (_as per screenshot above_):
-```HTML
-<ul class="todo-list">
-  <li data-id="1533987109280" class="completed ">
-    <div class="view">
-      <input class="toggle" type="checkbox" checked="">
-      <label>hello world</label>
-      <button class="destroy"></button>
-    </div>
-  </li>
-  <li data-id="1534013859716" class="editing">
-    <div class="view"><input class="toggle" type="checkbox">
-      <label>totes editing this todo item</label>
-      <button class="destroy">
-      </button>
-    </div>
-    <input class="edit">
-  </li>
-</ul>
-```
-
-
-
-```js
-
-```
-
-There are _two_ steps to Editing a Todo List item:
-
-+ [ ] Receiving the `singal('EDIT', item.id)` "activates" editing mode.
-
-
-
-
-BEFORE:
-```js
-function render_item (item, signal) {
-  return (
-    li([
-      "data-id=" + item.id,
-      "id=" + item.id,
-      item.done ? "class=completed" : ""
-    ], [
-      div(["class=view"], [
-        input([
-          item.done ? "checked=true" : "",
-          "class=toggle",
-          "type=checkbox",
-          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
-          ],
-          []), // <input> does not have any nested elements
-        label([], [text(item.title)]),
-        button(["class=destroy"])
-      ]) // </div>
-    ]) // </li>
-  )
-}
-```
-
-
 #### 4.1 `DELETE` an Item
 
 ```
@@ -1859,25 +1771,147 @@ test.only('4.1 DELETE item by clicking <button class="destroy">', function (t) {
   t.equal(document.querySelectorAll('.destroy').length, 1, "one destroy button")
 
   const item = document.getElementById('0')
-  t.equal(item.textContent, model.todos[0].title, 'Item contained in model.');
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in DOM.');
   // DELETE the item by clicking on the <button class="destroy">:
   const button = item.querySelectorAll('button.destroy')[0];
   button.click()
   // confirm that there is no loger a <button class="destroy">
   t.equal(document.querySelectorAll('button.destroy').length, 0,
     'there is no loger a <button class="destroy"> as the only item was DELETEd')
+  t.equal(document.getElementById('0'), null, 'todo item successfully DELETEd');
   t.end();
 });
 ```
 
-If you run the tests `node test/todo-app.test.js` 
+If you run the tests `node test/todo-app.test.js`
 you should now see:
 ![delete-test-one-assertion-failing](https://user-images.githubusercontent.com/194400/44953479-21313300-ae96-11e8-971a-51757702bacc.png)
 
+The first two assertions are _optional_ and _should_ (_always_)
+pass given that they rely on functionality defined previously.
+The second two will only pass once you _make_ them pass!
+
+##### `DELETE` Item _Implementation_
+
+The _first_ step is to add an invocation of `signal('DELETE' ...)`
+to the `render_item` view rendering function. _Specifically_ the
+`button` line:
+
+```js
+button(["class=destroy"])
+```
+Add the `signal` function invocation:
+```js
+button(["class=destroy", signal('DELETE', item.id, model)])
+```
+
+simply adding this function invocation will set it
+as an `onclick` attribute for the `<button>`
+therefore when the _user_ clicks the button it will
+"trigger" the `signal` function with the appropriate arguments.
+
+
+_Second_ we need to add a `case` statement
+to the `update` function.
+You should attempt to "solve" this yourself.
+There is no "right" answer, there are at least
+5 ways of solving this, as always, you should write the code
+that you feel is most _readable_.
+
+
+
+
 
 
 <!--
 
+
+#### 4.2 `EDIT` an Item
+
+```
+should allow me to edit an item
+```
+
+Editing a Todo List item is (_by far_)
+the most "complex" functionality in the TodoMVC app
+because it involves multiple steps and "dynamic UI".
+
+
+
++ [ ] Double-click on Item **`<label>title</label>`** to begin editing.
++ [ ] Render an **`<input class="edit">`** if in "**editing _mode_**"
+(_see screenshot and markup below_)
++ [ ] Add `case` in `keyup` Event Listener for **`[Enter]`** keyup
+(_see **`subscriptions`** above_) if we are in "**editing _mode_**",
+get the text value from the **`<input class="edit">`**
+_instead_ of **`<input id="new-todo">`**
+so that we _update_ the _existing_ Todo Item title (text).
++ [ ] When **`[Enter]`** is pressed while in "**editing _mode_**",
+Dispatch the **`END_EDIT`** action: `signal('END_EDIT')`
+
+![todo-edit-html](https://user-images.githubusercontent.com/194400/43995210-f4f484e0-9da1-11e8-8cc5-09f7309db963.png)
+
+Here is the _sample_ HTML in "**editing _mode_**"
+(_copy-pasted_) from the VanillaJS TodoMVC implementation
+the _second_ **`<li>`** is the one being edited (_as per screenshot above_):
+```HTML
+<ul class="todo-list">
+  <li data-id="1533987109280" class="completed ">
+    <div class="view">
+      <input class="toggle" type="checkbox" checked="">
+      <label>hello world</label>
+      <button class="destroy"></button>
+    </div>
+  </li>
+  <li data-id="1534013859716" class="editing">
+    <div class="view"><input class="toggle" type="checkbox">
+      <label>totes editing this todo item</label>
+      <button class="destroy">
+      </button>
+    </div>
+    <input class="edit">
+  </li>
+</ul>
+```
+
+
+```js
+
+```
+
+There are _two_ steps to Editing a Todo List item:
+
++ [ ] Receiving the `singal('EDIT', item.id)` "activates" editing mode.
+
+
+
+
+BEFORE:
+```js
+function render_item (item, signal) {
+  return (
+    li([
+      "data-id=" + item.id,
+      "id=" + item.id,
+      item.done ? "class=completed" : ""
+    ], [
+      div(["class=view"], [
+        input([
+          item.done ? "checked=true" : "",
+          "class=toggle",
+          "type=checkbox",
+          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
+          ],
+          []), // <input> does not have any nested elements
+        label([], [text(item.title)]),
+        button(["class=destroy"])
+      ]) // </div>
+    ]) // </li>
+  )
+}
+```
+
+
 ## What _Next_?
 
 If you feel _confident_ with your "TEA" skills you can _either_:

From a597688c7c793b55a00ec9a751d9cc3ffecd15e8 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 5 Sep 2018 01:44:45 +0100
Subject: [PATCH 127/164] add acceptance criteria and checklist of features for
 EDIT todo item #60

---
 todo-list.md | 48 +++++++++++++++++++++++++++++++++++-------------
 1 file changed, 35 insertions(+), 13 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index 14dc5f84..09af4c1e 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1710,6 +1710,7 @@ sends the `signal('DELETE', todo.id, model)`
 + [ ] The `DELETE` update case receives the `todo.id`
 and removes it from the `model.todos` Array.
 
+<!--  I don't think we need this!
 In order to `DELETE` an item from the `model.todos` Array,
 we need to "_supply_" the `model` when invoking the `signal`
 function. This means we need to _extend_ the `signal` function's
@@ -1749,7 +1750,7 @@ Run the tests: `npm test` and ensure they all still pass
 after making the change to the `signal` function. (_they should!_)
 
 ![tests-still-passing](https://user-images.githubusercontent.com/194400/44953303-a109ce00-ae93-11e8-8f0c-c271832df3a5.png)
-
+-->
 
 ##### `DELETE` Item _Test_
 
@@ -1818,31 +1819,52 @@ There is no "right" answer, there are at least
 5 ways of solving this, as always, you should write the code
 that you feel is most _readable_.
 
+If you get "_stuck_" or want to confirm your understanding
+of the implementation of the `DELETE` functionality,
+check the code in `todo-app.js` > `update` function.
 
 
-
-
-
-<!--
-
-
-#### 4.2 `EDIT` an Item
+> Rather bizarrely the edit functionality is mentioned
+_both_ in the Item and Editing sections.
+So we will cover it in the Editing section next.
 
 ```
 should allow me to edit an item
 ```
 
+This is kinda _meaningless_ as an assertion.
+What does "edit an item" actually _mean_?
+(_we have expanded the acceptance criteria below..._)
+
+
+### 5 `EDIT` an Item
+
 Editing a Todo List item is (_by far_)
 the most "complex" functionality in the TodoMVC app
 because it involves multiple steps and "dynamic UI".
 
+#### `EDIT` Item Test Titles & Acceptance Criteria
+
+```
+5. Editing
+  ✓ should hide other controls when editing (718ms)
+  ✓ should save edits on enter (1093ms)
+  ✓ should save edits on blur (1256ms)
+  ✓ should trim entered text (1163ms)
+  ✓ should remove the item if an empty text string was entered (1033ms)
+  ✓ should cancel edits on escape (1115ms)
+```
 
 
-+ [ ] Double-click on Item **`<label>title</label>`** to begin editing.
-+ [ ] Render an **`<input class="edit">`** if in "**editing _mode_**"
++ [ ] Double-click on Item **`<label>title</label>`**
+to begin editing.
++ [ ] Render an **`<input class="edit">`**
+if in "**editing _mode_**"
 (_see screenshot and markup below_)
-+ [ ] Add `case` in `keyup` Event Listener for **`[Enter]`** keyup
-(_see **`subscriptions`** above_) if we are in "**editing _mode_**",
++ [ ] Add `case` in `keyup` Event Listener
+for **`[Enter]`** keyup
+(_see **`subscriptions`** above_) if we are
+in "**editing _mode_**",
 get the text value from the **`<input class="edit">`**
 _instead_ of **`<input id="new-todo">`**
 so that we _update_ the _existing_ Todo Item title (text).
@@ -1911,7 +1933,7 @@ function render_item (item, signal) {
 }
 ```
 
-
+<!--
 ## What _Next_?
 
 If you feel _confident_ with your "TEA" skills you can _either_:

From dbcca398a3c3e0c4ef0f8bd6db4ebedda7fb58ae Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 5 Sep 2018 01:53:18 +0100
Subject: [PATCH 128/164] adds basic EDIT item implementation including EDIT
 and SAVE actions for #60

---
 examples/todo-list/elmish.js   |   6 ++
 examples/todo-list/todo-app.js | 107 +++++++++++++++++++++++++++------
 test/todo-app.test.js          |   4 +-
 3 files changed, 98 insertions(+), 19 deletions(-)

diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 89ba7906..39771175 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -69,6 +69,9 @@ function add_attributes (attrlist, node) {
         case 'autofocus':
           node.autofocus = "autofocus";
           node.focus();
+          setTimeout(function() { // wait till DOM has rendered then focus()
+            node.focus();
+          }, 200)
           break;
         case 'checked':
           node.setAttribute('checked', true);
@@ -96,6 +99,9 @@ function add_attributes (attrlist, node) {
         case 'type':
           node.setAttribute('type', a[1]); // <input id="go" type="checkbox">
           break;
+        case 'value':
+          console.log('value:', a[1]);
+          node.value = a[1];
         default:
           break;
       } // end switch
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 4e1543e6..daba5538 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -23,9 +23,9 @@ function update(action, model, data) {
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
   switch(action) {                   // and an action (String) runs a switch
     case 'ADD':
-      // can you see an "issue" with this way of generating the todo id? Bug...?
-      var id = (typeof model.todos !== 'undefined' && model.todos.length > 0) ?
-        (model.todos.length + 1) : 1;
+      var last = (typeof model.todos !== 'undefined' && model.todos.length > 0)
+        ? model.todos[model.todos.length - 1] : null;
+      var id = last ? last.id + 1 : 1;
       var input = document.getElementById('new-todo');
       new_model.todos = (new_model.todos && new_model.todos.length > 0)
         ? new_model.todos : [];
@@ -54,17 +54,75 @@ function update(action, model, data) {
       });
       break;
     case 'DELETE':
-      new_model.todos = new_model.todos.filter(function(item) {
-        console.log(item.id, data);
+      console.log('DELETE', data);
+      new_model.todos = new_model.todos.filter(function (item) {
         return item.id !== data;
       });
       break;
+    case 'EDIT':
+      // this code is inspired by: https://stackoverflow.com/a/16033129/1148249
+      // simplified as we are not altering the DOM!
+      console.log('EDIT', data, model.editing, new_model.click_time, Date.now());
+
+      // if we are ALREADY editing the todo item, no need to do anything
+      if (new_model.editing && new_model.editing === data) {
+        console.log('already editing ...', data);
+      }
+      // on second click, the new_model.clicked will have been previously set
+      else if (new_model.clicked && new_model.clicked === data &&
+        Date.now() - 300 < new_model.click_time ) { // DOUBLE CLICK is faster than 300ms
+          new_model.editing = data;
+          console.log('DOUBLE CLICK', data);
+      }
+      else { // first click
+        new_model.clicked = data;
+        new_model.click_time = Date.now()
+        new_model.editing = false;
+        console.log('FIRST CLICK', data);
+      }
+      break;
+    case 'SAVE':
+      var edit = document.querySelectorAll('.edit')[0];
+      var value = edit.value;
+      var id = parseInt(edit.id, 10);
+      // End Editing
+      new_model.clicked = false;
+      new_model.editing = false;
+
+      if (!value || value.length < 1) { // delete item if title is blank:
+        return update('DELETE', new_model, id);
+      }
+      // update the value of the item.title that has been edited:
+      new_model.todos = new_model.todos.map(function (item) {
+        if (item.id === id && value && value.length > 0) {
+          item.title = value.trim();
+        }
+        return item; // return all todo items.
+      });
+      break;
     default: // if action unrecognised or undefined,
       return model; // return model unmodified
   }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
   return new_model;
 }
 
+function show_item (item, model, signal) {
+  return [
+    label([ typeof signal === 'function' ? signal('EDIT', item.id) : '' ],
+      [text(item.title)]),
+    button(["class=destroy",
+      typeof signal === 'function' ? signal('DELETE', item.id) : ''])
+  ]
+}
+
+function edit_item (item, model, signal) {
+  return [
+    input(["class=edit", "id=" + item.id,
+      "value=" + item.title, "autofocus"], []),
+  ]
+}
+
+
 /**
  * `render_item` creates an DOM "tree" with a single Todo List Item
  * using the "elmish" DOM functions (`li`, `div`, `input`, `label` and `button`)
@@ -86,7 +144,8 @@ function render_item (item, model, signal) {
     li([
       "data-id=" + item.id,
       "id=" + item.id,
-      item.done ? "class=completed" : ""
+      item.done ? "class=completed" : "",
+      model && model.editing && model.editing === item.id ? "class=editing" : ""
     ], [
       div(["class=view"], [
         input([
@@ -94,13 +153,16 @@ function render_item (item, model, signal) {
           "class=toggle",
           "type=checkbox",
           typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
-          ],
-          []), // <input> does not have any nested elements
-        label([], [text(item.title)]),
-        button(["class=destroy",
-        typeof signal === 'function' ? signal('DELETE', item.id) : ''])
-      ]) // </div>
-    ]) // </li>
+          ], []), // <input> does not have any nested elements
+      ].concat( model && model.editing !== item.id ?
+          show_item(item, model, signal) : []
+      )
+    ), // </div>
+    ].concat(
+      model && model.editing && model.editing === item.id ?
+        edit_item(item, model, signal) : []
+      ) // concat editing input if in "editing mode"
+    ) // </li>
   )
 }
 
@@ -236,12 +298,23 @@ function subscriptions (signal) {
   document.addEventListener('keyup', function handler (e) {
     var new_todo = document.getElementById('new-todo');
     console.log('e.keyCode:', e.keyCode, '| key:', e.key);
-    if (e.keyCode === ENTER_KEY && new_todo.value.length > 0) {
-      signal('ADD')(); // invoke singal inner callback
-      new_todo.value = ''; // reset <input> so we can add another todo
-      document.getElementById('new-todo').focus();
+    var editing = document.getElementsByClassName('editing');
+    if (e.keyCode === ENTER_KEY) {
+      if (editing && editing.length > 0) {
+        console.log('editing:', editing);
+        signal('SAVE')(); // invoke singal inner callback
+      }
+      if(new_todo.value.length > 0) {
+        signal('ADD')(); // invoke singal inner callback
+        new_todo.value = ''; // reset <input> so we can add another todo
+        document.getElementById('new-todo').focus();
+      }
     }
   });
+
+  // document.addEventListener('click', function click_anywhere (e) {
+  //
+  // });
 }
 
 /* module.exports is needed to run the functions using Node.js for testing! */
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 2562bcff..3dcbae7b 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -97,7 +97,7 @@ test('render_item HTML without a valid signal function', function (t) {
   };
   // render the ONE todo list item:
   document.getElementById(id).appendChild(
-    app.render_item(model.todos[0]),
+    app.render_item(model.todos[0], model),
   );
 
   const done = document.querySelectorAll('.completed')[0].textContent;
@@ -338,7 +338,7 @@ test('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
   t.end();
 });
 
-test('4. DELETE an item', function (t) {
+test('4. Item: should allow me to mark items as complete', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('elmish_' + id);
   const model = {

From 72fd1a6731fec42bcae02d059f9ea5c498258f9b Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Wed, 5 Sep 2018 23:18:38 +0100
Subject: [PATCH 129/164] add link to StackOverflow answer for double-click
 function handler
 https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event

---
 edit-todo.md                   | 491 +++++++++++++++++++++++++++++++++
 examples/todo-list/elmish.js   |   2 +-
 examples/todo-list/todo-app.js |  76 +++--
 test/todo-app.test.js          |  53 ++++
 todo-list.md                   |  73 ++---
 5 files changed, 599 insertions(+), 96 deletions(-)
 create mode 100644 edit-todo.md

diff --git a/edit-todo.md b/edit-todo.md
new file mode 100644
index 00000000..b9e4604f
--- /dev/null
+++ b/edit-todo.md
@@ -0,0 +1,491 @@
+
+
+#### 3. Mark all as completed
+
+The third batch of tests involves "Toggling" all todos as "done=true":
+
+```
+3. Mark all as completed
+  ✓ should allow me to mark all items as completed
+  ✓ should allow me to clear the completion state of all items
+  ✓ complete all checkbox should update state when items are completed
+```
+Luckily, given that we know how to use a _boolean_ value,
+these _three_ assertions can be "solved" with _minimal_ code.
+Let's create a test with these 3 assertions.
+
+Add the following code/test to your `test/todo-app.test.js` file:
+```js
+test.only('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Learn Elm Architecture", done: true },
+      { id: 1, title: "Build Todo List App",    done: false },
+      { id: 2, title: "Win the Internet!",      done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // confirm that the ONLY the first todo item is done=true:
+  const items = document.querySelectorAll('.view');
+
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    t.equal(item.checked, model.todos[index].done,
+      "Todo #" + index + " is done=" + item.checked
+      + " text: " + items[index].textContent)
+  })
+
+  // click the toggle-all checkbox to trigger TOGGLE_ALL: >> true
+  document.getElementById('toggle-all').click(); // click toggle-all checkbox
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    t.equal(item.checked, true,
+      "TOGGLE each Todo #" + index + " is done=" + item.checked
+      + " text: " + items[index].textContent)
+  });
+  t.equal(document.getElementById('toggle-all').checked, true,
+    "should allow me to mark all items as completed")
+
+
+  // click the toggle-all checkbox to TOGGLE_ALL (again!) true >> false
+  document.getElementById('toggle-all').click(); // click toggle-all checkbox
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    t.equal(item.checked, false,
+      "TOGGLE_ALL Todo #" + index + " is done=" + item.checked
+      + " text: " + items[index].textContent)
+  })
+  t.equal(document.getElementById('toggle-all').checked, false,
+    "should allow me to clear the completion state of all items")
+
+  // *manually* "click" each todo item:
+  document.querySelectorAll('.toggle').forEach(function(item, index) {
+    item.click(); // this should "toggle" the todo checkbox to done=true
+    t.equal(item.checked, true,
+      ".toggle.click() (each) Todo #" + index + " which is done=" + item.checked
+      + " text: " + items[index].textContent)
+  });
+  // the toggle-all checkbox should be "checked" as all todos are done=true!
+  t.equal(document.getElementById('toggle-all').checked, true,
+    "complete all checkbox should update state when items are completed")
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('elmish_store');
+  t.end();
+});
+```
+
+If you attempt to run the test file:
+```sh
+node test/todo-app.test.js
+```
+You will see something like this:
+
+![toggle-all-test-failing](https://user-images.githubusercontent.com/194400/43985804-3c8dbe02-9d02-11e8-9876-cd7e35602754.png)
+
+While there may _appear_ to be "_many_" assertions in this test,
+in reality there are only two bits of functionality.
+
+_Firstly_, we need a new `case`
+in the `update` `switch` statement: `TOGGLE_ALL`. <br />
+and _second_ we need to add a couple of lines to our `TOGGLE`
+block to _check_ if _all_ todos are `done=true` or `done=false`.
+In the case where _all_ todos are `done=true` we should reflect
+this in the "state" of the `toggle-all` checkbox.
+The _easiest_ way of representing this in the `model` is
+with a new property, e.g: `model.all_done=true`
+when _all_ todos are `done=true`.
+
+The only other thing we need to update is the `render_main`
+function to include `signal('TOGGLE_ALL')` in the attributes array.
+
+Try and make this test pass by yourself before consulting the
+sample code:
+[**`examples/todo-list/todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR46)
+
+
+### 4. Item (Toggle, Edit & Delete)
+
+```
+4. Item
+  ✓ should allow me to mark items as complete (843ms)
+  ✓ should allow me to un-mark items as complete (978ms)
+  ✓ should allow me to edit an item (1155ms)
+  ✓ should show the remove button on hover
+```
+
+Of these requirements, we already have the first two "_covered_"
+because we implemented the `TOGGLE` feature (_above_).
+
+We can add another "proxy" test just for "_completeness_":
+
+```js
+test.only('4. Item: should allow me to mark items as complete', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  const item = document.getElementById('0')
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in model.');
+  // confirm that the todo item is NOT done (done=false):
+  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
+  'Item starts out "active" (done=false)');
+
+
+  // click the checkbox to toggle it to done=true
+  document.querySelectorAll('.toggle')[0].click()
+  t.equal(document.querySelectorAll('.toggle')[0].checked, true,
+  'Item should allow me to mark items as complete');
+
+  // click the checkbox to toggle it to done=false "undo"
+  document.querySelectorAll('.toggle')[0].click()
+  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
+  'Item should allow me to un-mark items as complete');
+  t.end();
+});
+```
+You should not need to write any additional code
+in order to make this test pass; just run it and move on.
+
+![toggle-todo-tests-passing](https://user-images.githubusercontent.com/194400/43992979-a4d00ab6-9d7e-11e8-891b-9f699f474dd5.png)
+
+
+
+#### 4.1 `DELETE` an Item
+
+```
+should show the remove button on hover
+```
+
+##### Acceptance Criteria
+
++ [ ] should show the `<button class="destroy">`
+on hover (over the item) ... thankfully the TodoMVC CSS
+handles this for us, we just need our `view`
+to render the `<button>`
++ [ ] Clicking/tapping the `<button class="destroy">`
+sends the `signal('DELETE', todo.id, model)`
++ [ ] The `DELETE` update case receives the `todo.id`
+and removes it from the `model.todos` Array.
+
+
+##### `DELETE` Item _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('4.1 DELETE item by clicking <button class="destroy">', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // const todo_count = ;
+  t.equal(document.querySelectorAll('.destroy').length, 1, "one destroy button")
+
+  const item = document.getElementById('0')
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in DOM.');
+  // DELETE the item by clicking on the <button class="destroy">:
+  const button = item.querySelectorAll('button.destroy')[0];
+  button.click()
+  // confirm that there is no loger a <button class="destroy">
+  t.equal(document.querySelectorAll('button.destroy').length, 0,
+    'there is no loger a <button class="destroy"> as the only item was DELETEd')
+  t.equal(document.getElementById('0'), null, 'todo item successfully DELETEd');
+  t.end();
+});
+```
+
+If you run the tests `node test/todo-app.test.js`
+you should now see:
+![delete-test-one-assertion-failing](https://user-images.githubusercontent.com/194400/44953479-21313300-ae96-11e8-971a-51757702bacc.png)
+
+The first two assertions are _optional_ and _should_ (_always_)
+pass given that they rely on functionality defined previously.
+The second two will only pass once you _make_ them pass!
+
+##### `DELETE` Item _Implementation_
+
+The _first_ step is to add an invocation of `signal('DELETE' ...)`
+to the `render_item` view rendering function. _Specifically_ the
+`button` line:
+
+```js
+button(["class=destroy"])
+```
+Add the `signal` function invocation:
+```js
+button(["class=destroy", signal('DELETE', item.id)])
+```
+
+simply adding this function invocation as an Array element will set it
+as an `onclick` attribute for the `<button>`
+therefore when the _user_ clicks the button it will
+"trigger" the `signal` function with the appropriate arguments.
+There is no "magic" just code we tested/wrote earlier.
+
+
+_Second_ we need to add a `case` statement
+to the `update` function.
+You should attempt to "solve" this yourself.
+There is no "right" answer, there are at least
+5 ways of solving this, as always, you should write the code
+that you feel is most _readable_.
+
+If you get "_stuck_" or want to confirm your understanding
+of the implementation of the `DELETE` functionality,
+check the code in `todo-app.js` > `update` function.
+
+
+> Rather bizarrely the edit functionality is mentioned
+_both_ in the Item and Editing sections.
+So we will cover it in the Editing section next.
+
+```
+should allow me to edit an item
+```
+
+This is kinda _meaningless_ as an assertion.
+What does "edit an item" actually _mean_?
+(_we have expanded the acceptance criteria below..._)
+
+
+### 5. `EDIT` an Item
+
+Editing a Todo List item is (_by far_)
+the most "advanced" functionality in the TodoMVC app
+because it involves multiple steps and "dynamic UI".
+
+Don't panic! Just because something has "more steps" than we have seen before,
+doesn't mean we should be "overwhelmed" by its' complexity.
+We just need to "break it down" into "bitesize chunks"!
+
+> _**Note**: the most "**difficult**" part of implementing the "edit an item"
+functionality is having a "mental picture" of the UX
+so that we can write the **tests first**
+and isolate the required functions (update actions) from the keyboard/mouse
+interactions. i.e. breaking down the steps into distinct "units"_.
+
+
+First let's review the TodoMVC "Editing" test assertions:
+
+
+#### `EDIT` Item Test Titles & Acceptance Criteria
+
+```
+5. Editing
+  ✓ should hide other controls when editing (718ms)
+  ✓ should save edits on enter (1093ms)
+  ✓ should save edits on blur (1256ms)
+  ✓ should trim entered text (1163ms)
+  ✓ should remove the item if an empty text string was entered (1033ms)
+  ✓ should cancel edits on escape (1115ms)
+```
+
+Further reading of the TodoMVC Spec:
+https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
+reveals the following acceptance criteria:
+
+
++ [ ] Double-click on Item **`<label>title</label>`**
+to begin editing (_that item_)
++ [ ] Render an **`<input class="edit">`**
+if in "**editing _mode_**"
+(_see screenshot and markup below_)
+  + [ ] Add `class="editing"` to `<li>` when editing
+  + [ ] Remove (_don't add_) `class="editing"` from `<li>`
+  when no longer editing.
++ Set the `item.id` as the `id` of the **`<input class="edit">`**
+  so that we know which item is being edited.
++ [ ] Add `case` in `keyup` Event Listener
+  for **`[Enter]`** keyup (_see **`subscriptions`** above_)
+  if we are in "**editing _mode_**",
+  get the text value from the **`<input class="edit">`**
+  _instead_ of **`<input id="new-todo">`**
+  so that we _update_ the _existing_ Todo Item title (text).
++ [ ] When **`[Enter]`** is pressed while in "**editing _mode_**",
+"_dispatch_" the **`SAVE`** action: `signal('SAVE')`
+  + [ ] If the **`<input class="edit">`** is _blank_, `delete` the todo item.
+
+By _inspecting_ the DOM for the VanillaJS TodoMVC example:
+http://todomvc.com/examples/vanillajs
+we can see that _two_ things change:
+
++ **`<li class="editing">`** the CSS `class="editing"` is added
+to the todo list item being _edited_.
++ **`<input class="edit">`** is inserted into the DOM _inside_ the `<li>`
+so the item title can be edited.
+
+![todo-edit-html](https://user-images.githubusercontent.com/194400/43995210-f4f484e0-9da1-11e8-8cc5-09f7309db963.png)
+
+Here is the _sample_ HTML in "**editing _mode_**"
+(_copy-pasted_) from the VanillaJS TodoMVC implementation
+the **`<li>`** is being edited (_as per screenshot above_):
+```HTML
+<ul class="todo-list">
+  <li data-id="1533987109280" class="completed ">
+    <div class="view">
+      <input class="toggle" type="checkbox" checked="">
+      <label>hello world</label>
+      <button class="destroy"></button>
+    </div>
+  </li>
+  <li data-id="1534013859716" class="editing">
+    <div class="view"><input class="toggle" type="checkbox">
+      <label>totes editing this todo item</label>
+      <button class="destroy">
+      </button>
+    </div>
+    <input class="edit">
+  </li>
+</ul>
+```
+
+From the HTML/DOM we can see that "editing" a Todo item is _deceptively_ simple
+from a markup perspective, we _just_ need to know _which_ item we are editing
+and render the appropriate tags/classes.
+
+#### Three Steps to `EDIT` an Item
+
+There are _three_ steps to Editing a Todo List item:
+
+1. ***Trigger*** the "double-click" event listener/handler
+  + Receiving the `singal('EDIT', item.id)` "activates" editing mode.
+2. ***Edit*** the todo list item's `title` property
+3. ***Save*** the updated item `title`: `singal('SAVE', item.id)`
+
+For these _three_ steps there are two `update` actions: `EDIT` and `SAVE`
+which will require two new `case` statements in the `update` function.
+
+> _**Note**: there is a "fourth" step which is "**Cancelling**" an edit,
+which we will cover in **section 5.5** below, but for now we are
+only considering the "happy path" which results in a successful edit._
+
+
+#### 5.1 Double-Click to Edit
+
+The TodoMVC ***spec*** for item
+https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
+includes the line:
+
+```sh
+Double-clicking the <label> activates editing mode, by toggling the .editing class on its <li>
+```
+
+> _**Note**: the sample TodoMVC Browser Tests:
+https://github.com/tastejs/todomvc/tree/master/tests#example-output
+does **not** include a test-case for **double-clicking**_
+
+Since Double-clicking/tapping is the _only_ way to edit a todo item,
+we feel that it deserves a test.
+
+When we don't know how to do something, a good place to start is to search
+for the keywords we want, e.g: "JavaScript detect double-click event"
+for which the top result is the following StackOverflow Q/A:
+https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event
+Reading though all the answers, we determine that the most relevant (_to us_)
+is: https://stackoverflow.com/a/16033129/1148249 (_which uses "vanilla" JS_)
+
+![stackoverflow-double-click-example](https://user-images.githubusercontent.com/194400/45124122-14942f80-b161-11e8-94c0-f54f2352bdd5.png)
+
+```html
+<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
+<script>
+  function doubleclick(el, onsingle, ondouble) {
+    if (el.getAttribute("data-dblclick") == null) {
+      el.setAttribute("data-dblclick", 1);
+      setTimeout(function () {
+        if (el.getAttribute("data-dblclick") == 1) {
+          onsingle();
+        }
+        el.removeAttribute("data-dblclick");
+      }, 300);
+    } else {
+      el.removeAttribute("data-dblclick");
+      ondouble();
+    }
+  }
+</script>
+```
+Given that we are using the Elm Architecture to manage the DOM,
+we don't want a function that _alters_ the DOM.
+So we are going to _borrow_ the _logic_ from this example but simplify it.
+
+
+
+
+
+
+#### 5.2 `render_item` view function with Edit controls
+
+The `render_item` function will require 3 changes:
+1. Add the `"class=editing"` to the list item which is being edited.
+2. Add the `signal('EDIT', item.id)` as an `onclick` attribute to `<label>`
+3. Display the **`<input class="edit">`** with the
+
+BEFORE:
+```js
+function render_item (item, model, signal) {
+  return (
+    li([
+      "data-id=" + item.id,
+      "id=" + item.id,
+      item.done ? "class=completed" : ""
+    ], [
+      div(["class=view"], [
+        input([
+          item.done ? "checked=true" : "",
+          "class=toggle",
+          "type=checkbox",
+          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
+          ],[]), // <input> does not have any nested elements
+        label([], [text(item.title)]),
+        button(["class=destroy",
+        typeof signal === 'function' ? signal('DELETE', item.id) : ''])
+      ]) // </div>
+    ]) // </li>
+  )
+}
+```
+
+AFTER:
+```js
+function render_item (item, model, signal) {
+  return (
+    li([
+      "data-id=" + item.id,
+      "id=" + item.id,
+      item.done ? "class=completed" : "",
+      model && model.editing && model.editing === item.id ? "class=editing" : ""
+    ], [
+      div(["class=view"], [
+        input([
+          item.done ? "checked=true" : "",
+          "class=toggle",
+          "type=checkbox",
+          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
+          ], []), // <input> does not have any nested elements
+        label([ typeof signal === 'function' ? signal('EDIT', item.id) : '' ],
+          [text(item.title)]),
+        button(["class=destroy",
+          typeof signal === 'function' ? signal('DELETE', item.id) : ''])
+        ]
+      ), // </div>
+    ].concat(model && model.editing && model.editing === item.id ? [ // editing?
+      input(["class=edit", "id=" + item.id, "value=" + item.title, "autofocus"])
+    ] : [])) // </li>
+  )
+}
+```
diff --git a/examples/todo-list/elmish.js b/examples/todo-list/elmish.js
index 39771175..218b842a 100644
--- a/examples/todo-list/elmish.js
+++ b/examples/todo-list/elmish.js
@@ -23,7 +23,7 @@ function empty (node) {
  */
 function mount (model, update, view, root_element_id, subscriptions) {
   var ROOT = document.getElementById(root_element_id); // root DOM element
-  var store_name = 'elmish_' + root_element_id; // test-app !== app
+  var store_name = 'todos-elmish_' + root_element_id; // test-app !== app
 
   function render (mod, sig, root) { // DRY rendering code (invoked twice)
     localStorage.setItem(store_name, JSON.stringify(mod)); // save the model!
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index daba5538..498f4312 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -21,7 +21,7 @@ function update(action, model, data) {
   // console.log(arguments)
   // console.log(' - - - - - - - - - - - ');
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
-  switch(action) {                   // and an action (String) runs a switch
+  switch(action) {
     case 'ADD':
       var last = (typeof model.todos !== 'undefined' && model.todos.length > 0)
         ? model.todos[model.todos.length - 1] : null;
@@ -64,12 +64,7 @@ function update(action, model, data) {
       // simplified as we are not altering the DOM!
       console.log('EDIT', data, model.editing, new_model.click_time, Date.now());
 
-      // if we are ALREADY editing the todo item, no need to do anything
-      if (new_model.editing && new_model.editing === data) {
-        console.log('already editing ...', data);
-      }
-      // on second click, the new_model.clicked will have been previously set
-      else if (new_model.clicked && new_model.clicked === data &&
+      if (new_model.clicked && new_model.clicked === data &&
         Date.now() - 300 < new_model.click_time ) { // DOUBLE CLICK is faster than 300ms
           new_model.editing = data;
           console.log('DOUBLE CLICK', data);
@@ -89,7 +84,7 @@ function update(action, model, data) {
       new_model.clicked = false;
       new_model.editing = false;
 
-      if (!value || value.length < 1) { // delete item if title is blank:
+      if (!value || value.length === 0) { // delete item if title is blank:
         return update('DELETE', new_model, id);
       }
       // update the value of the item.title that has been edited:
@@ -106,19 +101,9 @@ function update(action, model, data) {
   return new_model;
 }
 
-function show_item (item, model, signal) {
-  return [
-    label([ typeof signal === 'function' ? signal('EDIT', item.id) : '' ],
-      [text(item.title)]),
-    button(["class=destroy",
-      typeof signal === 'function' ? signal('DELETE', item.id) : ''])
-  ]
-}
-
 function edit_item (item, model, signal) {
   return [
-    input(["class=edit", "id=" + item.id,
-      "value=" + item.title, "autofocus"], []),
+    ,
   ]
 }
 
@@ -154,15 +139,15 @@ function render_item (item, model, signal) {
           "type=checkbox",
           typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
           ], []), // <input> does not have any nested elements
-      ].concat( model && model.editing !== item.id ?
-          show_item(item, model, signal) : []
-      )
-    ), // </div>
-    ].concat(
-      model && model.editing && model.editing === item.id ?
-        edit_item(item, model, signal) : []
-      ) // concat editing input if in "editing mode"
-    ) // </li>
+        label([ typeof signal === 'function' ? signal('EDIT', item.id) : '' ],
+          [text(item.title)]),
+        button(["class=destroy",
+          typeof signal === 'function' ? signal('DELETE', item.id) : ''])
+        ]
+      ), // </div>
+    ].concat(model && model.editing && model.editing === item.id ? [ // editing?
+      input(["class=edit", "id=" + item.id, "value=" + item.title, "autofocus"])
+    ] : [])) // </li>
   )
 }
 
@@ -296,25 +281,28 @@ function subscriptions (signal) {
 	var ESCAPE_KEY = 27; // used for "escaping" when editing a Todo item
 
   document.addEventListener('keyup', function handler (e) {
-    var new_todo = document.getElementById('new-todo');
     console.log('e.keyCode:', e.keyCode, '| key:', e.key);
-    var editing = document.getElementsByClassName('editing');
-    if (e.keyCode === ENTER_KEY) {
-      if (editing && editing.length > 0) {
-        console.log('editing:', editing);
-        signal('SAVE')(); // invoke singal inner callback
-      }
-      if(new_todo.value.length > 0) {
-        signal('ADD')(); // invoke singal inner callback
-        new_todo.value = ''; // reset <input> so we can add another todo
-        document.getElementById('new-todo').focus();
-      }
+
+    switch(e.keyCode) {
+      case ENTER_KEY:
+        var editing = document.getElementsByClassName('editing');
+        if (editing && editing.length > 0) {
+          console.log('editing:', editing);
+          signal('SAVE')(); // invoke singal inner callback
+        }
+
+        var new_todo = document.getElementById('new-todo');
+        if(new_todo.value.length > 0) {
+          signal('ADD')(); // invoke singal inner callback
+          new_todo.value = ''; // reset <input> so we can add another todo
+          document.getElementById('new-todo').focus();
+        }
+        break;
+      case ESCAPE_KEY:
+
+        break;
     }
   });
-
-  // document.addEventListener('click', function click_anywhere (e) {
-  //
-  // });
 }
 
 /* module.exports is needed to run the functions using Node.js for testing! */
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 3dcbae7b..b688a739 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -393,3 +393,56 @@ test('4.1 DELETE item by clicking <button class="destroy">', function (t) {
   t.equal(document.getElementById('0'), null, 'todo item successfully DELETEd');
   t.end();
 });
+
+
+test.only('5. Editing: Edit an item > <input class="edit">', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // const todo_count = ;
+  t.equal(document.querySelectorAll('.destroy').length, 1, "one destroy button")
+
+  const item = document.getElementById('0')
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in DOM.');
+  // DELETE the item by clicking on the <button class="destroy">:
+  const button = item.querySelectorAll('button.destroy')[0];
+  button.click()
+  // confirm that there is no loger a <button class="destroy">
+  t.equal(document.querySelectorAll('button.destroy').length, 0,
+    'there is no loger a <button class="destroy"> as the only item was DELETEd')
+  t.equal(document.getElementById('0'), null, 'todo item successfully DELETEd');
+  t.end();
+});
+
+test.skip('5.1 Double-click an item <label> to edit it', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // const todo_count = ;
+  t.equal(document.querySelectorAll('.destroy').length, 1, "one destroy button")
+
+  const item = document.getElementById('0')
+  t.equal(item.textContent, model.todos[0].title, 'Item contained in DOM.');
+  // DELETE the item by clicking on the <button class="destroy">:
+  const button = item.querySelectorAll('button.destroy')[0];
+  button.click()
+  // confirm that there is no loger a <button class="destroy">
+  t.equal(document.querySelectorAll('button.destroy').length, 0,
+    'there is no loger a <button class="destroy"> as the only item was DELETEd')
+  t.equal(document.getElementById('0'), null, 'todo item successfully DELETEd');
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index 09af4c1e..3848037b 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1325,7 +1325,7 @@ _however_ we still cannot _interact_ with the app.
 _Next_ we're going to move to "wiring-up" the _functionality_
 to construct the UX.
 
-### Functionality - The _Fun_ Part!
+## _Fun_ctionality - The _Fun_ Part!
 
 With all the "foundation" well defined and tested,
 we can _confidently_ move on to building out the _features_
@@ -1710,47 +1710,6 @@ sends the `signal('DELETE', todo.id, model)`
 + [ ] The `DELETE` update case receives the `todo.id`
 and removes it from the `model.todos` Array.
 
-<!--  I don't think we need this!
-In order to `DELETE` an item from the `model.todos` Array,
-we need to "_supply_" the `model` when invoking the `signal`
-function. This means we need to _extend_ the `signal` function's
-parameters to include the `model` as an _optional_ argument.
-
-In the `elmish.js` file, locate the `mount` function
-and add a `model` parameter to the `signal` function definition.
-Thus it should change from:
-```js
-function signal(action, data) { // signal function takes action
-  return function callback() { // and returns callback
-    model = JSON.parse(localStorage.getItem(store_name)) //|| model;
-    var updatedModel = update(action, model, data); // update model for the action
-    render(updatedModel, signal, ROOT);
-  };
-};
-```
-
-To:
-```js
-function signal(action, data, model) { // signal function takes action
-  return function callback() { // and returns callback
-    model = JSON.parse(localStorage.getItem(store_name)) //|| model;
-    var updatedModel = update(action, model, data); // update model for the action
-    render(updatedModel, signal, ROOT);
-  };
-};
-```
-
-Thankfully, we have a "bank" (or "suite") of tests that cover
-all of our existing functionality,
-so when we make a change like this
-we can _confirm_ that all _existing_ functionality
-still works as expected.
-
-Run the tests: `npm test` and ensure they all still pass
-after making the change to the `signal` function. (_they should!_)
-
-![tests-still-passing](https://user-images.githubusercontent.com/194400/44953303-a109ce00-ae93-11e8-8f0c-c271832df3a5.png)
--->
 
 ##### `DELETE` Item _Test_
 
@@ -1803,7 +1762,7 @@ button(["class=destroy"])
 ```
 Add the `signal` function invocation:
 ```js
-button(["class=destroy", signal('DELETE', item.id, model)])
+button(["class=destroy", signal('DELETE', item.id)])
 ```
 
 simply adding this function invocation will set it
@@ -1843,6 +1802,10 @@ Editing a Todo List item is (_by far_)
 the most "complex" functionality in the TodoMVC app
 because it involves multiple steps and "dynamic UI".
 
+Don't panic! Just because something
+
+
+
 #### `EDIT` Item Test Titles & Acceptance Criteria
 
 ```
@@ -1855,21 +1818,29 @@ because it involves multiple steps and "dynamic UI".
   ✓ should cancel edits on escape (1115ms)
 ```
 
+Further reading of the TodoMVC Spec:
+https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
+reveals the following acceptance criteria:
+
 
 + [ ] Double-click on Item **`<label>title</label>`**
-to begin editing.
+to begin editing (_that item_)
 + [ ] Render an **`<input class="edit">`**
 if in "**editing _mode_**"
 (_see screenshot and markup below_)
+  + [ ] Add `class="editing"` to `<li>` when editing
+  + [ ] Remove (_don't add_) `class="editing"` from `<li>`
+  when no longer editing.
++ Set the `item.id` as the `id` of the **`<input class="edit">`**
+  so that we know which item is being edited.
 + [ ] Add `case` in `keyup` Event Listener
-for **`[Enter]`** keyup
-(_see **`subscriptions`** above_) if we are
-in "**editing _mode_**",
-get the text value from the **`<input class="edit">`**
-_instead_ of **`<input id="new-todo">`**
-so that we _update_ the _existing_ Todo Item title (text).
+  for **`[Enter]`** keyup (_see **`subscriptions`** above_)
+  if we are in "**editing _mode_**",
+  get the text value from the **`<input class="edit">`**
+  _instead_ of **`<input id="new-todo">`**
+  so that we _update_ the _existing_ Todo Item title (text).
 + [ ] When **`[Enter]`** is pressed while in "**editing _mode_**",
-Dispatch the **`END_EDIT`** action: `signal('END_EDIT')`
+Dispatch the **`SAVE`** action: `signal('SAVE')`
 
 ![todo-edit-html](https://user-images.githubusercontent.com/194400/43995210-f4f484e0-9da1-11e8-8cc5-09f7309db963.png)
 

From 43d2133410a8136ec4e7bac567d4140221e459bc Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 6 Sep 2018 11:41:37 +0100
Subject: [PATCH 130/164] adds test for render_item in edit mode! #60

---
 edit-todo.md                 | 85 ++++++++++++++++++++++++++++++++----
 examples/todo-list/todo.html |  1 +
 test/todo-app.test.js        | 38 ++++++++--------
 3 files changed, 99 insertions(+), 25 deletions(-)

diff --git a/edit-todo.md b/edit-todo.md
index b9e4604f..ca872d4b 100644
--- a/edit-todo.md
+++ b/edit-todo.md
@@ -386,7 +386,8 @@ Double-clicking the <label> activates editing mode, by toggling the .editing cla
 
 > _**Note**: the sample TodoMVC Browser Tests:
 https://github.com/tastejs/todomvc/tree/master/tests#example-output
-does **not** include a test-case for **double-clicking**_
+does **not** include a test-case for **double-clicking**.
+We are going to add one below for "extra credit"._
 
 Since Double-clicking/tapping is the _only_ way to edit a todo item,
 we feel that it deserves a test.
@@ -398,7 +399,9 @@ https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-ev
 Reading though all the answers, we determine that the most relevant (_to us_)
 is: https://stackoverflow.com/a/16033129/1148249 (_which uses "vanilla" JS_)
 
-![stackoverflow-double-click-example](https://user-images.githubusercontent.com/194400/45124122-14942f80-b161-11e8-94c0-f54f2352bdd5.png)
+[![stackoverflow-double-click-example](https://user-images.githubusercontent.com/194400/45124122-14942f80-b161-11e8-94c0-f54f2352bdd5.png)](https://stackoverflow.com/a/16033129/1148249)
+
+>_**Note**: when you find a StackOverflow question/answer **helpful, upvote**!_
 
 ```html
 <div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
@@ -421,19 +424,85 @@ is: https://stackoverflow.com/a/16033129/1148249 (_which uses "vanilla" JS_)
 ```
 Given that we are using the Elm Architecture to manage the DOM,
 we don't want a function that _alters_ the DOM.
-So we are going to _borrow_ the _logic_ from this example but simplify it.
+So we are going to _borrow_ the _logic_ from this example but _simplify_ it.
+Since we are not mutating the DOM by setting `data-dblclick` attributes,
+we won't need to remove the attribute using a `setTimeout`,
+
+
+
+
+
+#### 5.2 `render_item` view function with "Edit Mode" `<input class="edit">`
+
+In order to edit an item the **`render_item`** function
+will require **3 modifications**:
+
+1. Add the `signal('EDIT', item.id)` as an **`onclick` attribute** to `<label>`
+so that when a `<label>` is (double-)clicked
+the `model.editing` property is set by the `update` function (_see below_).
+2. Apply the **`"class=editing"`** to the list item which is being edited.
+3. Display the **`<input class="edit">`**
+with the Todo list item title as it's **`value`** property.
+
+##### 5.2 `render_item` "Edit Mode" _Test_
+
+For the above modifications (_requirements_) we can write a _single_ test
+with four assertions:
+
+```js
+test.only('5. Editing: > Render an item in "editing mode"', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: false },
+      { id: 2, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 2 // edit the 3rd todo list item (which has id == 2)
+  };
+
+  // render the ONE todo list item in "editing mode" based on model.editing:
+  document.getElementById(id).appendChild(
+    app.render_item(model.todos[2], model, mock_signal),
+  );
+  // test that signal (in case of the test mock_signal) is onclick attribute:
+  t.equal(document.querySelectorAll('.view > label')[0].onclick.toString(),
+    mock_signal().toString(), "mock_signal is onclick attribute of label");
+
+  // test that the <li class="editing"> and <input class="edit"> was rendered:
+  t.equal(document.querySelectorAll('.editing').length, 1,
+    "<li class='editing'> element is visible");
+  t.equal(document.querySelectorAll('.edit').length, 1,
+    "<input class='edit'> element is visible");
+  t.equal(document.querySelectorAll('.edit')[0].value, model.todos[2].title,
+    "<input class='edit'> has value: " + model.todos[2].title);
+  t.end();
+});
+```
 
+There is quite a lot to "unpack" here, but the main gist is that
+based on the `model.editing` key being set to `2`, our `render_item` function,
+will add the `editing` CSS class to the `<li>` element and render an
+`<input>` with CSS class `edit`.
+The TodoMVC style sheet (`todomvc-app.css`) will take care of displaying
+the input correctly.
 
+Setting the **`onclick`** attribute of the `<label>` element
+to whatever is passed in as the third argument of `redner_item`
+i.e. the `signal` will mean that a specific action will be dispatched/triggered
+when the `<label>` element is clicked.
 
 
+> **SPOILER ALERT**: If you want to _try_ to make the "Edit Mode" _Test_
+assertions _pass_ without reading the "solution",
+do it now before proceeding to the reading the _implementation_ section.
 
+<br />
 
-#### 5.2 `render_item` view function with Edit controls
+##### 5.2 `render_item` "Edit Mode" _Implementation_
 
-The `render_item` function will require 3 changes:
-1. Add the `"class=editing"` to the list item which is being edited.
-2. Add the `signal('EDIT', item.id)` as an `onclick` attribute to `<label>`
-3. Display the **`<input class="edit">`** with the
 
 BEFORE:
 ```js
diff --git a/examples/todo-list/todo.html b/examples/todo-list/todo.html
index 685b03e2..866d5de9 100644
--- a/examples/todo-list/todo.html
+++ b/examples/todo-list/todo.html
@@ -1,3 +1,4 @@
+<!--  this is the *sample* html generated by VanillaJS TodoMVC -->
 <section class="todoapp">
   <header class="header">
     <h1>todos</h1>
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index b688a739..3dfc273a 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -395,29 +395,33 @@ test('4.1 DELETE item by clicking <button class="destroy">', function (t) {
 });
 
 
-test.only('5. Editing: Edit an item > <input class="edit">', function (t) {
+test.only('5. Editing: > Render an item in "editing mode"', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('elmish_' + id);
   const model = {
     todos: [
-      { id: 0, title: "Make something people want.", done: false }
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: false },
+      { id: 2, title: "Let's solve our own problem", done: false }
     ],
-    hash: '#/' // the "route" to display
+    hash: '#/', // the "route" to display
+    editing: 2 // edit the 3rd todo list item (which has id == 2)
   };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  // const todo_count = ;
-  t.equal(document.querySelectorAll('.destroy').length, 1, "one destroy button")
-
-  const item = document.getElementById('0')
-  t.equal(item.textContent, model.todos[0].title, 'Item contained in DOM.');
-  // DELETE the item by clicking on the <button class="destroy">:
-  const button = item.querySelectorAll('button.destroy')[0];
-  button.click()
-  // confirm that there is no loger a <button class="destroy">
-  t.equal(document.querySelectorAll('button.destroy').length, 0,
-    'there is no loger a <button class="destroy"> as the only item was DELETEd')
-  t.equal(document.getElementById('0'), null, 'todo item successfully DELETEd');
+  // render the ONE todo list item in "editing mode" based on model.editing:
+  document.getElementById(id).appendChild(
+    app.render_item(model.todos[2], model, mock_signal),
+  );
+  // test that signal (in case of the test mock_signal) is onclick attribute:
+  t.equal(document.querySelectorAll('.view > label')[0].onclick.toString(),
+    mock_signal().toString(), "mock_signal is onclick attribute of label");
+
+  // test that the <li class="editing"> and <input class="edit"> was rendered:
+  t.equal(document.querySelectorAll('.editing').length, 1,
+    "<li class='editing'> element is visible");
+  t.equal(document.querySelectorAll('.edit').length, 1,
+    "<input class='edit'> element is visible");
+  t.equal(document.querySelectorAll('.edit')[0].value, model.todos[2].title,
+    "<input class='edit'> has value: " + model.todos[2].title);
   t.end();
 });
 

From fd60ff65314982bb033eb52c316f320b2aae5b24 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 6 Sep 2018 16:25:10 +0100
Subject: [PATCH 131/164] add screenshot of render_item ("edit mode") tests
 passing for #60

---
 edit-todo.md                   | 363 +++++++++------------------------
 examples/todo-list/todo-app.js |   4 +-
 todo-list.md                   | 114 +----------
 3 files changed, 105 insertions(+), 376 deletions(-)

diff --git a/edit-todo.md b/edit-todo.md
index ca872d4b..8f488f4b 100644
--- a/edit-todo.md
+++ b/edit-todo.md
@@ -1,267 +1,3 @@
-
-
-#### 3. Mark all as completed
-
-The third batch of tests involves "Toggling" all todos as "done=true":
-
-```
-3. Mark all as completed
-  ✓ should allow me to mark all items as completed
-  ✓ should allow me to clear the completion state of all items
-  ✓ complete all checkbox should update state when items are completed
-```
-Luckily, given that we know how to use a _boolean_ value,
-these _three_ assertions can be "solved" with _minimal_ code.
-Let's create a test with these 3 assertions.
-
-Add the following code/test to your `test/todo-app.test.js` file:
-```js
-test.only('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
-  elmish.empty(document.getElementById(id));
-  localStorage.removeItem('elmish_' + id);
-  const model = {
-    todos: [
-      { id: 0, title: "Learn Elm Architecture", done: true },
-      { id: 1, title: "Build Todo List App",    done: false },
-      { id: 2, title: "Win the Internet!",      done: false }
-    ],
-    hash: '#/' // the "route" to display
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  // confirm that the ONLY the first todo item is done=true:
-  const items = document.querySelectorAll('.view');
-
-  document.querySelectorAll('.toggle').forEach(function(item, index) {
-    t.equal(item.checked, model.todos[index].done,
-      "Todo #" + index + " is done=" + item.checked
-      + " text: " + items[index].textContent)
-  })
-
-  // click the toggle-all checkbox to trigger TOGGLE_ALL: >> true
-  document.getElementById('toggle-all').click(); // click toggle-all checkbox
-  document.querySelectorAll('.toggle').forEach(function(item, index) {
-    t.equal(item.checked, true,
-      "TOGGLE each Todo #" + index + " is done=" + item.checked
-      + " text: " + items[index].textContent)
-  });
-  t.equal(document.getElementById('toggle-all').checked, true,
-    "should allow me to mark all items as completed")
-
-
-  // click the toggle-all checkbox to TOGGLE_ALL (again!) true >> false
-  document.getElementById('toggle-all').click(); // click toggle-all checkbox
-  document.querySelectorAll('.toggle').forEach(function(item, index) {
-    t.equal(item.checked, false,
-      "TOGGLE_ALL Todo #" + index + " is done=" + item.checked
-      + " text: " + items[index].textContent)
-  })
-  t.equal(document.getElementById('toggle-all').checked, false,
-    "should allow me to clear the completion state of all items")
-
-  // *manually* "click" each todo item:
-  document.querySelectorAll('.toggle').forEach(function(item, index) {
-    item.click(); // this should "toggle" the todo checkbox to done=true
-    t.equal(item.checked, true,
-      ".toggle.click() (each) Todo #" + index + " which is done=" + item.checked
-      + " text: " + items[index].textContent)
-  });
-  // the toggle-all checkbox should be "checked" as all todos are done=true!
-  t.equal(document.getElementById('toggle-all').checked, true,
-    "complete all checkbox should update state when items are completed")
-
-  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
-  localStorage.removeItem('elmish_store');
-  t.end();
-});
-```
-
-If you attempt to run the test file:
-```sh
-node test/todo-app.test.js
-```
-You will see something like this:
-
-![toggle-all-test-failing](https://user-images.githubusercontent.com/194400/43985804-3c8dbe02-9d02-11e8-9876-cd7e35602754.png)
-
-While there may _appear_ to be "_many_" assertions in this test,
-in reality there are only two bits of functionality.
-
-_Firstly_, we need a new `case`
-in the `update` `switch` statement: `TOGGLE_ALL`. <br />
-and _second_ we need to add a couple of lines to our `TOGGLE`
-block to _check_ if _all_ todos are `done=true` or `done=false`.
-In the case where _all_ todos are `done=true` we should reflect
-this in the "state" of the `toggle-all` checkbox.
-The _easiest_ way of representing this in the `model` is
-with a new property, e.g: `model.all_done=true`
-when _all_ todos are `done=true`.
-
-The only other thing we need to update is the `render_main`
-function to include `signal('TOGGLE_ALL')` in the attributes array.
-
-Try and make this test pass by yourself before consulting the
-sample code:
-[**`examples/todo-list/todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR46)
-
-
-### 4. Item (Toggle, Edit & Delete)
-
-```
-4. Item
-  ✓ should allow me to mark items as complete (843ms)
-  ✓ should allow me to un-mark items as complete (978ms)
-  ✓ should allow me to edit an item (1155ms)
-  ✓ should show the remove button on hover
-```
-
-Of these requirements, we already have the first two "_covered_"
-because we implemented the `TOGGLE` feature (_above_).
-
-We can add another "proxy" test just for "_completeness_":
-
-```js
-test.only('4. Item: should allow me to mark items as complete', function (t) {
-  elmish.empty(document.getElementById(id));
-  localStorage.removeItem('elmish_' + id);
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false }
-    ],
-    hash: '#/' // the "route" to display
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  const item = document.getElementById('0')
-  t.equal(item.textContent, model.todos[0].title, 'Item contained in model.');
-  // confirm that the todo item is NOT done (done=false):
-  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
-  'Item starts out "active" (done=false)');
-
-
-  // click the checkbox to toggle it to done=true
-  document.querySelectorAll('.toggle')[0].click()
-  t.equal(document.querySelectorAll('.toggle')[0].checked, true,
-  'Item should allow me to mark items as complete');
-
-  // click the checkbox to toggle it to done=false "undo"
-  document.querySelectorAll('.toggle')[0].click()
-  t.equal(document.querySelectorAll('.toggle')[0].checked, false,
-  'Item should allow me to un-mark items as complete');
-  t.end();
-});
-```
-You should not need to write any additional code
-in order to make this test pass; just run it and move on.
-
-![toggle-todo-tests-passing](https://user-images.githubusercontent.com/194400/43992979-a4d00ab6-9d7e-11e8-891b-9f699f474dd5.png)
-
-
-
-#### 4.1 `DELETE` an Item
-
-```
-should show the remove button on hover
-```
-
-##### Acceptance Criteria
-
-+ [ ] should show the `<button class="destroy">`
-on hover (over the item) ... thankfully the TodoMVC CSS
-handles this for us, we just need our `view`
-to render the `<button>`
-+ [ ] Clicking/tapping the `<button class="destroy">`
-sends the `signal('DELETE', todo.id, model)`
-+ [ ] The `DELETE` update case receives the `todo.id`
-and removes it from the `model.todos` Array.
-
-
-##### `DELETE` Item _Test_
-
-Append following test code to your `test/todo-app.test.js` file:
-
-```js
-test.only('4.1 DELETE item by clicking <button class="destroy">', function (t) {
-  elmish.empty(document.getElementById(id));
-  localStorage.removeItem('elmish_' + id);
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false }
-    ],
-    hash: '#/' // the "route" to display
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  // const todo_count = ;
-  t.equal(document.querySelectorAll('.destroy').length, 1, "one destroy button")
-
-  const item = document.getElementById('0')
-  t.equal(item.textContent, model.todos[0].title, 'Item contained in DOM.');
-  // DELETE the item by clicking on the <button class="destroy">:
-  const button = item.querySelectorAll('button.destroy')[0];
-  button.click()
-  // confirm that there is no loger a <button class="destroy">
-  t.equal(document.querySelectorAll('button.destroy').length, 0,
-    'there is no loger a <button class="destroy"> as the only item was DELETEd')
-  t.equal(document.getElementById('0'), null, 'todo item successfully DELETEd');
-  t.end();
-});
-```
-
-If you run the tests `node test/todo-app.test.js`
-you should now see:
-![delete-test-one-assertion-failing](https://user-images.githubusercontent.com/194400/44953479-21313300-ae96-11e8-971a-51757702bacc.png)
-
-The first two assertions are _optional_ and _should_ (_always_)
-pass given that they rely on functionality defined previously.
-The second two will only pass once you _make_ them pass!
-
-##### `DELETE` Item _Implementation_
-
-The _first_ step is to add an invocation of `signal('DELETE' ...)`
-to the `render_item` view rendering function. _Specifically_ the
-`button` line:
-
-```js
-button(["class=destroy"])
-```
-Add the `signal` function invocation:
-```js
-button(["class=destroy", signal('DELETE', item.id)])
-```
-
-simply adding this function invocation as an Array element will set it
-as an `onclick` attribute for the `<button>`
-therefore when the _user_ clicks the button it will
-"trigger" the `signal` function with the appropriate arguments.
-There is no "magic" just code we tested/wrote earlier.
-
-
-_Second_ we need to add a `case` statement
-to the `update` function.
-You should attempt to "solve" this yourself.
-There is no "right" answer, there are at least
-5 ways of solving this, as always, you should write the code
-that you feel is most _readable_.
-
-If you get "_stuck_" or want to confirm your understanding
-of the implementation of the `DELETE` functionality,
-check the code in `todo-app.js` > `update` function.
-
-
-> Rather bizarrely the edit functionality is mentioned
-_both_ in the Item and Editing sections.
-So we will cover it in the Editing section next.
-
-```
-should allow me to edit an item
-```
-
-This is kinda _meaningless_ as an assertion.
-What does "edit an item" actually _mean_?
-(_we have expanded the acceptance criteria below..._)
-
-
 ### 5. `EDIT` an Item
 
 Editing a Todo List item is (_by far_)
@@ -503,6 +239,11 @@ do it now before proceeding to the reading the _implementation_ section.
 
 ##### 5.2 `render_item` "Edit Mode" _Implementation_
 
+Given that there are 4 assertions that need to pass
+and we know there are 3 changes that need to be made
+to the `render_item` function,
+rather than leaving you (_the reader_) wondering "_where do I start?!_",
+here is the code that makes the tests pass:
 
 BEFORE:
 ```js
@@ -558,3 +299,97 @@ function render_item (item, model, signal) {
   )
 }
 ```
+Let's walk through the three code changes made:
+
+1. Adding `"class=editing"` to the `<li>` based on `model.editing`
+is the simplest code modification, similar to the conditional attribute
+`class=completed` on the previous line.
+
+```js
+model && model.editing && model.editing === item.id ? "class=editing" : ""
+````
+
+We include the check for `model && model.editing` because if either of these
+two are `undefined` there's no need to keep checking.
+Only if the `model.editing` matches the `item.id`
+(_the todo list item being rendered_) do we render the **`"class=editing"`**.
+Only one todo list item `title` will be edited at once,
+so this will only match (_at most_) _one_ item in the `model.todos` array.
+
+2. Setting the **`signal('EDIT', item.id)`**
+
+_Why_ do we need the `typeof signal` (_type-checking_)...?
+
+```js
+label([ typeof signal === 'function' ? signal('EDIT', item.id) : '' ],
+  [text(item.title)]),
+```
+
+Why _can't_ we just write this:
+
+```js
+label([signal('EDIT', item.id)], [text(item.title)]),
+```
+
+Given that **`signal`** is the final argument to the `render_item` function,
+it is considered an _optional_ argument.
+If for any reason the `render_item` function is invoked _without_ the `singal`
+parameter, then attempting to _invoke_ **`signal('EDIT', item.id)`**
+will result in a **`ReferenceError: signal is not defined`** which will
+"crash" the app _fatally_.
+
+If you are the _only_ person who is going to write code that will invoke
+`render_item`, you don't need to "worry" about the `typeof signal`
+because there is "no need" for type-checking the `signal`;
+surely you won't _forget_ to invoke it with a valid `signal` ...
+_however_ we _always_ approach our JavaScript code a
+["***defensive programming***"](https://en.wikipedia.org/wiki/Defensive_programming)
+perspective
+because we _know_ from _experience_
+that banking on the
+["***happy path***"](https://en.wikipedia.org/wiki/Happy_path)
+in JS code
+is like driving without a seatbelt;
+you might be "fine" most of the time, but when something "bad" happens,
+you will go flying through the windscreen and have a _really_ bad day!
+
+![dilbert-bugs](https://user-images.githubusercontent.com/194400/45164547-8f555d00-b1ea-11e8-9767-e23350c1e9a0.png)
+
+If you want to _avoid_ having to do _manual_ "type-checking",
+use **`Elm`**, it does all this for you _transparently_.
+
+3. Append the **`<input class="edit">`** to the `<li>` if in "editing mode":
+
+```js
+].concat(model && model.editing && model.editing === item.id ? [ // editing?
+  input(["class=edit", "id=" + item.id, "value=" + item.title, "autofocus"])
+] : [])) // </li>
+```
+The _reason_ we use `.concat` is to allow us to
+_optionally_ render the element or _nothing_ then _append_ it to the
+Array of child elements nested in the `<li>`.
+
+An _alternative_ to using `.concat()` could be an empty `div` node:
+```js
+model && model.editing && model.editing === item.id ? // editing?
+  input(["class=edit", "id=" + item.id, "value=" + item.title, "autofocus"])
+  : div() // empty element.
+```
+This is because attempting to return anything other than a DOM element
+will result in the following error:
+```js
+TypeError: Argument 1 of Node.appendChild does not implement interface Node
+```
+We are not "fans" of having "empty" elements in the DOM, it's "sloppy".
+Hence the `concat()` approach which results in "clean" DOM.
+
+At this point our test assertions all pass:
+```sh
+node test/todo-app.test.js
+```
+
+![render_item-tests-pass](https://user-images.githubusercontent.com/194400/45167506-2c1af900-b1f1-11e8-9898-af46f979fdbd.png)
+
+But we are building a _visual_ application and are not _seeing_ anything ...
+
+#### Visualise Editing Mode?
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 498f4312..a0d245bc 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -145,9 +145,11 @@ function render_item (item, model, signal) {
           typeof signal === 'function' ? signal('DELETE', item.id) : ''])
         ]
       ), // </div>
+
     ].concat(model && model.editing && model.editing === item.id ? [ // editing?
       input(["class=edit", "id=" + item.id, "value=" + item.title, "autofocus"])
-    ] : [])) // </li>
+    ] : []) // end concat()
+    ) // </li>
   )
 }
 
diff --git a/todo-list.md b/todo-list.md
index 3848037b..51fcc866 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1623,7 +1623,7 @@ While there may _appear_ to be "_many_" assertions in this test,
 in reality there are only two bits of functionality.
 
 _Firstly_, we need a new `case`
-in the `update` `switch` statement: `TOGGLE_ALL`.
+in the `update` `switch` statement: `TOGGLE_ALL`. <br />
 and _second_ we need to add a couple of lines to our `TOGGLE`
 block to _check_ if _all_ todos are `done=true` or `done=false`.
 In the case where _all_ todos are `done=true` we should reflect
@@ -1765,10 +1765,11 @@ Add the `signal` function invocation:
 button(["class=destroy", signal('DELETE', item.id)])
 ```
 
-simply adding this function invocation will set it
+simply adding this function invocation as an Array element will set it
 as an `onclick` attribute for the `<button>`
 therefore when the _user_ clicks the button it will
 "trigger" the `signal` function with the appropriate arguments.
+There is no "magic" just code we tested/wrote earlier.
 
 
 _Second_ we need to add a `case` statement
@@ -1795,115 +1796,6 @@ This is kinda _meaningless_ as an assertion.
 What does "edit an item" actually _mean_?
 (_we have expanded the acceptance criteria below..._)
 
-
-### 5 `EDIT` an Item
-
-Editing a Todo List item is (_by far_)
-the most "complex" functionality in the TodoMVC app
-because it involves multiple steps and "dynamic UI".
-
-Don't panic! Just because something
-
-
-
-#### `EDIT` Item Test Titles & Acceptance Criteria
-
-```
-5. Editing
-  ✓ should hide other controls when editing (718ms)
-  ✓ should save edits on enter (1093ms)
-  ✓ should save edits on blur (1256ms)
-  ✓ should trim entered text (1163ms)
-  ✓ should remove the item if an empty text string was entered (1033ms)
-  ✓ should cancel edits on escape (1115ms)
-```
-
-Further reading of the TodoMVC Spec:
-https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
-reveals the following acceptance criteria:
-
-
-+ [ ] Double-click on Item **`<label>title</label>`**
-to begin editing (_that item_)
-+ [ ] Render an **`<input class="edit">`**
-if in "**editing _mode_**"
-(_see screenshot and markup below_)
-  + [ ] Add `class="editing"` to `<li>` when editing
-  + [ ] Remove (_don't add_) `class="editing"` from `<li>`
-  when no longer editing.
-+ Set the `item.id` as the `id` of the **`<input class="edit">`**
-  so that we know which item is being edited.
-+ [ ] Add `case` in `keyup` Event Listener
-  for **`[Enter]`** keyup (_see **`subscriptions`** above_)
-  if we are in "**editing _mode_**",
-  get the text value from the **`<input class="edit">`**
-  _instead_ of **`<input id="new-todo">`**
-  so that we _update_ the _existing_ Todo Item title (text).
-+ [ ] When **`[Enter]`** is pressed while in "**editing _mode_**",
-Dispatch the **`SAVE`** action: `signal('SAVE')`
-
-![todo-edit-html](https://user-images.githubusercontent.com/194400/43995210-f4f484e0-9da1-11e8-8cc5-09f7309db963.png)
-
-Here is the _sample_ HTML in "**editing _mode_**"
-(_copy-pasted_) from the VanillaJS TodoMVC implementation
-the _second_ **`<li>`** is the one being edited (_as per screenshot above_):
-```HTML
-<ul class="todo-list">
-  <li data-id="1533987109280" class="completed ">
-    <div class="view">
-      <input class="toggle" type="checkbox" checked="">
-      <label>hello world</label>
-      <button class="destroy"></button>
-    </div>
-  </li>
-  <li data-id="1534013859716" class="editing">
-    <div class="view"><input class="toggle" type="checkbox">
-      <label>totes editing this todo item</label>
-      <button class="destroy">
-      </button>
-    </div>
-    <input class="edit">
-  </li>
-</ul>
-```
-
-
-```js
-
-```
-
-There are _two_ steps to Editing a Todo List item:
-
-+ [ ] Receiving the `singal('EDIT', item.id)` "activates" editing mode.
-
-
-
-
-BEFORE:
-```js
-function render_item (item, signal) {
-  return (
-    li([
-      "data-id=" + item.id,
-      "id=" + item.id,
-      item.done ? "class=completed" : ""
-    ], [
-      div(["class=view"], [
-        input([
-          item.done ? "checked=true" : "",
-          "class=toggle",
-          "type=checkbox",
-          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
-          ],
-          []), // <input> does not have any nested elements
-        label([], [text(item.title)]),
-        button(["class=destroy"])
-      ]) // </div>
-    ]) // </li>
-  )
-}
-```
-
 <!--
 ## What _Next_?
 

From 0ffb30b843021cc613ef68f4195d3119e48ab894 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 6 Sep 2018 20:59:27 +0100
Subject: [PATCH 132/164] rename localStorage key prefix inline with TodoMVC
 spec: https://github.com/tastejs/todomvc/blob/master/app-spec.md#persistence

---
 test/elmish.test.js   | 34 +++++++++++++++++-----------------
 test/todo-app.test.js | 18 +++++++++---------
 2 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/test/elmish.test.js b/test/elmish.test.js
index 124986df..28cba615 100644
--- a/test/elmish.test.js
+++ b/test/elmish.test.js
@@ -380,7 +380,7 @@ global.localStorage = global.localStorage ? global.localStorage : {
    delete this[key]
  }
 }
-localStorage.removeItem('elmish_' + id);
+localStorage.removeItem('todos-elmish_' + id);
 // localStorage.setItem('hello', 'world!');
 // console.log('localStorage (polyfil) hello', localStorage.getItem('hello'));
 
@@ -392,8 +392,8 @@ test('elmish.mount sets model in localStorage', function (t) {
 
   elmish.mount(7, update, view, id);
   // the "model" stored in localStorage should be 7 now:
-  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 7,
-    "elmish_store is 7 (as expected). initial state saved to localStorage.");
+  t.equal(JSON.parse(localStorage.getItem('todos-elmish_' + id)), 7,
+    "todos-elmish_store is 7 (as expected). initial state saved to localStorage.");
   // test that mount still works as expected (check initial state of counter):
   const actual = document.getElementById(id).textContent;
   const actual_stripped = parseInt(actual.replace('+', '')
@@ -404,8 +404,8 @@ test('elmish.mount sets model in localStorage', function (t) {
   // because mount should retrieve the value from localStorage
   elmish.mount(42, update, view, id); // model (42) should be ignored this time!
 
-  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 7,
-    "elmish_store is 7 (as expected). initial state saved to localStorage.");
+  t.equal(JSON.parse(localStorage.getItem('todos-elmish_' + id)), 7,
+    "todos-elmish_store is 7 (as expected). initial state saved to localStorage.");
   // increment the counter
   const btn = root.getElementsByClassName("inc")[0]; // click increment button
   btn.click(); // Click the Increment button!
@@ -413,14 +413,14 @@ test('elmish.mount sets model in localStorage', function (t) {
     .textContent, 10);
   t.equal(state, 8, "State is 8 after increment.");
   // the "model" stored in localStorage should also be 8 now:
-  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 8,
-    "elmish_store is 8 (as expected).");
+  t.equal(JSON.parse(localStorage.getItem('todos-elmish_' + id)), 8,
+    "todos-elmish_store is 8 (as expected).");
   elmish.empty(root); // reset the DOM to simulate refreshing a browser window
   elmish.mount(5, update, view, id); // 5 ignored! read model from localStorage
   // clearing DOM does NOT clear the localStorage (this is desired behaviour!)
-  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 8,
-    "elmish_store still 8 from increment (above) saved in localStorage");
-  localStorage.removeItem('elmish_' + id);
+  t.equal(JSON.parse(localStorage.getItem('todos-elmish_' + id)), 8,
+    "todos-elmish_store still 8 from increment (above) saved in localStorage");
+  localStorage.removeItem('todos-elmish_' + id);
   t.end()
 });
 
@@ -463,22 +463,22 @@ test('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
   // counter starts off at 0 (zero):
   t.equal(parseInt(document.getElementById('count') // always fresh DOM node!
     .textContent, 10), 0, "Count is 0 (Zero) at start.");
-  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 0,
-    "elmish_store is 0 (as expected). initial state saved to localStorage.");
+  t.equal(JSON.parse(localStorage.getItem('todos-elmish_' + id)), 0,
+    "todos-elmish_store is 0 (as expected). initial state saved to localStorage.");
 
   // trigger the [↑] (up) keyboard key to increment the counter:
   document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 38})); // up
   t.equal(parseInt(document.getElementById('count')
     .textContent, 10), 1, "Up key press increment 0 -> 1");
-  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 1,
-    "elmish_store 1 (as expected). incremented state saved to localStorage.");
+  t.equal(JSON.parse(localStorage.getItem('todos-elmish_' + id)), 1,
+    "todos-elmish_store 1 (as expected). incremented state saved to localStorage.");
 
   // trigger the [↓] (down) keyboard key to increment the counter:
   document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 40})); // down
   t.equal(parseInt(document.getElementById('count')
     .textContent, 10), 0, "Up key press dencrement 1 -> 0");
-  t.equal(JSON.parse(localStorage.getItem('elmish_' + id)), 0,
-    "elmish_store 0. keyboard down key decrement state saved to localStorage.");
+  t.equal(JSON.parse(localStorage.getItem('todos-elmish_' + id)), 0,
+    "todos-elmish_store 0. keyboard down key decrement state saved to localStorage.");
 
   // subscription keyCode trigger "branch" test (should NOT fire the signal):
   const clone = document.getElementById(id).cloneNode(true);
@@ -495,7 +495,7 @@ test('subscriptions test using counter-reset-keyaboard ⌨️', function (t) {
   const no_change = update(null, 7);
   t.equal(no_change, 7, "no change in model if action is unrecognised.");
 
-  localStorage.removeItem('elmish_' + id);
+  localStorage.removeItem('todos-elmish_' + id);
   elmish.empty(root);
   t.end()
 });
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 3dfc273a..e3e7bcab 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -240,7 +240,7 @@ global.localStorage = global.localStorage ? global.localStorage : {
    delete this[key]
  }
 }
-localStorage.removeItem('elmish_store');
+localStorage.removeItem('todos-elmish_store');
 
 test('2. New Todo, should allow me to add todo items', function (t) {
   elmish.empty(document.getElementById(id));
@@ -274,14 +274,14 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   t.equal('block', main_footer._values.display, "item added, show #footer");
 
   elmish.empty(document.getElementById(id)); // clear DOM ready for next test
-  localStorage.removeItem('elmish_' + id);
+  localStorage.removeItem('todos-elmish_' + id);
   t.end();
 });
 
 
 test('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
   elmish.empty(document.getElementById(id));
-  localStorage.removeItem('elmish_' + id);
+  localStorage.removeItem('todos-elmish_' + id);
   const model = {
     todos: [
       { id: 0, title: "Learn Elm Architecture", done: true },
@@ -334,13 +334,13 @@ test('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
     "complete all checkbox should update state when items are completed")
 
   elmish.empty(document.getElementById(id)); // clear DOM ready for next test
-  localStorage.removeItem('elmish_store');
+  localStorage.removeItem('todos-elmish_store');
   t.end();
 });
 
 test('4. Item: should allow me to mark items as complete', function (t) {
   elmish.empty(document.getElementById(id));
-  localStorage.removeItem('elmish_' + id);
+  localStorage.removeItem('todos-elmish_' + id);
   const model = {
     todos: [
       { id: 0, title: "Make something people want.", done: false }
@@ -370,7 +370,7 @@ test('4. Item: should allow me to mark items as complete', function (t) {
 
 test('4.1 DELETE item by clicking <button class="destroy">', function (t) {
   elmish.empty(document.getElementById(id));
-  localStorage.removeItem('elmish_' + id);
+  localStorage.removeItem('todos-elmish_' + id);
   const model = {
     todos: [
       { id: 0, title: "Make something people want.", done: false }
@@ -395,9 +395,9 @@ test('4.1 DELETE item by clicking <button class="destroy">', function (t) {
 });
 
 
-test.only('5. Editing: > Render an item in "editing mode"', function (t) {
+test('5. Editing: > Render an item in "editing mode"', function (t) {
   elmish.empty(document.getElementById(id));
-  localStorage.removeItem('elmish_' + id);
+  localStorage.removeItem('todos-elmish_' + id);
   const model = {
     todos: [
       { id: 0, title: "Make something people want.", done: false },
@@ -427,7 +427,7 @@ test.only('5. Editing: > Render an item in "editing mode"', function (t) {
 
 test.skip('5.1 Double-click an item <label> to edit it', function (t) {
   elmish.empty(document.getElementById(id));
-  localStorage.removeItem('elmish_' + id);
+  localStorage.removeItem('todos-elmish_' + id);
   const model = {
     todos: [
       { id: 0, title: "Make something people want.", done: false }

From c110c0caf1eb7747037689816574094b1c898287 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 6 Sep 2018 21:01:37 +0100
Subject: [PATCH 133/164] add model.editing to sample model in
 examples/todo-list/index.html to demo editing #60

---
 examples/todo-list/index.html | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
index 7f7a51a1..e7c6b14d 100644
--- a/examples/todo-list/index.html
+++ b/examples/todo-list/index.html
@@ -18,11 +18,12 @@
   <script>
     var model = {
       todos: [
-        // { id: 1, title: "Learn Elm Architecture", done: true },
-        // { id: 2, title: "Build Todo List App",    done: false },
-        // { id: 3, title: "Win the Internet!",      done: false }
+        // { id: 0, title: "Make something people want.", done: false },
+        // { id: 1, title: "Bootstrap for as long as you can", done: false },
+        // { id: 2, title: "Let's solve our own problem", done: false }
       ],
-      hash: '#/' // the "route" to display
+      hash: '#/', // the "route" to display
+      // editing: 2 // edit the 3rd todo list item (which has id == 2)
     };
     mount(model, update, view, 'app', subscriptions);
   </script>

From 1a89e35b60ffbcc1bd299be5bbd0b7d69984f6b8 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 6 Sep 2018 21:45:46 +0100
Subject: [PATCH 134/164] add code to to make EDIT case pass for #60

---
 edit-todo.md                   | 283 ++++++++++++++++++++++++++-------
 examples/todo-list/todo-app.js |  18 ++-
 test/todo-app.test.js          |  49 ++++++
 3 files changed, 284 insertions(+), 66 deletions(-)

diff --git a/edit-todo.md b/edit-todo.md
index 8f488f4b..c119668d 100644
--- a/edit-todo.md
+++ b/edit-todo.md
@@ -110,65 +110,8 @@ which we will cover in **section 5.5** below, but for now we are
 only considering the "happy path" which results in a successful edit._
 
 
-#### 5.1 Double-Click to Edit
-
-The TodoMVC ***spec*** for item
-https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
-includes the line:
-
-```sh
-Double-clicking the <label> activates editing mode, by toggling the .editing class on its <li>
-```
-
-> _**Note**: the sample TodoMVC Browser Tests:
-https://github.com/tastejs/todomvc/tree/master/tests#example-output
-does **not** include a test-case for **double-clicking**.
-We are going to add one below for "extra credit"._
-
-Since Double-clicking/tapping is the _only_ way to edit a todo item,
-we feel that it deserves a test.
-
-When we don't know how to do something, a good place to start is to search
-for the keywords we want, e.g: "JavaScript detect double-click event"
-for which the top result is the following StackOverflow Q/A:
-https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event
-Reading though all the answers, we determine that the most relevant (_to us_)
-is: https://stackoverflow.com/a/16033129/1148249 (_which uses "vanilla" JS_)
-
-[![stackoverflow-double-click-example](https://user-images.githubusercontent.com/194400/45124122-14942f80-b161-11e8-94c0-f54f2352bdd5.png)](https://stackoverflow.com/a/16033129/1148249)
-
->_**Note**: when you find a StackOverflow question/answer **helpful, upvote**!_
-
-```html
-<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
-<script>
-  function doubleclick(el, onsingle, ondouble) {
-    if (el.getAttribute("data-dblclick") == null) {
-      el.setAttribute("data-dblclick", 1);
-      setTimeout(function () {
-        if (el.getAttribute("data-dblclick") == 1) {
-          onsingle();
-        }
-        el.removeAttribute("data-dblclick");
-      }, 300);
-    } else {
-      el.removeAttribute("data-dblclick");
-      ondouble();
-    }
-  }
-</script>
-```
-Given that we are using the Elm Architecture to manage the DOM,
-we don't want a function that _alters_ the DOM.
-So we are going to _borrow_ the _logic_ from this example but _simplify_ it.
-Since we are not mutating the DOM by setting `data-dblclick` attributes,
-we won't need to remove the attribute using a `setTimeout`,
-
-
-
 
-
-#### 5.2 `render_item` view function with "Edit Mode" `<input class="edit">`
+#### 5.1 `render_item` view function with "Edit Mode" `<input class="edit">`
 
 In order to edit an item the **`render_item`** function
 will require **3 modifications**:
@@ -393,3 +336,227 @@ node test/todo-app.test.js
 But we are building a _visual_ application and are not _seeing_ anything ...
 
 #### Visualise Editing Mode?
+
+Let's take a _brief_ detour to _visualise_ the progress we have made.
+
+Open the `examples/todo-list/index.html` file
+and alter the contents of the `<script>` tag:
+```html
+<script>
+  var model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: false },
+      { id: 2, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 2 // edit the 3rd todo list item (which has id == 2)
+  };
+  mount(model, update, view, 'app', subscriptions);
+</script>
+```
+
+Then in your terminal, start the live-server:
+```sh
+npm start
+```
+In your browser, vist: http://127.0.0.1:8000/examples/todo-list/
+You should see that the _third_ todo list item is in "edit mode".
+![elm-todomvc-editing-item](https://user-images.githubusercontent.com/194400/45180706-0eab5680-b214-11e8-9dcf-a8c4476e4b11.png)
+
+Nothing will happen (_yet_) if you attempt to "save" any changes.
+Let's work on the `case` (_handler_) for **`signal('EDIT', item.id)`**
+which will handle the "double-click" event and set `model.editing`.
+
+
+#### 5.2 Double-Click item `<label>` to Edit
+
+The TodoMVC ***spec*** for item
+https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
+includes the line:
+
+```sh
+Double-clicking the <label> activates editing mode, by toggling the .editing class on its <li>
+```
+
+> _**Note**: the sample TodoMVC Browser Tests:
+https://github.com/tastejs/todomvc/tree/master/tests#example-output
+does **not** include a test-case for **double-clicking**.
+We are going to add one below for "extra credit"._
+
+Since Double-clicking/tapping is the _only_ way to edit a todo item,
+we feel that it deserves a test.
+
+When we don't know how to do something, a good place to start is to search
+for the keywords we want, e.g: "JavaScript detect double-click event"
+for which the top result is the following StackOverflow Q/A:
+https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event
+Reading though all the answers, we determine that the most relevant (_to us_)
+is: https://stackoverflow.com/a/16033129/1148249 (_which uses "vanilla" JS_)
+
+[![stackoverflow-double-click-example](https://user-images.githubusercontent.com/194400/45124122-14942f80-b161-11e8-94c0-f54f2352bdd5.png)](https://stackoverflow.com/a/16033129/1148249)
+
+>_**Note**: when you find a StackOverflow question/answer **helpful, upvote**!_
+
+```html
+<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
+<script>
+  function doubleclick(el, onsingle, ondouble) {
+    if (el.getAttribute("data-dblclick") == null) {
+      el.setAttribute("data-dblclick", 1);
+      setTimeout(function () {
+        if (el.getAttribute("data-dblclick") == 1) {
+          onsingle();
+        }
+        el.removeAttribute("data-dblclick");
+      }, 300);
+    } else {
+      el.removeAttribute("data-dblclick");
+      ondouble();
+    }
+  }
+</script>
+```
+Given that we are using the Elm Architecture to manage the DOM,
+we don't want a function that _alters_ the DOM.
+So we are going to _borrow_ the _logic_ from this example but _simplify_ it.
+Since we are not mutating the DOM by setting `data-dblclick` attributes,
+we won't need to remove the attribute using a `setTimeout`,
+
+
+### 5.2 `'EDIT' update case` _Test_
+
+In keeping with our TDD approach,
+our first step when adding the `case` expression
+for `'EDIT'` in the `update` function is to write a _test_.
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('5.2 Double-click an item <label> to edit it', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  const label = document.querySelectorAll('.view > label')[1]
+  // "double-click" i.e. click the <label> twice in quick succession:
+  label.click();
+  label.click();
+  // confirm that we are now in editing mode:
+  t.equal(document.querySelectorAll('.editing').length, 1,
+    "<li class='editing'> element is visible");
+  t.equal(document.querySelectorAll('.edit')[0].value, model.todos[1].title,
+    "<input class='edit'> has value: " + model.todos[1].title);
+  t.end();
+});
+```
+If you attempt to run this test: `node test/todo-app.test.js`
+you will see output similar to the following:
+
+![edit-double-click-test-failing](https://user-images.githubusercontent.com/194400/45183202-54b7e880-b21b-11e8-84d8-7b3b50162113.png)
+
+Let's write the code necessary to make the test assertions _pass_!
+If you want to try this yourself based on the StackOverflow answer (_above_),
+go for it! (_don't scroll down to the "answer" till you have tried..._)
+
+### 5.2 `'EDIT' update case` _Implementation_
+
+Given our "research" (_above_) of how to implement a "double-click" handler,
+we can write the `'EDIT'` case as the following:
+
+```js
+case 'EDIT':
+  // this code is inspired by: https://stackoverflow.com/a/16033129/1148249
+  // simplified as we are not altering the DOM!
+  if (new_model.clicked && new_model.clicked === data &&
+    Date.now() - 300 < new_model.click_time ) { // DOUBLE-CLICK < 300ms
+      new_model.editing = data;
+      console.log('DOUBLE-CLICK', "item.id=", data,
+      "| model.editing=", model.editing,
+      "| diff Date.now() - new_model.click_time: ",
+      Date.now(), "-", new_model.click_time, "=",
+      Date.now() - new_model.click_time);
+  }
+  else { // first click
+    new_model.clicked = data; // so we can check if same item clicked twice!
+    new_model.click_time = Date.now(); // timer to detect double-click 300ms
+    new_model.editing = false; // reset
+    console.log('FIRST CLICK! data:', data);
+  }
+  break;
+```
+If you ignore/remove the `console.log` lines (_which we are using for now!_),
+the code is only a few lines long:
+```js
+case 'EDIT':
+  // this code is inspired by: https://stackoverflow.com/a/16033129/1148249
+  // simplified as we are not altering the DOM!
+  if (new_model.clicked && new_model.clicked === data &&
+    Date.now() - 300 < new_model.click_time ) { // DOUBLE-CLICK < 300ms
+      new_model.editing = data;
+  }
+  else { // first click
+    new_model.clicked = data; // so we can check if same item clicked twice!
+    new_model.click_time = Date.now(); // timer to detect double-click 300ms
+    new_model.editing = false; // reset
+  }
+  break;
+```
+The main "purpose" of this code is to _detect_ if a `<label>` was clicked
+twice in the space of 300 milliseconds and apply the `item.id` to
+the `model.editing` property so that we know which `<li>` to render in
+"editing mode".
+
+Run the test and watch it _pass_: `node test/todo-app.test.js`
+![edit-double-click-test-pass](https://user-images.githubusercontent.com/194400/45183878-3bb03700-b21d-11e8-9842-be62113bfe0a.png)
+
+In this case the time between the two clicks was 31 milliseconds,
+so they will count as a "double-click"!
+
+
+If a `<label>` is clicked slowly, the `model.editing` will _not_ be set,
+and we will _not_ enter "editing mode".
+Let's add a quick test for the scenario
+where two clicks are more than 300ms apart.
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('5.2.2 Slow clicks do not count as double-click > no edit!', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  const label = document.querySelectorAll('.view > label')[1]
+  // "double-click" i.e. click the <label> twice in quick succession:
+  label.click();
+  setTimeout(function (){
+    label.click();
+    // confirm that we are now in editing mode:
+    t.equal(document.querySelectorAll('.editing').length, 0,
+      "<li class='editing'> element is NOT visible");
+    t.end();
+  }, 301)
+});
+```
+
+There is no need to write any code to make this test pass,
+this is merely an additional test to _confirm_ that our check for the
+time between clicks works; clicks spaced more than 300ms will not count
+as "double-click".
+
+![edit-item-not-double-click](https://user-images.githubusercontent.com/194400/45184155-ff310b00-b21d-11e8-8f6c-ef6d699861cf.png)
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index a0d245bc..41e4a3d3 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -62,18 +62,20 @@ function update(action, model, data) {
     case 'EDIT':
       // this code is inspired by: https://stackoverflow.com/a/16033129/1148249
       // simplified as we are not altering the DOM!
-      console.log('EDIT', data, model.editing, new_model.click_time, Date.now());
-
       if (new_model.clicked && new_model.clicked === data &&
-        Date.now() - 300 < new_model.click_time ) { // DOUBLE CLICK is faster than 300ms
+        Date.now() - 300 < new_model.click_time ) { // DOUBLE-CLICK < 300ms
           new_model.editing = data;
-          console.log('DOUBLE CLICK', data);
+          console.log('DOUBLE-CLICK', "item.id=", data,
+          "| model.editing=", model.editing,
+          "| diff Date.now() - new_model.click_time: ",
+          Date.now(), "-", new_model.click_time, "=",
+          Date.now() - new_model.click_time);
       }
       else { // first click
-        new_model.clicked = data;
-        new_model.click_time = Date.now()
-        new_model.editing = false;
-        console.log('FIRST CLICK', data);
+        new_model.clicked = data; // so we can check if same item clicked twice!
+        new_model.click_time = Date.now(); // timer to detect double-click 300ms
+        new_model.editing = false; // reset
+        console.log('FIRST CLICK! data:', data);
       }
       break;
     case 'SAVE':
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index e3e7bcab..7f8209b1 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -425,6 +425,55 @@ test('5. Editing: > Render an item in "editing mode"', function (t) {
   t.end();
 });
 
+test('5.2 Double-click an item <label> to edit it', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  const label = document.querySelectorAll('.view > label')[1]
+  // "double-click" i.e. click the <label> twice in quick succession:
+  label.click();
+  label.click();
+  // confirm that we are now in editing mode:
+  t.equal(document.querySelectorAll('.editing').length, 1,
+    "<li class='editing'> element is visible");
+  t.equal(document.querySelectorAll('.edit')[0].value, model.todos[1].title,
+    "<input class='edit'> has value: " + model.todos[1].title);
+  t.end();
+});
+
+test('5.2.2 Slow clicks do not count as double-click > no edit!', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  const label = document.querySelectorAll('.view > label')[1]
+  // "double-click" i.e. click the <label> twice in quick succession:
+  label.click();
+  setTimeout(function (){
+    label.click();
+    // confirm that we are now in editing mode:
+    t.equal(document.querySelectorAll('.editing').length, 0,
+      "<li class='editing'> element is NOT visible");
+    t.end();
+  }, 301)
+});
+
+
 test.skip('5.1 Double-click an item <label> to edit it', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('todos-elmish_' + id);

From 2968cd85716fdb051edda0c6370fc53b7c5c2974 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 6 Sep 2018 23:09:49 +0100
Subject: [PATCH 135/164] add test for [ENTER] key in edit mode to SAVE revised
 todo item title #60

---
 edit-todo.md                   | 44 +++++++++++++++++++++++++++++++++-
 examples/todo-list/todo-app.js | 12 +++-------
 test/todo-app.test.js          | 31 ++++++++++++------------
 3 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/edit-todo.md b/edit-todo.md
index c119668d..2c0cecd4 100644
--- a/edit-todo.md
+++ b/edit-todo.md
@@ -369,7 +369,7 @@ Let's work on the `case` (_handler_) for **`signal('EDIT', item.id)`**
 which will handle the "double-click" event and set `model.editing`.
 
 
-#### 5.2 Double-Click item `<label>` to Edit
+### 5.2 Double-Click item `<label>` to Edit
 
 The TodoMVC ***spec*** for item
 https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
@@ -560,3 +560,45 @@ time between clicks works; clicks spaced more than 300ms will not count
 as "double-click".
 
 ![edit-item-not-double-click](https://user-images.githubusercontent.com/194400/45184155-ff310b00-b21d-11e8-8f6c-ef6d699861cf.png)
+
+
+### 5.3 `'SAVE'` a Revised Todo Item Title after Editing it
+
+
+
+
+
+### 5.3 `'SAVE' update case` _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 1 // edit the 3rd todo list item (which has id == 2)
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // change the
+  const updated_title = "Do things that don\'t scale!"
+  // apply the updated_title to the <input class="edit">:
+  document.querySelectorAll('.edit')[0].value = updated_title;
+  // trigger the [Enter] keyboard key to ADD the new todo:
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
+  // confirm that the todo item title was updated to the updated_title
+  const label = document.querySelectorAll('.view > label')[1].textContent;
+  t.equal(label, updated_title, "item title updated to:" + updated_title)
+  t.end();
+});
+```
+If you attempt to run this test: `node test/todo-app.test.js`
+you will see output similar to the following:
+
+![edit-double-click-test-failing](https://user-images.githubusercontent.com/194400/45183202-54b7e880-b21b-11e8-84d8-7b3b50162113.png)
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 41e4a3d3..21729abe 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -103,11 +103,6 @@ function update(action, model, data) {
   return new_model;
 }
 
-function edit_item (item, model, signal) {
-  return [
-    ,
-  ]
-}
 
 
 /**
@@ -291,7 +286,6 @@ function subscriptions (signal) {
       case ENTER_KEY:
         var editing = document.getElementsByClassName('editing');
         if (editing && editing.length > 0) {
-          console.log('editing:', editing);
           signal('SAVE')(); // invoke singal inner callback
         }
 
@@ -302,9 +296,9 @@ function subscriptions (signal) {
           document.getElementById('new-todo').focus();
         }
         break;
-      case ESCAPE_KEY:
-
-        break;
+      // case ESCAPE_KEY: // COMING SOON!
+      //
+      //   break;
     }
   });
 }
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 7f8209b1..6a89ea1f 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -395,7 +395,7 @@ test('4.1 DELETE item by clicking <button class="destroy">', function (t) {
 });
 
 
-test('5. Editing: > Render an item in "editing mode"', function (t) {
+test('5.1 Editing: > Render an item in "editing mode"', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('todos-elmish_' + id);
   const model = {
@@ -474,28 +474,27 @@ test('5.2.2 Slow clicks do not count as double-click > no edit!', function (t) {
 });
 
 
-test.skip('5.1 Double-click an item <label> to edit it', function (t) {
+test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('todos-elmish_' + id);
   const model = {
     todos: [
-      { id: 0, title: "Make something people want.", done: false }
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
     ],
-    hash: '#/' // the "route" to display
+    hash: '#/', // the "route" to display
+    editing: 1 // edit the 3rd todo list item (which has id == 2)
   };
   // render the view and append it to the DOM inside the `test-app` node:
   elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  // const todo_count = ;
-  t.equal(document.querySelectorAll('.destroy').length, 1, "one destroy button")
-
-  const item = document.getElementById('0')
-  t.equal(item.textContent, model.todos[0].title, 'Item contained in DOM.');
-  // DELETE the item by clicking on the <button class="destroy">:
-  const button = item.querySelectorAll('button.destroy')[0];
-  button.click()
-  // confirm that there is no loger a <button class="destroy">
-  t.equal(document.querySelectorAll('button.destroy').length, 0,
-    'there is no loger a <button class="destroy"> as the only item was DELETEd')
-  t.equal(document.getElementById('0'), null, 'todo item successfully DELETEd');
+  // change the
+  const updated_title = "Do things that don\'t scale!"
+  // apply the updated_title to the <input class="edit">:
+  document.querySelectorAll('.edit')[0].value = updated_title;
+  // trigger the [Enter] keyboard key to ADD the new todo:
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
+  // confirm that the todo item title was updated to the updated_title:
+  const label = document.querySelectorAll('.view > label')[1].textContent;
+  t.equal(label, updated_title, "item title updated to:" + updated_title)
   t.end();
 });

From c8098e9b392f88e5f811c1dd48026c4308d33f50 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 6 Sep 2018 23:24:36 +0100
Subject: [PATCH 136/164] add SAVE todo item title edit implementation for #60

---
 edit-todo.md                   | 84 ++++++++++++++++++++++++++++++++--
 examples/todo-list/todo-app.js |  2 +-
 test/todo-app.test.js          |  7 +--
 3 files changed, 85 insertions(+), 8 deletions(-)

diff --git a/edit-todo.md b/edit-todo.md
index 2c0cecd4..87a836a9 100644
--- a/edit-todo.md
+++ b/edit-todo.md
@@ -587,18 +587,94 @@ test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
   // render the view and append it to the DOM inside the `test-app` node:
   elmish.mount(model, app.update, app.view, id, app.subscriptions);
   // change the
-  const updated_title = "Do things that don\'t scale!"
+  const updated_title = "Do things that don\'t scale!  "
   // apply the updated_title to the <input class="edit">:
   document.querySelectorAll('.edit')[0].value = updated_title;
   // trigger the [Enter] keyboard key to ADD the new todo:
   document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
-  // confirm that the todo item title was updated to the updated_title
+  // confirm that the todo item title was updated to the updated_title:
   const label = document.querySelectorAll('.view > label')[1].textContent;
-  t.equal(label, updated_title, "item title updated to:" + updated_title)
+  t.equal(label, updated_title.trim(),
+      "item title updated to:" + updated_title + ' (trimmed)');
   t.end();
 });
 ```
 If you attempt to run this test: `node test/todo-app.test.js`
 you will see output similar to the following:
 
-![edit-double-click-test-failing](https://user-images.githubusercontent.com/194400/45183202-54b7e880-b21b-11e8-84d8-7b3b50162113.png)
+![save-edit-test-fails](https://user-images.githubusercontent.com/194400/45187886-2c83b600-b22a-11e8-8782-6d3fcaa240df.png)
+
+
+### 5.3 `'SAVE' update case` _Implementation_
+
+The _first_ step in the implementation is to create the `'SAVE'` case
+in `update` function:
+
+```js
+case 'SAVE':
+  var edit = document.getElementsByClassName('edit')[0];
+  var value = edit.value;
+  var id = parseInt(edit.id, 10);
+  // End Editing
+  new_model.clicked = false;
+  new_model.editing = false;
+
+  if (!value || value.length === 0) { // delete item if title is blank:
+    return update('DELETE', new_model, id);
+  }
+  // update the value of the item.title that has been edited:
+  new_model.todos = new_model.todos.map(function (item) {
+    if (item.id === id && value && value.length > 0) {
+      item.title = value.trim();
+    }
+    return item; // return all todo items.
+  });
+  break;
+```
+
+The _second_ step is _triggering_ this `case` in the `subscriptions`
+event listener for `keyup`:
+
+_Before_:
+
+```js
+document.addEventListener('keyup', function handler (e) {
+  switch(e.keyCode) {
+    case ENTER_KEY:
+      var new_todo = document.getElementById('new-todo');
+      if(new_todo.value.length > 0) {
+        signal('ADD')(); // invoke singal inner callback
+        new_todo.value = ''; // reset <input> so we can add another todo
+        document.getElementById('new-todo').focus();
+      }
+      break;
+  }
+});
+```
+
+
+_After_:
+
+```js
+document.addEventListener('keyup', function handler (e) {
+  switch(e.keyCode) {
+    case ENTER_KEY:
+      var editing = document.getElementsByClassName('editing');
+      if (editing && editing.length > 0) {
+        signal('SAVE')(); // invoke singal inner callback
+      }
+
+      var new_todo = document.getElementById('new-todo');
+      if(new_todo.value.length > 0) {
+        signal('ADD')(); // invoke singal inner callback
+        new_todo.value = ''; // reset <input> so we can add another todo
+        document.getElementById('new-todo').focus();
+      }
+      break;
+  }
+});
+```
+
+When you run the tests: `node test/todo-app.test.js`
+they should now _pass_:
+![save-update-test-pass](https://user-images.githubusercontent.com/194400/45188350-d879d100-b22b-11e8-8669-94e080a25ef7.png)
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 21729abe..6520055b 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -79,7 +79,7 @@ function update(action, model, data) {
       }
       break;
     case 'SAVE':
-      var edit = document.querySelectorAll('.edit')[0];
+      var edit = document.getElementsByClassName('edit')[0];
       var value = edit.value;
       var id = parseInt(edit.id, 10);
       // End Editing
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 6a89ea1f..a954d640 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -474,7 +474,7 @@ test('5.2.2 Slow clicks do not count as double-click > no edit!', function (t) {
 });
 
 
-test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
+test('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('todos-elmish_' + id);
   const model = {
@@ -488,13 +488,14 @@ test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
   // render the view and append it to the DOM inside the `test-app` node:
   elmish.mount(model, app.update, app.view, id, app.subscriptions);
   // change the
-  const updated_title = "Do things that don\'t scale!"
+  const updated_title = "Do things that don\'t scale!  "
   // apply the updated_title to the <input class="edit">:
   document.querySelectorAll('.edit')[0].value = updated_title;
   // trigger the [Enter] keyboard key to ADD the new todo:
   document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
   // confirm that the todo item title was updated to the updated_title:
   const label = document.querySelectorAll('.view > label')[1].textContent;
-  t.equal(label, updated_title, "item title updated to:" + updated_title)
+  t.equal(label, updated_title.trim(),
+      "item title updated to:" + updated_title + ' (trimmed)');
   t.end();
 });

From eec3642ace75bae902a61940afc7ccfe758929fe Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 6 Sep 2018 23:35:07 +0100
Subject: [PATCH 137/164] add test for SAVE *blank* todo title > should delete
 item for #60

---
 test/todo-app.test.js | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index a954d640..595e50c6 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -499,3 +499,27 @@ test('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
       "item title updated to:" + updated_title + ' (trimmed)');
   t.end();
 });
+
+test('5.4 SAVE should remove the item if an empty text string was entered',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 1 // edit the 3rd todo list item (which has id == 2)
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 2, 'todo count: 2');
+  // apply empty string to the <input class="edit">:
+  document.querySelectorAll('.edit')[0].value = '';
+  // trigger the [Enter] keyboard key to ADD the new todo:
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
+  // confirm that the todo item was removed!
+  t.equal(document.querySelectorAll('.view').length, 1, 'todo count: 1');
+  t.end();
+});

From 0887ba84c02a7de6c09ba5b0bf67fb051dbca648 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Thu, 6 Sep 2018 23:35:30 +0100
Subject: [PATCH 138/164] add implementation for SAVE *blank* item title >
 deletes item. #60

---
 edit-todo.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 54 insertions(+)

diff --git a/edit-todo.md b/edit-todo.md
index 87a836a9..367ca4a6 100644
--- a/edit-todo.md
+++ b/edit-todo.md
@@ -678,3 +678,57 @@ document.addEventListener('keyup', function handler (e) {
 When you run the tests: `node test/todo-app.test.js`
 they should now _pass_:
 ![save-update-test-pass](https://user-images.githubusercontent.com/194400/45188350-d879d100-b22b-11e8-8669-94e080a25ef7.png)
+
+
+### 5.4 `'SAVE'` _blank_ item title _deletes_ item _Test_
+
+
+```
+✓ should remove the item if an empty text string was entered (1033ms)
+```
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('5.4 SAVE should remove the item if an empty text string was entered',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 1 // edit the 3rd todo list item (which has id == 2)
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 2, 'todo count: 2');
+  // apply empty string to the <input class="edit">:
+  document.querySelectorAll('.edit')[0].value = '';
+  // trigger the [Enter] keyboard key to ADD the new todo:
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
+  // confirm that the todo item was removed!
+  t.equal(document.querySelectorAll('.view').length, 1, 'todo count: 1');
+  t.end();
+});
+```
+If you attempt to run this test: `node test/todo-app.test.js`
+you will see output similar to the following:
+
+![save-blank-title-test-failing](https://user-images.githubusercontent.com/194400/45188593-e4b25e00-b22c-11e8-9623-26c8b017e9b1.png)
+
+### 5.4 `'SAVE'` _blank_ item title _deletes_ item _Implementation_
+
+To make this test pass we just need to add a couple of lines to the
+`'SAVE'` case in the `update` function:
+
+```js
+if (!value || value.length === 0) { // delete item if title is blank:
+  return update('DELETE', new_model, id);
+}
+```
+
+when you re-run the tests, they will pass:
+![save-blank-title-test-pass](https://user-images.githubusercontent.com/194400/45188666-41ae1400-b22d-11e8-8154-176b5aaaea42.png)

From 4fdb0985df33820fba8081e30b404bc08961cac5 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 00:00:24 +0100
Subject: [PATCH 139/164] add test for [esc] CANCEL ediing for #64

---
 test/todo-app.test.js | 25 +++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 595e50c6..cfb6a086 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -523,3 +523,28 @@ test('5.4 SAVE should remove the item if an empty text string was entered',
   t.equal(document.querySelectorAll('.view').length, 1, 'todo count: 1');
   t.end();
 });
+
+test.only('5.5 CANCEL should cancel edits on escape', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 1 // edit the 3rd todo list item (which has id == 2)
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view > label')[1].textContent,
+    model.todos[1].title, 'todo id 1 has title: ' + model.todos[1].title);
+  // apply empty string to the <input class="edit">:
+  document.querySelectorAll('.edit')[0].value = 'Hello World';
+  // trigger the [esc] keyboard key to CANCEL editing
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 27}));
+  // confirm the item.title is still the original title:
+  t.equal(document.querySelectorAll('.view > label')[1].textContent,
+      model.todos[1].title, 'todo id 1 has title: ' + model.todos[1].title);
+  t.end();
+});

From d812e6c53efdb342da23f2a08571976d87c4abba Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 00:01:28 +0100
Subject: [PATCH 140/164] add implementation for [esc] CANCEL editing fixes #64

---
 edit-todo.md                   | 116 ++++++++++++++++++++++++++++++++-
 examples/todo-list/todo-app.js |  12 ++--
 2 files changed, 122 insertions(+), 6 deletions(-)

diff --git a/edit-todo.md b/edit-todo.md
index 367ca4a6..a6e8f5e1 100644
--- a/edit-todo.md
+++ b/edit-todo.md
@@ -680,8 +680,9 @@ they should now _pass_:
 ![save-update-test-pass](https://user-images.githubusercontent.com/194400/45188350-d879d100-b22b-11e8-8669-94e080a25ef7.png)
 
 
-### 5.4 `'SAVE'` _blank_ item title _deletes_ item _Test_
+### 5.4 `'SAVE'` _Blank_ item.title _deletes_ item _Test_
 
+Our mini-mission is to make the following TodoMVC test assertion _pass_:
 
 ```
 ✓ should remove the item if an empty text string was entered (1033ms)
@@ -719,7 +720,7 @@ you will see output similar to the following:
 
 ![save-blank-title-test-failing](https://user-images.githubusercontent.com/194400/45188593-e4b25e00-b22c-11e8-9623-26c8b017e9b1.png)
 
-### 5.4 `'SAVE'` _blank_ item title _deletes_ item _Implementation_
+### 5.4 `'SAVE'` _Blank_ item.title _deletes_ item _Implementation_
 
 To make this test pass we just need to add a couple of lines to the
 `'SAVE'` case in the `update` function:
@@ -732,3 +733,114 @@ if (!value || value.length === 0) { // delete item if title is blank:
 
 when you re-run the tests, they will pass:
 ![save-blank-title-test-pass](https://user-images.githubusercontent.com/194400/45188666-41ae1400-b22d-11e8-8154-176b5aaaea42.png)
+
+### 5.5 `'CANCEL'` edit on [esc] Key Press
+
+When a user presses the [esc] ("escape") key, editing should be "cancelled"
+without saving the changes:
+
+```
+✓ should cancel edits on escape
+```
+
+#### 5.5 `'CANCEL'` edit on [esc] _Test_
+
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('5.5 CANCEL should cancel edits on escape', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 1 // edit the 3rd todo list item (which has id == 2)
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view > label')[1].value,
+    model.todos[1].title, 'todo id 1 has title: ' + model.todos[1].title);
+  // apply empty string to the <input class="edit">:
+  document.querySelectorAll('.edit')[0].value = 'Hello World';
+  // trigger the [esc] keyboard key to CANCEL editing
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 27}));
+  // confirm the item.title is still the original title:
+  t.equal(document.querySelectorAll('.view > label')[1].value,
+      model.todos[1].title, 'todo id 1 has title: ' + model.todos[1].title);
+  t.end();
+});
+```
+If you attempt to run this test: `node test/todo-app.test.js`
+it should fail.
+
+### 5.5 `'CANCEL'` edit on [esc] _Implementation_
+
+To make this test pass we _first_ need to add a `'CANCEL'`
+`case` to the `update` function:
+
+```js
+case 'CANCEL':
+  new_model.clicked = false;
+  new_model.editing = false;
+  break;
+```
+_Second_ we need to _trigger_ the `'CANCEL'` action
+when the `[esc]` key is pressed, so we need to add a `case`
+to the `switch(e.keyCode) {` in the subscriptions event listener:
+
+_Before_:
+
+```js
+document.addEventListener('keyup', function handler (e) {
+switch(e.keyCode) {
+  case ENTER_KEY:
+    var editing = document.getElementsByClassName('editing');
+    if (editing && editing.length > 0) {
+      signal('SAVE')(); // invoke singal inner callback
+    }
+
+    var new_todo = document.getElementById('new-todo');
+    if(new_todo.value.length > 0) {
+      signal('ADD')(); // invoke singal inner callback
+      new_todo.value = ''; // reset <input> so we can add another todo
+      document.getElementById('new-todo').focus();
+    }
+    break;
+}
+});
+```
+
+
+_After_:
+
+```js
+document.addEventListener('keyup', function handler (e) {
+  console.log('e.keyCode:', e.keyCode, '| key:', e.key);
+
+  switch(e.keyCode) {
+    case ENTER_KEY:
+      var editing = document.getElementsByClassName('editing');
+      if (editing && editing.length > 0) {
+        signal('SAVE')(); // invoke singal inner callback
+      }
+
+      var new_todo = document.getElementById('new-todo');
+      if(new_todo.value.length > 0) {
+        signal('ADD')(); // invoke singal inner callback
+        new_todo.value = ''; // reset <input> so we can add another todo
+        document.getElementById('new-todo').focus();
+      }
+      break;
+    case ESCAPE_KEY:
+      signal('CANCEL')();
+      break;
+  }
+});
+```
+
+when you re-run the tests, they will pass:
+![cancel-editing-on-esc-keypress-test-passing](https://user-images.githubusercontent.com/194400/45189286-15e05d80-b230-11e8-938c-4df80e49fda9.png)
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 6520055b..24b10812 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -97,6 +97,10 @@ function update(action, model, data) {
         return item; // return all todo items.
       });
       break;
+    case 'CANCEL':
+      new_model.clicked = false;
+      new_model.editing = false;
+      break;
     default: // if action unrecognised or undefined,
       return model; // return model unmodified
   }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
@@ -280,7 +284,7 @@ function subscriptions (signal) {
 	var ESCAPE_KEY = 27; // used for "escaping" when editing a Todo item
 
   document.addEventListener('keyup', function handler (e) {
-    console.log('e.keyCode:', e.keyCode, '| key:', e.key);
+    // console.log('e.keyCode:', e.keyCode, '| key:', e.key);
 
     switch(e.keyCode) {
       case ENTER_KEY:
@@ -296,9 +300,9 @@ function subscriptions (signal) {
           document.getElementById('new-todo').focus();
         }
         break;
-      // case ESCAPE_KEY: // COMING SOON!
-      //
-      //   break;
+      case ESCAPE_KEY:
+        signal('CANCEL')();
+        break;
     }
   });
 }

From e367ce8dcb733eefde560e60cb463c9043e5cb44 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 00:02:07 +0100
Subject: [PATCH 141/164] remove test.only ... derp!

---
 test/todo-app.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index cfb6a086..ebb21640 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -524,7 +524,7 @@ test('5.4 SAVE should remove the item if an empty text string was entered',
   t.end();
 });
 
-test.only('5.5 CANCEL should cancel edits on escape', function (t) {
+test('5.5 CANCEL should cancel edits on escape', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('todos-elmish_' + id);
   const model = {

From c40a583c6e87484866b67b86747dd6b6ab2894da Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 01:12:52 +0100
Subject: [PATCH 142/164] add tests for 6, 7 & 8 for #48 (shift up a gear! time
 to get this done!!)

---
 edit-todo.md                   | 194 +++++++++++++++++++++++++++++++++
 examples/todo-list/todo-app.js |  15 ++-
 test/todo-app.test.js          |  84 +++++++++++++-
 todo-list.md                   |   2 +-
 4 files changed, 291 insertions(+), 4 deletions(-)

diff --git a/edit-todo.md b/edit-todo.md
index a6e8f5e1..6f746949 100644
--- a/edit-todo.md
+++ b/edit-todo.md
@@ -844,3 +844,197 @@ document.addEventListener('keyup', function handler (e) {
 
 when you re-run the tests, they will pass:
 ![cancel-editing-on-esc-keypress-test-passing](https://user-images.githubusercontent.com/194400/45189286-15e05d80-b230-11e8-938c-4df80e49fda9.png)
+
+### 6. Counter
+
+```
+✓ should display the current number of todo items
+```
+
+#### 6. Counter _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('6. Counter > should display the current number of todo items',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: false },
+      { id: 2, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/'
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // count:
+  const count = parseInt(document.getElementById('count').textContent, 10);
+  t.equal(count, model.todos.length, "displays todo item count: " + count);
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});
+```
+
+Thankfully, the counter was already implemented above
+so this test **_already_ passes**:
+
+![counter-test-passing](https://user-images.githubusercontent.com/194400/45190621-ca7d7d80-b236-11e8-92b3-5a4fbda6f12a.png)
+
+Just keep on [_movin_'](https://youtu.be/uvRBUw_Ls2o)
+
+
+### 7. Clear Completed Button
+
+When items are complete we should be able to `delete` them in bulk.
+
+```
+✓ should display the number of completed items
+✓ should remove completed items when clicked
+✓ should be hidden when there are no items that are completed
+```
+
+#### 7. Clear Completed Button _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('7. Clear Completed > should display the number of completed items',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: true },
+      { id: 2, title: "Let's solve our own problem", done: true }
+    ],
+    hash: '#/'
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // count todo items in DOM:
+  t.equal(document.querySelectorAll('.view').length, 3,
+    "at the start, there are 3 todo items in the DOM.");
+
+  // count completed items
+  const completed_count =
+    parseInt(document.getElementById('completed-count').textContent, 10);
+  const done_count = model.todos.filter(function(i) {return i.done }).length;
+  t.equal(completed_count, done_count,
+    "displays completed items count: " + completed_count);
+
+  // clear completed items:
+  const button = document.querySelectorAll('.clear-completed')[0];
+  button.click();
+
+  // confirm that there is now only ONE todo list item in the DOM:
+  t.equal(document.querySelectorAll('.view').length, 1,
+    "after clearing completed items, there is only 1 todo item in the DOM.");
+
+  // no clear completed button in the DOM when there are no "done" todo items:
+  t.equal(document.querySelectorAll('clear-completed').length, 0,
+    'no clear-completed button when there are no done items.')
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});
+```
+
+#### 7. Clear Completed Button _Implementation_
+
+First we need to update the `button` section in the `render_footer` function
+to include the `done` count:
+
+_Before:_
+
+```js
+button(["class=clear-completed", "style=display:" + display_clear],
+  [
+    text("Clear completed")
+  ]
+)
+```
+
+_After:_
+
+```js
+button(["class=clear-completed", "style=display:" + display_clear,
+  signal('CLEAR_COMPLETED')
+  ],
+  [
+    text("Clear completed ["),
+    span(["id=completed-count"], [
+      text(done)
+    ]),
+    text("]")
+  ]
+)
+```
+
+_Seconde_ we need to add a `'CLEAR_COMPLETED'` `case` to the `update` function:
+
+```js
+case 'CLEAR_COMPLETED':
+  new_model.todos = new_model.todos.filter(function (item) {
+    return !item.done; // only return items which are item.done = false
+  });
+  break;
+```
+
+The tests should pass:
+
+![clear-completed-button-tests-passing](https://user-images.githubusercontent.com/194400/45191359-a58b0980-b23a-11e8-91bf-dcb016d6f4bb.png)
+
+<br />
+
+### 8. Persistence > Save Todo List items to `localStorage`
+
+```
+✓ should persist its data
+```
+
+#### 8. Persistence _Test_
+
+We have already covered saving the `model`
+to `localStorage` in _detail_ (_above_),
+we are adding a "proxy" test for completeness:
+
+```js
+test.only('8. Persistence > should persist its data', function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/'
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // confirm that the model is saved to localStorage
+  console.log('localStorage', localStorage.getItem('todos-elmish_' + id));
+  t.equal(localStorage.getItem('todos-elmish_' + id),
+    JSON.stringify(model), "data is persisted to localStorage");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});
+```
+
+Again, this test should _already_ pass:
+
+![persistence-test-passing](https://user-images.githubusercontent.com/194400/45190477-0a903080-b236-11e8-991c-bab61efb3d22.png)
+
+### 9. Routing
+
+The following assertions:
+```
+✓ should allow me to display active items
+✓ should allow me to display completed items
+✓ should allow me to display all items
+✓ should highlight the currently applied filter
+```
diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 24b10812..2d5287af 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -101,6 +101,11 @@ function update(action, model, data) {
       new_model.clicked = false;
       new_model.editing = false;
       break;
+    case 'CLEAR_COMPLETED':
+      new_model.todos = new_model.todos.filter(function (item) {
+        return !item.done; // only return items which are item.done = false
+      });
+      break;
     default: // if action unrecognised or undefined,
       return model; // return model unmodified
   }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
@@ -234,9 +239,15 @@ function render_footer (model, signal) {
         ])
       ]), // </ul>
       button(["class=clear-completed", "style=display:" + display_clear,
-        // signal('CLEAR_COMPLETED')
+        signal('CLEAR_COMPLETED')
         ],
-        [text("Clear completed")]
+        [
+          text("Clear completed ["),
+          span(["id=completed-count"], [
+            text(done)
+          ]),
+          text("]")
+        ]
       )
     ])
   )
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index ebb21640..6bd795c1 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -473,7 +473,6 @@ test('5.2.2 Slow clicks do not count as double-click > no edit!', function (t) {
   }, 301)
 });
 
-
 test('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('todos-elmish_' + id);
@@ -548,3 +547,86 @@ test('5.5 CANCEL should cancel edits on escape', function (t) {
       model.todos[1].title, 'todo id 1 has title: ' + model.todos[1].title);
   t.end();
 });
+
+test('6. Counter > should display the current number of todo items',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: false },
+      { id: 2, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/'
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // count:
+  const count = parseInt(document.getElementById('count').textContent, 10);
+  t.equal(count, model.todos.length, "displays todo item count: " + count);
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});
+
+test.only('7. Clear Completed > should display the number of completed items',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: true },
+      { id: 2, title: "Let's solve our own problem", done: true }
+    ],
+    hash: '#/'
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // count todo items in DOM:
+  t.equal(document.querySelectorAll('.view').length, 3,
+    "at the start, there are 3 todo items in the DOM.");
+
+  // count completed items
+  const completed_count =
+    parseInt(document.getElementById('completed-count').textContent, 10);
+  const done_count = model.todos.filter(function(i) {return i.done }).length;
+  t.equal(completed_count, done_count,
+    "displays completed items count: " + completed_count);
+
+  // clear completed items:
+  const button = document.querySelectorAll('.clear-completed')[0];
+  button.click();
+
+  // confirm that there is now only ONE todo list item in the DOM:
+  t.equal(document.querySelectorAll('.view').length, 1,
+    "after clearing completed items, there is only 1 todo item in the DOM.");
+
+  // no clear completed button in the DOM when there are no "done" todo items:
+  t.equal(document.querySelectorAll('clear-completed').length, 0,
+    'no clear-completed button when there are no done items.')
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});
+
+test('8. Persistence > should persist its data', function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/'
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // confirm that the model is saved to localStorage
+  console.log('localStorage', localStorage.getItem('todos-elmish_' + id));
+  t.equal(localStorage.getItem('todos-elmish_' + id),
+    JSON.stringify(model), "data is persisted to localStorage");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});
diff --git a/todo-list.md b/todo-list.md
index 51fcc866..03b1f5e1 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1325,7 +1325,7 @@ _however_ we still cannot _interact_ with the app.
 _Next_ we're going to move to "wiring-up" the _functionality_
 to construct the UX.
 
-## _Fun_ctionality - The _Fun_ Part!
+## Functionality - The _Fun_ Part!
 
 With all the "foundation" well defined and tested,
 we can _confidently_ move on to building out the _features_

From b1f895b1f548692d0fa200e628637888cccea027 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 01:22:07 +0100
Subject: [PATCH 143/164] update older tests to reflect clear-completed count
 in footer #48

---
 examples/todo-list/todo-app.js | 2 +-
 test/todo-app.test.js          | 6 ++++--
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 2d5287af..6a3ba631 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -239,7 +239,7 @@ function render_footer (model, signal) {
         ])
       ]), // </ul>
       button(["class=clear-completed", "style=display:" + display_clear,
-        signal('CLEAR_COMPLETED')
+        typeof signal === 'function' ? signal('CLEAR_COMPLETED') : ''
         ],
         [
           text("Clear completed ["),
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 6bd795c1..6bbbe0b3 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -169,7 +169,8 @@ test('render_footer view using (elmish) HTML DOM functions', function (t) {
 
   // check for "Clear completed" button in footer:
   const clear = document.querySelectorAll('.clear-completed')[0].textContent;
-  t.equal(clear, 'Clear completed', '<button> in <footer> "Clear completed"');
+  t.equal(clear, 'Clear completed [1]',
+    '<button> in <footer> "Clear completed [1]"');
 
   elmish.empty(document.getElementById(id)); // clear DOM ready for next test
   t.end();
@@ -545,6 +546,7 @@ test('5.5 CANCEL should cancel edits on escape', function (t) {
   // confirm the item.title is still the original title:
   t.equal(document.querySelectorAll('.view > label')[1].textContent,
       model.todos[1].title, 'todo id 1 has title: ' + model.todos[1].title);
+  localStorage.removeItem('todos-elmish_' + id);
   t.end();
 });
 
@@ -570,7 +572,7 @@ test('6. Counter > should display the current number of todo items',
   t.end();
 });
 
-test.only('7. Clear Completed > should display the number of completed items',
+test('7. Clear Completed > should display the number of completed items',
   function (t) {
   elmish.empty(document.getElementById(id));
   const model = {

From fc2ed3c300f603b43456ebab21ca56545be903a7 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 03:22:05 +0100
Subject: [PATCH 144/164] add test for routing based on clicking links in
 footer #48

---
 test/todo-app.test.js | 46 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 6bbbe0b3..14ab2355 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -624,7 +624,7 @@ test('8. Persistence > should persist its data', function (t) {
   // render the view and append it to the DOM inside the `test-app` node:
   elmish.mount(model, app.update, app.view, id, app.subscriptions);
   // confirm that the model is saved to localStorage
-  console.log('localStorage', localStorage.getItem('todos-elmish_' + id));
+  // console.log('localStorage', localStorage.getItem('todos-elmish_' + id));
   t.equal(localStorage.getItem('todos-elmish_' + id),
     JSON.stringify(model), "data is persisted to localStorage");
 
@@ -632,3 +632,47 @@ test('8. Persistence > should persist its data', function (t) {
   localStorage.removeItem('todos-elmish_' + id);
   t.end();
 });
+
+test.only('9. Routing > should allow me to display active/completed/all items',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: true },
+      { id: 2, title: "Let's solve our own problem", done: true }
+    ],
+    hash: '#/active' // ONLY ACTIVE items
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 1, "one active item");
+  let selected = document.querySelectorAll('.selected')[0]
+  t.equal(selected.id, 'active', "active footer filter is selected");
+
+  // empty:
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  // show COMPLTED items:
+  model.hash = '#/completed';
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 2,
+    "two completed items");
+  selected = document.querySelectorAll('.selected')[0]
+  t.equal(selected.id, 'completed', "completed footer filter is selected");
+
+  // empty:
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  // show ALL items:
+  model.hash = '#/';
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 3,
+    "three items total");
+  selected = document.querySelectorAll('.selected')[0]
+  t.equal(selected.id, 'all', "all footer filter is selected");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});

From 2e67605a52ca61f549ef6e32e012ae5b9e39f632 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 03:22:54 +0100
Subject: [PATCH 145/164] add solution to routing all/active/completed using
 footer links including window.onhashchange

---
 examples/todo-list/todo-app.js | 46 ++++++++++++++++++++++++++++------
 1 file changed, 39 insertions(+), 7 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 6a3ba631..ae971dfb 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -21,6 +21,7 @@ function update(action, model, data) {
   // console.log(arguments)
   // console.log(' - - - - - - - - - - - ');
   var new_model = JSON.parse(JSON.stringify(model)) // "clone" the model
+
   switch(action) {
     case 'ADD':
       var last = (typeof model.todos !== 'undefined' && model.todos.length > 0)
@@ -106,14 +107,16 @@ function update(action, model, data) {
         return !item.done; // only return items which are item.done = false
       });
       break;
+    case 'ROUTE':
+      new_model.hash = (window && window.location && window.location.hash) ?
+        window.location.hash : '#/';
+      break;
     default: // if action unrecognised or undefined,
       return model; // return model unmodified
   }   // see: https://softwareengineering.stackexchange.com/a/201786/211301
   return new_model;
 }
 
-
-
 /**
  * `render_item` creates an DOM "tree" with a single Todo List Item
  * using the "elmish" DOM functions (`li`, `div`, `input`, `label` and `button`)
@@ -181,7 +184,18 @@ function render_main (model, signal) {
       label(["for=toggle-all"], [ text("Mark all as complete") ]),
       ul(["class=todo-list"],
         (model.todos && model.todos.length > 0) ?
-        model.todos.map(function (item) {
+        model.todos
+        .filter(function (item) {
+          switch(model.hash) {
+            case '#/active':
+              return !item.done;
+            case '#/completed':
+              return item.done;
+            default:
+              return item;
+          }
+        })
+        .map(function (item) {
           return render_item(item, model, signal)
         }) : null
       ) // </ul>
@@ -229,13 +243,25 @@ function render_footer (model, signal) {
       ]),
       ul(["class=filters"], [
         li([], [
-          a(["href=#/", "class=selected"], [text("All")])
+          a([
+            "href=#/", "id=all", "class=" +
+            (model.hash === '#/' ? "selected" : '')
+          ],
+          [text("All")])
         ]),
         li([], [
-          a(["href=#/active"], [text("Active")])
+          a([
+            "href=#/active", "id=active", "class=" +
+            (model.hash === '#/active' ? "selected" : '')
+          ],
+          [text("Active")])
         ]),
         li([], [
-          a(["href=#/completed"], [text("Completed")])
+          a([
+            "href=#/completed", "id=completed", "class=" +
+            (model.hash === '#/completed' ? "selected" : '')
+          ],
+          [text("Completed")])
         ])
       ]), // </ul>
       button(["class=clear-completed", "style=display:" + display_clear,
@@ -265,6 +291,7 @@ function render_footer (model, signal) {
  * var DOM = view(model);
  */
 function view (model, signal) {
+
   return (
     section(["class=todoapp"], [ // array of "child" elements
       header(["class=header"], [
@@ -295,7 +322,7 @@ function subscriptions (signal) {
 	var ESCAPE_KEY = 27; // used for "escaping" when editing a Todo item
 
   document.addEventListener('keyup', function handler (e) {
-    // console.log('e.keyCode:', e.keyCode, '| key:', e.key);
+    console.log('e.keyCode:', e.keyCode, '| key:', e.key);
 
     switch(e.keyCode) {
       case ENTER_KEY:
@@ -316,6 +343,11 @@ function subscriptions (signal) {
         break;
     }
   });
+
+  window.onhashchange = function route () {
+    console.log("signal('ROUTE')()");
+    signal('ROUTE')();
+  }
 }
 
 /* module.exports is needed to run the functions using Node.js for testing! */

From f118ec4aaf97161aad2cbdd1a9bd6c65f02ed26a Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 03:32:24 +0100
Subject: [PATCH 146/164] add solution to routing all/active/completed using
 footer links including window.onhashchange

---
 examples/todo-list/todo-app.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index ae971dfb..a729431e 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -108,8 +108,8 @@ function update(action, model, data) {
       });
       break;
     case 'ROUTE':
-      new_model.hash = (window && window.location && window.location.hash) ?
-        window.location.hash : '#/';
+      new_model.hash = // (window && window.location && window.location.hash) ?
+        window.location.hash // : '#/';
       break;
     default: // if action unrecognised or undefined,
       return model; // return model unmodified

From 812248b0c4196e3d2092e736d7afd2bf5ae742e1 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 03:32:57 +0100
Subject: [PATCH 147/164] first draft of TodoMVC tutorial *complete*!! :tada:

---
 edit-todo.md          | 83 +++++++++++++++++++++++++++++++++++++++++++
 test/todo-app.test.js |  8 +++--
 2 files changed, 88 insertions(+), 3 deletions(-)

diff --git a/edit-todo.md b/edit-todo.md
index 6f746949..a37de138 100644
--- a/edit-todo.md
+++ b/edit-todo.md
@@ -1038,3 +1038,86 @@ The following assertions:
 ✓ should allow me to display all items
 ✓ should highlight the currently applied filter
 ```
+
++ `'SHOW_ALL'` the default view.
++ `'SHOW_ACTIVE'` item.done === false
++ `'SHOW_COMPLETED'` item.done === true
+
+
+#### 9. Routing _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('9. Routing > should allow me to display active/completed/all items',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: true },
+      { id: 2, title: "Let's solve our own problem", done: true }
+    ],
+    hash: '#/active' // ONLY ACTIVE items
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 1, "one active item");
+  let selected = document.querySelectorAll('.selected')[0]
+  t.equal(selected.id, 'active', "active footer filter is selected");
+
+  // empty:
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  // show COMPLTED items:
+  model.hash = '#/completed';
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 2,
+    "two completed items");
+  selected = document.querySelectorAll('.selected')[0]
+  t.equal(selected.id, 'completed', "completed footer filter is selected");
+
+  // empty:
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  // show ALL items:
+  model.hash = '#/';
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 3,
+    "three items total");
+  selected = document.querySelectorAll('.selected')[0]
+  t.equal(selected.id, 'all', "all footer filter is selected");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});
+```
+
+
+#### 9. Routing _Implementation_
+
+Since this is the _final_ quest in the TodoMVC/Todo List App,
+the solution is _not_ included here.
+Spend some time trying to make the test assertions pass.
+
+If you get "_stuck_" consult the code in `todo-app.js`.
+
+#### 9.1 Routing _Bonus_
+
+As a _bonus_ level,
+you can add the following event listener to your `subscriptions`
+to make the router work when the url (hash) changes in the browser:
+
+```js
+window.onhashchange = function route () {
+  signal('ROUTE')();
+}
+```
+And the `'ROUTE'` `case` to your `update` function:
+```js
+case 'ROUTE':
+  new_model.hash = (window && window.location && window.location.hash) ?
+    window.location.hash : '#/';
+  break;
+```
diff --git a/test/todo-app.test.js b/test/todo-app.test.js
index 14ab2355..0e9b51a6 100644
--- a/test/todo-app.test.js
+++ b/test/todo-app.test.js
@@ -279,7 +279,6 @@ test('2. New Todo, should allow me to add todo items', function (t) {
   t.end();
 });
 
-
 test('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('todos-elmish_' + id);
@@ -395,7 +394,6 @@ test('4.1 DELETE item by clicking <button class="destroy">', function (t) {
   t.end();
 });
 
-
 test('5.1 Editing: > Render an item in "editing mode"', function (t) {
   elmish.empty(document.getElementById(id));
   localStorage.removeItem('todos-elmish_' + id);
@@ -633,8 +631,9 @@ test('8. Persistence > should persist its data', function (t) {
   t.end();
 });
 
-test.only('9. Routing > should allow me to display active/completed/all items',
+test('9. Routing > should allow me to display active/completed/all items',
   function (t) {
+  localStorage.removeItem('todos-elmish_' + id);
   elmish.empty(document.getElementById(id));
   const model = {
     todos: [
@@ -646,6 +645,9 @@ test.only('9. Routing > should allow me to display active/completed/all items',
   };
   // render the view and append it to the DOM inside the `test-app` node:
   elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  const mod = app.update('ROUTE', model);
+  // t.equal(mod.hash, '#/', 'default route is #/');
+
   t.equal(document.querySelectorAll('.view').length, 1, "one active item");
   let selected = document.querySelectorAll('.selected')[0]
   t.equal(selected.id, 'active', "active footer filter is selected");

From 9cabb3826fc77e74bc61c7828fbd59080bbc77fa Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 18:50:52 +0100
Subject: [PATCH 148/164] remove port from npm start script to allow heroku to
 pass in PORT env var for: #65

---
 package.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 7723691e..4ffb9cae 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,8 @@
     "check-coverage": "istanbul check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
     "postinstall": "npm test",
     "retest": "PORT=8000 node_modules/.bin/nodemon ./test/*.js",
-    "start": "live-server --port=8000 --open=./examples",
+    "dev": "live-server --port=8000 --open=./examples",
+    "start": "live-server ",
     "test": "istanbul cover tape ./test/*.test.js | tap-spec"
   },
   "keywords": [

From 538d53a0b937b5543cd32979c201d520d009bad3 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 19:03:33 +0100
Subject: [PATCH 149/164] comment out all console.log in todo-app.js to avoid
 noise ... un-comment if you want to debug/understand

---
 examples/todo-list/todo-app.js | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index a729431e..bb78a488 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -55,7 +55,7 @@ function update(action, model, data) {
       });
       break;
     case 'DELETE':
-      console.log('DELETE', data);
+      // console.log('DELETE', data);
       new_model.todos = new_model.todos.filter(function (item) {
         return item.id !== data;
       });
@@ -66,17 +66,17 @@ function update(action, model, data) {
       if (new_model.clicked && new_model.clicked === data &&
         Date.now() - 300 < new_model.click_time ) { // DOUBLE-CLICK < 300ms
           new_model.editing = data;
-          console.log('DOUBLE-CLICK', "item.id=", data,
-          "| model.editing=", model.editing,
-          "| diff Date.now() - new_model.click_time: ",
-          Date.now(), "-", new_model.click_time, "=",
-          Date.now() - new_model.click_time);
+          // console.log('DOUBLE-CLICK', "item.id=", data,
+          //   "| model.editing=", model.editing,
+          //   "| diff Date.now() - new_model.click_time: ",
+          //   Date.now(), "-", new_model.click_time, "=",
+          //   Date.now() - new_model.click_time);
       }
       else { // first click
         new_model.clicked = data; // so we can check if same item clicked twice!
         new_model.click_time = Date.now(); // timer to detect double-click 300ms
         new_model.editing = false; // reset
-        console.log('FIRST CLICK! data:', data);
+        // console.log('FIRST CLICK! data:', data);
       }
       break;
     case 'SAVE':
@@ -322,7 +322,7 @@ function subscriptions (signal) {
 	var ESCAPE_KEY = 27; // used for "escaping" when editing a Todo item
 
   document.addEventListener('keyup', function handler (e) {
-    console.log('e.keyCode:', e.keyCode, '| key:', e.key);
+    // console.log('e.keyCode:', e.keyCode, '| key:', e.key);
 
     switch(e.keyCode) {
       case ENTER_KEY:
@@ -345,7 +345,7 @@ function subscriptions (signal) {
   });
 
   window.onhashchange = function route () {
-    console.log("signal('ROUTE')()");
+    // console.log("signal('ROUTE')()");
     signal('ROUTE')();
   }
 }

From fcb01020d3bde34f5003c6cf3d3d40a5f8a16d64 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 19:04:11 +0100
Subject: [PATCH 150/164] remove dev script from package.json as not
 needed/used

---
 package.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/package.json b/package.json
index 4ffb9cae..6f8b9954 100644
--- a/package.json
+++ b/package.json
@@ -25,8 +25,7 @@
     "check-coverage": "istanbul check-coverage --statements 100 --functions 100 --lines 100 --branches 100",
     "postinstall": "npm test",
     "retest": "PORT=8000 node_modules/.bin/nodemon ./test/*.js",
-    "dev": "live-server --port=8000 --open=./examples",
-    "start": "live-server ",
+    "start": "live-server",
     "test": "istanbul cover tape ./test/*.test.js | tap-spec"
   },
   "keywords": [

From 31bb9bcd7aceb4ad4956c0c92abb418bc820502a Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 19:04:32 +0100
Subject: [PATCH 151/164] fix markdown fails in edit-todo.md

---
 edit-todo.md | 47 +++++++++++++++++++++++++++--------------------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/edit-todo.md b/edit-todo.md
index a37de138..d73518fc 100644
--- a/edit-todo.md
+++ b/edit-todo.md
@@ -43,7 +43,7 @@ if in "**editing _mode_**"
   + [ ] Add `class="editing"` to `<li>` when editing
   + [ ] Remove (_don't add_) `class="editing"` from `<li>`
   when no longer editing.
-+ Set the `item.id` as the `id` of the **`<input class="edit">`**
++ [ ] Set the `item.id` as the `id` of the **`<input class="edit">`**
   so that we know which item is being edited.
 + [ ] Add `case` in `keyup` Event Listener
   for **`[Enter]`** keyup (_see **`subscriptions`** above_)
@@ -56,8 +56,8 @@ if in "**editing _mode_**"
   + [ ] If the **`<input class="edit">`** is _blank_, `delete` the todo item.
 
 By _inspecting_ the DOM for the VanillaJS TodoMVC example:
-http://todomvc.com/examples/vanillajs
-we can see that _two_ things change:
+http://todomvc.com/examples/vanillajs <br />
+we can see that _two_ things change in the DOM when in "**editing _mode_**":
 
 + **`<li class="editing">`** the CSS `class="editing"` is added
 to the todo list item being _edited_.
@@ -98,7 +98,7 @@ and render the appropriate tags/classes.
 There are _three_ steps to Editing a Todo List item:
 
 1. ***Trigger*** the "double-click" event listener/handler
-  + Receiving the `singal('EDIT', item.id)` "activates" editing mode.
+  1.1. Receiving the `singal('EDIT', item.id)` _activates_ "**editing _mode_**".
 2. ***Edit*** the todo list item's `title` property
 3. ***Save*** the updated item `title`: `singal('SAVE', item.id)`
 
@@ -123,10 +123,10 @@ the `model.editing` property is set by the `update` function (_see below_).
 3. Display the **`<input class="edit">`**
 with the Todo list item title as it's **`value`** property.
 
-##### 5.2 `render_item` "Edit Mode" _Test_
+#### 5.2 `render_item` "Edit Mode" _Test_
 
 For the above modifications (_requirements_) we can write a _single_ test
-with four assertions:
+with four assertions. Append the following code to `test/todo-app.test.js`:
 
 ```js
 test.only('5. Editing: > Render an item in "editing mode"', function (t) {
@@ -180,7 +180,7 @@ do it now before proceeding to the reading the _implementation_ section.
 
 <br />
 
-##### 5.2 `render_item` "Edit Mode" _Implementation_
+#### 5.2 `render_item` "Edit Mode" _Implementation_
 
 Given that there are 4 assertions that need to pass
 and we know there are 3 changes that need to be made
@@ -188,7 +188,7 @@ to the `render_item` function,
 rather than leaving you (_the reader_) wondering "_where do I start?!_",
 here is the code that makes the tests pass:
 
-BEFORE:
+_Before_:
 ```js
 function render_item (item, model, signal) {
   return (
@@ -213,7 +213,7 @@ function render_item (item, model, signal) {
 }
 ```
 
-AFTER:
+_After_:
 ```js
 function render_item (item, model, signal) {
   return (
@@ -301,7 +301,8 @@ you will go flying through the windscreen and have a _really_ bad day!
 If you want to _avoid_ having to do _manual_ "type-checking",
 use **`Elm`**, it does all this for you _transparently_.
 
-3. Append the **`<input class="edit">`** to the `<li>` if in "editing mode":
+3. Append the **`<input class="edit">`**
+to the `<li>` if in "**editing _mode_**":
 
 ```js
 ].concat(model && model.editing && model.editing === item.id ? [ // editing?
@@ -323,7 +324,7 @@ will result in the following error:
 ```js
 TypeError: Argument 1 of Node.appendChild does not implement interface Node
 ```
-We are not "fans" of having "empty" elements in the DOM, it's "sloppy".
+We are not "fans" of having "empty" elements in the DOM, it's "sloppy". <br />
 Hence the `concat()` approach which results in "clean" DOM.
 
 At this point our test assertions all pass:
@@ -335,7 +336,7 @@ node test/todo-app.test.js
 
 But we are building a _visual_ application and are not _seeing_ anything ...
 
-#### Visualise Editing Mode?
+#### _Visualise_ Editing Mode?
 
 Let's take a _brief_ detour to _visualise_ the progress we have made.
 
@@ -360,8 +361,9 @@ Then in your terminal, start the live-server:
 ```sh
 npm start
 ```
-In your browser, vist: http://127.0.0.1:8000/examples/todo-list/
-You should see that the _third_ todo list item is in "edit mode".
+In your browser, vist: http://127.0.0.1:8000/examples/todo-list/ <br />
+You should see that the _third_ todo list item is in "**editing _mode_**":
+
 ![elm-todomvc-editing-item](https://user-images.githubusercontent.com/194400/45180706-0eab5680-b214-11e8-9dcf-a8c4476e4b11.png)
 
 Nothing will happen (_yet_) if you attempt to "save" any changes.
@@ -387,16 +389,20 @@ We are going to add one below for "extra credit"._
 Since Double-clicking/tapping is the _only_ way to edit a todo item,
 we feel that it deserves a test.
 
+#### _How_ do we Track Double-Clicking?
+
 When we don't know how to do something, a good place to start is to search
 for the keywords we want, e.g: "JavaScript detect double-click event"
 for which the top result is the following StackOverflow Q/A:
 https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event
+
 Reading though all the answers, we determine that the most relevant (_to us_)
-is: https://stackoverflow.com/a/16033129/1148249 (_which uses "vanilla" JS_)
+is: https://stackoverflow.com/a/16033129/1148249 (_which uses "vanilla" JS_):
 
 [![stackoverflow-double-click-example](https://user-images.githubusercontent.com/194400/45124122-14942f80-b161-11e8-94c0-f54f2352bdd5.png)](https://stackoverflow.com/a/16033129/1148249)
 
->_**Note**: when you find a StackOverflow question/answer **helpful, upvote**!_
+>_**Note**: when you find a StackOverflow question/answer **helpful,
+upvote** to show your appreciation!_
 
 ```html
 <div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
@@ -427,7 +433,7 @@ we won't need to remove the attribute using a `setTimeout`,
 ### 5.2 `'EDIT' update case` _Test_
 
 In keeping with our TDD approach,
-our first step when adding the `case` expression
+our _first_ step when adding the `case` expression
 for `'EDIT'` in the `update` function is to write a _test_.
 
 Append following test code to your `test/todo-app.test.js` file:
@@ -680,7 +686,7 @@ they should now _pass_:
 ![save-update-test-pass](https://user-images.githubusercontent.com/194400/45188350-d879d100-b22b-11e8-8669-94e080a25ef7.png)
 
 
-### 5.4 `'SAVE'` _Blank_ item.title _deletes_ item _Test_
+### 5.4 `'SAVE'` a _Blank_ item.title _deletes_ the item _Test_
 
 Our mini-mission is to make the following TodoMVC test assertion _pass_:
 
@@ -720,7 +726,7 @@ you will see output similar to the following:
 
 ![save-blank-title-test-failing](https://user-images.githubusercontent.com/194400/45188593-e4b25e00-b22c-11e8-9623-26c8b017e9b1.png)
 
-### 5.4 `'SAVE'` _Blank_ item.title _deletes_ item _Implementation_
+### 5.4 `'SAVE'` a _Blank_ item.title _deletes_ the item _Implementation_
 
 To make this test pass we just need to add a couple of lines to the
 `'SAVE'` case in the `update` function:
@@ -731,7 +737,8 @@ if (!value || value.length === 0) { // delete item if title is blank:
 }
 ```
 
-when you re-run the tests, they will pass:
+when you _re-run_ the tests, they will _pass_:
+
 ![save-blank-title-test-pass](https://user-images.githubusercontent.com/194400/45188666-41ae1400-b22d-11e8-8154-176b5aaaea42.png)
 
 ### 5.5 `'CANCEL'` edit on [esc] Key Press

From e08461bfed23b4699d0e813e9c3bd1cd6b0cfebc Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 19:10:53 +0100
Subject: [PATCH 152/164] fix mixed content warning from loading dwyl favicon
 over http ...
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/65#issuecomment-419521876

---
 examples/todo-list/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
index e7c6b14d..43202a06 100644
--- a/examples/todo-list/index.html
+++ b/examples/todo-list/index.html
@@ -6,7 +6,7 @@
   content="width=device-width, initial-scale=1.0, user-scalable=yes">
   <title>Elm(ish) Todo List!</title>
   <link rel="shortcut icon"
-  href="http://www.dwyl.io/images/favicon.ico" type="image/x-icon">
+  href="https://www.dwyl.io/images/favicon.ico" type="image/x-icon">
 </head>
 <body>
   <div id="app"></div>

From 607f004aef0458bb1ad528f8e23b9cfe25847234 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 19:18:07 +0100
Subject: [PATCH 153/164] add favicon.ico to examples/todo-list to avoid
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/65#issuecomment-419523893

---
 examples/todo-list/favicon.ico | Bin 0 -> 1150 bytes
 examples/todo-list/index.html  |   2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 examples/todo-list/favicon.ico

diff --git a/examples/todo-list/favicon.ico b/examples/todo-list/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..96d3eb6720ef22d2a4e67483192dbfe1330b785a
GIT binary patch
literal 1150
zcmchXu}T9$5Qax0X)Fu`MX<5dRJP#+ZF~bOpTJrWgtS6Xu(C?)14xR1HgZZpu(GnU
z(Kk4-5`^>nlbvHd!fGKVe3{vQ{+Zib?qW8_x79L!*X&^4Y}w4#0SRTQ6KscCdtr*!
zfAz_->>N5!LZP`KFQeS`TWb69wOPN%>r{?+7v54H)$km`-cP>Zo$SrM^c{ij<pr9q
zdqk`It2H(6Rln$apT~NCq#uVK_1%U1gV=G;tVrF@_L}?&w&WuYK(n4<(R<0O{RW@+
zSDv6Z@jifNjGz(weO@Zkvjn=nW}MCPqJP^@-9vo^e8#WOGoC}g_Av(SLvhpV<O9!B
z5nluPpc#{ATmGOw68#*DD3`a=gTIS5PF?H2Y9)7Za$%P927Z#?^vs66B7faByIeK9
V;{T%LsmM9?{2qAoPB+l-iZ7NBik$!e

literal 0
HcmV?d00001

diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
index 43202a06..a9ea2522 100644
--- a/examples/todo-list/index.html
+++ b/examples/todo-list/index.html
@@ -6,7 +6,7 @@
   content="width=device-width, initial-scale=1.0, user-scalable=yes">
   <title>Elm(ish) Todo List!</title>
   <link rel="shortcut icon"
-  href="https://www.dwyl.io/images/favicon.ico" type="image/x-icon">
+  href="/favicon.ico" type="image/x-icon">
 </head>
 <body>
   <div id="app"></div>

From cd70fad77ae9f74d7937d41dd4e2c0dd31a8a687 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 19:19:24 +0100
Subject: [PATCH 154/164] reference favicon.ico in todo-list/index.html for
 https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/65#issuecomment-419523893

---
 examples/todo-list/index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/todo-list/index.html b/examples/todo-list/index.html
index a9ea2522..1893542c 100644
--- a/examples/todo-list/index.html
+++ b/examples/todo-list/index.html
@@ -6,7 +6,7 @@
   content="width=device-width, initial-scale=1.0, user-scalable=yes">
   <title>Elm(ish) Todo List!</title>
   <link rel="shortcut icon"
-  href="/favicon.ico" type="image/x-icon">
+  href="favicon.ico" type="image/x-icon">
 </head>
 <body>
   <div id="app"></div>

From ae611752a778e038c3d14a837e02050124d4159b Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 19:45:03 +0100
Subject: [PATCH 155/164] add link to
 https://todomvc-app.herokuapp.com/examples/todo-list in readme fixes #65

---
 todo-list.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/todo-list.md b/todo-list.md
index 03b1f5e1..a5239e97 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -4,6 +4,18 @@ If you've made it this far, give yourself a pat on the back! <br />
 Your persistence is about to pay off as you
 "_level up_" _both_ your **`JavaScript`** and "TEA" skills!
 
+> Before you continue, try out the demo:
+https://todomvc-app.herokuapp.com/examples/todo-list <br />
+
+![elm-todo](https://user-images.githubusercontent.com/194400/45237254-10d5e980-b2d6-11e8-8281-b95452bde519.gif)
+
+> Add a few items to the list. Double-click/tap the item to edit it.
+Check-off your todos and navigate the footer to filter for Active/Completed.
+Try and "break" it! Refresh the page and notice how your todo items
+are "still there" (_they were saved to `localStorage`!_).
+Once you have had a "play" with the demo, come back and _build_ it!!
+
+<hr />
 
 ## Why?
 

From a5df3c49e9a5b54961bf89ca71928163b4671d68 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 20:20:12 +0100
Subject: [PATCH 156/164] add space between learning styles in todo-list.md

---
 examples/todo-list/todo-app.js |  2 +-
 todo-list.md                   | 27 ++++++++++++++++++---------
 2 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index bb78a488..259aea5a 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -15,7 +15,7 @@ var initial_model = {
  * @param {String} action - the desired action to perform on the model.
  * @param {String} data - the data we want to "apply" to the item.
  * @param {Object} model - the App's (current) model (or "state").
- * @return {Object} updated_model - the transformed model.
+ * @return {Object} new_model - the transformed model.
  */
 function update(action, model, data) {
   // console.log(arguments)
diff --git a/todo-list.md b/todo-list.md
index a5239e97..f079a58f 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -109,23 +109,26 @@ The functions & functionality of `Elm`(_ish_) should be _familiar_ to you
 so you _should_ be able to build the Todo List using the `Elm`(_ish_)
 helper functions e.g: `mount`, `div`, `input` and `route`.
 
-You can _opt_ to _either_:
+You can _opt_ to _either_: <br />
+
 **a)** read the `Elm`(_ish_) docs/tutorial
 [`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md)
 ***`before`*** building the Todo List App -
 this will give you both TDD practice
 and a deeper understanding of building a micro framework.
 i.e. "**_prospective_ learning**"<br />
+
 **b)** refer the `Elm`(_ish_) docs/tutorial
 [`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md)
 ***`while`*** building the Todo List App when you "**_need_ to know**"
 how one of the helper functions works. i.e. "**_contextual_ learning**" <br />
+
 **c)** **only _consult_** the `Elm`(_ish_) docs/tutorial
 [`elmish.md`](https://github.com/dwyl/learn-elm-architecture-in-javascript/blob/master/elmish.md)
 ***`if`*** you are "stuck" ***`while`*** building the Todo List App.
 i.e. "**_debug_ learning**" <br />
 
-The choice is yours; there is no "right" way.
+The choice is yours; there is no "_right_" way to learn.
 
 
 
@@ -134,7 +137,9 @@ The choice is yours; there is no "right" way.
 _Before_ diving into _building_ the Todo List App,
 we need to consider how we are going to _test_ it.
 By ensuring that we follow **TDD** from the _start_ of an App,
-we _avoid_ having to "correct" any "**bad habits**".
+we will have ["**no surprises"](https://youtu.be/u5CVsCnxyXg)
+and _avoid_ having to "correct" any
+["**bad habits**"](https://www.youtube.com/results?search_query=Destiny%27s+Child+Bad+Habit).
 
 We will be using **Tape** and **JSDOM** for testing
 both our functions and the final application.
@@ -200,7 +205,8 @@ All we need is an `Object` containing two keys `todos` and `hash`:
     { id: 2, title: "Build Todo List App",    done: false },
     { id: 3, title: "Win the Internet!",      done, false }
   ],
-  hash: '#/' // the "route" to display
+  hash: '#/', // the "route" to display
+  editing: false // if we are editing a todo list item this will be set.
 }
 ```
 `todos` is an `Array` of `Objects` and each Todo (Array) item
@@ -225,10 +231,10 @@ and 1 which is "done" (`done=true`).
 
 Rather than _storing_ "metadata" in the model
 (_e.g: the count of active and completed Todo items_)
-we will "compute" (derive) it "runtime" to keep the `model` simple.
+we will "compute" (derive) it "at runtime" to keep the `model` simple.
 This may "waste" a few CPU cycles computing the count but that's "OK"!
 Even on an _ancient_ Android device
-this will only take a millisecond to compute,
+this will only take a millisecond to compute and
 will not "slow down" the app or affect UX.
 
 
@@ -276,7 +282,7 @@ e.g:
  * and as the "reset" state when all todos are deleted at once.
  */
 var initial_model = {
-  todos: [],me
+  todos: [],
   hash: "#/"
 }
 
@@ -314,7 +320,7 @@ The **`JSDOC`** for our `update` function is:
  * `update` transforms the `model` based on the `action`.
  * @param {String} action - the desired action to perform on the model.
  * @param {Object} model - the App's data ("state").
- * @return {Object} updated_model - the transformed model.
+ * @return {Object} new_model - the transformed model.
  */
 ```
 
@@ -366,7 +372,7 @@ e.g:
  * `update` transforms the `model` based on the `action`.
  * @param {String} action - the desired action to perform on the model.
  * @param {Object} model - the App's (current) model (or "state").
- * @return {Object} updated_model - the transformed model.
+ * @return {Object} new_model - the transformed model.
  */
 function update(action, model) {
  switch (action) {                  // action (String) determines which case
@@ -394,6 +400,9 @@ of _functionality_ in the Todo List App: Adding an item to the list.
 
 This is both the _first_ "feature" a "user" will encounter and
 _by_ far the most _used_ feature of a Todo List. <br />
+(_by **definition** people add more items to their list than they finish,
+  to finish everything we would have to_
+  [***live forever***!](https://youtu.be/TDe1DqxwJoc))
 
 #### `ADD` item _Acceptance Criteria_
 

From 1002ef5a0366c792b65d26a64dd04b9681483745 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 20:57:39 +0100
Subject: [PATCH 157/164] "as a friend" >> "ask a friend" (correct typo!)

---
 todo-list.md | 86 ++++++++++++++++++++++++++++------------------------
 1 file changed, 47 insertions(+), 39 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index f079a58f..3ba84bc0 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -50,6 +50,7 @@ Along the way we will cover:
 + [x] The Document Object Model (DOM)
 + [x] Browser Routing/Navigation
 + [x] Local Storage for Offline Support
++ [x] Keyboard event listeners for rapid todo list creation and editing!
 
 We will be abstracting all "TEA" related ("generic") code
 into a file called **`elmish.js`**
@@ -72,7 +73,7 @@ Watch: https://www.youtube.com/results?search_query=checklist+manifesto
 ### TodoMVC?
 
 If you have not come across TodoMVC before,
-it's a sample application to showcase various "frontend" frameworks
+it's a website that showcases various "frontend" frameworks
 using a common user interface (UI): a Todo List Application.
 ![TodoMVC-intro](https://user-images.githubusercontent.com/194400/42624420-4528a3c6-85bd-11e8-8b92-9b1c8951ba35.png)
 
@@ -137,9 +138,9 @@ The choice is yours; there is no "_right_" way to learn.
 _Before_ diving into _building_ the Todo List App,
 we need to consider how we are going to _test_ it.
 By ensuring that we follow **TDD** from the _start_ of an App,
-we will have ["**no surprises"](https://youtu.be/u5CVsCnxyXg)
+we will have ["***no surprises***"](https://youtu.be/u5CVsCnxyXg)
 and _avoid_ having to "correct" any
-["**bad habits**"](https://www.youtube.com/results?search_query=Destiny%27s+Child+Bad+Habit).
+["***bad habits***"](https://www.youtube.com/results?search_query=Destiny%27s+Child+Bad+Habit).
 
 We will be using **Tape** and **JSDOM** for testing
 both our functions and the final application.
@@ -156,6 +157,7 @@ In your editor/terminal create the following files:
 
 + `test/todo-app.test.js`
 + `examples/todo-list/todo-app.js`
++ `examples/todo-list/index.html`
 
 These file names should be self-explanatory, but if unclear,
 `todo-app.test.js` is where we will write the tests for our
@@ -188,7 +190,7 @@ and
 [**front-end**-with-tape.md](https://github.com/dwyl/learn-tape/blob/master/front-end-with-tape.md)
 
 If you attempt to run the test file: `node test/todo-app.test.js`
-you should see no output.
+you should see no output. <br />
 (_this is expected as we haven't written any tests yet!_)
 
 
@@ -196,7 +198,8 @@ you should see no output.
 ### `model`
 
 The `model` for our Todo List App is **_boringly_ simple**.
-All we need is an `Object` containing two keys `todos` and `hash`:
+All we need is an `Object` with a
+`todos` key which has an Array of Objects as it's value:
 
 ```js
 {
@@ -204,9 +207,7 @@ All we need is an `Object` containing two keys `todos` and `hash`:
     { id: 1, title: "Learn Elm Architecture", done: true },
     { id: 2, title: "Build Todo List App",    done: false },
     { id: 3, title: "Win the Internet!",      done, false }
-  ],
-  hash: '#/', // the "route" to display
-  editing: false // if we are editing a todo list item this will be set.
+  ]
 }
 ```
 `todos` is an `Array` of `Objects` and each Todo (Array) item
@@ -282,8 +283,8 @@ e.g:
  * and as the "reset" state when all todos are deleted at once.
  */
 var initial_model = {
-  todos: [],
-  hash: "#/"
+  todos: [], // empty array which we will fill shortly
+  hash: "#/" // the hash in the url (for routing)
 }
 
 /* module.exports is needed to run the functions using Node.js for testing! */
@@ -328,12 +329,13 @@ The **`JSDOC`** for our `update` function is:
 
 As with the `update` in our `counter` example
 the function body is a `switch` statement
-that "decides" how to handle a request based on the `action` (_also known as the "message"_).
+that "decides" how to handle a request based on the `action`
+(_also known as the "message"_).
 
 Given that we _know_ that our `update` function "skeleton"
 will be a `switch` statement
 (_because that is the "TEA" pattern_)
-good test to _start_ with is the `default case`.
+a good test to _start_ with is the `default case`.
 
 Append following test code in `test/todo-app.test.js`:
 
@@ -358,10 +360,13 @@ You should see the assertion _fail_:
 Write the _minimum_ code necessary to pass the test.
 
 > Yes, we could just write:
+
 ```js
 function update (action, model) { return model; }
 ```
+
 And that _would_ make the test _pass_. <br />
+
 But, in light of the fact that we **know** the `update`
 function body will contain a `switch` statement,
 make the test pass by returning the `model` _unmodified_ in the `default` case.
@@ -595,8 +600,7 @@ _FROM_:
 {
   todos: [
     {id: 1, "Toggle a todo list item", done: false }
-  ],
-  hash: "#/"
+  ]
 }
 ```
 _TO_:
@@ -604,8 +608,7 @@ _TO_:
 {
   todos: [
     {id: 1, "Toggle a todo list item", done: true }
-  ],
-  hash: "#/"
+  ]
 }
 ```
 
@@ -653,8 +656,8 @@ If you get "stuck" see: [**`todo-app.js`**](https://github.com/dwyl/learn-elm-ar
 
 #### Hold On, Does This Work _Both_ Ways?
 
-_Yes_, You _guessed_ it,
-choosing to name the `action` as "`TOGGLE`"
+_Yes_, you _guessed_ it!
+Choosing to name the `action` as "`TOGGLE`"
 is _precisely_ because we don't _need_
 to have a _**separate**_ function
 to "undo" an item if it has been "checked off".
@@ -727,7 +730,8 @@ whereas the second and third items are still "todo" (`done=false`).
 
 This is what this `model` looks like in the "VanillaJS"
 TodoMVC:
-echo ![todomvc-3-items-1-done](https://user-images.githubusercontent.com/194400/43689907-e9caa548-98f8-11e8-8fd1-7b63e7fc5e30.png)
+
+![todomvc-3-items-1-done](https://user-images.githubusercontent.com/194400/43689907-e9caa548-98f8-11e8-8fd1-7b63e7fc5e30.png)
 
 Our _quest_ in the next "pomodoro" is to re-create this
 using the DOM functions we created in `Elm`(_ish_)!
@@ -742,6 +746,7 @@ and _just_ focus on rendering the _list_ itself.
 
 In your web browser, open **Dev**eloper **Tools**
 and _inspect_ the HTML for the Todo list:
+http://todomvc.com/examples/vanillajs/
 
 ![todomvc-main-section-todo-list-html](https://user-images.githubusercontent.com/194400/43717480-9fb80982-997f-11e8-9ffe-6aa90a89a042.png)
 
@@ -791,7 +796,7 @@ with a **`class="view"`** which "wraps":
   (_which updates the model
     From: `model.todos[id].done=false`
     To: `model.todos[id].done=true`_)
-  + [ ] **`<label>`** - the text content of the todo list item
+  + [ ] **`<label>`** - the text content ("title") of the todo list item
   + [ ] **`<button class="destroy">`** - the button the person
   can click/tap to **`delete`** a Todo item.
 
@@ -852,17 +857,18 @@ Given the test above, I added the following code to my `todo-app.js` file:
 ```js
 /* if require is available, it means we are in Node.js Land i.e. testing! */
 /* istanbul ignore next */
-const { a, button, div, empty, footer, input, h1, header, label, li, mount,
-  route, section, span, strong, text, ul } =
-    (typeof require !== 'undefined') ? require('./elmish.js') : {};
+if (typeof require !== 'undefined' && this.window !== this) {
+  var { a, button, div, empty, footer, input, h1, header, label, li, mount,
+    route, section, span, strong, text, ul } = require('./elmish.js');
+}
 
 /**
  * `render_item` creates an DOM "tree" with a single Todo List Item
  * using the "elmish" DOM functions (`li`, `div`, `input`, `label` and `button`)
  * returns an `<li>` HTML element with a nested `<div>` which in turn has the:
- * + `<input type=checkbox>` which lets users to "Toggle" the status of the item
- * + `<label>` which displays the Todo item text (`title`) in a `<text>` node
- * + `<button class="destroy">` lets people "delete" a todo item.
+ *   `<input type=checkbox>` which lets users to "Toggle" the status of the item
+ *   `<label>` which displays the Todo item text (`title`) in a `<text>` node
+ *   `<button class="destroy">` lets people "delete" a todo item.
  * see: https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/52
  * @param  {Object} item the todo item object
  * @return {Object} <li> DOM Tree which is nested in the <ul>.
@@ -968,18 +974,20 @@ Onwards!
 <br />
 
 
-### `<footer>` Element [issues/53](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/53)
+### `<footer>` Element [issues/53](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/53)
 
 Referring again to the _rendered_ HTML
 on http://todomvc.com/examples/vanillajs as our "guide":
-![image](https://user-images.githubusercontent.com/194400/42633421-5eb20f24-85d8-11e8-94ad-bb653dd93ab0.png)
+
+![footer-screenshot](https://user-images.githubusercontent.com/194400/42633421-5eb20f24-85d8-11e8-94ad-bb653dd93ab0.png)
+
 there is:
-+ [ ] a **`<footer>`** element with
-  + [ ] a **`<span>`** element which contains
-    + [ ] a **`text`** node with: **"`{count}` item(s) left"**.
-  + [ ] a **`<ul>`** containing
-    + [ ] 3 **`<li>`** elements each with
-     + [ ] a link (**`<a>`**) which allow the "user"
++ [ ] **`<footer>`** element with:
+  + [ ] **`<span>`** element which contains
+    + [ ] **`text`** node with: **"`{count}` item(s) left"**.
+  + [ ] **`<ul>`** containing
+    + [ ] 3 x **`<li>`** elements each with
+     + [ ] link (**`<a>`**) which allow the "user"
      to ***filter*** which items appear in the **`<view>`**.
   + [ ] a **`<button class="clear-completed">`**
   which will **_Clear_ all `Completed`** items when clicked.
@@ -1046,7 +1054,7 @@ from building the previous view functions
 **`render_item`** and **`render_main`**
 we ***estimate*** with _reasonable confidence_
 that it will take us
-**_25 minutes** (_**one** "**pomodoro**_)
+**25 minutes** (_**one** "**pomodoro**_)
 to:
 + [ ] Craft the **`JSDOC`** comment _documenting_ the `render_footer` function
 so that all future developers will _easily_ understand what the function does.
@@ -1143,8 +1151,8 @@ Given the docs and test above, attempt to write the `render_footer` function.
 with what happens when the "Clear completed" **`<buton>`** is clicked/tapped.
 We will "cover" that below. For now, focus on rendering the DOM._
 
-> If you get "stuck" trying to make the tests pass, first keep tring!
-Then "as a friend" and finally, consult the _reference_ implementation in:
+> If you get "stuck" trying to make the tests pass, first keep trying! <br />
+Then "ask a friend" and finally, consult the _reference_ implementation in:
 [**`todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/commits/68e2afa3bd95c46da7df559007d90dedcbae500f#diff-6be3e16fe7cfb4c00788d4d587374afdR103)
 
 
@@ -1279,8 +1287,8 @@ you will see something like this ("_Red_"):
 You should have the knowledge & skill
 to write the `view` function and make the test pass.
 
-> If you get "stuck" trying to make the tests pass, first keep tring!
-Then "as a friend" and finally, consult the _reference_ implementation in:
+> If you get "stuck" trying to make the tests pass, first keep trying! <br />
+Then "ask a friend" and finally, consult the _reference_ implementation in:
 [**`todo-app.js`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/commits/3096d81a777392c07a132136db496224871ff4c9#diff-6be3e16fe7cfb4c00788d4d587374afdR145)
 
 When you run `npm test` you should see something like this:

From b8f3ae9f18d2068051bf8b1410c36491a95eddf9 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 21:00:07 +0100
Subject: [PATCH 158/164] add links to lower order rendering function issues to
 show workflow #51 #52 #53

---
 todo-list.md | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/todo-list.md b/todo-list.md
index 3ba84bc0..4b70e1ac 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1188,7 +1188,12 @@ you should see something like this:
 ### `view` Function
 
 Now that we have the individual ("_lower order_") functions
-**`render_main`** #51, **`render_item`** #52, and **`render_footer`** #53
+**`render_main`**
+[#51](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/51),
+**`render_item`**
+[#52](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/52),
+and **`render_footer`**
+[#53](https://github.com/dwyl/learn-elm-architecture-in-javascript/issues/53)
 for rendering the _sections_ of the todo app,
 we can write the `view` function to render the _entire_ app!
 

From 913b4d55633e7d42ac8b68a3fef29a1436e1a046 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 21:23:19 +0100
Subject: [PATCH 159/164] move edit-todo.md to todo-list.md (consolidate)

---
 edit-todo.md | 1130 -----------------------------------------------
 todo-list.md | 1190 +++++++++++++++++++++++++++++++++++++++++++++++++-
 2 files changed, 1166 insertions(+), 1154 deletions(-)

diff --git a/edit-todo.md b/edit-todo.md
index d73518fc..e69de29b 100644
--- a/edit-todo.md
+++ b/edit-todo.md
@@ -1,1130 +0,0 @@
-### 5. `EDIT` an Item
-
-Editing a Todo List item is (_by far_)
-the most "advanced" functionality in the TodoMVC app
-because it involves multiple steps and "dynamic UI".
-
-Don't panic! Just because something has "more steps" than we have seen before,
-doesn't mean we should be "overwhelmed" by its' complexity.
-We just need to "break it down" into "bitesize chunks"!
-
-> _**Note**: the most "**difficult**" part of implementing the "edit an item"
-functionality is having a "mental picture" of the UX
-so that we can write the **tests first**
-and isolate the required functions (update actions) from the keyboard/mouse
-interactions. i.e. breaking down the steps into distinct "units"_.
-
-
-First let's review the TodoMVC "Editing" test assertions:
-
-
-#### `EDIT` Item Test Titles & Acceptance Criteria
-
-```
-5. Editing
-  ✓ should hide other controls when editing (718ms)
-  ✓ should save edits on enter (1093ms)
-  ✓ should save edits on blur (1256ms)
-  ✓ should trim entered text (1163ms)
-  ✓ should remove the item if an empty text string was entered (1033ms)
-  ✓ should cancel edits on escape (1115ms)
-```
-
-Further reading of the TodoMVC Spec:
-https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
-reveals the following acceptance criteria:
-
-
-+ [ ] Double-click on Item **`<label>title</label>`**
-to begin editing (_that item_)
-+ [ ] Render an **`<input class="edit">`**
-if in "**editing _mode_**"
-(_see screenshot and markup below_)
-  + [ ] Add `class="editing"` to `<li>` when editing
-  + [ ] Remove (_don't add_) `class="editing"` from `<li>`
-  when no longer editing.
-+ [ ] Set the `item.id` as the `id` of the **`<input class="edit">`**
-  so that we know which item is being edited.
-+ [ ] Add `case` in `keyup` Event Listener
-  for **`[Enter]`** keyup (_see **`subscriptions`** above_)
-  if we are in "**editing _mode_**",
-  get the text value from the **`<input class="edit">`**
-  _instead_ of **`<input id="new-todo">`**
-  so that we _update_ the _existing_ Todo Item title (text).
-+ [ ] When **`[Enter]`** is pressed while in "**editing _mode_**",
-"_dispatch_" the **`SAVE`** action: `signal('SAVE')`
-  + [ ] If the **`<input class="edit">`** is _blank_, `delete` the todo item.
-
-By _inspecting_ the DOM for the VanillaJS TodoMVC example:
-http://todomvc.com/examples/vanillajs <br />
-we can see that _two_ things change in the DOM when in "**editing _mode_**":
-
-+ **`<li class="editing">`** the CSS `class="editing"` is added
-to the todo list item being _edited_.
-+ **`<input class="edit">`** is inserted into the DOM _inside_ the `<li>`
-so the item title can be edited.
-
-![todo-edit-html](https://user-images.githubusercontent.com/194400/43995210-f4f484e0-9da1-11e8-8cc5-09f7309db963.png)
-
-Here is the _sample_ HTML in "**editing _mode_**"
-(_copy-pasted_) from the VanillaJS TodoMVC implementation
-the **`<li>`** is being edited (_as per screenshot above_):
-```HTML
-<ul class="todo-list">
-  <li data-id="1533987109280" class="completed ">
-    <div class="view">
-      <input class="toggle" type="checkbox" checked="">
-      <label>hello world</label>
-      <button class="destroy"></button>
-    </div>
-  </li>
-  <li data-id="1534013859716" class="editing">
-    <div class="view"><input class="toggle" type="checkbox">
-      <label>totes editing this todo item</label>
-      <button class="destroy">
-      </button>
-    </div>
-    <input class="edit">
-  </li>
-</ul>
-```
-
-From the HTML/DOM we can see that "editing" a Todo item is _deceptively_ simple
-from a markup perspective, we _just_ need to know _which_ item we are editing
-and render the appropriate tags/classes.
-
-#### Three Steps to `EDIT` an Item
-
-There are _three_ steps to Editing a Todo List item:
-
-1. ***Trigger*** the "double-click" event listener/handler
-  1.1. Receiving the `singal('EDIT', item.id)` _activates_ "**editing _mode_**".
-2. ***Edit*** the todo list item's `title` property
-3. ***Save*** the updated item `title`: `singal('SAVE', item.id)`
-
-For these _three_ steps there are two `update` actions: `EDIT` and `SAVE`
-which will require two new `case` statements in the `update` function.
-
-> _**Note**: there is a "fourth" step which is "**Cancelling**" an edit,
-which we will cover in **section 5.5** below, but for now we are
-only considering the "happy path" which results in a successful edit._
-
-
-
-#### 5.1 `render_item` view function with "Edit Mode" `<input class="edit">`
-
-In order to edit an item the **`render_item`** function
-will require **3 modifications**:
-
-1. Add the `signal('EDIT', item.id)` as an **`onclick` attribute** to `<label>`
-so that when a `<label>` is (double-)clicked
-the `model.editing` property is set by the `update` function (_see below_).
-2. Apply the **`"class=editing"`** to the list item which is being edited.
-3. Display the **`<input class="edit">`**
-with the Todo list item title as it's **`value`** property.
-
-#### 5.2 `render_item` "Edit Mode" _Test_
-
-For the above modifications (_requirements_) we can write a _single_ test
-with four assertions. Append the following code to `test/todo-app.test.js`:
-
-```js
-test.only('5. Editing: > Render an item in "editing mode"', function (t) {
-  elmish.empty(document.getElementById(id));
-  localStorage.removeItem('elmish_' + id);
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false },
-      { id: 1, title: "Bootstrap for as long as you can", done: false },
-      { id: 2, title: "Let's solve our own problem", done: false }
-    ],
-    hash: '#/', // the "route" to display
-    editing: 2 // edit the 3rd todo list item (which has id == 2)
-  };
-
-  // render the ONE todo list item in "editing mode" based on model.editing:
-  document.getElementById(id).appendChild(
-    app.render_item(model.todos[2], model, mock_signal),
-  );
-  // test that signal (in case of the test mock_signal) is onclick attribute:
-  t.equal(document.querySelectorAll('.view > label')[0].onclick.toString(),
-    mock_signal().toString(), "mock_signal is onclick attribute of label");
-
-  // test that the <li class="editing"> and <input class="edit"> was rendered:
-  t.equal(document.querySelectorAll('.editing').length, 1,
-    "<li class='editing'> element is visible");
-  t.equal(document.querySelectorAll('.edit').length, 1,
-    "<input class='edit'> element is visible");
-  t.equal(document.querySelectorAll('.edit')[0].value, model.todos[2].title,
-    "<input class='edit'> has value: " + model.todos[2].title);
-  t.end();
-});
-```
-
-There is quite a lot to "unpack" here, but the main gist is that
-based on the `model.editing` key being set to `2`, our `render_item` function,
-will add the `editing` CSS class to the `<li>` element and render an
-`<input>` with CSS class `edit`.
-The TodoMVC style sheet (`todomvc-app.css`) will take care of displaying
-the input correctly.
-
-Setting the **`onclick`** attribute of the `<label>` element
-to whatever is passed in as the third argument of `redner_item`
-i.e. the `signal` will mean that a specific action will be dispatched/triggered
-when the `<label>` element is clicked.
-
-
-> **SPOILER ALERT**: If you want to _try_ to make the "Edit Mode" _Test_
-assertions _pass_ without reading the "solution",
-do it now before proceeding to the reading the _implementation_ section.
-
-<br />
-
-#### 5.2 `render_item` "Edit Mode" _Implementation_
-
-Given that there are 4 assertions that need to pass
-and we know there are 3 changes that need to be made
-to the `render_item` function,
-rather than leaving you (_the reader_) wondering "_where do I start?!_",
-here is the code that makes the tests pass:
-
-_Before_:
-```js
-function render_item (item, model, signal) {
-  return (
-    li([
-      "data-id=" + item.id,
-      "id=" + item.id,
-      item.done ? "class=completed" : ""
-    ], [
-      div(["class=view"], [
-        input([
-          item.done ? "checked=true" : "",
-          "class=toggle",
-          "type=checkbox",
-          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
-          ],[]), // <input> does not have any nested elements
-        label([], [text(item.title)]),
-        button(["class=destroy",
-        typeof signal === 'function' ? signal('DELETE', item.id) : ''])
-      ]) // </div>
-    ]) // </li>
-  )
-}
-```
-
-_After_:
-```js
-function render_item (item, model, signal) {
-  return (
-    li([
-      "data-id=" + item.id,
-      "id=" + item.id,
-      item.done ? "class=completed" : "",
-      model && model.editing && model.editing === item.id ? "class=editing" : ""
-    ], [
-      div(["class=view"], [
-        input([
-          item.done ? "checked=true" : "",
-          "class=toggle",
-          "type=checkbox",
-          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
-          ], []), // <input> does not have any nested elements
-        label([ typeof signal === 'function' ? signal('EDIT', item.id) : '' ],
-          [text(item.title)]),
-        button(["class=destroy",
-          typeof signal === 'function' ? signal('DELETE', item.id) : ''])
-        ]
-      ), // </div>
-    ].concat(model && model.editing && model.editing === item.id ? [ // editing?
-      input(["class=edit", "id=" + item.id, "value=" + item.title, "autofocus"])
-    ] : [])) // </li>
-  )
-}
-```
-Let's walk through the three code changes made:
-
-1. Adding `"class=editing"` to the `<li>` based on `model.editing`
-is the simplest code modification, similar to the conditional attribute
-`class=completed` on the previous line.
-
-```js
-model && model.editing && model.editing === item.id ? "class=editing" : ""
-````
-
-We include the check for `model && model.editing` because if either of these
-two are `undefined` there's no need to keep checking.
-Only if the `model.editing` matches the `item.id`
-(_the todo list item being rendered_) do we render the **`"class=editing"`**.
-Only one todo list item `title` will be edited at once,
-so this will only match (_at most_) _one_ item in the `model.todos` array.
-
-2. Setting the **`signal('EDIT', item.id)`**
-
-_Why_ do we need the `typeof signal` (_type-checking_)...?
-
-```js
-label([ typeof signal === 'function' ? signal('EDIT', item.id) : '' ],
-  [text(item.title)]),
-```
-
-Why _can't_ we just write this:
-
-```js
-label([signal('EDIT', item.id)], [text(item.title)]),
-```
-
-Given that **`signal`** is the final argument to the `render_item` function,
-it is considered an _optional_ argument.
-If for any reason the `render_item` function is invoked _without_ the `singal`
-parameter, then attempting to _invoke_ **`signal('EDIT', item.id)`**
-will result in a **`ReferenceError: signal is not defined`** which will
-"crash" the app _fatally_.
-
-If you are the _only_ person who is going to write code that will invoke
-`render_item`, you don't need to "worry" about the `typeof signal`
-because there is "no need" for type-checking the `signal`;
-surely you won't _forget_ to invoke it with a valid `signal` ...
-_however_ we _always_ approach our JavaScript code a
-["***defensive programming***"](https://en.wikipedia.org/wiki/Defensive_programming)
-perspective
-because we _know_ from _experience_
-that banking on the
-["***happy path***"](https://en.wikipedia.org/wiki/Happy_path)
-in JS code
-is like driving without a seatbelt;
-you might be "fine" most of the time, but when something "bad" happens,
-you will go flying through the windscreen and have a _really_ bad day!
-
-![dilbert-bugs](https://user-images.githubusercontent.com/194400/45164547-8f555d00-b1ea-11e8-9767-e23350c1e9a0.png)
-
-If you want to _avoid_ having to do _manual_ "type-checking",
-use **`Elm`**, it does all this for you _transparently_.
-
-3. Append the **`<input class="edit">`**
-to the `<li>` if in "**editing _mode_**":
-
-```js
-].concat(model && model.editing && model.editing === item.id ? [ // editing?
-  input(["class=edit", "id=" + item.id, "value=" + item.title, "autofocus"])
-] : [])) // </li>
-```
-The _reason_ we use `.concat` is to allow us to
-_optionally_ render the element or _nothing_ then _append_ it to the
-Array of child elements nested in the `<li>`.
-
-An _alternative_ to using `.concat()` could be an empty `div` node:
-```js
-model && model.editing && model.editing === item.id ? // editing?
-  input(["class=edit", "id=" + item.id, "value=" + item.title, "autofocus"])
-  : div() // empty element.
-```
-This is because attempting to return anything other than a DOM element
-will result in the following error:
-```js
-TypeError: Argument 1 of Node.appendChild does not implement interface Node
-```
-We are not "fans" of having "empty" elements in the DOM, it's "sloppy". <br />
-Hence the `concat()` approach which results in "clean" DOM.
-
-At this point our test assertions all pass:
-```sh
-node test/todo-app.test.js
-```
-
-![render_item-tests-pass](https://user-images.githubusercontent.com/194400/45167506-2c1af900-b1f1-11e8-9898-af46f979fdbd.png)
-
-But we are building a _visual_ application and are not _seeing_ anything ...
-
-#### _Visualise_ Editing Mode?
-
-Let's take a _brief_ detour to _visualise_ the progress we have made.
-
-Open the `examples/todo-list/index.html` file
-and alter the contents of the `<script>` tag:
-```html
-<script>
-  var model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false },
-      { id: 1, title: "Bootstrap for as long as you can", done: false },
-      { id: 2, title: "Let's solve our own problem", done: false }
-    ],
-    hash: '#/', // the "route" to display
-    editing: 2 // edit the 3rd todo list item (which has id == 2)
-  };
-  mount(model, update, view, 'app', subscriptions);
-</script>
-```
-
-Then in your terminal, start the live-server:
-```sh
-npm start
-```
-In your browser, vist: http://127.0.0.1:8000/examples/todo-list/ <br />
-You should see that the _third_ todo list item is in "**editing _mode_**":
-
-![elm-todomvc-editing-item](https://user-images.githubusercontent.com/194400/45180706-0eab5680-b214-11e8-9dcf-a8c4476e4b11.png)
-
-Nothing will happen (_yet_) if you attempt to "save" any changes.
-Let's work on the `case` (_handler_) for **`signal('EDIT', item.id)`**
-which will handle the "double-click" event and set `model.editing`.
-
-
-### 5.2 Double-Click item `<label>` to Edit
-
-The TodoMVC ***spec*** for item
-https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
-includes the line:
-
-```sh
-Double-clicking the <label> activates editing mode, by toggling the .editing class on its <li>
-```
-
-> _**Note**: the sample TodoMVC Browser Tests:
-https://github.com/tastejs/todomvc/tree/master/tests#example-output
-does **not** include a test-case for **double-clicking**.
-We are going to add one below for "extra credit"._
-
-Since Double-clicking/tapping is the _only_ way to edit a todo item,
-we feel that it deserves a test.
-
-#### _How_ do we Track Double-Clicking?
-
-When we don't know how to do something, a good place to start is to search
-for the keywords we want, e.g: "JavaScript detect double-click event"
-for which the top result is the following StackOverflow Q/A:
-https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event
-
-Reading though all the answers, we determine that the most relevant (_to us_)
-is: https://stackoverflow.com/a/16033129/1148249 (_which uses "vanilla" JS_):
-
-[![stackoverflow-double-click-example](https://user-images.githubusercontent.com/194400/45124122-14942f80-b161-11e8-94c0-f54f2352bdd5.png)](https://stackoverflow.com/a/16033129/1148249)
-
->_**Note**: when you find a StackOverflow question/answer **helpful,
-upvote** to show your appreciation!_
-
-```html
-<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
-<script>
-  function doubleclick(el, onsingle, ondouble) {
-    if (el.getAttribute("data-dblclick") == null) {
-      el.setAttribute("data-dblclick", 1);
-      setTimeout(function () {
-        if (el.getAttribute("data-dblclick") == 1) {
-          onsingle();
-        }
-        el.removeAttribute("data-dblclick");
-      }, 300);
-    } else {
-      el.removeAttribute("data-dblclick");
-      ondouble();
-    }
-  }
-</script>
-```
-Given that we are using the Elm Architecture to manage the DOM,
-we don't want a function that _alters_ the DOM.
-So we are going to _borrow_ the _logic_ from this example but _simplify_ it.
-Since we are not mutating the DOM by setting `data-dblclick` attributes,
-we won't need to remove the attribute using a `setTimeout`,
-
-
-### 5.2 `'EDIT' update case` _Test_
-
-In keeping with our TDD approach,
-our _first_ step when adding the `case` expression
-for `'EDIT'` in the `update` function is to write a _test_.
-
-Append following test code to your `test/todo-app.test.js` file:
-
-```js
-test.only('5.2 Double-click an item <label> to edit it', function (t) {
-  elmish.empty(document.getElementById(id));
-  localStorage.removeItem('todos-elmish_' + id);
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false },
-      { id: 1, title: "Let's solve our own problem", done: false }
-    ],
-    hash: '#/' // the "route" to display
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  const label = document.querySelectorAll('.view > label')[1]
-  // "double-click" i.e. click the <label> twice in quick succession:
-  label.click();
-  label.click();
-  // confirm that we are now in editing mode:
-  t.equal(document.querySelectorAll('.editing').length, 1,
-    "<li class='editing'> element is visible");
-  t.equal(document.querySelectorAll('.edit')[0].value, model.todos[1].title,
-    "<input class='edit'> has value: " + model.todos[1].title);
-  t.end();
-});
-```
-If you attempt to run this test: `node test/todo-app.test.js`
-you will see output similar to the following:
-
-![edit-double-click-test-failing](https://user-images.githubusercontent.com/194400/45183202-54b7e880-b21b-11e8-84d8-7b3b50162113.png)
-
-Let's write the code necessary to make the test assertions _pass_!
-If you want to try this yourself based on the StackOverflow answer (_above_),
-go for it! (_don't scroll down to the "answer" till you have tried..._)
-
-### 5.2 `'EDIT' update case` _Implementation_
-
-Given our "research" (_above_) of how to implement a "double-click" handler,
-we can write the `'EDIT'` case as the following:
-
-```js
-case 'EDIT':
-  // this code is inspired by: https://stackoverflow.com/a/16033129/1148249
-  // simplified as we are not altering the DOM!
-  if (new_model.clicked && new_model.clicked === data &&
-    Date.now() - 300 < new_model.click_time ) { // DOUBLE-CLICK < 300ms
-      new_model.editing = data;
-      console.log('DOUBLE-CLICK', "item.id=", data,
-      "| model.editing=", model.editing,
-      "| diff Date.now() - new_model.click_time: ",
-      Date.now(), "-", new_model.click_time, "=",
-      Date.now() - new_model.click_time);
-  }
-  else { // first click
-    new_model.clicked = data; // so we can check if same item clicked twice!
-    new_model.click_time = Date.now(); // timer to detect double-click 300ms
-    new_model.editing = false; // reset
-    console.log('FIRST CLICK! data:', data);
-  }
-  break;
-```
-If you ignore/remove the `console.log` lines (_which we are using for now!_),
-the code is only a few lines long:
-```js
-case 'EDIT':
-  // this code is inspired by: https://stackoverflow.com/a/16033129/1148249
-  // simplified as we are not altering the DOM!
-  if (new_model.clicked && new_model.clicked === data &&
-    Date.now() - 300 < new_model.click_time ) { // DOUBLE-CLICK < 300ms
-      new_model.editing = data;
-  }
-  else { // first click
-    new_model.clicked = data; // so we can check if same item clicked twice!
-    new_model.click_time = Date.now(); // timer to detect double-click 300ms
-    new_model.editing = false; // reset
-  }
-  break;
-```
-The main "purpose" of this code is to _detect_ if a `<label>` was clicked
-twice in the space of 300 milliseconds and apply the `item.id` to
-the `model.editing` property so that we know which `<li>` to render in
-"editing mode".
-
-Run the test and watch it _pass_: `node test/todo-app.test.js`
-![edit-double-click-test-pass](https://user-images.githubusercontent.com/194400/45183878-3bb03700-b21d-11e8-9842-be62113bfe0a.png)
-
-In this case the time between the two clicks was 31 milliseconds,
-so they will count as a "double-click"!
-
-
-If a `<label>` is clicked slowly, the `model.editing` will _not_ be set,
-and we will _not_ enter "editing mode".
-Let's add a quick test for the scenario
-where two clicks are more than 300ms apart.
-
-Append following test code to your `test/todo-app.test.js` file:
-
-```js
-test.only('5.2.2 Slow clicks do not count as double-click > no edit!', function (t) {
-  elmish.empty(document.getElementById(id));
-  localStorage.removeItem('todos-elmish_' + id);
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false },
-      { id: 1, title: "Let's solve our own problem", done: false }
-    ],
-    hash: '#/' // the "route" to display
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  const label = document.querySelectorAll('.view > label')[1]
-  // "double-click" i.e. click the <label> twice in quick succession:
-  label.click();
-  setTimeout(function (){
-    label.click();
-    // confirm that we are now in editing mode:
-    t.equal(document.querySelectorAll('.editing').length, 0,
-      "<li class='editing'> element is NOT visible");
-    t.end();
-  }, 301)
-});
-```
-
-There is no need to write any code to make this test pass,
-this is merely an additional test to _confirm_ that our check for the
-time between clicks works; clicks spaced more than 300ms will not count
-as "double-click".
-
-![edit-item-not-double-click](https://user-images.githubusercontent.com/194400/45184155-ff310b00-b21d-11e8-8f6c-ef6d699861cf.png)
-
-
-### 5.3 `'SAVE'` a Revised Todo Item Title after Editing it
-
-
-
-
-
-### 5.3 `'SAVE' update case` _Test_
-
-Append following test code to your `test/todo-app.test.js` file:
-
-```js
-test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
-  elmish.empty(document.getElementById(id));
-  localStorage.removeItem('todos-elmish_' + id);
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false },
-      { id: 1, title: "Let's solve our own problem", done: false }
-    ],
-    hash: '#/', // the "route" to display
-    editing: 1 // edit the 3rd todo list item (which has id == 2)
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  // change the
-  const updated_title = "Do things that don\'t scale!  "
-  // apply the updated_title to the <input class="edit">:
-  document.querySelectorAll('.edit')[0].value = updated_title;
-  // trigger the [Enter] keyboard key to ADD the new todo:
-  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
-  // confirm that the todo item title was updated to the updated_title:
-  const label = document.querySelectorAll('.view > label')[1].textContent;
-  t.equal(label, updated_title.trim(),
-      "item title updated to:" + updated_title + ' (trimmed)');
-  t.end();
-});
-```
-If you attempt to run this test: `node test/todo-app.test.js`
-you will see output similar to the following:
-
-![save-edit-test-fails](https://user-images.githubusercontent.com/194400/45187886-2c83b600-b22a-11e8-8782-6d3fcaa240df.png)
-
-
-### 5.3 `'SAVE' update case` _Implementation_
-
-The _first_ step in the implementation is to create the `'SAVE'` case
-in `update` function:
-
-```js
-case 'SAVE':
-  var edit = document.getElementsByClassName('edit')[0];
-  var value = edit.value;
-  var id = parseInt(edit.id, 10);
-  // End Editing
-  new_model.clicked = false;
-  new_model.editing = false;
-
-  if (!value || value.length === 0) { // delete item if title is blank:
-    return update('DELETE', new_model, id);
-  }
-  // update the value of the item.title that has been edited:
-  new_model.todos = new_model.todos.map(function (item) {
-    if (item.id === id && value && value.length > 0) {
-      item.title = value.trim();
-    }
-    return item; // return all todo items.
-  });
-  break;
-```
-
-The _second_ step is _triggering_ this `case` in the `subscriptions`
-event listener for `keyup`:
-
-_Before_:
-
-```js
-document.addEventListener('keyup', function handler (e) {
-  switch(e.keyCode) {
-    case ENTER_KEY:
-      var new_todo = document.getElementById('new-todo');
-      if(new_todo.value.length > 0) {
-        signal('ADD')(); // invoke singal inner callback
-        new_todo.value = ''; // reset <input> so we can add another todo
-        document.getElementById('new-todo').focus();
-      }
-      break;
-  }
-});
-```
-
-
-_After_:
-
-```js
-document.addEventListener('keyup', function handler (e) {
-  switch(e.keyCode) {
-    case ENTER_KEY:
-      var editing = document.getElementsByClassName('editing');
-      if (editing && editing.length > 0) {
-        signal('SAVE')(); // invoke singal inner callback
-      }
-
-      var new_todo = document.getElementById('new-todo');
-      if(new_todo.value.length > 0) {
-        signal('ADD')(); // invoke singal inner callback
-        new_todo.value = ''; // reset <input> so we can add another todo
-        document.getElementById('new-todo').focus();
-      }
-      break;
-  }
-});
-```
-
-When you run the tests: `node test/todo-app.test.js`
-they should now _pass_:
-![save-update-test-pass](https://user-images.githubusercontent.com/194400/45188350-d879d100-b22b-11e8-8669-94e080a25ef7.png)
-
-
-### 5.4 `'SAVE'` a _Blank_ item.title _deletes_ the item _Test_
-
-Our mini-mission is to make the following TodoMVC test assertion _pass_:
-
-```
-✓ should remove the item if an empty text string was entered (1033ms)
-```
-
-Append following test code to your `test/todo-app.test.js` file:
-
-```js
-test.only('5.4 SAVE should remove the item if an empty text string was entered',
-  function (t) {
-  elmish.empty(document.getElementById(id));
-  localStorage.removeItem('todos-elmish_' + id);
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false },
-      { id: 1, title: "Let's solve our own problem", done: false }
-    ],
-    hash: '#/', // the "route" to display
-    editing: 1 // edit the 3rd todo list item (which has id == 2)
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  t.equal(document.querySelectorAll('.view').length, 2, 'todo count: 2');
-  // apply empty string to the <input class="edit">:
-  document.querySelectorAll('.edit')[0].value = '';
-  // trigger the [Enter] keyboard key to ADD the new todo:
-  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
-  // confirm that the todo item was removed!
-  t.equal(document.querySelectorAll('.view').length, 1, 'todo count: 1');
-  t.end();
-});
-```
-If you attempt to run this test: `node test/todo-app.test.js`
-you will see output similar to the following:
-
-![save-blank-title-test-failing](https://user-images.githubusercontent.com/194400/45188593-e4b25e00-b22c-11e8-9623-26c8b017e9b1.png)
-
-### 5.4 `'SAVE'` a _Blank_ item.title _deletes_ the item _Implementation_
-
-To make this test pass we just need to add a couple of lines to the
-`'SAVE'` case in the `update` function:
-
-```js
-if (!value || value.length === 0) { // delete item if title is blank:
-  return update('DELETE', new_model, id);
-}
-```
-
-when you _re-run_ the tests, they will _pass_:
-
-![save-blank-title-test-pass](https://user-images.githubusercontent.com/194400/45188666-41ae1400-b22d-11e8-8154-176b5aaaea42.png)
-
-### 5.5 `'CANCEL'` edit on [esc] Key Press
-
-When a user presses the [esc] ("escape") key, editing should be "cancelled"
-without saving the changes:
-
-```
-✓ should cancel edits on escape
-```
-
-#### 5.5 `'CANCEL'` edit on [esc] _Test_
-
-
-Append following test code to your `test/todo-app.test.js` file:
-
-```js
-test.only('5.5 CANCEL should cancel edits on escape', function (t) {
-  elmish.empty(document.getElementById(id));
-  localStorage.removeItem('todos-elmish_' + id);
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false },
-      { id: 1, title: "Let's solve our own problem", done: false }
-    ],
-    hash: '#/', // the "route" to display
-    editing: 1 // edit the 3rd todo list item (which has id == 2)
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  t.equal(document.querySelectorAll('.view > label')[1].value,
-    model.todos[1].title, 'todo id 1 has title: ' + model.todos[1].title);
-  // apply empty string to the <input class="edit">:
-  document.querySelectorAll('.edit')[0].value = 'Hello World';
-  // trigger the [esc] keyboard key to CANCEL editing
-  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 27}));
-  // confirm the item.title is still the original title:
-  t.equal(document.querySelectorAll('.view > label')[1].value,
-      model.todos[1].title, 'todo id 1 has title: ' + model.todos[1].title);
-  t.end();
-});
-```
-If you attempt to run this test: `node test/todo-app.test.js`
-it should fail.
-
-### 5.5 `'CANCEL'` edit on [esc] _Implementation_
-
-To make this test pass we _first_ need to add a `'CANCEL'`
-`case` to the `update` function:
-
-```js
-case 'CANCEL':
-  new_model.clicked = false;
-  new_model.editing = false;
-  break;
-```
-_Second_ we need to _trigger_ the `'CANCEL'` action
-when the `[esc]` key is pressed, so we need to add a `case`
-to the `switch(e.keyCode) {` in the subscriptions event listener:
-
-_Before_:
-
-```js
-document.addEventListener('keyup', function handler (e) {
-switch(e.keyCode) {
-  case ENTER_KEY:
-    var editing = document.getElementsByClassName('editing');
-    if (editing && editing.length > 0) {
-      signal('SAVE')(); // invoke singal inner callback
-    }
-
-    var new_todo = document.getElementById('new-todo');
-    if(new_todo.value.length > 0) {
-      signal('ADD')(); // invoke singal inner callback
-      new_todo.value = ''; // reset <input> so we can add another todo
-      document.getElementById('new-todo').focus();
-    }
-    break;
-}
-});
-```
-
-
-_After_:
-
-```js
-document.addEventListener('keyup', function handler (e) {
-  console.log('e.keyCode:', e.keyCode, '| key:', e.key);
-
-  switch(e.keyCode) {
-    case ENTER_KEY:
-      var editing = document.getElementsByClassName('editing');
-      if (editing && editing.length > 0) {
-        signal('SAVE')(); // invoke singal inner callback
-      }
-
-      var new_todo = document.getElementById('new-todo');
-      if(new_todo.value.length > 0) {
-        signal('ADD')(); // invoke singal inner callback
-        new_todo.value = ''; // reset <input> so we can add another todo
-        document.getElementById('new-todo').focus();
-      }
-      break;
-    case ESCAPE_KEY:
-      signal('CANCEL')();
-      break;
-  }
-});
-```
-
-when you re-run the tests, they will pass:
-![cancel-editing-on-esc-keypress-test-passing](https://user-images.githubusercontent.com/194400/45189286-15e05d80-b230-11e8-938c-4df80e49fda9.png)
-
-### 6. Counter
-
-```
-✓ should display the current number of todo items
-```
-
-#### 6. Counter _Test_
-
-Append following test code to your `test/todo-app.test.js` file:
-
-```js
-test.only('6. Counter > should display the current number of todo items',
-  function (t) {
-  elmish.empty(document.getElementById(id));
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false },
-      { id: 1, title: "Bootstrap for as long as you can", done: false },
-      { id: 2, title: "Let's solve our own problem", done: false }
-    ],
-    hash: '#/'
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  // count:
-  const count = parseInt(document.getElementById('count').textContent, 10);
-  t.equal(count, model.todos.length, "displays todo item count: " + count);
-
-  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
-  localStorage.removeItem('todos-elmish_' + id);
-  t.end();
-});
-```
-
-Thankfully, the counter was already implemented above
-so this test **_already_ passes**:
-
-![counter-test-passing](https://user-images.githubusercontent.com/194400/45190621-ca7d7d80-b236-11e8-92b3-5a4fbda6f12a.png)
-
-Just keep on [_movin_'](https://youtu.be/uvRBUw_Ls2o)
-
-
-### 7. Clear Completed Button
-
-When items are complete we should be able to `delete` them in bulk.
-
-```
-✓ should display the number of completed items
-✓ should remove completed items when clicked
-✓ should be hidden when there are no items that are completed
-```
-
-#### 7. Clear Completed Button _Test_
-
-Append following test code to your `test/todo-app.test.js` file:
-
-```js
-test.only('7. Clear Completed > should display the number of completed items',
-  function (t) {
-  elmish.empty(document.getElementById(id));
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false },
-      { id: 1, title: "Bootstrap for as long as you can", done: true },
-      { id: 2, title: "Let's solve our own problem", done: true }
-    ],
-    hash: '#/'
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  // count todo items in DOM:
-  t.equal(document.querySelectorAll('.view').length, 3,
-    "at the start, there are 3 todo items in the DOM.");
-
-  // count completed items
-  const completed_count =
-    parseInt(document.getElementById('completed-count').textContent, 10);
-  const done_count = model.todos.filter(function(i) {return i.done }).length;
-  t.equal(completed_count, done_count,
-    "displays completed items count: " + completed_count);
-
-  // clear completed items:
-  const button = document.querySelectorAll('.clear-completed')[0];
-  button.click();
-
-  // confirm that there is now only ONE todo list item in the DOM:
-  t.equal(document.querySelectorAll('.view').length, 1,
-    "after clearing completed items, there is only 1 todo item in the DOM.");
-
-  // no clear completed button in the DOM when there are no "done" todo items:
-  t.equal(document.querySelectorAll('clear-completed').length, 0,
-    'no clear-completed button when there are no done items.')
-
-  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
-  localStorage.removeItem('todos-elmish_' + id);
-  t.end();
-});
-```
-
-#### 7. Clear Completed Button _Implementation_
-
-First we need to update the `button` section in the `render_footer` function
-to include the `done` count:
-
-_Before:_
-
-```js
-button(["class=clear-completed", "style=display:" + display_clear],
-  [
-    text("Clear completed")
-  ]
-)
-```
-
-_After:_
-
-```js
-button(["class=clear-completed", "style=display:" + display_clear,
-  signal('CLEAR_COMPLETED')
-  ],
-  [
-    text("Clear completed ["),
-    span(["id=completed-count"], [
-      text(done)
-    ]),
-    text("]")
-  ]
-)
-```
-
-_Seconde_ we need to add a `'CLEAR_COMPLETED'` `case` to the `update` function:
-
-```js
-case 'CLEAR_COMPLETED':
-  new_model.todos = new_model.todos.filter(function (item) {
-    return !item.done; // only return items which are item.done = false
-  });
-  break;
-```
-
-The tests should pass:
-
-![clear-completed-button-tests-passing](https://user-images.githubusercontent.com/194400/45191359-a58b0980-b23a-11e8-91bf-dcb016d6f4bb.png)
-
-<br />
-
-### 8. Persistence > Save Todo List items to `localStorage`
-
-```
-✓ should persist its data
-```
-
-#### 8. Persistence _Test_
-
-We have already covered saving the `model`
-to `localStorage` in _detail_ (_above_),
-we are adding a "proxy" test for completeness:
-
-```js
-test.only('8. Persistence > should persist its data', function (t) {
-  elmish.empty(document.getElementById(id));
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false }
-    ],
-    hash: '#/'
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  // confirm that the model is saved to localStorage
-  console.log('localStorage', localStorage.getItem('todos-elmish_' + id));
-  t.equal(localStorage.getItem('todos-elmish_' + id),
-    JSON.stringify(model), "data is persisted to localStorage");
-
-  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
-  localStorage.removeItem('todos-elmish_' + id);
-  t.end();
-});
-```
-
-Again, this test should _already_ pass:
-
-![persistence-test-passing](https://user-images.githubusercontent.com/194400/45190477-0a903080-b236-11e8-991c-bab61efb3d22.png)
-
-### 9. Routing
-
-The following assertions:
-```
-✓ should allow me to display active items
-✓ should allow me to display completed items
-✓ should allow me to display all items
-✓ should highlight the currently applied filter
-```
-
-+ `'SHOW_ALL'` the default view.
-+ `'SHOW_ACTIVE'` item.done === false
-+ `'SHOW_COMPLETED'` item.done === true
-
-
-#### 9. Routing _Test_
-
-Append following test code to your `test/todo-app.test.js` file:
-
-```js
-test.only('9. Routing > should allow me to display active/completed/all items',
-  function (t) {
-  elmish.empty(document.getElementById(id));
-  const model = {
-    todos: [
-      { id: 0, title: "Make something people want.", done: false },
-      { id: 1, title: "Bootstrap for as long as you can", done: true },
-      { id: 2, title: "Let's solve our own problem", done: true }
-    ],
-    hash: '#/active' // ONLY ACTIVE items
-  };
-  // render the view and append it to the DOM inside the `test-app` node:
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  t.equal(document.querySelectorAll('.view').length, 1, "one active item");
-  let selected = document.querySelectorAll('.selected')[0]
-  t.equal(selected.id, 'active', "active footer filter is selected");
-
-  // empty:
-  elmish.empty(document.getElementById(id));
-  localStorage.removeItem('todos-elmish_' + id);
-  // show COMPLTED items:
-  model.hash = '#/completed';
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  t.equal(document.querySelectorAll('.view').length, 2,
-    "two completed items");
-  selected = document.querySelectorAll('.selected')[0]
-  t.equal(selected.id, 'completed', "completed footer filter is selected");
-
-  // empty:
-  elmish.empty(document.getElementById(id));
-  localStorage.removeItem('todos-elmish_' + id);
-  // show ALL items:
-  model.hash = '#/';
-  elmish.mount(model, app.update, app.view, id, app.subscriptions);
-  t.equal(document.querySelectorAll('.view').length, 3,
-    "three items total");
-  selected = document.querySelectorAll('.selected')[0]
-  t.equal(selected.id, 'all', "all footer filter is selected");
-
-  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
-  localStorage.removeItem('todos-elmish_' + id);
-  t.end();
-});
-```
-
-
-#### 9. Routing _Implementation_
-
-Since this is the _final_ quest in the TodoMVC/Todo List App,
-the solution is _not_ included here.
-Spend some time trying to make the test assertions pass.
-
-If you get "_stuck_" consult the code in `todo-app.js`.
-
-#### 9.1 Routing _Bonus_
-
-As a _bonus_ level,
-you can add the following event listener to your `subscriptions`
-to make the router work when the url (hash) changes in the browser:
-
-```js
-window.onhashchange = function route () {
-  signal('ROUTE')();
-}
-```
-And the `'ROUTE'` `case` to your `update` function:
-```js
-case 'ROUTE':
-  new_model.hash = (window && window.location && window.location.hash) ?
-    window.location.hash : '#/';
-  break;
-```
diff --git a/todo-list.md b/todo-list.md
index 4b70e1ac..f04a6416 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -337,7 +337,7 @@ will be a `switch` statement
 (_because that is the "TEA" pattern_)
 a good test to _start_ with is the `default case`.
 
-Append following test code in `test/todo-app.test.js`:
+Append the following test code in `test/todo-app.test.js`:
 
 ```js
 test('todo `update` default case should return model unmodified', function (t) {
@@ -522,7 +522,7 @@ without affecting any _existing_ tests.
 
 #### `ADD` item _Test_
 
-Append following test code to your `test/todo-app.test.js` file:
+Append the following test code to your `test/todo-app.test.js` file:
 
 ```js
 test('`ADD` a new todo item to model.todos Array via `update`', function (t) {
@@ -618,7 +618,7 @@ we can dive straight into writing a _test_:
 
 #### `TOGGLE` item _Test_
 
-Append following test code to your `test/todo-app.test.js` file:
+Append the following test code to your `test/todo-app.test.js` file:
 
 ```js
 test('`TOGGLE` a todo item from done=false to done=true', function (t) {
@@ -662,7 +662,7 @@ is _precisely_ because we don't _need_
 to have a _**separate**_ function
 to "undo" an item if it has been "checked off".
 
-Append following test code to your `test/todo-app.test.js` file:
+Append the following test code to your `test/todo-app.test.js` file:
 
 ```js
 test('`TOGGLE` (undo) a todo item from done=true to done=false', function (t) {
@@ -915,7 +915,7 @@ to create _several_ `<li>` nested in a `<ul>`.
 
 #### `render_main` Test
 
-Append following test code to your `test/todo-app.test.js` file:
+Append the following test code to your `test/todo-app.test.js` file:
 
 ```js
 test('render "main" view using (elmish) HTML DOM functions', function (t) {
@@ -981,17 +981,6 @@ on http://todomvc.com/examples/vanillajs as our "guide":
 
 ![footer-screenshot](https://user-images.githubusercontent.com/194400/42633421-5eb20f24-85d8-11e8-94ad-bb653dd93ab0.png)
 
-there is:
-+ [ ] **`<footer>`** element with:
-  + [ ] **`<span>`** element which contains
-    + [ ] **`text`** node with: **"`{count}` item(s) left"**.
-  + [ ] **`<ul>`** containing
-    + [ ] 3 x **`<li>`** elements each with
-     + [ ] link (**`<a>`**) which allow the "user"
-     to ***filter*** which items appear in the **`<view>`**.
-  + [ ] a **`<button class="clear-completed">`**
-  which will **_Clear_ all `Completed`** items when clicked.
-
 ####  Dev Tools > Elements (inspector)
 
 ![todo-list-mvc-](https://user-images.githubusercontent.com/194400/43768735-f1f7798e-9a2f-11e8-9f73-c69ea63b1064.png)
@@ -1040,9 +1029,10 @@ These are the criteria (_checklist_) as described in [issues/53](https://github.
        this should be "driven" by the `model.hash` property.
     + [ ] Show **`Active`**: **` <a href="#/active">Active</a>`**
     + [ ] Show **`Completed`**: **`<a href="#/completed">Completed</a>`**
-  + [ ] **`<button class="clear-completed" style="display: block;">`** will **_Clear_ all `Completed`** items.
-    _pseudocode_:
-`var new_model =  model.todos.filter(function(item) { return item.done === false})`
+  + [ ] **`<button class="clear-completed" style="display: block;">`**
+    will **_Clear_ all `Completed`** items.
+    _sample code_: <br />
+`new_model.todos =  model.todos.filter(function(item) { return item.done === false })`
 
 #### _Estimate_ Time Required to Write `render_footer` Function
 
@@ -1462,7 +1452,8 @@ Testing it in your web browser you should see the desired result:
 > If you get stuck trying to make the test pass, see:
 [todo-app.js](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/commits/d1bd85e4d75afdc69fcf38b9d58947cdce18a9cf#diff-6be3e16fe7cfb4c00788d4d587374afdR85)
 
-Recommended reading on CSS `visibility:hidden` vs. `display:none` :
+Recommended reading on CSS `visibility:hidden` vs. `display:none`
+the difference is _important_ for UI:
 https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone
 
 <br />
@@ -1562,12 +1553,14 @@ by creating (_and exporting_) a **`subscriptions`** function
 in your **`examples/todo-list/todo-app.js`** file.
 
 If you get "_stuck_", checkout the sample code:
-[**`todo-app.js > subscriptions`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR189)
+[**`todo-app.js > subscriptions`**](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR320)
 
-0nce you see the tests passing:
+Once you see the tests passing:
 
 ![add-todo-tests-passing](https://user-images.githubusercontent.com/194400/43982691-08d81eee-9cef-11e8-92c3-341433884092.png)
 
+Let's add some _interaction_!
+
 
 #### 3. Mark all as completed
 
@@ -1645,6 +1638,14 @@ test.only('3. Mark all as completed ("TOGGLE_ALL")', function (t) {
 });
 ```
 
+> _Yes, it's a "big" test with several assertions.
+We prefer to keep them "clustered" together because they test
+the functionality as a "block".
+Some people prefer to split the assertions out into individual unit tests,
+our advice to the "practical developer" is: be pragmatic!
+If you are testing the functionality and the test is legible,
+there's no "harm" in having several assertions._
+
 If you attempt to run the test file:
 ```sh
 node test/todo-app.test.js
@@ -1747,7 +1748,7 @@ and removes it from the `model.todos` Array.
 
 ##### `DELETE` Item _Test_
 
-Append following test code to your `test/todo-app.test.js` file:
+Append the following test code to your `test/todo-app.test.js` file:
 
 ```js
 test.only('4.1 DELETE item by clicking <button class="destroy">', function (t) {
@@ -1827,9 +1828,1150 @@ should allow me to edit an item
 ```
 
 This is kinda _meaningless_ as an assertion.
-What does "edit an item" actually _mean_?
+What does "edit an item" actually _mean_? <br />
 (_we have expanded the acceptance criteria below..._)
 
+<br />
+
+### 5. `EDIT` an Item
+
+Editing a Todo List item is (_by far_)
+the most "advanced" functionality in the TodoMVC app
+because it involves multiple steps and "dynamic UI".
+
+Don't panic! Just because something has "more steps" than we have seen before,
+doesn't mean we should be "overwhelmed" by its' complexity.
+We just need to "break it down" into "bitesize chunks"!
+
+> _**Note**: the most "**difficult**" part of implementing the "edit an item"
+functionality is having a "mental picture" of the UX
+so that we can write the **tests first**
+and isolate the required functions (update actions) from the keyboard/mouse
+interactions. i.e. breaking down the steps into distinct "units"_.
+
+
+First let's review the TodoMVC "Editing" test assertions:
+
+
+#### `EDIT` Item Test Titles & Acceptance Criteria
+
+```
+5. Editing
+  ✓ should hide other controls when editing (718ms)
+  ✓ should save edits on enter (1093ms)
+  ✓ should save edits on blur (1256ms)
+  ✓ should trim entered text (1163ms)
+  ✓ should remove the item if an empty text string was entered (1033ms)
+  ✓ should cancel edits on escape (1115ms)
+```
+
+Further reading of the TodoMVC Spec:
+https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
+reveals the following acceptance criteria:
+
+
++ [ ] Double-click on Item **`<label>title</label>`**
+to begin editing (_that item_)
++ [ ] Render an **`<input class="edit">`**
+if in "**editing _mode_**"
+(_see screenshot and markup below_)
+  + [ ] Add `class="editing"` to `<li>` when editing
+  + [ ] Remove (_don't add_) `class="editing"` from `<li>`
+  when no longer editing.
++ [ ] Set the `item.id` as the `id` of the **`<input class="edit">`**
+  so that we know which item is being edited.
++ [ ] Add `case` in `keyup` Event Listener
+  for **`[Enter]`** keyup (_see **`subscriptions`** above_)
+  if we are in "**editing _mode_**",
+  get the text value from the **`<input class="edit">`**
+  _instead_ of **`<input id="new-todo">`**
+  so that we _update_ the _existing_ Todo Item title (text).
++ [ ] When **`[Enter]`** is pressed while in "**editing _mode_**",
+"_dispatch_" the **`SAVE`** action: `signal('SAVE')`
+  + [ ] If the **`<input class="edit">`** is _blank_, `delete` the todo item.
+
+By _inspecting_ the DOM for the VanillaJS TodoMVC example:
+http://todomvc.com/examples/vanillajs <br />
+we can see that _two_ things change in the DOM when in "**editing _mode_**":
+
++ **`<li class="editing">`** the CSS `class="editing"` is added
+to the todo list item being _edited_.
++ **`<input class="edit">`** is inserted into the DOM _inside_ the `<li>`
+so the item title can be edited.
+
+![todo-edit-html](https://user-images.githubusercontent.com/194400/43995210-f4f484e0-9da1-11e8-8cc5-09f7309db963.png)
+
+Here is the _sample_ HTML in "**editing _mode_**"
+(_copy-pasted_) from the VanillaJS TodoMVC implementation
+the **`<li>`** is being edited (_as per screenshot above_):
+```HTML
+<ul class="todo-list">
+  <li data-id="1533987109280" class="completed ">
+    <div class="view">
+      <input class="toggle" type="checkbox" checked="">
+      <label>hello world</label>
+      <button class="destroy"></button>
+    </div>
+  </li>
+  <li data-id="1534013859716" class="editing">
+    <div class="view"><input class="toggle" type="checkbox">
+      <label>totes editing this todo item</label>
+      <button class="destroy">
+      </button>
+    </div>
+    <input class="edit">
+  </li>
+</ul>
+```
+
+From the HTML/DOM we can see that "editing" a Todo item is _deceptively_ simple
+from a markup perspective, we _just_ need to know _which_ item we are editing
+and render the appropriate tags/classes.
+
+#### Three Steps to `EDIT` an Item
+
+There are _three_ steps to Editing a Todo List item:
+
+1. ***Trigger*** the "double-click" event listener/handler
+  1.1. Receiving the `singal('EDIT', item.id)` _activates_ "**editing _mode_**".
+2. ***Edit*** the todo list item's `title` property
+3. ***Save*** the updated item `title`: `singal('SAVE', item.id)`
+
+For these _three_ steps there are two `update` actions: `EDIT` and `SAVE`
+which will require two new `case` statements in the `update` function.
+
+> _**Note**: there is a "fourth" step which is "**Cancelling**" an edit,
+which we will cover in **section 5.5** below, but for now we are
+only considering the "happy path" which results in a successful edit._
+
+
+
+#### 5.1 `render_item` view function with "Edit Mode" `<input class="edit">`
+
+In order to edit an item the **`render_item`** function
+will require **3 modifications**:
+
+1. Add the `signal('EDIT', item.id)` as an **`onclick` attribute** to `<label>`
+so that when a `<label>` is (double-)clicked
+the `model.editing` property is set by the `update` function (_see below_).
+2. Apply the **`"class=editing"`** to the list item which is being edited.
+3. Display the **`<input class="edit">`**
+with the Todo list item title as it's **`value`** property.
+
+#### 5.2 `render_item` "Edit Mode" _Test_
+
+For the above modifications (_requirements_) we can write a _single_ test
+with four assertions. Append the following code to `test/todo-app.test.js`:
+
+```js
+test.only('5. Editing: > Render an item in "editing mode"', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: false },
+      { id: 2, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 2 // edit the 3rd todo list item (which has id == 2)
+  };
+
+  // render the ONE todo list item in "editing mode" based on model.editing:
+  document.getElementById(id).appendChild(
+    app.render_item(model.todos[2], model, mock_signal),
+  );
+  // test that signal (in case of the test mock_signal) is onclick attribute:
+  t.equal(document.querySelectorAll('.view > label')[0].onclick.toString(),
+    mock_signal().toString(), "mock_signal is onclick attribute of label");
+
+  // test that the <li class="editing"> and <input class="edit"> was rendered:
+  t.equal(document.querySelectorAll('.editing').length, 1,
+    "<li class='editing'> element is visible");
+  t.equal(document.querySelectorAll('.edit').length, 1,
+    "<input class='edit'> element is visible");
+  t.equal(document.querySelectorAll('.edit')[0].value, model.todos[2].title,
+    "<input class='edit'> has value: " + model.todos[2].title);
+  t.end();
+});
+```
+
+There is quite a lot to "unpack" here, but the main gist is that
+based on the `model.editing` key being set to `2`, our `render_item` function,
+will add the `editing` CSS class to the `<li>` element and render an
+`<input>` with CSS class `edit`.
+The TodoMVC style sheet (`todomvc-app.css`) will take care of displaying
+the input correctly.
+
+Setting the **`onclick`** attribute of the `<label>` element
+to whatever is passed in as the third argument of `redner_item`
+i.e. the `signal` will mean that a specific action will be dispatched/triggered
+when the `<label>` element is clicked.
+
+
+> **SPOILER ALERT**: If you want to _try_ to make the "Edit Mode" _Test_
+assertions _pass_ without reading the "solution",
+do it now before proceeding to the reading the _implementation_ section.
+
+<br />
+
+#### 5.2 `render_item` "Edit Mode" _Implementation_
+
+Given that there are 4 assertions that need to pass
+and we know there are 3 changes that need to be made
+to the `render_item` function,
+rather than leaving you (_the reader_) wondering "_where do I start?!_",
+here is the code that makes the tests pass:
+
+_Before_:
+```js
+function render_item (item, model, signal) {
+  return (
+    li([
+      "data-id=" + item.id,
+      "id=" + item.id,
+      item.done ? "class=completed" : ""
+    ], [
+      div(["class=view"], [
+        input([
+          item.done ? "checked=true" : "",
+          "class=toggle",
+          "type=checkbox",
+          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
+          ],[]), // <input> does not have any nested elements
+        label([], [text(item.title)]),
+        button(["class=destroy",
+        typeof signal === 'function' ? signal('DELETE', item.id) : ''])
+      ]) // </div>
+    ]) // </li>
+  )
+}
+```
+
+_After_:
+```js
+function render_item (item, model, signal) {
+  return (
+    li([
+      "data-id=" + item.id,
+      "id=" + item.id,
+      item.done ? "class=completed" : "",
+      model && model.editing && model.editing === item.id ? "class=editing" : ""
+    ], [
+      div(["class=view"], [
+        input([
+          item.done ? "checked=true" : "",
+          "class=toggle",
+          "type=checkbox",
+          typeof signal === 'function' ? signal('TOGGLE', item.id) : ''
+          ], []), // <input> does not have any nested elements
+        label([ typeof signal === 'function' ? signal('EDIT', item.id) : '' ],
+          [text(item.title)]),
+        button(["class=destroy",
+          typeof signal === 'function' ? signal('DELETE', item.id) : ''])
+        ]
+      ), // </div>
+    ].concat(model && model.editing && model.editing === item.id ? [ // editing?
+      input(["class=edit", "id=" + item.id, "value=" + item.title, "autofocus"])
+    ] : [])) // </li>
+  )
+}
+```
+Let's walk through the three code changes made:
+
+1. Adding `"class=editing"` to the `<li>` based on `model.editing`
+is the simplest code modification, similar to the conditional attribute
+`class=completed` on the previous line.
+
+```js
+model && model.editing && model.editing === item.id ? "class=editing" : ""
+````
+
+We include the check for `model && model.editing` because if either of these
+two are `undefined` there's no need to keep checking.
+Only if the `model.editing` matches the `item.id`
+(_the todo list item being rendered_) do we render the **`"class=editing"`**.
+Only one todo list item `title` will be edited at once,
+so this will only match (_at most_) _one_ item in the `model.todos` array.
+
+2. Setting the **`signal('EDIT', item.id)`**
+
+_Why_ do we need the `typeof signal` (_type-checking_)...?
+
+```js
+label([ typeof signal === 'function' ? signal('EDIT', item.id) : '' ],
+  [text(item.title)]),
+```
+
+Why _can't_ we just write this:
+
+```js
+label([signal('EDIT', item.id)], [text(item.title)]),
+```
+
+Given that **`signal`** is the final argument to the `render_item` function,
+it is considered an _optional_ argument.
+If for any reason the `render_item` function is invoked _without_ the `singal`
+parameter, then attempting to _invoke_ **`signal('EDIT', item.id)`**
+will result in a **`ReferenceError: signal is not defined`** which will
+"crash" the app _fatally_.
+
+If you are the _only_ person who is going to write code that will invoke
+`render_item`, you don't need to "worry" about the `typeof signal`
+because there is "no need" for type-checking the `signal`;
+surely you won't _forget_ to invoke it with a valid `signal` ...
+_however_ we _always_ approach our JavaScript code a
+["***defensive programming***"](https://en.wikipedia.org/wiki/Defensive_programming)
+perspective
+because we _know_ from _experience_
+that banking on the
+["***happy path***"](https://en.wikipedia.org/wiki/Happy_path)
+in JS code
+is like driving without a seatbelt;
+you might be "fine" most of the time, but when something "bad" happens,
+you will go flying through the windscreen and have a _really_ bad day!
+
+![dilbert-bugs](https://user-images.githubusercontent.com/194400/45164547-8f555d00-b1ea-11e8-9767-e23350c1e9a0.png)
+
+If you want to _avoid_ having to do _manual_ "type-checking",
+use **`Elm`**, it does all this for you _transparently_.
+
+3. Append the **`<input class="edit">`**
+to the `<li>` if in "**editing _mode_**":
+
+```js
+].concat(model && model.editing && model.editing === item.id ? [ // editing?
+  input(["class=edit", "id=" + item.id, "value=" + item.title, "autofocus"])
+] : [])) // </li>
+```
+The _reason_ we use `.concat` is to allow us to
+_optionally_ render the element or _nothing_ then _append_ it to the
+Array of child elements nested in the `<li>`.
+
+An _alternative_ to using `.concat()` could be an empty `div` node:
+```js
+model && model.editing && model.editing === item.id ? // editing?
+  input(["class=edit", "id=" + item.id, "value=" + item.title, "autofocus"])
+  : div() // empty element.
+```
+This is because attempting to return anything other than a DOM element
+will result in the following error:
+```js
+TypeError: Argument 1 of Node.appendChild does not implement interface Node
+```
+We are not "fans" of having "empty" elements in the DOM, it's "sloppy". <br />
+Hence the `concat()` approach which results in "clean" DOM.
+
+At this point our test assertions all pass:
+```sh
+node test/todo-app.test.js
+```
+
+![render_item-tests-pass](https://user-images.githubusercontent.com/194400/45167506-2c1af900-b1f1-11e8-9898-af46f979fdbd.png)
+
+But we are building a _visual_ application and are not _seeing_ anything ...
+
+#### _Visualise_ Editing Mode?
+
+Let's take a _brief_ detour to _visualise_ the progress we have made.
+
+Open the `examples/todo-list/index.html` file
+and alter the contents of the `<script>` tag:
+```html
+<script>
+  var model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: false },
+      { id: 2, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 2 // edit the 3rd todo list item (which has id == 2)
+  };
+  mount(model, update, view, 'app', subscriptions);
+</script>
+```
+
+Then in your terminal, start the live-server:
+```sh
+npm start
+```
+In your browser, vist: http://127.0.0.1:8000/examples/todo-list/ <br />
+You should see that the _third_ todo list item is in "**editing _mode_**":
+
+![elm-todomvc-editing-item](https://user-images.githubusercontent.com/194400/45180706-0eab5680-b214-11e8-9dcf-a8c4476e4b11.png)
+
+Nothing will happen (_yet_) if you attempt to "save" any changes.
+Let's work on the `case` (_handler_) for **`signal('EDIT', item.id)`**
+which will handle the "double-click" event and set `model.editing`.
+
+
+### 5.2 Double-Click item `<label>` to Edit
+
+The TodoMVC ***spec*** for item
+https://github.com/tastejs/todomvc/blob/master/app-spec.md#item
+includes the line:
+
+```sh
+Double-clicking the <label> activates editing mode, by toggling the .editing class on its <li>
+```
+
+> _**Note**: the sample TodoMVC Browser Tests:
+https://github.com/tastejs/todomvc/tree/master/tests#example-output
+does **not** include a test-case for **double-clicking**.
+We are going to add one below for "extra credit"._
+
+Since Double-clicking/tapping is the _only_ way to edit a todo item,
+we feel that it deserves a test.
+
+#### _How_ do we Track Double-Clicking?
+
+When we don't know how to do something, a good place to start is to search
+for the keywords we want, e.g: "JavaScript detect double-click event"
+for which the top result is the following StackOverflow Q/A:
+https://stackoverflow.com/questions/5497073/how-to-differentiate-single-click-event-and-double-click-event
+
+Reading though all the answers, we determine that the most relevant (_to us_)
+is: https://stackoverflow.com/a/16033129/1148249 (_which uses "vanilla" JS_):
+
+[![stackoverflow-double-click-example](https://user-images.githubusercontent.com/194400/45124122-14942f80-b161-11e8-94c0-f54f2352bdd5.png)](https://stackoverflow.com/a/16033129/1148249)
+
+>_**Note**: when you find a StackOverflow question/answer **helpful,
+upvote** to show your appreciation!_
+
+```html
+<div onclick="doubleclick(this, function(){alert('single')}, function(){alert('double')})">click me</div>
+<script>
+  function doubleclick(el, onsingle, ondouble) {
+    if (el.getAttribute("data-dblclick") == null) {
+      el.setAttribute("data-dblclick", 1);
+      setTimeout(function () {
+        if (el.getAttribute("data-dblclick") == 1) {
+          onsingle();
+        }
+        el.removeAttribute("data-dblclick");
+      }, 300);
+    } else {
+      el.removeAttribute("data-dblclick");
+      ondouble();
+    }
+  }
+</script>
+```
+Given that we are using the Elm Architecture to manage the DOM,
+we don't want a function that _alters_ the DOM.
+So we are going to _borrow_ the _logic_ from this example but _simplify_ it.
+Since we are not mutating the DOM by setting `data-dblclick` attributes,
+we won't need to remove the attribute using a `setTimeout`,
+
+
+### 5.2 `'EDIT' update case` _Test_
+
+In keeping with our TDD approach,
+our _first_ step when adding the `case` expression
+for `'EDIT'` in the `update` function is to write a _test_.
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('5.2 Double-click an item <label> to edit it', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  const label = document.querySelectorAll('.view > label')[1]
+  // "double-click" i.e. click the <label> twice in quick succession:
+  label.click();
+  label.click();
+  // confirm that we are now in editing mode:
+  t.equal(document.querySelectorAll('.editing').length, 1,
+    "<li class='editing'> element is visible");
+  t.equal(document.querySelectorAll('.edit')[0].value, model.todos[1].title,
+    "<input class='edit'> has value: " + model.todos[1].title);
+  t.end();
+});
+```
+If you attempt to run this test: `node test/todo-app.test.js`
+you will see output similar to the following:
+
+![edit-double-click-test-failing](https://user-images.githubusercontent.com/194400/45183202-54b7e880-b21b-11e8-84d8-7b3b50162113.png)
+
+Let's write the code necessary to make the test assertions _pass_!
+If you want to try this yourself based on the StackOverflow answer (_above_),
+go for it! (_don't scroll down to the "answer" till you have tried..._)
+
+### 5.2 `'EDIT' update case` _Implementation_
+
+Given our "research" (_above_) of how to implement a "double-click" handler,
+we can write the `'EDIT'` case as the following:
+
+```js
+case 'EDIT':
+  // this code is inspired by: https://stackoverflow.com/a/16033129/1148249
+  // simplified as we are not altering the DOM!
+  if (new_model.clicked && new_model.clicked === data &&
+    Date.now() - 300 < new_model.click_time ) { // DOUBLE-CLICK < 300ms
+      new_model.editing = data;
+      console.log('DOUBLE-CLICK', "item.id=", data,
+      "| model.editing=", model.editing,
+      "| diff Date.now() - new_model.click_time: ",
+      Date.now(), "-", new_model.click_time, "=",
+      Date.now() - new_model.click_time);
+  }
+  else { // first click
+    new_model.clicked = data; // so we can check if same item clicked twice!
+    new_model.click_time = Date.now(); // timer to detect double-click 300ms
+    new_model.editing = false; // reset
+    console.log('FIRST CLICK! data:', data);
+  }
+  break;
+```
+If you ignore/remove the `console.log` lines (_which we are using for now!_),
+the code is only a few lines long:
+```js
+case 'EDIT':
+  // this code is inspired by: https://stackoverflow.com/a/16033129/1148249
+  // simplified as we are not altering the DOM!
+  if (new_model.clicked && new_model.clicked === data &&
+    Date.now() - 300 < new_model.click_time ) { // DOUBLE-CLICK < 300ms
+      new_model.editing = data;
+  }
+  else { // first click
+    new_model.clicked = data; // so we can check if same item clicked twice!
+    new_model.click_time = Date.now(); // timer to detect double-click 300ms
+    new_model.editing = false; // reset
+  }
+  break;
+```
+The main "purpose" of this code is to _detect_ if a `<label>` was clicked
+twice in the space of 300 milliseconds and apply the `item.id` to
+the `model.editing` property so that we know which `<li>` to render in
+"editing mode".
+
+Run the test and watch it _pass_: `node test/todo-app.test.js`
+![edit-double-click-test-pass](https://user-images.githubusercontent.com/194400/45183878-3bb03700-b21d-11e8-9842-be62113bfe0a.png)
+
+In this case the time between the two clicks was 31 milliseconds,
+so they will count as a "double-click"!
+
+
+If a `<label>` is clicked slowly, the `model.editing` will _not_ be set,
+and we will _not_ enter "editing mode".
+Let's add a quick test for the scenario
+where two clicks are more than 300ms apart.
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('5.2.2 Slow clicks do not count as double-click > no edit!', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/' // the "route" to display
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  const label = document.querySelectorAll('.view > label')[1]
+  // "double-click" i.e. click the <label> twice in quick succession:
+  label.click();
+  setTimeout(function (){
+    label.click();
+    // confirm that we are now in editing mode:
+    t.equal(document.querySelectorAll('.editing').length, 0,
+      "<li class='editing'> element is NOT visible");
+    t.end();
+  }, 301)
+});
+```
+
+There is no need to write any code to make this test pass,
+this is merely an additional test to _confirm_ that our check for the
+time between clicks works; clicks spaced more than 300ms will not count
+as "double-click".
+
+![edit-item-not-double-click](https://user-images.githubusercontent.com/194400/45184155-ff310b00-b21d-11e8-8f6c-ef6d699861cf.png)
+
+
+### 5.3 `'SAVE'` a Revised Todo Item Title after Editing it
+
+
+
+
+
+### 5.3 `'SAVE' update case` _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('5.3 [ENTER] Key in edit mode triggers SAVE action', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 1 // edit the 3rd todo list item (which has id == 2)
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // change the
+  const updated_title = "Do things that don\'t scale!  "
+  // apply the updated_title to the <input class="edit">:
+  document.querySelectorAll('.edit')[0].value = updated_title;
+  // trigger the [Enter] keyboard key to ADD the new todo:
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
+  // confirm that the todo item title was updated to the updated_title:
+  const label = document.querySelectorAll('.view > label')[1].textContent;
+  t.equal(label, updated_title.trim(),
+      "item title updated to:" + updated_title + ' (trimmed)');
+  t.end();
+});
+```
+If you attempt to run this test: `node test/todo-app.test.js`
+you will see output similar to the following:
+
+![save-edit-test-fails](https://user-images.githubusercontent.com/194400/45187886-2c83b600-b22a-11e8-8782-6d3fcaa240df.png)
+
+
+### 5.3 `'SAVE' update case` _Implementation_
+
+The _first_ step in the implementation is to create the `'SAVE'` case
+in `update` function:
+
+```js
+case 'SAVE':
+  var edit = document.getElementsByClassName('edit')[0];
+  var value = edit.value;
+  var id = parseInt(edit.id, 10);
+  // End Editing
+  new_model.clicked = false;
+  new_model.editing = false;
+
+  if (!value || value.length === 0) { // delete item if title is blank:
+    return update('DELETE', new_model, id);
+  }
+  // update the value of the item.title that has been edited:
+  new_model.todos = new_model.todos.map(function (item) {
+    if (item.id === id && value && value.length > 0) {
+      item.title = value.trim();
+    }
+    return item; // return all todo items.
+  });
+  break;
+```
+
+The _second_ step is _triggering_ this `case` in the `subscriptions`
+event listener for `keyup`:
+
+_Before_:
+
+```js
+document.addEventListener('keyup', function handler (e) {
+  switch(e.keyCode) {
+    case ENTER_KEY:
+      var new_todo = document.getElementById('new-todo');
+      if(new_todo.value.length > 0) {
+        signal('ADD')(); // invoke singal inner callback
+        new_todo.value = ''; // reset <input> so we can add another todo
+        document.getElementById('new-todo').focus();
+      }
+      break;
+  }
+});
+```
+
+
+_After_:
+
+```js
+document.addEventListener('keyup', function handler (e) {
+  switch(e.keyCode) {
+    case ENTER_KEY:
+      var editing = document.getElementsByClassName('editing');
+      if (editing && editing.length > 0) {
+        signal('SAVE')(); // invoke singal inner callback
+      }
+
+      var new_todo = document.getElementById('new-todo');
+      if(new_todo.value.length > 0) {
+        signal('ADD')(); // invoke singal inner callback
+        new_todo.value = ''; // reset <input> so we can add another todo
+        document.getElementById('new-todo').focus();
+      }
+      break;
+  }
+});
+```
+
+When you run the tests: `node test/todo-app.test.js`
+they should now _pass_:
+![save-update-test-pass](https://user-images.githubusercontent.com/194400/45188350-d879d100-b22b-11e8-8669-94e080a25ef7.png)
+
+
+### 5.4 `'SAVE'` a _Blank_ item.title _deletes_ the item _Test_
+
+Our mini-mission is to make the following TodoMVC test assertion _pass_:
+
+```
+✓ should remove the item if an empty text string was entered (1033ms)
+```
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('5.4 SAVE should remove the item if an empty text string was entered',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 1 // edit the 3rd todo list item (which has id == 2)
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 2, 'todo count: 2');
+  // apply empty string to the <input class="edit">:
+  document.querySelectorAll('.edit')[0].value = '';
+  // trigger the [Enter] keyboard key to ADD the new todo:
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 13}));
+  // confirm that the todo item was removed!
+  t.equal(document.querySelectorAll('.view').length, 1, 'todo count: 1');
+  t.end();
+});
+```
+If you attempt to run this test: `node test/todo-app.test.js`
+you will see output similar to the following:
+
+![save-blank-title-test-failing](https://user-images.githubusercontent.com/194400/45188593-e4b25e00-b22c-11e8-9623-26c8b017e9b1.png)
+
+### 5.4 `'SAVE'` a _Blank_ item.title _deletes_ the item _Implementation_
+
+To make this test pass we just need to add a couple of lines to the
+`'SAVE'` case in the `update` function:
+
+```js
+if (!value || value.length === 0) { // delete item if title is blank:
+  return update('DELETE', new_model, id);
+}
+```
+
+when you _re-run_ the tests, they will _pass_:
+
+![save-blank-title-test-pass](https://user-images.githubusercontent.com/194400/45188666-41ae1400-b22d-11e8-8154-176b5aaaea42.png)
+
+### 5.5 `'CANCEL'` edit on [esc] Key Press
+
+When a user presses the [esc] ("escape") key, editing should be "cancelled"
+without saving the changes:
+
+```
+✓ should cancel edits on escape
+```
+
+#### 5.5 `'CANCEL'` edit on [esc] _Test_
+
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('5.5 CANCEL should cancel edits on escape', function (t) {
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/', // the "route" to display
+    editing: 1 // edit the 3rd todo list item (which has id == 2)
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view > label')[1].value,
+    model.todos[1].title, 'todo id 1 has title: ' + model.todos[1].title);
+  // apply empty string to the <input class="edit">:
+  document.querySelectorAll('.edit')[0].value = 'Hello World';
+  // trigger the [esc] keyboard key to CANCEL editing
+  document.dispatchEvent(new KeyboardEvent('keyup', {'keyCode': 27}));
+  // confirm the item.title is still the original title:
+  t.equal(document.querySelectorAll('.view > label')[1].value,
+      model.todos[1].title, 'todo id 1 has title: ' + model.todos[1].title);
+  t.end();
+});
+```
+If you attempt to run this test: `node test/todo-app.test.js`
+it should fail.
+
+### 5.5 `'CANCEL'` edit on [esc] _Implementation_
+
+To make this test pass we _first_ need to add a `'CANCEL'`
+`case` to the `update` function:
+
+```js
+case 'CANCEL':
+  new_model.clicked = false;
+  new_model.editing = false;
+  break;
+```
+_Second_ we need to _trigger_ the `'CANCEL'` action
+when the `[esc]` key is pressed, so we need to add a `case`
+to the `switch(e.keyCode) {` in the subscriptions event listener:
+
+_Before_:
+
+```js
+document.addEventListener('keyup', function handler (e) {
+switch(e.keyCode) {
+  case ENTER_KEY:
+    var editing = document.getElementsByClassName('editing');
+    if (editing && editing.length > 0) {
+      signal('SAVE')(); // invoke singal inner callback
+    }
+
+    var new_todo = document.getElementById('new-todo');
+    if(new_todo.value.length > 0) {
+      signal('ADD')(); // invoke singal inner callback
+      new_todo.value = ''; // reset <input> so we can add another todo
+      document.getElementById('new-todo').focus();
+    }
+    break;
+}
+});
+```
+
+
+_After_:
+
+```js
+document.addEventListener('keyup', function handler (e) {
+  console.log('e.keyCode:', e.keyCode, '| key:', e.key);
+
+  switch(e.keyCode) {
+    case ENTER_KEY:
+      var editing = document.getElementsByClassName('editing');
+      if (editing && editing.length > 0) {
+        signal('SAVE')(); // invoke singal inner callback
+      }
+
+      var new_todo = document.getElementById('new-todo');
+      if(new_todo.value.length > 0) {
+        signal('ADD')(); // invoke singal inner callback
+        new_todo.value = ''; // reset <input> so we can add another todo
+        document.getElementById('new-todo').focus();
+      }
+      break;
+    case ESCAPE_KEY:
+      signal('CANCEL')();
+      break;
+  }
+});
+```
+
+when you re-run the tests, they will pass:
+![cancel-editing-on-esc-keypress-test-passing](https://user-images.githubusercontent.com/194400/45189286-15e05d80-b230-11e8-938c-4df80e49fda9.png)
+
+### 6. Counter
+
+```
+✓ should display the current number of todo items
+```
+
+#### 6. Counter _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('6. Counter > should display the current number of todo items',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: false },
+      { id: 2, title: "Let's solve our own problem", done: false }
+    ],
+    hash: '#/'
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // count:
+  const count = parseInt(document.getElementById('count').textContent, 10);
+  t.equal(count, model.todos.length, "displays todo item count: " + count);
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});
+```
+
+Thankfully, the counter was already implemented above
+so this test **_already_ passes**:
+
+![counter-test-passing](https://user-images.githubusercontent.com/194400/45190621-ca7d7d80-b236-11e8-92b3-5a4fbda6f12a.png)
+
+Just keep on [_movin_'](https://youtu.be/uvRBUw_Ls2o)
+
+
+### 7. Clear Completed Button
+
+When items are complete we should be able to `delete` them in bulk.
+
+```
+✓ should display the number of completed items
+✓ should remove completed items when clicked
+✓ should be hidden when there are no items that are completed
+```
+
+#### 7. Clear Completed Button _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('7. Clear Completed > should display the number of completed items',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: true },
+      { id: 2, title: "Let's solve our own problem", done: true }
+    ],
+    hash: '#/'
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // count todo items in DOM:
+  t.equal(document.querySelectorAll('.view').length, 3,
+    "at the start, there are 3 todo items in the DOM.");
+
+  // count completed items
+  const completed_count =
+    parseInt(document.getElementById('completed-count').textContent, 10);
+  const done_count = model.todos.filter(function(i) {return i.done }).length;
+  t.equal(completed_count, done_count,
+    "displays completed items count: " + completed_count);
+
+  // clear completed items:
+  const button = document.querySelectorAll('.clear-completed')[0];
+  button.click();
+
+  // confirm that there is now only ONE todo list item in the DOM:
+  t.equal(document.querySelectorAll('.view').length, 1,
+    "after clearing completed items, there is only 1 todo item in the DOM.");
+
+  // no clear completed button in the DOM when there are no "done" todo items:
+  t.equal(document.querySelectorAll('clear-completed').length, 0,
+    'no clear-completed button when there are no done items.')
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});
+```
+
+#### 7. Clear Completed Button _Implementation_
+
+First we need to update the `button` section in the `render_footer` function
+to include the `done` count:
+
+_Before:_
+
+```js
+button(["class=clear-completed", "style=display:" + display_clear],
+  [
+    text("Clear completed")
+  ]
+)
+```
+
+_After:_
+
+```js
+button(["class=clear-completed", "style=display:" + display_clear,
+  signal('CLEAR_COMPLETED')
+  ],
+  [
+    text("Clear completed ["),
+    span(["id=completed-count"], [
+      text(done)
+    ]),
+    text("]")
+  ]
+)
+```
+
+_Seconde_ we need to add a `'CLEAR_COMPLETED'` `case` to the `update` function:
+
+```js
+case 'CLEAR_COMPLETED':
+  new_model.todos = new_model.todos.filter(function (item) {
+    return !item.done; // only return items which are item.done = false
+  });
+  break;
+```
+
+The tests should pass:
+
+![clear-completed-button-tests-passing](https://user-images.githubusercontent.com/194400/45191359-a58b0980-b23a-11e8-91bf-dcb016d6f4bb.png)
+
+<br />
+
+### 8. Persistence > Save Todo List items to `localStorage`
+
+```
+✓ should persist its data
+```
+
+#### 8. Persistence _Test_
+
+We have already covered saving the `model`
+to `localStorage` in _detail_ (_above_),
+we are adding a "proxy" test for completeness:
+
+```js
+test.only('8. Persistence > should persist its data', function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false }
+    ],
+    hash: '#/'
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  // confirm that the model is saved to localStorage
+  console.log('localStorage', localStorage.getItem('todos-elmish_' + id));
+  t.equal(localStorage.getItem('todos-elmish_' + id),
+    JSON.stringify(model), "data is persisted to localStorage");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});
+```
+
+Again, this test should _already_ pass:
+
+![persistence-test-passing](https://user-images.githubusercontent.com/194400/45190477-0a903080-b236-11e8-991c-bab61efb3d22.png)
+
+### 9. Routing
+
+The following assertions:
+```
+✓ should allow me to display active items
+✓ should allow me to display completed items
+✓ should allow me to display all items
+✓ should highlight the currently applied filter
+```
+
++ `'SHOW_ALL'` the default view.
++ `'SHOW_ACTIVE'` item.done === false
++ `'SHOW_COMPLETED'` item.done === true
+
+
+#### 9. Routing _Test_
+
+Append following test code to your `test/todo-app.test.js` file:
+
+```js
+test.only('9. Routing > should allow me to display active/completed/all items',
+  function (t) {
+  elmish.empty(document.getElementById(id));
+  const model = {
+    todos: [
+      { id: 0, title: "Make something people want.", done: false },
+      { id: 1, title: "Bootstrap for as long as you can", done: true },
+      { id: 2, title: "Let's solve our own problem", done: true }
+    ],
+    hash: '#/active' // ONLY ACTIVE items
+  };
+  // render the view and append it to the DOM inside the `test-app` node:
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 1, "one active item");
+  let selected = document.querySelectorAll('.selected')[0]
+  t.equal(selected.id, 'active', "active footer filter is selected");
+
+  // empty:
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  // show COMPLTED items:
+  model.hash = '#/completed';
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 2,
+    "two completed items");
+  selected = document.querySelectorAll('.selected')[0]
+  t.equal(selected.id, 'completed', "completed footer filter is selected");
+
+  // empty:
+  elmish.empty(document.getElementById(id));
+  localStorage.removeItem('todos-elmish_' + id);
+  // show ALL items:
+  model.hash = '#/';
+  elmish.mount(model, app.update, app.view, id, app.subscriptions);
+  t.equal(document.querySelectorAll('.view').length, 3,
+    "three items total");
+  selected = document.querySelectorAll('.selected')[0]
+  t.equal(selected.id, 'all', "all footer filter is selected");
+
+  elmish.empty(document.getElementById(id)); // clear DOM ready for next test
+  localStorage.removeItem('todos-elmish_' + id);
+  t.end();
+});
+```
+
+
+#### 9. Routing _Implementation_
+
+Since this is the _final_ quest in the TodoMVC/Todo List App,
+the solution is _not_ included here.
+Spend some time trying to make the test assertions pass.
+
+If you get "_stuck_" consult the code in `todo-app.js`.
+
+#### 9.1 Routing _Bonus_
+
+As a _bonus_ level,
+you can add the following event listener to your `subscriptions`
+to make the router work when the url (hash) changes in the browser:
+
+```js
+window.onhashchange = function route () {
+  signal('ROUTE')();
+}
+```
+And the `'ROUTE'` `case` to your `update` function:
+```js
+case 'ROUTE':
+  new_model.hash = (window && window.location && window.location.hash) ?
+    window.location.hash : '#/';
+  break;
+```
+
+
+# Done!
+
+Try out our Todo List App
+and share it with you friends!
+https://github.com/dwyl/learn-heroku
+
+
 <!--
 ## What _Next_?
 

From a72ce67bdc04ea4d9b2ad59e2833d54166f44bbc Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 21:23:53 +0100
Subject: [PATCH 160/164] remove edit-todo.md ... copy/code is in todo-list.md

---
 edit-todo.md | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 delete mode 100644 edit-todo.md

diff --git a/edit-todo.md b/edit-todo.md
deleted file mode 100644
index e69de29b..00000000

From 21e74f63540ff25df1799b846ab8ad8ad9f147f1 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 21:27:09 +0100
Subject: [PATCH 161/164] recommend reading
 https://github.com/dwyl/learn-heroku to deploy your creation!

---
 todo-list.md | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index f04a6416..4449931e 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -2967,8 +2967,19 @@ case 'ROUTE':
 
 # Done!
 
-Try out our Todo List App
-and share it with you friends!
+run:
+```sh
+npm start
+```
+
+You should have a fully-featured Todo list App!
+
+![elm-todo](https://user-images.githubusercontent.com/194400/45237254-10d5e980-b2d6-11e8-8281-b95452bde519.gif)
+
+Try out your Todo List App!
+
+Consider sharing your creation with your friends
+by deploying it to Heroku!
 https://github.com/dwyl/learn-heroku
 
 

From 26e661e573972130805b0720481314c221979b68 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Fri, 7 Sep 2018 21:32:39 +0100
Subject: [PATCH 162/164] add hyperlink to implementation of DELETE update
 case:
 https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR57

---
 todo-list.md | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index 4449931e..56a6280c 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -1816,18 +1816,18 @@ that you feel is most _readable_.
 
 If you get "_stuck_" or want to confirm your understanding
 of the implementation of the `DELETE` functionality,
-check the code in `todo-app.js` > `update` function.
+check the code in [`todo-app.js` > `update`](https://github.com/dwyl/learn-elm-architecture-in-javascript/pull/45/files#diff-6be3e16fe7cfb4c00788d4d587374afdR57)
+function.
 
 
 > Rather bizarrely the edit functionality is mentioned
-_both_ in the Item and Editing sections.
-So we will cover it in the Editing section next.
+_both_ in the Item and Editing sections. <br />
 
 ```
 should allow me to edit an item
 ```
 
-This is kinda _meaningless_ as an assertion.
+> This is kinda _meaningless_ as an assertion.
 What does "edit an item" actually _mean_? <br />
 (_we have expanded the acceptance criteria below..._)
 
@@ -2405,8 +2405,8 @@ as "double-click".
 
 ### 5.3 `'SAVE'` a Revised Todo Item Title after Editing it
 
-
-
+Once you are done editing a todo list item title,
+you want to _save_ your changes!
 
 
 ### 5.3 `'SAVE' update case` _Test_

From ee9c95da27b40787f2b3d809e4d9593455635a31 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 8 Sep 2018 09:09:49 +0100
Subject: [PATCH 163/164] expand section 9 to explain the code a bit better ...
 #60

---
 examples/todo-list/todo-app.js |  2 +-
 todo-list.md                   | 92 +++++++++++++++++++++++++++++++---
 2 files changed, 86 insertions(+), 8 deletions(-)

diff --git a/examples/todo-list/todo-app.js b/examples/todo-list/todo-app.js
index 259aea5a..22032fb8 100644
--- a/examples/todo-list/todo-app.js
+++ b/examples/todo-list/todo-app.js
@@ -191,7 +191,7 @@ function render_main (model, signal) {
               return !item.done;
             case '#/completed':
               return item.done;
-            default:
+            default: // if hash doesn't match Active/Completed render ALL todos:
               return item;
           }
         })
diff --git a/todo-list.md b/todo-list.md
index 56a6280c..71581451 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -2939,31 +2939,109 @@ test.only('9. Routing > should allow me to display active/completed/all items',
 
 #### 9. Routing _Implementation_
 
+Given that we are using "hash" based routing,
+where the content of the app changes in response to the hash portion of the URL
+implementing routing is a matter of _filtering_ the Todo List items
+in response to the hash.
+
+There 3 steps to implementing this:
+
+1. Create an Event Listener for the `window.onhashchange` event
+which invokes `signal('ROUTE')`.
+
+2. Create a `'ROUTE'` case in the `update` function
+which sets the `model.hash` value.
+
+3. Based on the `model.hash` value defined above,
+filter the `model.todos`.
+
 Since this is the _final_ quest in the TodoMVC/Todo List App,
-the solution is _not_ included here.
-Spend some time trying to make the test assertions pass.
+the we encourage you to attempt to write this
+before/without looking at the "solution".
+
+Remember that you only want to write the _minimum_ code
+necessary to make the test assertions pass.
 
 If you get "_stuck_" consult the code in `todo-app.js`.
 
-#### 9.1 Routing _Bonus_
 
-As a _bonus_ level,
-you can add the following event listener to your `subscriptions`
-to make the router work when the url (hash) changes in the browser:
+#### 9.1 Routing _Event Listener_
+
+Add the following event listener to your `subscriptions`
+to "listen" for when the URL hash changes:
+
 
 ```js
 window.onhashchange = function route () {
   signal('ROUTE')();
 }
 ```
-And the `'ROUTE'` `case` to your `update` function:
+
+#### 9.2 ROUTE `case`
+
+Add the `'ROUTE'` `case`
+to your `update` function:
+
 ```js
 case 'ROUTE':
   new_model.hash = (window && window.location && window.location.hash) ?
     window.location.hash : '#/';
   break;
 ```
+***OR***, if you are confident that your app
+will _always_ run in a Web Browser with a `window.location.hash` property:
+
+```js
+case 'ROUTE':
+  new_model.hash = window.location.hash;
+  break;
+```
 
+#### But _Why...?_
+
+**Question**: Why do we "copy" the `window.location.hash`
+to `model.hash` instead of just "getting" it from `window.location.hash`
+each time we need to know what the hash is? <br />
+
+**Answer**: technically, we could _avoid_ having
+the `'ROUTE'` case in `update` completely
+and just use the `window.location.hash`
+instead of `model.hash`,
+the _reason_ we add this "step"
+is that we want to have a "single source of truth" in the `model`.
+This is a _good_ habit to have
+as it makes _debugging_ your application
+_much_ easier because you _know **exactly**_
+what the "full state" of the application is/was at any point in time.  
+
+You will often read/hear the expression "_easier to **reason about**_",
+all this means is that you can "work through" something in your head
+without getting "confused" by having "too many things to keep track of".
+
+
+#### 9.3 _Filter_ the `model.todos` based on `model.hash`
+
+We need to do the filtering "_non-destructively_",
+so it needs to happen in the **`view`** (_just before rendering_)
+rather than
+
+> _**Question**: is this "**logic in the view**"...?_ <br />
+> _**Answer**: **Yes**, it is **presentation logic**.
+The `view` function, **`render_main` in this case
+is merely **filtering** the data **non-destructively** before rendering it.
+Using `Array.filter` is a "fancy" (concise) way of writing an `if` statement.
+`if` statements are "OK" in views because they are
+"conditional presentation logic"
+i.e. only show this section `if` a certain variable is set. <br />_
+_By using `Array.filter` followed by `Array.map` we render a **subset**
+of the `model.todos` **without** "**mutating**" the `model.todos` Array.
+In other words if the URL hash is `'#/completed'`
+the user only wants to see the "completed" items,
+we don't want to "lose" the todos that are not yet complete,
+we just want to "hide" them temporarily,
+if we were to apply this filter in the `update` function it would
+"lose" the other todos (i.e. destroy the data!)
+the best way to filter data non-destructively is in the **view**_
 
 # Done!
 

From f986777940e38e71e5f02c00d5b995086b53eaf3 Mon Sep 17 00:00:00 2001
From: nelsonic <contact.nelsonic+github@gmail.com>
Date: Sat, 8 Sep 2018 09:44:59 +0100
Subject: [PATCH 164/164] add extended explanation of non-destructive filters
 in section 9 (routing) for #46

---
 todo-list.md | 98 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 95 insertions(+), 3 deletions(-)

diff --git a/todo-list.md b/todo-list.md
index 71581451..2785d192 100644
--- a/todo-list.md
+++ b/todo-list.md
@@ -3022,8 +3022,94 @@ without getting "confused" by having "too many things to keep track of".
 #### 9.3 _Filter_ the `model.todos` based on `model.hash`
 
 We need to do the filtering "_non-destructively_",
-so it needs to happen in the **`view`** (_just before rendering_)
-rather than
+so it needs to happen in the **`view`** function `render_main`
+(_just before rendering_).
+
+`render_main` function _Before_ (_without filter_):
+
+```js
+function render_main (model, signal) {
+  // Requirement #1 - No Todos, should hide #footer and #main
+  var display = "style=display:"
+    + (model.todos && model.todos.length > 0 ? "block" : "none");
+  // console.log('display:', display);
+  return (
+    section(["class=main", "id=main", display], [ // hide if no todo items.
+      input(["id=toggle-all", "type=checkbox",
+        typeof signal === 'function' ? signal('TOGGLE_ALL') : '',
+        (model.all_done ? "checked=checked" : ""),
+        "class=toggle-all"
+      ], []),
+      label(["for=toggle-all"], [ text("Mark all as complete") ]),
+      ul(["class=todo-list"],
+        (model.todos && model.todos.length > 0) ?
+        model.todos.map(function (item) {
+          return render_item(item, model, signal)
+        }) : null
+      ) // </ul>
+    ]) // </section>
+  )
+}
+
+```
+
+`render_main` function _After_ (_with `model.hash` filter_):
+
+```js
+function render_main (model, signal) {
+  // Requirement #1 - No Todos, should hide #footer and #main
+  var display = "style=display:"
+    + (model.todos && model.todos.length > 0 ? "block" : "none");
+  // console.log('display:', display);
+  return (
+    section(["class=main", "id=main", display], [ // hide if no todo items.
+      input(["id=toggle-all", "type=checkbox",
+        typeof signal === 'function' ? signal('TOGGLE_ALL') : '',
+        (model.all_done ? "checked=checked" : ""),
+        "class=toggle-all"
+      ], []),
+      label(["for=toggle-all"], [ text("Mark all as complete") ]),
+      ul(["class=todo-list"],
+        (model.todos && model.todos.length > 0) ?
+        model.todos
+        .filter(function (item) {
+          switch(model.hash) {
+            case '#/active':
+              return !item.done;
+            case '#/completed':
+              return item.done;
+            default: // if hash doesn't match Active/Completed render ALL todos:
+              return item;
+          }
+        })
+        .map(function (item) {
+          return render_item(item, model, signal)
+        }) : null // if there are no todos, don't show anything.
+      ) // </ul>
+    ]) // </section>
+  )
+}
+```
+The important lines are:
+```js
+.filter(function (item) {
+  switch(model.hash) {
+    case '#/active':
+      return !item.done;
+    case '#/completed':
+      return item.done;
+    default: // if hash doesn't match Active/Completed render ALL todos:
+      return item;
+  }
+})
+```
+`Array.filter` returns a ***`new`*** Array
+(_it does not "mutate" the Array it is filtering_)
+so we will only see the todo items that match the `hash` in the URL.
+`'#/active'` means any todos which are not yet done i.e. `!done`
+and `'#/completed'` are the items which are `done=true`.
+If the URL `hash` does not match either of these two filters,
+then simply "show everything".
 
 > _**Question**: is this "**logic in the view**"...?_ <br />
 > _**Answer**: **Yes**, it is **presentation logic**.
@@ -3045,7 +3131,8 @@ the best way to filter data non-destructively is in the **view**_
 
 # Done!
 
-run:
+In your terminal, run:
+
 ```sh
 npm start
 ```
@@ -3056,11 +3143,16 @@ You should have a fully-featured Todo list App!
 
 Try out your Todo List App!
 
+If you found this tutorial _useful_,
+please "star" the project on GitHub to show your appreciation!
+
 Consider sharing your creation with your friends
 by deploying it to Heroku!
 https://github.com/dwyl/learn-heroku
 
 
+# Thanks for Learning with Us! 
+
 <!--
 ## What _Next_?