Proyek 29 Artikel ⏱️ Estimasi Waktu Baca: 5 menit

Proyek Web: Membangun Generator Kutipan Motivasi Interaktif

Halo Sobat Jurnal Coding! Selamat datang kembali di kategori Proyek.

Mari kita bicara dari hati ke hati sejenak. Belajar bahasa pemrograman itu tidak selamanya indah dan mulus. Pasti ada hari-hari di mana kamu merasa sangat frustrasi karena sebuah kode tidak mau berjalan hanya gara-gara kamu melupakan satu tanda titik koma. Ada kalanya kamu menatap layar monitor yang penuh dengan pesan peringatan berwarna merah, lalu kamu menghela napas panjang dan berpikir, "Apakah dunia coding ini benar-benar cocok untukku?"

Perasaan itu sangat wajar dan manusiawi. Bahkan para pembuat perangkat lunak (Software Engineer) di perusahaan raksasa seperti Google atau Facebook pun sering kali mengalami kebuntuan mental yang kita sebut sebagai "Burnout". Di saat-saat gelap seperti itulah, sebuah kata-kata motivasi yang positif bisa menjadi penyelamat untuk mengembalikan semangat kita.

Nah, daripada kita sibuk mencari kutipan motivasi di media sosial orang lain, bagaimana kalau kita membuat mesin pembuat motivasi kita sendiri?

Pada proyek kali ini, kita akan membangun sebuah aplikasi web bernama Generator Kutipan Motivasi (Random Quote Generator). Aplikasi ini sangat sederhana: setiap kali kamu menekan sebuah tombol, layar komputermu akan menampilkan kata-kata mutiara yang berbeda secara acak. Proyek ini adalah taman bermain yang sangat sempurna untuk melatih pemahamanmu tentang Array (Koleksi Data) dan pengacakan angka (Randomization) di dalam JavaScript.

Mari kita siapkan secangkir kopi, buka Text Editor kesayanganmu, dan mulai merakit aplikasinya!

Langkah 1: Menyiapkan Panggung Pertunjukan (HTML)

Seperti biasa, setiap kali kita membangun rumah, kita harus membuat kerangka tiangnya terlebih dahulu. Dalam dunia website, kerangka tersebut adalah HTML. Kita membutuhkan sebuah wadah besar, sebuah teks untuk menampilkan kutipan, dan tentu saja, sebuah tombol pemicu.

Silakan buat file baru bernama index.html dan ketikkan kerangka dasar berikut ini:

<div id="wadah-kutipan">

    <h1>Suntikan Semangat Hari Ini</h1>

    <p id="teks-kutipan">"Klik tombol di bawah untuk mendapatkan motivasi pertamamu!"</p>

    <button id="tombol-acak">Berikan Aku Motivasi</button>

</div>

Perhatikan baik-baik kode di atas. Rahasia utama dari HTML interaktif ada pada atribut ID. Atribut ID (seperti teks-kutipan dan tombol-acak) ibarat sebuah "papan nama" atau "KTP". Nantinya, bahasa JavaScript akan memanggil elemen-elemen ini berdasarkan nama KTP mereka agar tahu bagian mana yang harus diubah isinya.

Langkah 2: Memberikan Riasan Visual yang Elegan (CSS)

Jika kamu langsung membuka file HTML di atas melalui browser, kamu hanya akan melihat teks hitam putih biasa yang berada di pojok kiri atas layar. Sangat kaku dan membosankan! Mari kita berikan sedikit sihir CSS agar aplikasi kita terlihat seperti kartu motivasi premium yang elegan.

body {

    background-color: #121212;

    color: #ffffff;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    font-family: sans-serif;

}

#wadah-kutipan {

    background: rgba(255, 255, 255, 0.05);

    padding: 40px;

    border-radius: 12px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    text-align: center;

    max-width: 500px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.5);

}

#teks-kutipan {

    font-size: 24px;

    font-style: italic;

    color: #00ffff;

    margin: 30px 0;

    line-height: 1.5;

}

#tombol-acak {

    padding: 12px 24px;

    font-size: 16px;

    background-color: #00ffff;

    color: #121212;

    border: none;

    border-radius: 6px;

    cursor: pointer;

    font-weight: bold;

    transition: 0.3s;

}

#tombol-acak:hover {

    background-color: #ffffff;

}

Simpan kodemu dan lihat hasilnya! Sekarang aplikasi kita sudah berada tepat di tengah layar, dibungkus oleh kotak semi-transparan bergaya kaca, dan tombolnya akan menyala terang jika disentuh oleh kursor (efek hover). Sangat memanjakan mata, bukan?

