Latihan 1: Styling Solid — SolidJS

Latihan 1 dari materi Styling 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 [active, setActive] = createSignal(true), lalu <div> berisi <div>Konten</div>. Biarkan semuanya, lalu:

Beri <div>Konten</div> prop classList={{ active: active() }}, supaya kelas active menempel selama active() bernilai true.
Tambahkan tombol di dalam <div> luar: <button onClick={() => setActive(v => !v)}>Toggle</button>. Tulisannya persis Toggle.

Yang dicek:

Kodemu memuat classList, createSignal(, onClick, dan pemanggilan setter seperti setActive(.
Halaman punya <button>.
Sebelum apa pun diklik, ada elemen dengan kelas active.
Sesudah tombol bertulisan Toggle diklik sekali, gak ada lagi elemen dengan kelas active.
Sesudah tombol itu diklik dua kali dari awal, elemen dengan kelas active ada lagi.

Hint

Kelas yang nyala-mati di Solid dipasang lewat classList, objek berisi nama kelas dan kondisinya. Kondisinya dibaca ulang tiap signal-nya berubah, asal ditulis sebagai pemanggilan.
Beri div Konten classList dengan key active dan kondisi active(). Lalu buat tombol bertulisan Toggle yang onClick-nya membalik nilai signal, dari true ke false dan sebaliknya.
<div classList={{ active: active() }}>Konten</div> <button onClick={() => setActive(v => !v)}>Toggle</button>

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Styling Solid — SolidJS

Hint

Memperbarui Aplikasi