From b688a0af4d8e624749790389e5e3c3f269210dee Mon Sep 17 00:00:00 2001
From: "Sebastian L. K. Sorensen" <sks1993@gmail.com>
Date: Fri, 8 Dec 2023 14:32:59 +0100
Subject: [PATCH] example: add Todo.js

---
 example/Todo.js           | 48 +++++++++++++++++++++++++++++++++++++++
 example/app.js            |  2 ++
 example/index.html        | 30 +-----------------------
 example/styles.module.css |  7 ++++++
 4 files changed, 58 insertions(+), 29 deletions(-)
 create mode 100644 example/Todo.js

diff --git a/example/Todo.js b/example/Todo.js
new file mode 100644
index 00000000..03244e0e
--- /dev/null
+++ b/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: '',
+  },
+}
diff --git a/example/app.js b/example/app.js
index 69e6d11e..935213fd 100644
--- a/example/app.js
+++ b/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,
 ])
diff --git a/example/index.html b/example/index.html
index dcff6da0..45d822b1 100644
--- a/example/index.html
+++ b/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>
diff --git a/example/styles.module.css b/example/styles.module.css
index 997d20dd..27292dd6 100644
--- a/example/styles.module.css
+++ b/example/styles.module.css
@@ -78,5 +78,12 @@
       background-color: #3e8e41;
     }
   }
+}
+
+.todo {
+  cursor: pointer;
 
+  &.done {
+    text-decoration: line-through;
+  }
 }