From 37598e5812dfdeae1defb777f7154caf545e7cc7 Mon Sep 17 00:00:00 2001
From: Micah Godbolt <mgodbolt@microsoft.com>
Date: Thu, 21 Feb 2019 14:29:33 -0800
Subject: [PATCH] breaking up into stages

---
 package-lock.json                             | 12 ++-
 step1-02/README.md                            |  8 +-
 step1-02/demo/index.html                      |  1 +
 step1-02/demo/style.css                       | 37 ++++++++
 step1-02/exercise/index.html                  | 25 +++++
 step1-02/exercise/style.css                   | 41 ++++++++
 step1-02/{finished => final}/index.html       |  5 +-
 step1-02/{finished => final}/style.css        |  0
 step1-02/index.html                           | 16 ++++
 step1-03/README.md                            |  3 +-
 step1-03/demo/index.html                      | 70 ++++++++++++++
 step1-03/{ => demo}/style.css                 |  0
 step1-03/exercise/index.html                  | 82 ++++++++++++++++
 {step1-05/src => step1-03/exercise}/style.css |  0
 step1-03/final/index.html                     | 90 ++++++++++++++++++
 step1-03/final/style.css                      | 49 ++++++++++
 step1-03/index.html                           | 94 ++-----------------
 step1-04/README.md                            | 12 +++
 step1-04/demo/index.html                      |  6 ++
 step1-04/{ => demo}/src/App.tsx               |  3 +-
 step1-04/{ => demo}/src/components/Button.css |  1 +
 step1-04/{ => demo}/src/components/Button.tsx |  0
 .../{ => demo}/src/components/Counter.tsx     | 12 ++-
 step1-04/{ => demo}/src/index.tsx             |  0
 step1-04/final/index.html                     |  6 ++
 step1-04/final/src/App.tsx                    | 14 +++
 step1-04/final/src/components/Button.css      | 15 +++
 step1-04/final/src/components/Button.tsx      | 10 ++
 step1-04/final/src/components/Counter.tsx     | 27 ++++++
 step1-04/final/src/index.tsx                  |  4 +
 step1-04/index.html                           | 17 +++-
 step1-05/README.md                            |  5 +
 step1-05/demo/index.html                      |  9 ++
 step1-05/{ => demo}/src/App.tsx               |  0
 step1-05/demo/src/components/TodoFooter.tsx   |  9 ++
 step1-05/demo/src/components/TodoHeader.tsx   |  7 ++
 step1-05/demo/src/components/TodoList.tsx     |  7 ++
 step1-05/demo/src/components/TodoListItem.tsx |  7 ++
 step1-05/{ => demo}/src/index.tsx             |  0
 step1-05/demo/src/style.css                   | 49 ++++++++++
 step1-05/exercise/index.html                  |  9 ++
 step1-05/exercise/src/App.tsx                 | 16 ++++
 .../exercise/src/components/TodoFooter.tsx    |  9 ++
 .../src/components/TodoHeader.tsx             |  0
 step1-05/exercise/src/components/TodoList.tsx |  7 ++
 .../src/components/TodoListItem.tsx           |  0
 step1-05/exercise/src/index.tsx               |  4 +
 step1-05/exercise/src/style.css               | 49 ++++++++++
 step1-05/final/index.html                     |  9 ++
 step1-05/final/src/App.tsx                    | 16 ++++
 .../{ => final}/src/components/TodoFooter.tsx |  0
 step1-05/final/src/components/TodoHeader.tsx  | 20 ++++
 .../{ => final}/src/components/TodoList.tsx   |  0
 .../final/src/components/TodoListItem.tsx     | 13 +++
 step1-05/final/src/index.tsx                  |  4 +
 step1-05/final/src/style.css                  | 49 ++++++++++
 step1-05/index.html                           | 18 ++--
 step1-06/README.md                            |  1 +
 step1-06/src/components/TodoHeader.tsx        | 10 +-
 step1-07/README.md                            | 23 +++++
 step1-07/src/TodoApp.tsx                      | 23 +----
 webpack.config.js                             |  2 +-
 62 files changed, 906 insertions(+), 129 deletions(-)
 create mode 100644 step1-02/demo/index.html
 create mode 100644 step1-02/demo/style.css
 create mode 100644 step1-02/exercise/index.html
 create mode 100644 step1-02/exercise/style.css
 rename step1-02/{finished => final}/index.html (87%)
 rename step1-02/{finished => final}/style.css (100%)
 create mode 100644 step1-03/demo/index.html
 rename step1-03/{ => demo}/style.css (100%)
 create mode 100644 step1-03/exercise/index.html
 rename {step1-05/src => step1-03/exercise}/style.css (100%)
 create mode 100644 step1-03/final/index.html
 create mode 100644 step1-03/final/style.css
 create mode 100644 step1-04/README.md
 create mode 100644 step1-04/demo/index.html
 rename step1-04/{ => demo}/src/App.tsx (75%)
 rename step1-04/{ => demo}/src/components/Button.css (91%)
 rename step1-04/{ => demo}/src/components/Button.tsx (100%)
 rename step1-04/{ => demo}/src/components/Counter.tsx (51%)
 rename step1-04/{ => demo}/src/index.tsx (100%)
 create mode 100644 step1-04/final/index.html
 create mode 100644 step1-04/final/src/App.tsx
 create mode 100644 step1-04/final/src/components/Button.css
 create mode 100644 step1-04/final/src/components/Button.tsx
 create mode 100644 step1-04/final/src/components/Counter.tsx
 create mode 100644 step1-04/final/src/index.tsx
 create mode 100644 step1-05/demo/index.html
 rename step1-05/{ => demo}/src/App.tsx (100%)
 create mode 100644 step1-05/demo/src/components/TodoFooter.tsx
 create mode 100644 step1-05/demo/src/components/TodoHeader.tsx
 create mode 100644 step1-05/demo/src/components/TodoList.tsx
 create mode 100644 step1-05/demo/src/components/TodoListItem.tsx
 rename step1-05/{ => demo}/src/index.tsx (100%)
 create mode 100644 step1-05/demo/src/style.css
 create mode 100644 step1-05/exercise/index.html
 create mode 100644 step1-05/exercise/src/App.tsx
 create mode 100644 step1-05/exercise/src/components/TodoFooter.tsx
 rename step1-05/{ => exercise}/src/components/TodoHeader.tsx (100%)
 create mode 100644 step1-05/exercise/src/components/TodoList.tsx
 rename step1-05/{ => exercise}/src/components/TodoListItem.tsx (100%)
 create mode 100644 step1-05/exercise/src/index.tsx
 create mode 100644 step1-05/exercise/src/style.css
 create mode 100644 step1-05/final/index.html
 create mode 100644 step1-05/final/src/App.tsx
 rename step1-05/{ => final}/src/components/TodoFooter.tsx (100%)
 create mode 100644 step1-05/final/src/components/TodoHeader.tsx
 rename step1-05/{ => final}/src/components/TodoList.tsx (100%)
 create mode 100644 step1-05/final/src/components/TodoListItem.tsx
 create mode 100644 step1-05/final/src/index.tsx
 create mode 100644 step1-05/final/src/style.css
 create mode 100644 step1-07/README.md

