Proyek Interaktif: Membuat Tombol Jahil yang Menolak Diklik

Halo Sobat Jurnal Coding! Di dunia pengembangan web profesional, kita selalu diajarkan untuk membuat website yang ramah bagi pengunjung, mudah digunakan (User Friendly), dan memiliki tombol navigasi yang besar agar nyaman diklik. Tapi, bagaimana jika untuk satu hari saja, kita melanggar semua aturan ketat tersebut demi bersenang-senang?

Hari ini, kita akan mengerjakan sebuah proyek lelucon digital (Prank). Kita akan membuat sebuah tombol berukuran besar dengan tulisan yang sangat menggoda iman, misalnya Klik Di Sini Untuk Dapat Hadiah 1 Juta Rupiah. Namun, kejutannya adalah: Setiap kali kursor mouse pengunjung mencoba mendekati tombol tersebut, tombol itu akan langsung berpindah tempat (teleportasi) secara acak ke sudut layar yang lain!

Proyek bertajuk Catch Me If You Can ini tidak hanya seru untuk menjahili teman-temanmu di grup chat, tetapi diam-diam merupakan sarana latihan yang sangat sempurna untuk menguasai konsep DOM dan modifikasi koordinat matematika di JavaScript.

### Menyusun Strategi Jebakan

Bagaimana caranya agar tombol tersebut bisa berpindah tempat secara misterius? Kita membutuhkan tiga komponen utama yang bekerja berdampingan:
1. Pemicu (Event Listener): Kita harus mengajari komputer untuk merasakan jika ada mouse manusia yang datang mendekat. Kita akan menggunakan sensor sakti bernama mouseover.
2. Otak Pengacak (Math.random): Komputer adalah benda yang kaku dan tidak bisa menebak lokasi baru secara naluriah. Kita harus menyuruhnya mengundi angka acak untuk koordinat X (lebar kiri-kanan) dan koordinat Y (tinggi atas-bawah) di layar monitormu.
3. Eksekusi Jarak (CSS Absolute): Tombol tersebut harus memiliki status Position: Absolute di file CSS agar posisinya bisa dilepaskan dari aturan tata letak normal dan bebas dipindah-pindah dengan bebas.

### Merakit Kode Lelucon

Mari kita gabungkan kerangka HTML statis dengan otak JavaScript yang sangat lincah. Salin mahakarya kode jahil di bawah ini ke dalam Text Editor VS Code kamu, lalu jalankan di peramban browser!



### Nilai Edukasi di Balik Sebuah Candaan

Saat kamu mencoba memainkan proyek di atas sendirian, kamu pasti akan tersenyum kesal. Tombol tersebut benar-benar mustahil untuk diklik karena mesin sensor komputer selalu memproses event listener jauh lebih cepat dibandingkan kecepatan tangan manusia.

Meskipun proyek ini terlihat seperti lelucon iseng, teknik yang kamu pelajari di baliknya adalah keterampilan kelas tinggi. Dalam dunia pengembangan Game Berbasis Web, konsep mendeteksi ukuran layar (menggunakan innerWidth dan innerHeight) lalu menyebar elemen musuh atau koin secara acak menggunakan Math.random() adalah fondasi utama dari sebuah arena permainan. Jangan lupa kirimkan tautan proyek jebakan yang sudah dihosting di GitHub Pages ini ke grup keluargamu dan bersiaplah mendengar keluhan mereka!