-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
90 lines (89 loc) · 2.87 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script
src="https://unpkg.com/[email protected]"
integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"
crossorigin="anonymous"
></script>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/full.css"
rel="stylesheet"
type="text/css"
/>
<script src="https://cdn.tailwindcss.com"></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<title>Todo Htmx</title>
</head>
<body hx-boost="true">
<main class="max-w-screen-lg py-24 m-auto">
<h1 class="text-3xl text-center">Awesome Todo App</h1>
<ul id="todo-list" class="flex flex-col gap-2 p-5">
{{ range .Todos }}
{{ block "todo" . }}
<li
class="flex items-center gap-2 p-3 border-2 border-purple-500 rounded-md group"
>
<input
hx-trigger="change"
hx-post="/toggle-todo/{{ .ID }}"
hx-target="closest li"
hx-swap="outerHTML"
type="checkbox"
name="done-{{ .ID }}"
id="done-{{ .ID }}"
{{ if .Done }}checked{{ end }}
/>
<label for="done-{{ .ID }}">{{ .Title }}</label>
<i
hx-trigger="click"
hx-target="previous label[for='done-{{ .ID }}']"
hx-get="/edit/{{ .ID }}"
hx-swap="outerHTML"
class="hidden ml-auto cursor-pointer fa fa-edit text-slate-300 group-hover:block"
></i>
<i
hx-trigger="click"
hx-delete="/todo/{{ .ID }}"
hx-target="closest li"
hx-confirm="Are you sure you want to delete task: '{{ .Title }}'?"
hx-swap="outerHTML"
class="hidden cursor-pointer text-rose-400 fa fa-trash group-hover:block"
>
</i>
</li>
{{ end }}
{{ end }}
</ul>
<form
hx-post="/add-todo"
hx-swap="beforeend"
hx-target="#todo-list"
class="flex justify-end gap-2"
>
<input type="text" name="title" class="self-center p-1" />
<button type="submit" class="btn btn-primary">Add</button>
</form>
</main>
</body>
<template>
{{ block "edit" . }}
<form hx-put="/todo/{{ .ID }}" hx-target="closest li" hx-swap="outerHTML">
<input
type="text"
name="title"
value="{{ .Title }}"
placeholder="{{ .Title }}"
autofocus
onfocus="this.select()"
/>
</form>
{{ end }}
</template>
</html>