Latihan 1: Microinteractions & Animation — UI/UX

Latihan 1 dari materi Microinteractions & Animation di UI/UX — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.

Tulis rules tombol "Pesan kamar, bayar di tempat" sebagai state machine dengan tiga state: idle, hover, pressed. Kode awal sudah punya dua function kosong dan empat baris console.log; biarkan keempat baris itu dan urutannya.

nextState(current, event) mengembalikan state berikutnya:
- idle + pointerenter jadi hover
- hover + pointerleave jadi idle
- hover + pointerdown jadi pressed
- pressed + pointerup jadi hover
- event lain yang gak dikenal state itu: state-nya tetap, jadi nextState("idle", "click") mengembalikan "idle".
runSequence(events) mulai dari idle, memproses tiap event di array berurutan dengan nextState, lalu mengembalikan state akhirnya. runSequence([]) mengembalikan "idle", dan runSequence(["pointerenter", "pointerleave", "pointerenter"]) mengembalikan "hover".
Keempat baris console, berurutan, harus mencetak:
- hover
- pressed
- hover
- idle

Hint

State machine pada dasarnya tabel: dari state mana, kena event apa, jadi state mana. Event yang gak ada di tabel gak memindahkan apa pun.
Simpan tabelnya sebagai object bersarang: TRANSITIONS[current][event]. Kalau hasilnya gak ada, kembalikan current. runSequence memakai nextState berulang kali, mulai dari 'idle' dan membawa hasil tiap langkah ke langkah berikutnya.
const TRANSITIONS = { idle: { pointerenter: 'hover' }, hover: { pointerdown: 'pressed', pointerleave: 'idle' }, pressed: { pointerup: 'hover' } }; function nextState(current, event) { return (TRANSITIONS[current] || {})[event] || current; } function runSequence(events) { return events.reduce((state, event) => nextState(state, event), 'idle'); }

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

Versi baru

HyperSheets

bagian dari BelajarWeb.dev

Membuka gerbang…

Latihan 1: Microinteractions & Animation — UI/UX

Hint

Memperbarui Aplikasi