diff --git a/package-lock.json b/package-lock.json
index ef2b86a..6f95a46 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3817,6 +3817,7 @@
           "version": "2.3.5",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.2",
             "yallist": "^3.0.0"
@@ -3835,6 +3836,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -3928,6 +3930,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -4013,7 +4016,8 @@
         "safe-buffer": {
           "version": "5.1.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -4113,12 +4117,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
diff --git a/step1-02/README.md b/step1-02/README.md
index f8aa83a..151ab5a 100644
--- a/step1-02/README.md
+++ b/step1-02/README.md
@@ -2,8 +2,12 @@
 
 ## Demo
 
-Scaffold out page
+Write html tag down to ul > li, footer
+add CSS link
+Add active styles, describe specificity
 
 ## Exercise
 
-Add and style footer
+Update list item to match (already styled)
+duplicate 3 more times
+Add and style footer content
diff --git a/step1-02/demo/index.html b/step1-02/demo/index.html
new file mode 100644
index 0000000..0e76edd
--- /dev/null
+++ b/step1-02/demo/index.html
@@ -0,0 +1 @@
+<!DOCTYPE html>
diff --git a/step1-02/demo/style.css b/step1-02/demo/style.css
new file mode 100644
index 0000000..4df1196
--- /dev/null
+++ b/step1-02/demo/style.css
@@ -0,0 +1,37 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  width: 400px;
+  margin: 20px auto;
+}
+
+h1 {
+  text-align: center;
+}
+
+.addTodo {
+  display: flex;
+}
+
+.textfield {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.submit {
+  border: none;
+  padding: 5px 10px;
+}
+
+.filter {
+  margin: 10px 0 0;
+}
+
+.filter button {
+  background: transparent;
+  border: none;
+}
+
+.todos {
+  list-style: none;
+  padding: 0;
+}
diff --git a/step1-02/exercise/index.html b/step1-02/exercise/index.html
new file mode 100644
index 0000000..52cf71f
--- /dev/null
+++ b/step1-02/exercise/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>todos</h1>
+      <div class="addTodo">
+        <input class="textfield" placeholder="add todo" />
+        <button class="submit">Add</button>
+      </div>
+      <nav class="filter">
+        <button class="active">all</button>
+        <button>active</button>
+        <button>completed</button>
+      </nav>
+    </header>
+    <main>
+      <ul class="todos">
+        <li>Todo 1</li>
+      </ul>
+    </main>
+  </body>
+</html>
diff --git a/step1-02/exercise/style.css b/step1-02/exercise/style.css
new file mode 100644
index 0000000..986a4e1
--- /dev/null
+++ b/step1-02/exercise/style.css
@@ -0,0 +1,41 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  width: 400px;
+  margin: 20px auto;
+}
+
+h1 {
+  text-align: center;
+}
+
+.addTodo {
+  display: flex;
+}
+
+.textfield {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.submit {
+  border: none;
+  padding: 5px 10px;
+}
+
+.filter {
+  margin: 10px 0 0;
+}
+
+.filter button {
+  background: transparent;
+  border: none;
+}
+
+.filter .active {
+  border-bottom: 2px solid blue;
+}
+
+.todos {
+  list-style: none;
+  padding: 0;
+}
diff --git a/step1-02/finished/index.html b/step1-02/final/index.html
similarity index 87%
rename from step1-02/finished/index.html
rename to step1-02/final/index.html
index 3f93472..0ea87e3 100644
--- a/step1-02/finished/index.html
+++ b/step1-02/final/index.html
@@ -6,7 +6,10 @@
   <body>
     <header>
       <h1>todos</h1>
-      <div class="addTodo"><input class="textfield" placeholder="add todo" /><button class="submit">Add</button></div>
+      <div class="addTodo">
+        <input class="textfield" placeholder="add todo" />
+        <button class="submit">Add</button>
+      </div>
       <nav class="filter">
         <button class="active">all</button>
         <button>active</button>
diff --git a/step1-02/finished/style.css b/step1-02/final/style.css
similarity index 100%
rename from step1-02/finished/style.css
rename to step1-02/final/style.css
diff --git a/step1-02/index.html b/step1-02/index.html
index e69de29..a245e9e 100644
--- a/step1-02/index.html
+++ b/step1-02/index.html
@@ -0,0 +1,16 @@
+<html>
+  <head>
+    <link rel="stylesheet" href="../assets/shared.css" />
+    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
+  </head>
+
+  <body class="ms-Fabric">
+    <div class="Container">
+      <ul class="Tiles">
+        <li class="Tile"><a href="./demo/index.html" class="Tile-link">Demo Start</a></li>
+        <li class="Tile"><a href="./exercise/index.html" class="Tile-link">Exercise Start</a></li>
+        <li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
+      </ul>
+    </div>
+  </body>
+</html>
diff --git a/step1-03/README.md b/step1-03/README.md
index be998f1..3be1ffa 100644
--- a/step1-03/README.md
+++ b/step1-03/README.md
@@ -9,10 +9,11 @@ already done
 
 Walk through 'addTodo'
 attach addTodo to button
-write clearInput/add to addTodo
+write clearInput
 write updateRemaining
 
 ## Exercise
 
+add filter to filter buttons
 write clearCompleted
 add to footer button
diff --git a/step1-03/demo/index.html b/step1-03/demo/index.html
new file mode 100644
index 0000000..d03de04
--- /dev/null
+++ b/step1-03/demo/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>todos</h1>
+      <div class="addTodo">
+        <input class="textfield" placeholder="add todo" />
+        <button class="submit add">Add</button>
+      </div>
+      <nav class="filter">
+        <button class="active">all</button>
+        <button>active</button>
+        <button>completed</button>
+      </nav>
+    </header>
+
+    <ul class="todos">
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 1 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 2 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 3 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 4 </span></label>
+      </li>
+    </ul>
+    <footer>
+      <span><span class="remaining">4</span> items left</span>
+      <button class="submit">Clear Completed</button>
+    </footer>
+  </body>
+
+  <script type="text/javascript">
+    function getTodoText() {
+      return document.querySelector('.textfield').value;
+    }
+
+    function addTodo() {
+      const todo = document.querySelector('.todo');
+      const newTodo = todo.cloneNode(true);
+      newTodo.querySelector('.title').innerText = getTodoText();
+      todo.parentElement.insertBefore(newTodo, todo);
+
+      // clearInput();
+      // updateRemaining();
+    }
+
+    function filter(scope, button) {
+      document.querySelector('.active').classList.remove('active');
+      button.classList.add('active');
+      for (let todo of document.querySelectorAll('.todo')) {
+        const checked = todo.querySelector('input').checked == true;
+        if (scope == 'all') {
+          todo.hidden = false;
+        } else if (scope == 'active') {
+          todo.hidden = checked;
+        } else if (scope == 'completed') {
+          todo.hidden = !checked;
+        }
+      }
+    }
+  </script>
+</html>
diff --git a/step1-03/style.css b/step1-03/demo/style.css
similarity index 100%
rename from step1-03/style.css
rename to step1-03/demo/style.css
diff --git a/step1-03/exercise/index.html b/step1-03/exercise/index.html
new file mode 100644
index 0000000..5894b7c
--- /dev/null
+++ b/step1-03/exercise/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>todos</h1>
+      <div class="addTodo">
+        <input class="textfield" placeholder="add todo" />
+        <button onclick="addTodo()" class="submit add">Add</button>
+      </div>
+      <nav class="filter">
+        <button class="active">all</button>
+        <button>active</button>
+        <button>completed</button>
+      </nav>
+    </header>
+
+    <ul class="todos">
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 1 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 2 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 3 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 4 </span></label>
+      </li>
+    </ul>
+    <footer>
+      <span><span class="remaining">4</span> items left</span>
+      <button class="submit">Clear Completed</button>
+    </footer>
+  </body>
+
+  <script type="text/javascript">
+    function getTodoText() {
+      return document.querySelector('.textfield').value;
+    }
+
+    function clearInput() {
+      document.querySelector('.textfield').value = '';
+    }
+
+    function updateRemaining() {
+      const remaining = document.querySelector('.remaining');
+      const todos = document.querySelectorAll('.todo').length;
+      remaining.innerText = todos;
+    }
+
+    function addTodo() {
+      const todo = document.querySelector('.todo');
+      const newTodo = todo.cloneNode(true);
+      newTodo.querySelector('.title').innerText = getTodoText();
+      todo.parentElement.insertBefore(newTodo, todo);
+
+      clearInput();
+      updateRemaining();
+    }
+
+    // clearCompleted
+
+    function filter(scope, button) {
+      document.querySelector('.active').classList.remove('active');
+      button.classList.add('active');
+      for (let todo of document.querySelectorAll('.todo')) {
+        const checked = todo.querySelector('input').checked == true;
+        if (scope == 'all') {
+          todo.hidden = false;
+        } else if (scope == 'active') {
+          todo.hidden = checked;
+        } else if (scope == 'completed') {
+          todo.hidden = !checked;
+        }
+      }
+    }
+  </script>
+</html>
diff --git a/step1-05/src/style.css b/step1-03/exercise/style.css
similarity index 100%
rename from step1-05/src/style.css
rename to step1-03/exercise/style.css
diff --git a/step1-03/final/index.html b/step1-03/final/index.html
new file mode 100644
index 0000000..9b5fcc3
--- /dev/null
+++ b/step1-03/final/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="./style.css" />
+  </head>
+  <body>
+    <header>
+      <h1>todos</h1>
+      <div class="addTodo">
+        <input class="textfield" placeholder="add todo" />
+        <button onclick="addTodo()" class="submit add">Add</button>
+      </div>
+      <nav class="filter">
+        <button onclick="filter('all', this)" class="active">all</button>
+        <button onclick="filter('active', this)">active</button>
+        <button onclick="filter('completed', this)">completed</button>
+      </nav>
+    </header>
+
+    <ul class="todos">
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 1 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 2 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 3 </span></label>
+      </li>
+      <li class="todo">
+        <label><input type="checkbox" /> <span class="title"> Todo 4 </span></label>
+      </li>
+    </ul>
+    <footer>
+      <span><span class="remaining">4</span> items left</span>
+      <button onclick="clearCompleted()" class="submit">Clear Completed</button>
+    </footer>
+  </body>
+
+  <script type="text/javascript">
+    function getTodoText() {
+      return document.querySelector('.textfield').value;
+    }
+
+    function clearInput() {
+      document.querySelector('.textfield').value = '';
+    }
+
+    function updateRemaining() {
+      const remaining = document.querySelector('.remaining');
+      const todos = document.querySelectorAll('.todo').length;
+      remaining.innerText = todos;
+    }
+
+    function addTodo() {
+      const todo = document.querySelector('.todo');
+      const newTodo = todo.cloneNode(true);
+      newTodo.querySelector('.title').innerText = getTodoText();
+      todo.parentElement.insertBefore(newTodo, todo);
+
+      clearInput();
+      updateRemaining();
+    }
+
+    function clearCompleted() {
+      const todos = document.querySelectorAll('.todo');
+      for (let todo of todos) {
+        if (todo.querySelector('input').checked == true) {
+          todo.remove();
+        }
+      }
+      updateRemaining();
+    }
+
+    function filter(scope, button) {
+      document.querySelector('.active').classList.remove('active');
+      button.classList.add('active');
+      for (let todo of document.querySelectorAll('.todo')) {
+        const checked = todo.querySelector('input').checked == true;
+        if (scope == 'all') {
+          todo.hidden = false;
+        } else if (scope == 'active') {
+          todo.hidden = checked;
+        } else if (scope == 'completed') {
+          todo.hidden = !checked;
+        }
+      }
+    }
+  </script>
+</html>
diff --git a/step1-03/final/style.css b/step1-03/final/style.css
new file mode 100644
index 0000000..4163a3a
--- /dev/null
+++ b/step1-03/final/style.css
@@ -0,0 +1,49 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  width: 400px;
+  margin: 20px auto;
+}
+
+h1 {
+  text-align: center;
+}
+
+.addTodo {
+  display: flex;
+}
+
+.textfield {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.submit {
+  border: none;
+  padding: 5px 10px;
+}
+
+.filter {
+  margin: 10px 0 0;
+}
+
+.filter button {
+  background: transparent;
+  border: none;
+}
+
+.filter .active {
+  border-bottom: 2px solid blue;
+}
+
+.todos {
+  list-style: none;
+  padding: 0;
+}
+
+footer {
+  display: flex;
+}
+
+footer span {
+  flex-grow: 1;
+}
diff --git a/step1-03/index.html b/step1-03/index.html
index f24eea5..a245e9e 100644
--- a/step1-03/index.html
+++ b/step1-03/index.html
@@ -1,90 +1,16 @@
-<!DOCTYPE html>
 <html>
   <head>
-    <link rel="stylesheet" href="./style.css" />
+    <link rel="stylesheet" href="../assets/shared.css" />
+    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
   </head>
-  <body>
-    <header>
-      <h1>todos</h1>
-      <div class="addTodo">
-        <input class="textfield" placeholder="add todo" />
-        <button onclick="addTodo()" class="submit add">Add</button>
-      </div>
-      <nav class="filter">
-        <button onclick="filter('all', this)" class="active">all</button>
-        <button onclick="filter('active', this)">active</button>
-        <button onclick="filter('completed', this)">completed</button>
-      </nav>
-    </header>
 
-    <ul class="todos">
-      <li class="todo">
-        <label><input type="checkbox" /> <span class="title"> Todo 1 </span></label>
-      </li>
-      <li class="todo">
-        <label><input type="checkbox" /> <span class="title"> Todo 2 </span></label>
-      </li>
-      <li class="todo">
-        <label><input type="checkbox" /> <span class="title"> Todo 3 </span></label>
-      </li>
-      <li class="todo">
-        <label><input type="checkbox" /> <span class="title"> Todo 4 </span></label>
-      </li>
-    </ul>
-    <footer>
-      <span><span class="remaining">4</span> items left</span>
-      <button onclick="clearCompleted()" class="button">Clear Completed</button>
-    </footer>
+  <body class="ms-Fabric">
+    <div class="Container">
+      <ul class="Tiles">
+        <li class="Tile"><a href="./demo/index.html" class="Tile-link">Demo Start</a></li>
+        <li class="Tile"><a href="./exercise/index.html" class="Tile-link">Exercise Start</a></li>
+        <li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
+      </ul>
+    </div>
   </body>
-
-  <script type="text/javascript">
-    function getTodoText() {
-      return document.querySelector('.textfield').value;
-    }
-
-    function clearInput() {
-      document.querySelector('.textfield').value = '';
-    }
-
-    function updateRemaining() {
-      const remaining = document.querySelector('.remaining');
-      const todos = document.querySelectorAll('.todo').length;
-      remaining.innerText = todos;
-    }
-
-    function addTodo() {
-      const todo = document.querySelector('.todo');
-      const newTodo = todo.cloneNode(true);
-      newTodo.querySelector('.title').innerText = getTodoText();
-      todo.parentElement.insertBefore(newTodo, todo);
-
-      clearInput();
-      updateRemaining();
-    }
-
-    function clearCompleted() {
-      const todos = document.querySelectorAll('.todo');
-      for (let todo of todos) {
-        if (todo.querySelector('input').checked == true) {
-          todo.remove();
-        }
-      }
-      updateRemaining();
-    }
-
-    function filter(scope, button) {
-      document.querySelector('.active').classList.remove('active');
-      button.classList.add('active');
-      for (let todo of document.querySelectorAll('.todo')) {
-        const checked = todo.querySelector('input').checked == true;
-        if (scope == 'all') {
-          todo.hidden = false;
-        } else if (scope == 'active') {
-          todo.hidden = checked;
-        } else if (scope == 'completed') {
-          todo.hidden = !checked;
-        }
-      }
-    }
-  </script>
 </html>
diff --git a/step1-04/README.md b/step1-04/README.md
new file mode 100644
index 0000000..71bbf9f
--- /dev/null
+++ b/step1-04/README.md
@@ -0,0 +1,12 @@
+## React quick demo
+
+already done:
+Button.css
+
+scaffold app.tsx (my app)
+write index.tsx
+write index.html
+demo 'hello world'
+
+Write Counter Component with button
+Demo Button, import into Component
diff --git a/step1-04/demo/index.html b/step1-04/demo/index.html
new file mode 100644
index 0000000..454cef5
--- /dev/null
+++ b/step1-04/demo/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/step1-04/src/App.tsx b/step1-04/demo/src/App.tsx
similarity index 75%
rename from step1-04/src/App.tsx
rename to step1-04/demo/src/App.tsx
index 84c7fd6..f3dc2af 100644
--- a/step1-04/src/App.tsx
+++ b/step1-04/demo/src/App.tsx
@@ -6,7 +6,8 @@ export class App extends React.Component {
     return (
       <div>
         <h2>My App</h2>
-        <Counter start={2} />
+        <Counter text="Chickens" />
+        <Counter text="Ducks" />
       </div>
     );
   }
diff --git a/step1-04/src/components/Button.css b/step1-04/demo/src/components/Button.css
similarity index 91%
rename from step1-04/src/components/Button.css
rename to step1-04/demo/src/components/Button.css
index 029cf38..602b342 100644
--- a/step1-04/src/components/Button.css
+++ b/step1-04/demo/src/components/Button.css
@@ -1,4 +1,5 @@
 .Button {
+  display: block;
   background: #0078d4;
   color: white;
   padding: 5px 10px;
diff --git a/step1-04/src/components/Button.tsx b/step1-04/demo/src/components/Button.tsx
similarity index 100%
rename from step1-04/src/components/Button.tsx
rename to step1-04/demo/src/components/Button.tsx
diff --git a/step1-04/src/components/Counter.tsx b/step1-04/demo/src/components/Counter.tsx
similarity index 51%
rename from step1-04/src/components/Counter.tsx
rename to step1-04/demo/src/components/Counter.tsx
index 1357253..dd8fa71 100644
--- a/step1-04/src/components/Counter.tsx
+++ b/step1-04/demo/src/components/Counter.tsx
@@ -1,23 +1,25 @@
 import React from 'react';
 import { Button } from './Button';
 
-export class Counter extends React.Component<any, any> {
+export class Counter extends React.Component<{ text: string }, { counter: number }> {
   constructor(props) {
     super(props);
     this.state = {
-      counter: props.start
+      counter: 0
     };
   }
   render() {
+    const { counter } = this.state;
+    const { text } = this.props;
     return (
       <div>
-        <span> {this.state.counter} </span>
+        {text}: {counter}
         <Button
           onClick={() => {
-            this.setState({ counter: this.state.counter + 1 });
+            this.setState({ counter: counter + 1 });
           }}
         >
-          Click Me
+          Click
         </Button>
       </div>
     );
diff --git a/step1-04/src/index.tsx b/step1-04/demo/src/index.tsx
similarity index 100%
rename from step1-04/src/index.tsx
rename to step1-04/demo/src/index.tsx
diff --git a/step1-04/final/index.html b/step1-04/final/index.html
new file mode 100644
index 0000000..454cef5
--- /dev/null
+++ b/step1-04/final/index.html
@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/step1-04/final/src/App.tsx b/step1-04/final/src/App.tsx
new file mode 100644
index 0000000..f3dc2af
--- /dev/null
+++ b/step1-04/final/src/App.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import { Counter } from './components/Counter';
+
+export class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <h2>My App</h2>
+        <Counter text="Chickens" />
+        <Counter text="Ducks" />
+      </div>
+    );
+  }
+}
diff --git a/step1-04/final/src/components/Button.css b/step1-04/final/src/components/Button.css
new file mode 100644
index 0000000..602b342
--- /dev/null
+++ b/step1-04/final/src/components/Button.css
@@ -0,0 +1,15 @@
+.Button {
+  display: block;
+  background: #0078d4;
+  color: white;
+  padding: 5px 10px;
+  outline: none;
+  border: none;
+}
+.Button:hover {
+  background: #005a9e;
+}
+
+.Button:active {
+  background: #004578;
+}
diff --git a/step1-04/final/src/components/Button.tsx b/step1-04/final/src/components/Button.tsx
new file mode 100644
index 0000000..f0410d2
--- /dev/null
+++ b/step1-04/final/src/components/Button.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import './Button.css';
+
+export const Button = props => {
+  return (
+    <button className="Button" onClick={props.onClick}>
+      {props.children}
+    </button>
+  );
+};
diff --git a/step1-04/final/src/components/Counter.tsx b/step1-04/final/src/components/Counter.tsx
new file mode 100644
index 0000000..dd8fa71
--- /dev/null
+++ b/step1-04/final/src/components/Counter.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Button } from './Button';
+
+export class Counter extends React.Component<{ text: string }, { counter: number }> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      counter: 0
+    };
+  }
+  render() {
+    const { counter } = this.state;
+    const { text } = this.props;
+    return (
+      <div>
+        {text}: {counter}
+        <Button
+          onClick={() => {
+            this.setState({ counter: counter + 1 });
+          }}
+        >
+          Click
+        </Button>
+      </div>
+    );
+  }
+}
diff --git a/step1-04/final/src/index.tsx b/step1-04/final/src/index.tsx
new file mode 100644
index 0000000..1d9694f
--- /dev/null
+++ b/step1-04/final/src/index.tsx
@@ -0,0 +1,4 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { App } from "./App";
+ReactDOM.render(<App />, document.getElementById("app"));
diff --git a/step1-04/index.html b/step1-04/index.html
index a5fad94..dadfb94 100644
--- a/step1-04/index.html
+++ b/step1-04/index.html
@@ -1,8 +1,15 @@
-<!DOCTYPE html>
 <html>