Namun, desain ini hanyalah sebuah cangkang kosong. Tombolnya belum bisa merespons apapun. Mari kita bangun otak kecerdasannya di langkah terakhir.

Langkah 3: Menyuntikkan Nyawa dan Logika (JavaScript)

Di sinilah letak keseruan yang sesungguhnya! Konsep pembuatannya sangat logis: Kita akan menyiapkan "sebuah kotak besar" (Array) yang berisi daftar puluhan kalimat motivasi. Kemudian, kita akan menyuruh komputer untuk mengocok dadu (Randomizer) dan mengambil satu kalimat dari kotak tersebut secara acak setiap kali pengguna menekan tombol.

Silakan tambahkan kode JavaScript berikut ini di bagian bawah kodemu:

const daftarMotivasi = [

    "Jangan pernah menyerah! Bug hari ini adalah pelajaran untuk esok hari.",

    "Semua pakar (Expert) dulunya adalah seorang pemula yang kebingungan.",

    "Beristirahatlah jika kamu lelah, namun jangan pernah berhenti.",

    "Satu baris kode yang kamu tulis hari ini membawamu selangkah lebih dekat dengan mimpimu.",

    "Komputer tidak pernah berbohong, ia hanya menjalankan apa yang kamu perintahkan.",

    "Fokuslah pada progres, bukan pada kesempurnaan. Belajar coding adalah lari maraton, bukan lari sprint."

];

const elemenTeks = document.getElementById("teks-kutipan");

const tombol = document.getElementById("tombol-acak");

tombol.addEventListener("click", function() {

    // 1. Dapatkan angka acak berdasarkan panjang kotak array

    let angkaAcak = Math.floor(Math.random() * daftarMotivasi.length);

    // 2. Ambil teks mutiara berdasarkan angka acak tersebut

    let kutipanTerpilih = daftarMotivasi[angkaAcak];

    // 3. Tampilkan ke layar halaman web

    elemenTeks.innerText = '"' + kutipanTerpilih + '"';

});

Membedah Logika Ajaib JavaScript

Bagi kamu yang baru belajar, melihat rumus Math.floor(Math.random()) mungkin membuat kepalamu sedikit berputar. Mari kita bedah bersama menggunakan bahasa manusia sehari-hari!

Fungsi inti yang menggerakkan proyek ini adalah Math.random(). Di dalam dunia JavaScript, fungsi ini bertugas seperti mesin pengocok undian. Ia akan selalu mengeluarkan angka desimal acak antara 0 hingga 0.999 (misalnya 0.45 atau 0.82).

Karena daftar kalimat motivasi kita ada 6 buah (panjang Array adalah 6), kita mengalikan angka desimal acak tersebut dengan angka 6. Hasilnya mungkin menjadi angka seperti 3.84 atau 5.12.

Sayangnya, di dalam dunia pemrograman, urutan lemari penyimpanan Array tidak mengenal angka desimal. Lemari Array hanya mengenali urutan laci nomor 0, 1, 2, 3, dan seterusnya. Kita tidak bisa meminta komputer mengambil laci nomor 3 koma 8!

Di sinilah pahlawan kita bernama Math.floor() bertugas. Fungsi ini bertindak seperti sebuah pisau pemotong. Ia memotong dan membuang semua angka desimal yang ada di belakang koma, dan membulatkan angkanya ke bawah. Jadi, angka 3.84 akan dipotong bersih menjadi angka 3 yang bulat dan utuh.

Setelah mendapatkan angka bulat (misalnya angka 3), JavaScript akan membuka laci Array nomor 3, mengambil teks motivasi yang ada di dalamnya, lalu menempelkannya ke layar peramban (browser) kamu! Sangat logis dan jenius, bukan?

Kesimpulan Proyek

Selamat! Kamu baru saja merakit aplikasi pertamamu yang menggunakan logika pengacakan data. Jangan meremehkan proyek sederhana ini. Tahukah kamu bahwa logika dasar pengacakan Array inilah yang digunakan oleh perusahaan raksasa seperti Spotify untuk mengacak urutan lagu di daftar putar (Shuffle Playlist) milikmu?

Sekarang, aplikasi ini sepenuhnya milikmu. Tambahkan kalimat-kalimat yang paling memotivasimu sendiri ke dalam Array daftarMotivasi. Jika suatu hari kamu sedang kelelahan mempelajari kode pemrograman baru, buka kembali aplikasi buatanmu ini, tekan tombolnya, dan biarkan karyamu sendiri menyemangatimu kembali.

Teruslah berlatih, dan sampai jumpa di petualangan proyek berikutnya!