example: add Todo.js

example/Todo.js

@@ -0,0 +1,48 @@
+import { classNames, div, input, li, p, ul } from "../lib/one"
+import styles from './styles.module.css'
+
+function view({ state }) {
+  return div([
+    input({
+      type: 'text',
+      placeholder: 'What needs to be done?',
+      name: 'todo-input',
+      oninput({ target }) {
+        state.newTodo = target.value
+      },
+      onkeyup({ key, target }) {
+        if (key === 'Enter') {
+          state.todos = [...state.todos, { title: state.newTodo }]
+          state.newTodo = ''
+          target.value = ''
+        }
+      },
+    }),
+    ul(
+      state.todos.map(todo => li(
+        todo.title,
+        {
+          className: classNames(styles.todo, todo.done && styles.done),
+          onclick() {
+            todo.done = !todo.done
+            state.todos = [...state.todos]
+          },
+        }
+      ))
+    ),
+    p(`You have ${state.todos.length} todos`),
+  ])
+}
+
+export const Todo = {
+  selector: '.todo',
+  view,
+  state: {
+    todos: [
+      { title: 'Learn JavaScript', done: false },
+      { title: 'Learn One.js', done: true },
+      { title: 'Build a cool app', done: false },
+    ],
+    newTodo: '',
+  },
+}

example/app.js

@@ -1,8 +1,10 @@
 import { each } from '../lib/one'
 import { Counter } from './Counter'
 import { Profile } from './Profile'
+import { Todo } from './Todo'
 
 each([
   Counter,
   Profile,
+  Todo,
 ])

example/index.html

@@ -59,35 +59,6 @@
         flex-direction: column;
       }
 
-      .todos {
-        display: flex;
-        flex-direction: column;
-        list-style: none;
-        padding: 0;
-      }
-
-      .todo {
-        display: flex;
-        margin-bottom: 16px;
-      }
-
-      .todo button {
-        margin-right: 10px;
-        background: #fff;
-        cursor: pointer;
-        border: none;
-        color: #000;
-        padding: 0 8px;
-        height: 20px;
-        border-radius: 4px;
-      }
-
-      .todo-title {
-        &.done {
-          text-decoration: line-through;
-        }
-      }
-
       footer {
         margin-top: auto;
         padding: 20px 0;
@@ -102,6 +73,7 @@
     <div class="profile" id="3"></div>
     <div class="profile" id="1"></div>
     <div class="profile" id="2"></div>
+    <div class="todo"></div>
     <script type="module" src="app.js"></script>
   </body>
 </html>

example/styles.module.css

@@ -78,5 +78,12 @@
       background-color: #3e8e41;
     }
   }
+}
+
+.todo {
+  cursor: pointer;
 
+  &.done {
+    text-decoration: line-through;
+  }
 }