-  <body>
-    <div id="app"></div>
+  <head>
+    <link rel="stylesheet" href="../assets/shared.css" />
+    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
+  </head>
+
+  <body class="ms-Fabric">
+    <div class="Container">
+      <ul class="Tiles">
+        <li class="Tile"><a href="./demo/index.html" class="Tile-link">Demo Start</a></li>
+        <li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
+      </ul>
+    </div>
   </body>
 </html>
-
-
diff --git a/step1-05/README.md b/step1-05/README.md
index 10b6f23..851fa36 100644
--- a/step1-05/README.md
+++ b/step1-05/README.md
@@ -1,7 +1,12 @@
+start with
+style/index/index/failing imports
+
 demo
+
 Header
 ListItem
 
 exercise
+
 Footer
 List
diff --git a/step1-05/demo/index.html b/step1-05/demo/index.html
new file mode 100644
index 0000000..de2c99d
--- /dev/null
+++ b/step1-05/demo/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <link rel="stylesheet" href="./src/style.css" />
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+
+
diff --git a/step1-05/src/App.tsx b/step1-05/demo/src/App.tsx
similarity index 100%
rename from step1-05/src/App.tsx
rename to step1-05/demo/src/App.tsx
diff --git a/step1-05/demo/src/components/TodoFooter.tsx b/step1-05/demo/src/components/TodoFooter.tsx
new file mode 100644
index 0000000..9b089ac
--- /dev/null
+++ b/step1-05/demo/src/components/TodoFooter.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const TodoFooter = (props: any) => {
+  return (
+    <footer>
+      <p>footer</p>
+    </footer>
+  );
+};
diff --git a/step1-05/demo/src/components/TodoHeader.tsx b/step1-05/demo/src/components/TodoHeader.tsx
new file mode 100644
index 0000000..6de0123
--- /dev/null
+++ b/step1-05/demo/src/components/TodoHeader.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export class TodoHeader extends React.Component {
+  render() {
+    return <div />;
+  }
+}
diff --git a/step1-05/demo/src/components/TodoList.tsx b/step1-05/demo/src/components/TodoList.tsx
new file mode 100644
index 0000000..a26a8e5
--- /dev/null
+++ b/step1-05/demo/src/components/TodoList.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export class TodoList extends React.Component<any, any> {
+  render() {
+    return <div />;
+  }
+}
diff --git a/step1-05/demo/src/components/TodoListItem.tsx b/step1-05/demo/src/components/TodoListItem.tsx
new file mode 100644
index 0000000..4238bce
--- /dev/null
+++ b/step1-05/demo/src/components/TodoListItem.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export class TodoListItem extends React.Component {
+  render() {
+    return <div />;
+  }
+}
diff --git a/step1-05/src/index.tsx b/step1-05/demo/src/index.tsx
similarity index 100%
rename from step1-05/src/index.tsx
rename to step1-05/demo/src/index.tsx
diff --git a/step1-05/demo/src/style.css b/step1-05/demo/src/style.css
new file mode 100644
index 0000000..4163a3a
--- /dev/null
+++ b/step1-05/demo/src/style.css
@@ -0,0 +1,49 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  width: 400px;
+  margin: 20px auto;
+}
+
+h1 {
+  text-align: center;
+}
+
+.addTodo {
+  display: flex;
+}
+
+.textfield {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.submit {
+  border: none;
+  padding: 5px 10px;
+}
+
+.filter {
+  margin: 10px 0 0;
+}
+
+.filter button {
+  background: transparent;
+  border: none;
+}
+
+.filter .active {
+  border-bottom: 2px solid blue;
+}
+
+.todos {
+  list-style: none;
+  padding: 0;
+}
+
+footer {
+  display: flex;
+}
+
+footer span {
+  flex-grow: 1;
+}
diff --git a/step1-05/exercise/index.html b/step1-05/exercise/index.html
new file mode 100644
index 0000000..de2c99d
--- /dev/null
+++ b/step1-05/exercise/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <link rel="stylesheet" href="./src/style.css" />
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+
+
diff --git a/step1-05/exercise/src/App.tsx b/step1-05/exercise/src/App.tsx
new file mode 100644
index 0000000..0f6e89a
--- /dev/null
+++ b/step1-05/exercise/src/App.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { TodoFooter } from './components/TodoFooter';
+import { TodoHeader } from './components/TodoHeader';
+import { TodoList } from './components/TodoList';
+
+export class TodoApp extends React.Component {
+  render() {
+    return (
+      <div>
+        <TodoHeader />
+        <TodoList />
+        <TodoFooter />
+      </div>
+    );
+  }
+}
diff --git a/step1-05/exercise/src/components/TodoFooter.tsx b/step1-05/exercise/src/components/TodoFooter.tsx
new file mode 100644
index 0000000..9b089ac
--- /dev/null
+++ b/step1-05/exercise/src/components/TodoFooter.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const TodoFooter = (props: any) => {
+  return (
+    <footer>
+      <p>footer</p>
+    </footer>
+  );
+};
diff --git a/step1-05/src/components/TodoHeader.tsx b/step1-05/exercise/src/components/TodoHeader.tsx
similarity index 100%
rename from step1-05/src/components/TodoHeader.tsx
rename to step1-05/exercise/src/components/TodoHeader.tsx
diff --git a/step1-05/exercise/src/components/TodoList.tsx b/step1-05/exercise/src/components/TodoList.tsx
new file mode 100644
index 0000000..a26a8e5
--- /dev/null
+++ b/step1-05/exercise/src/components/TodoList.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+export class TodoList extends React.Component<any, any> {
+  render() {
+    return <div />;
+  }
+}
diff --git a/step1-05/src/components/TodoListItem.tsx b/step1-05/exercise/src/components/TodoListItem.tsx
similarity index 100%
rename from step1-05/src/components/TodoListItem.tsx
rename to step1-05/exercise/src/components/TodoListItem.tsx
diff --git a/step1-05/exercise/src/index.tsx b/step1-05/exercise/src/index.tsx
new file mode 100644
index 0000000..3289ec8
--- /dev/null
+++ b/step1-05/exercise/src/index.tsx
@@ -0,0 +1,4 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { TodoApp } from "./App";
+ReactDOM.render(<TodoApp />, document.getElementById("app"));
diff --git a/step1-05/exercise/src/style.css b/step1-05/exercise/src/style.css
new file mode 100644
index 0000000..4163a3a
--- /dev/null
+++ b/step1-05/exercise/src/style.css
@@ -0,0 +1,49 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  width: 400px;
+  margin: 20px auto;
+}
+
+h1 {
+  text-align: center;
+}
+
+.addTodo {
+  display: flex;
+}
+
+.textfield {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.submit {
+  border: none;
+  padding: 5px 10px;
+}
+
+.filter {
+  margin: 10px 0 0;
+}
+
+.filter button {
+  background: transparent;
+  border: none;
+}
+
+.filter .active {
+  border-bottom: 2px solid blue;
+}
+
+.todos {
+  list-style: none;
+  padding: 0;
+}
+
+footer {
+  display: flex;
+}
+
+footer span {
+  flex-grow: 1;
+}
diff --git a/step1-05/final/index.html b/step1-05/final/index.html
new file mode 100644
index 0000000..de2c99d
--- /dev/null
+++ b/step1-05/final/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <link rel="stylesheet" href="./src/style.css" />
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
+
+
diff --git a/step1-05/final/src/App.tsx b/step1-05/final/src/App.tsx
new file mode 100644
index 0000000..0f6e89a
--- /dev/null
+++ b/step1-05/final/src/App.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { TodoFooter } from './components/TodoFooter';
+import { TodoHeader } from './components/TodoHeader';
+import { TodoList } from './components/TodoList';
+
+export class TodoApp extends React.Component {
+  render() {
+    return (
+      <div>
+        <TodoHeader />
+        <TodoList />
+        <TodoFooter />
+      </div>
+    );
+  }
+}
diff --git a/step1-05/src/components/TodoFooter.tsx b/step1-05/final/src/components/TodoFooter.tsx
similarity index 100%
rename from step1-05/src/components/TodoFooter.tsx
rename to step1-05/final/src/components/TodoFooter.tsx
diff --git a/step1-05/final/src/components/TodoHeader.tsx b/step1-05/final/src/components/TodoHeader.tsx
new file mode 100644
index 0000000..ba9b8b0
--- /dev/null
+++ b/step1-05/final/src/components/TodoHeader.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+
+export class TodoHeader extends React.Component {
+  render() {
+    return (
+      <header>
+        <h1>todos</h1>
+        <div className="addTodo">
+          <input className="textfield" placeholder="add todo" />
+          <button className="submit">Add</button>
+        </div>
+        <nav className="filter">
+          <button className="active">all</button>
+          <button>active</button>
+          <button>completed</button>
+        </nav>
+      </header>
+    );
+  }
+}
diff --git a/step1-05/src/components/TodoList.tsx b/step1-05/final/src/components/TodoList.tsx
similarity index 100%
rename from step1-05/src/components/TodoList.tsx
rename to step1-05/final/src/components/TodoList.tsx
diff --git a/step1-05/final/src/components/TodoListItem.tsx b/step1-05/final/src/components/TodoListItem.tsx
new file mode 100644
index 0000000..1bff0f7
--- /dev/null
+++ b/step1-05/final/src/components/TodoListItem.tsx
@@ -0,0 +1,13 @@
+import React from "react";
+
+export class TodoListItem extends React.Component {
+  render() {
+    return (
+      <li className="todo">
+        <label>
+          <input type="checkbox" /> Todo 1
+        </label>
+      </li>
+    );
+  }
+}
diff --git a/step1-05/final/src/index.tsx b/step1-05/final/src/index.tsx
new file mode 100644
index 0000000..3289ec8
--- /dev/null
+++ b/step1-05/final/src/index.tsx
@@ -0,0 +1,4 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { TodoApp } from "./App";
+ReactDOM.render(<TodoApp />, document.getElementById("app"));
diff --git a/step1-05/final/src/style.css b/step1-05/final/src/style.css
new file mode 100644
index 0000000..4163a3a
--- /dev/null
+++ b/step1-05/final/src/style.css
@@ -0,0 +1,49 @@
+body {
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  width: 400px;
+  margin: 20px auto;
+}
+
+h1 {
+  text-align: center;
+}
+
+.addTodo {
+  display: flex;
+}
+
+.textfield {
+  flex-grow: 1;
+  margin-right: 10px;
+}
+
+.submit {
+  border: none;
+  padding: 5px 10px;
+}
+
+.filter {
+  margin: 10px 0 0;
+}
+
+.filter button {
+  background: transparent;
+  border: none;
+}
+
+.filter .active {
+  border-bottom: 2px solid blue;
+}
+
+.todos {
+  list-style: none;
+  padding: 0;
+}
+
+footer {
+  display: flex;
+}
+
+footer span {
+  flex-grow: 1;
+}
diff --git a/step1-05/index.html b/step1-05/index.html
index de2c99d..dadfb94 100644
--- a/step1-05/index.html
+++ b/step1-05/index.html
@@ -1,9 +1,15 @@
-<!DOCTYPE html>
 <html>
-  <link rel="stylesheet" href="./src/style.css" />
-  <body>
-    <div id="app"></div>
+  <head>
+    <link rel="stylesheet" href="../assets/shared.css" />
+    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css" />
+  </head>
+
+  <body class="ms-Fabric">
+    <div class="Container">
+      <ul class="Tiles">
+        <li class="Tile"><a href="./demo/index.html" class="Tile-link">Demo Start</a></li>
+        <li class="Tile"><a href="./final/index.html" class="Tile-link">Final</a></li>
+      </ul>
+    </div>
   </body>
 </html>
-
-
diff --git a/step1-06/README.md b/step1-06/README.md
index 212b04c..696dc0c 100644
--- a/step1-06/README.md
+++ b/step1-06/README.md
@@ -6,6 +6,7 @@ demo
 add state
 pass to header and list
 add filter class stuff
+controlled components (header) with consolelog
 
 exercise
 update footer to include todos
diff --git a/step1-06/src/components/TodoHeader.tsx b/step1-06/src/components/TodoHeader.tsx
index b113282..b63967b 100644
--- a/step1-06/src/components/TodoHeader.tsx
+++ b/step1-06/src/components/TodoHeader.tsx
@@ -8,7 +8,7 @@ export class TodoHeader extends React.Component<any, any> {
       <header>
         <h1>todos</h1>
         <div className="addTodo">
-          <input className="textfield" placeholder="add todo" />
+          <input value={this.state.labelInput} onChange={this._onChange} className="textfield" placeholder="add todo" />
           <button className="submit">Add</button>
         </div>
         <nav className="filter">
@@ -19,4 +19,12 @@ export class TodoHeader extends React.Component<any, any> {
       </header>
     );
   }
+  _onChange = evt => {
+    this.setState({ labelInput: evt.target.value });
+  };
+
+  _onAdd = () => {
+    console.log(this.state.labelInput);
+    this.setState({ labelInput: '' });
+  };
 }
