Latihan 1 dari materi Proyek HTMX di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kode awal punya judul <h1>Todo App</h1>, penghitung <span id="todo-count">1</span>, form berisi kolom title dan tombol Tambah, dan daftar <ul id="todo-list">; semuanya masih tanpa atribut htmx. Rakit Todo App-nya:
<form>, tulis hx-post="/api/todos", hx-target="#todo-list", hx-swap="beforeend", dan hx-on::after-request="if (event.detail.successful) this.reset()".<ul id="todo-list">, tambahkan satu <li> bertuliskan Belajar htmx dengan tombol hapus: <button hx-delete="/api/todos/1" hx-confirm="Hapus todo ini?" hx-target="closest li" hx-swap="outerHTML">Hapus</button>.POST /api/todos: <template data-url="/api/todos" data-method="post"> berisi <li>Todo baru</li> dan <span id="todo-count" hx-swap-oob="true">2</span>.Yang dicek:
<h1>, <form>, dan <ul id="todo-list">.hx-post persis /api/todos, hx-target persis #todo-list, hx-swap persis beforeend, dan hx-on::after-request yang isinya gak kosong.hx-delete dengan hx-confirm yang isinya gak kosong, hx-target persis closest li, dan hx-swap persis outerHTML.hx-post="/...", hx-swap, hx-confirm, dan hx-swap-oob="true" di luar komentar.Di pratinjau, Tambah mengirim POST /api/todos: Todo baru masuk ke akhir daftar, dan penghitungnya jadi 2 lewat potongan OOB. Hapus menunggu konfirmasi (pratinjau menjawab OK sendiri), lalu mengirim DELETE /api/todos/1. Mau melihat item-nya hilang? Tambahkan <template data-url="/api/todos/1" data-method="delete"></template> (gak dinilai).
