🎡 THR Wheel: Aplikasi Digital Pembagian THR Interaktif Berbasis JavaScript

Di era digital saat ini, pembagian Tunjangan Hari Raya (THR) tidak lagi harus dilakukan secara manual. Dengan memanfaatkan teknologi web modern seperti HTML5, CSS3, dan JavaScript, proses berbagi THR dapat dibuat lebih interaktif, transparan, dan menyenangkan melalui sistem roda keberuntungan digital.

Salah satu implementasinya adalah aplikasi THR Wheel, sebuah sistem pembagian hadiah berbasis putaran roda (spin wheel) yang berjalan langsung di browser tanpa memerlukan server tambahan.

baca juga artikel lainnya :

• Membangun Website dengan Fokus SEO Lokal
  
• Shiping manager BIZpro - Website Development
  
• Stickman moshing - Website Development
  
• Core Web - SEO
  
• blog - content management system
  

🎯 Konsep Dasar THR Wheel

THR Wheel merupakan aplikasi web interaktif yang memungkinkan pengguna untuk:

• Mengatur pemberi THR

• Menentukan daftar penerima

• Mengelola saldo kas

• Memutar roda hadiah secara acak

• Menyimpan riwayat pembagian otomatis

Seluruh data disimpan menggunakan Local Storage, sehingga aplikasi tetap berjalan meskipun halaman di-refresh.

⚙️ Fitur Utama Aplikasi

1. Konfigurasi Pembagian THR

Pada tahap awal, pengguna dapat melakukan pengaturan dasar seperti:

• Nama pemberi THR

• Daftar penerima hadiah

• Saldo kas awal

• Item hadiah pada roda

Daftar penerima dapat dimasukkan sekaligus menggunakan textarea dengan sistem nomor baris otomatis untuk mempermudah pengelolaan peserta.

2. Sistem Roda Keberuntungan (Spin Wheel)

Fitur utama aplikasi ini adalah roda hadiah berbasis HTML Canvas yang memiliki karakteristik:

• Animasi rotasi realistis

• Warna hadiah dapat dikustomisasi

• Nilai hadiah fleksibel

• Sistem probabilitas acak

• Pointer penunjuk hasil putaran

Setiap segmen roda dapat berisi:

• Nominal uang

• Hadiah khusus

• atau status ZONK

Saat tombol Putar Roda ditekan, sistem akan menghasilkan rotasi acak sebelum menentukan hadiah akhir.

3. Manajemen Saldo Otomatis

Saldo kas akan otomatis:

✅ Berkurang saat hadiah diberikan
✅ Dicegah agar tidak minus
✅ Ditampilkan secara real-time

Jika saldo habis, tombol putar roda akan dinonaktifkan secara otomatis.

4. Riwayat Pembagian Hadiah

Setiap hasil spin langsung dicatat dalam sistem riwayat, meliputi:

• Nama penerima

• Waktu penerimaan

• Nilai hadiah yang diperoleh

Hal ini membuat proses pembagian lebih transparan dan mudah diaudit.

5. Editor Hadiah Dinamis

Admin dapat mengubah isi roda kapan saja melalui fitur:

• Tambah item hadiah

• Edit label hadiah

• Ubah nilai nominal

• Pilih warna segmen

• Hapus hadiah tertentu

Minimal roda harus memiliki dua item agar sistem tetap berjalan.

6. Efek Suara Interaktif

Untuk meningkatkan pengalaman pengguna, aplikasi dilengkapi efek audio seperti:

• Suara klik tombol

• Animasi putaran roda

• Efek kemenangan

• Jackpot sound

• Efek zonk

Volume suara juga dapat diatur langsung melalui slider kontrol.

💾 Teknologi yang Digunakan

Aplikasi THR Wheel dibangun menggunakan teknologi web modern:

• HTML5 → Struktur aplikasi

• CSS3 Glassmorphism UI → Tampilan modern

• JavaScript Vanilla → Logika aplikasi

• Canvas API → Rendering roda hadiah

• LocalStorage API → Penyimpanan data lokal

Keunggulan pendekatan ini adalah aplikasi dapat berjalan offline tanpa database.

🔄 Sistem Penyimpanan Data

Data berikut disimpan secara lokal di browser:

• Data pemberi THR

• Daftar penerima

• Saldo kas

• Riwayat hadiah

• Konfigurasi roda

• Level volume suara

• Posisi rotasi terakhir

Dengan demikian, pengguna dapat melanjutkan sesi tanpa kehilangan data.

🎮 Alur Penggunaan Aplikasi

1. Masukkan nama pemberi THR

2. Tambahkan daftar penerima

3. Tentukan saldo kas awal

4. Atur hadiah roda

5. Klik Mulai Berbagi

6. Pilih penerima giliran

7. Tekan Putar Roda

Sistem akan otomatis menentukan hadiah secara acak.

✅ Keunggulan THR Wheel

• Tidak membutuhkan login

• Tanpa server backend

• Responsif mobile & desktop

• UI modern berbasis glass effect

• Mudah dimodifikasi

• Cocok untuk acara keluarga, komunitas, maupun kantor

🚀 Kesimpulan

THR Wheel membuktikan bahwa aplikasi web sederhana dapat menghadirkan pengalaman pembagian hadiah yang jauh lebih menarik dibanding metode konvensional.

Dengan kombinasi animasi, penyimpanan lokal, dan interaksi real-time, pembagian THR berubah menjadi aktivitas yang seru sekaligus transparan.

Aplikasi seperti ini juga menjadi contoh implementasi nyata bagaimana JavaScript modern dapat digunakan untuk membangun sistem interaktif tanpa ketergantungan backend.