diff --git a/step1-07/README.md b/step1-07/README.md
new file mode 100644
index 0000000..6b9c40d
--- /dev/null
+++ b/step1-07/README.md
@@ -0,0 +1,23 @@
+already done
+Types in header
+TodoApp methods
+
+filteredTodos in List
+
+demo
+Add Types to TodoApp
+change 'filter' value
+Types in List
+pass complete to List - show types, change complete to boolean/, filter
+add complete, pass to item (prop drilling)
+TodoListItemProps, extend, id, complete (possible abstraction)
+Demo how you can't add random things to TodoListItem or this.props now
+add complete to List item
+
+exercise
+
+Add types to footer
+Add onClick to button
+Add types to header
+Add setFilter to filter buttons
+add 'addTodo' to onAdd function
diff --git a/step1-07/src/TodoApp.tsx b/step1-07/src/TodoApp.tsx
index 34f81b7..b24da27 100644
--- a/step1-07/src/TodoApp.tsx
+++ b/step1-07/src/TodoApp.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import { TodoFooter } from './components/TodoFooter';
 import { TodoHeader } from './components/TodoHeader';
 import { TodoList } from './components/TodoList';
+import { Todos, FilterTypes } from './TodoApp.types';
 
 let index = 0;
 
-export class TodoApp extends React.Component<any, any> {
+export class TodoApp extends React.Component<any, { todos: Todos; filter: FilterTypes }> {
   constructor(props) {
     super(props);
     this.state = {
@@ -25,6 +26,8 @@ export class TodoApp extends React.Component<any, any> {
     );
   }
 
+  // business logic
+
   private _addTodo = label => {
     const { todos } = this.state;
     const id = index++;
@@ -34,15 +37,6 @@ export class TodoApp extends React.Component<any, any> {
     });
   };
 
-  private _remove = id => {
-    const newTodos = { ...this.state.todos };
-    delete newTodos[id];
-
-    this.setState({
-      todos: newTodos
-    });
-  };
-
   private _complete = id => {
     const newTodos = { ...this.state.todos };
     newTodos[id].completed = !newTodos[id].completed;
@@ -52,15 +46,6 @@ export class TodoApp extends React.Component<any, any> {
     });
   };
 
-  private _edit = (id, label) => {
-    const newTodos = { ...this.state.todos };
-    newTodos[id] = { ...newTodos[id], label };
-
-    this.setState({
-      todos: newTodos
-    });
-  };
-
   private _clear = () => {
     const { todos } = this.state;
     const newTodos = {};
diff --git a/webpack.config.js b/webpack.config.js
index fbf0185..d23dfe9 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -11,7 +11,7 @@ const nonWebpackedEntries = [];
 
 function* getEntryPoint(step) {
   if (step.includes('step') || step.includes('playground')) {
-    for (let prefix of ['', 'demo/', 'exercise/']) {
+    for (let prefix of ['', 'demo/', 'exercise/', 'final/']) {
       for (let suffix of ['.js', '.jsx', '.ts', '.tsx']) {
         const entryRequest = `./${step}/${prefix}src/index${suffix}`;
         if (fs.existsSync(entryRequest)) {