From 6da60e2c004f4fac0f12b505d055e0a273b6b838 Mon Sep 17 00:00:00 2001
From: Geoff Doty <n2geoff@gmail.com>
Date: Sat, 31 May 2025 01:37:14 -0400
Subject: [PATCH] update examples

---
 example/index.html => examples/todo.h.html |  3 +-
 examples/todo.html                         | 78 ++++++++++++++++++++++
 2 files changed, 79 insertions(+), 2 deletions(-)
 rename example/index.html => examples/todo.h.html (98%)
 create mode 100644 examples/todo.html
diff --git a/example/index.html b/examples/todo.h.html
similarity index 98%
rename from example/index.html
rename to examples/todo.h.html
index 71d0729..6c125ae 100644
--- a/example/index.html
+++ b/examples/todo.h.html
@@ -1,10 +1,9 @@
-
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>UM | Todo Example</title>
+    <title>UHM | H Todo </title>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/n2geoff/stylelite/dist/stylelite.min.css">
     <style>
         button.link {
diff --git a/examples/todo.html b/examples/todo.html
new file mode 100644
index 0000000..c3e1aa2
--- /dev/null
+++ b/examples/todo.html
@@ -0,0 +1,78 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>UHM | TODO - HTML</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/n2geoff/stylelite/dist/stylelite.min.css">
+</head>
+
+<body>
+    <main>
+        <div id="app"></div>
+    </main>
+
+    <script type="module">
+        import { app, html } from '../src/app3.js';
+
+        const $ = (s) => Array.from(document.querySelectorAll(s));
+
+        const todo = app({
+            state: { todos: [], value: "" },
+            actions: {
+                submit: (state, event) => {
+                if (event.key === "Enter") {
+                    const value = $("#todo")[0].value;
+                    if (String(value).trim()) {
+                    $("#todo")[0].value = "";
+                    return { ...state, todos: [...state.todos, value], value: "" };
+                    }
+                }
+                return state;
+                },
+            },
+            view: (state, actions) => {
+                return html`
+                <main>
+                    <h1 style="text-align: center">Todos</h1>
+                    <div>
+                    <input
+                        id="todo"
+                        placeholder="What needs to be done?"
+                        value="${state.value}"
+                        onkeypress="${actions.submit}"
+                    />
+                    </div>
+                    <div>
+                    ${state.todos.map((i, index) => html`
+                        <div id="todo-${index}" style="border-bottom: 1px solid #CCC">
+                        <label>
+                            <input type="checkbox" />
+                            <span>${i}</span>
+                        </label>
+                        </div>
+                    `)}
+                    </div>
+                    <hr />
+                    <div class="grid">
+                    <div style="margin-left: 1rem">${state.todos.length} items left</div>
+                    <div class="grid">
+                        <button class="link">All</button>
+                        <button class="link">Active</button>
+                        <button class="link">Completed</button>
+                    </div>
+                    <div>
+                        <button class="link" style="float:right">Clear Completed</button>
+                    </div>
+                    </div>
+                    <hr />
+                </main>
+                `;
+            },
+            mount: "#app",
+        });
+    </script>
+</body>
+
+</html>
\ No newline at end of file
