Latihan 1: hx-target — HTMX

Latihan 1 dari materi hx-target di HTMX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal punya dua tombol (Load Box 1 dan Load Box 2) dan dua kotak (<div id="box-1"> dan <div id="box-2">). Lengkapi tiap tombol supaya mengisi kotaknya sendiri:

Tombol pertama: tambahkan hx-get="/api/content-1" dan hx-target="#box-1".
Tombol kedua: tambahkan hx-get="/api/content-2" dan hx-target="#box-2".
Biarkan kedua kotaknya di halaman.

Yang dicek:

Tombol yang hx-get-nya /api/content-1 punya hx-target bernilai persis #box-1.
Tombol yang hx-get-nya /api/content-2 punya hx-target bernilai persis #box-2.
Ada minimal 2 <button>, dan elemen #box-1 serta #box-2 ada.
Kodenya memuat hx-get dan hx-target di luar komentar.

Di pratinjau, klik mengirim GET /api/content-1 atau GET /api/content-2, yang dijawab 404 karena belum ada contoh balasan, jadi kotaknya gak berubah. Mau melihatnya terisi? Tambahkan <template id="contoh-balasan"><p>Isi baru</p></template>. Template itu gak dinilai.

Hint

Tiap tombol punya atribut tujuannya sendiri, jadi dua tombol bisa mengisi dua kotak yang berbeda.
Pasangkan alamat dan tujuannya per tombol: alamat content-1 dengan kotak box-1, alamat content-2 dengan kotak box-2. Selector id ditulis dengan tanda pagar.
<button hx-get="/api/content-1" hx-target="#box-1">Load Box 1</button> <button hx-get="/api/content-2" hx-target="#box-2">Load Box 2</button>

</> { } .css => #id fn()

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: hx-target — HTMX

Hint

Memperbarui Aplikasi