add basic and htmx examples

2025-12-05 01:13:13 +01:00
commit f6bfd1f7ab
11 changed files with 242 additions and 0 deletions
@@ -0,0 +1,6 @@
+<li>
+  <form hx-post="/todo" hx-target="closest li" hx-swap="outerHTML">
+    <input type="text" name="name" placeholder="Nueva tarea..." autofocus />
+  </form>
+</li>
+
@@ -0,0 +1,10 @@
+<li>
+  <button
+    hx-patch="/todo/{{.ID}}/completed"
+    hx-target="closest li"
+    hx-swap="outerHTML"
+  >
+    {{ .ID }} {{ .Name }} - {{ .Completed }}
+  </button>
+</li>
+
@@ -0,0 +1,9 @@
+<h2>Listado de tareas</h2>
+
+<button hx-get="/todo/new" hx-target="#todo-list-body" hx-swap="afterbegin">
+  Nueva tarea
+</button>
+
+<ol id="todo-list-body">
+  {{ range .TodoList }} {{ template "fragments/todo-row" . }} {{ end }}
+</ol>
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Lista de tareas</title>
+    <script src="https://cdn.jsdelivr.net/npm/htmx.org@2/dist/htmx.min.js"></script>
+  </head>
+  <body>
+    <div hx-get="/todo" hx-trigger="load" hx-swap="outerHTML">Cargando...</div>
+  </body>
+</html>