Latihan 1: Event Handling Solid — SolidJS

Latihan 1 dari materi Event Handling Solid di SolidJS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Kode awal sudah mengimpor createSignal dan punya App dengan const [count, setCount] = createSignal(0) dan <div> kosong. Buat counter dengan dua tombol di dalam <div> itu:

<button onClick={() => setCount(c => c + 1)}>+1</button> untuk menaikkan hitungan.
<button onClick={() => setCount(c => c - 1)}>-1</button> untuk menurunkannya. Tulisannya persis -1, karena penilaian mencari tombol lewat tulisan itu.
<p>Count: {count()}</p> di bawahnya.

Yang dicek:

Halaman punya paling sedikit 2 tombol.
Sebelum apa pun diklik, <p> berisi persis Count: 0.
Sesudah tombol bertulisan +1 diklik sekali, <p> berisi persis Count: 1.
Dari awal lagi, sesudah tombol bertulisan -1 diklik sekali, <p> berisi persis Count: -1.
Kodemu punya onClick={...}, dan handler-nya memanggil setCount(...): langsung di dalam onClick, atau lewat fungsi bernama yang memanggil setCount lalu dikirim sebagai onClick={namaFungsi}.

Hint

Di Solid, event handler ditulis sebagai prop berawalan on pada elemennya, dan nilainya fungsi yang jalan saat event terjadi.
Buat dua tombol bertulisan +1 dan -1. Masing-masing diberi onClick yang memanggil setCount dengan nilai sebelumnya ditambah atau dikurangi 1. Paragrafnya membaca count().
<button onClick={() => setCount(c => c + 1)}>+1</button> <button onClick={() => setCount(c => c - 1)}>-1</button> <p>Count: {count()}</p>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Event Handling Solid — SolidJS

Hint

Memperbarui Aplikasi