Proyek JavaScript untuk Pemula: Mulai Buat Sekarang

Membaca tutorial JavaScript dan menyelesaikannya adalah dua hal yang sangat berbeda.

Yang pertama terasa produktif. Yang kedua adalah saat kamu benar-benar belajar. Kamu sudah lama berkutat dengan materi JS tapi kodemu masih selalu berada di dalam latihan milik orang lain? Tenang, tidak lama lagi hal itu akan berubah.

Mengetahui tentang perulangan tidak ada gunanya sampai kamu menggunakannya sendiri untuk membuat sesuatu berfungsi. Tutorial mengajarkanmu kosakatanya. Proyek membuatmu mahir berbicara dalam bahasa tersebut.

Jadi, ini dia 18 proyek JavaScript untuk pemula, masing-masing dilengkapi panduan singkat agar kamu tahu harus mulai dari mana. Pilih satu, buat, lalu pilih yang lain.

Kuasai Dasar-Dasar JavaScript Terlebih Dahulu

Semua proyek JS pemula sangat bergantung pada variabel, fungsi, kondisi, perulangan, array, object, dan beberapa method DOM. Jika kamu belum terbiasa dengan hal-hal ini, kamu akan menghabiskan lebih banyak waktu berkutat dengan sintaksis daripada membuat proyek.

Kursus JavaScript dari Coddy dirancang khusus untuk ini. Pelajaran berdurasi lima menit yang memandu kamu memahami inti bahasa pemrograman ini langkah demi langkah. Kamu bisa langsung menulis dan menjalankan kode di browser. Tanpa setup, tanpa konfigurasi environment, tanpa perlu "install Node dulu".

Bugsy, asisten AI bawaan kami, selalu siap membantu di setiap pelajaran saat ada hal yang belum kamu pahami.

Jika kamu bisa membaca, menulis, dan menjelaskan hal-hal berikut tanpa ragu, berarti kamu sudah siap. Jika belum, pelajari kembali dasar-dasar JS di Coddy sampai kamu bisa.

• Variabel dan tipe data primitif (string, number, boolean)
• Pernyataan if/else dan switch
• Perulangan for, while, dan for...of
• Fungsi dan arrow function
• Array dan method umum (push, pop, map, filter, find)
• Object dan notasi titik/kurung siku (dot/bracket notation)
• Akses DOM dasar (querySelector, addEventListener, textContent)

Sudah paham semua? Bagus. Mari kita mulai membuat!

Proyek Pemula: Halo, DOM

Proyek-proyek ini sengaja dibuat sederhana. Mereka hanya berfokus pada satu atau dua konsep, jadi jika ada yang error, kamu bisa menemukan penyebabnya dengan cepat. Dan ingat, jangan lewatkan proyek-proyek ini hanya karena terdengar mudah!

1. Penghitung Klasik (Counter)

Apa itu: sebuah angka di layar dengan tombol tambah dan tombol kurang.

Mengapa ini bagus: aplikasi paling sederhana yang menggabungkan HTML, CSS, dan JavaScript. Kamu akan belajar tentang state (variabel yang nilainya berubah), pembaruan DOM, dan event listener. Kurang lebih hanya sekitar dua puluh baris kode.

Cara membuatnya: buat satu elemen span untuk angka, dan dua tombol. Tambahkan let count = 0. Hubungkan click listener pada setiap tombol untuk menambah atau mengurangi nilai count, lalu perbarui textContent pada span tersebut. Tantangan tambahan: buat tombol reset dan batasi agar angka tidak bisa minus (berhenti di angka nol).

2. Kalkulator Tip

Apa itu: masukkan jumlah tagihan dan persentase tip, lalu lihat jumlah tip dan total yang harus dibayar.

Mengapa ini bagus: memperkenalkan input form dan parseFloat, yang sering kali membingungkan hampir semua pemula di awal. Kamu juga akan menyadari betapa mudahnya perhitungan matematikamu error jika kamu melupakan NaN.

Cara membuatnya: buat dua input angka (tagihan, persentase tip), satu tombol, dan dua span untuk output. Saat tombol diklik, konversi kedua input, lakukan perhitungan, bulatkan menjadi dua angka di belakang koma menggunakan .toFixed(2), lalu tampilkan hasilnya. Tantangan tambahan: tambahkan opsi untuk membagi tagihan ke beberapa orang.

3. Pembuat Palet Warna

Apa itu: klik tombol, lalu dapatkan warna acak baru yang ditampilkan sebagai sampel warna beserta kode hex-nya.

Mengapa ini bagus: menggabungkan angka acak, template literal, dan inline style dalam satu aplikasi kecil. Hasilnya sangat visual, sehingga proses belajarmu jadi lebih menyenangkan.

Cara membuatnya: buat fungsi yang mengembalikan angka bulat acak antara 0 dan 255 sebanyak tiga kali, lalu buat string seperti rgb(${r}, ${g}, ${b}). Atur string tersebut sebagai warna latar belakang (background color) sampel warna. Tantangan tambahan: buat palet berisi lima warna sekaligus, bukan hanya satu sampel warna.

4. Pembuat Kutipan Acak

Apa itu: tombol yang mengubah kutipan yang ditampilkan dengan kutipan acak dari array milikmu.

Mengapa ini bagus: melatih penggunaan array dan Math.random, serta menghasilkan proyek menarik yang bisa langsung kamu bagikan ke teman-teman.

Cara membuatnya: buat sebuah array berisi object kutipan yang memiliki properti text dan author. Saat tombol diklik, pilih indeks acak dan perbarui kedua elemen tersebut di layar. Tantangan tambahan: buat tautan "bagikan ke Twitter" yang otomatis membuka draf tweet berisi kutipan tersebut.

5. Jam Digital

Apa itu: menampilkan waktu saat ini di layar dan diperbarui setiap detik.

Mengapa ini bagus: di sinilah kamu akan mengenal setInterval dan object Date, yang akan sering kamu gunakan ke depannya. Menambahkan angka nol di depan menit dan detik yang bernilai satu digit adalah tantangan logika kecil yang menarik.

Cara membuatnya: buat fungsi yang membaca new Date(), memformat jam, menit, dan detik, lalu menulisnya ke dalam elemen span. Jalankan fungsi tersebut di dalam setInterval(updateClock, 1000). Tantangan tambahan: buat tombol untuk beralih antara format 12 jam dan 24 jam.

6. Kalkulator BMI

Apa itu: masukkan tinggi dan berat badan, lalu dapatkan nilai BMI beserta kategori berat badanmu.

Mengapa ini bagus: contoh kasus nyata penggunaan kondisi (if/else) untuk menentukan label mana yang harus ditampilkan. Ini juga kesempatan bagus untuk melatih pembuatan tata letak form yang rapi.

Cara membuatnya: buat input angka untuk tinggi badan (cm) dan berat badan (kg). Saat form dikirim (submit), hitung BMI dengan rumus standar, gunakan rangkaian if/else untuk menentukan kategori, lalu tampilkan kedua nilai tersebut. Tantangan tambahan: tambahkan tombol untuk beralih ke satuan imperial (inci dan pon).

Proyek Tingkat Menengah: Lebih Banyak Komponen Bergerak

Setelah menyelesaikan beberapa proyek di atas, kamu akan mulai melihat pola yang berulang. Klik tombol mengubah variabel, fungsi memperbarui UI berdasarkan variabel tersebut, lalu ulangi. Itulah inti dari sebagian besar frontend development. Proyek-proyek berikut akan menantangmu untuk mengelola beberapa state sekaligus.

7. Daftar Tugas (To-do List)

Apa itu: ketik tugas, tekan enter, lalu tugas tersebut akan muncul di daftar. Klik tugas untuk menandainya sebagai selesai. Klik tombol X untuk menghapusnya.

Mengapa ini bagus: proyek ini adalah "hello world" bagi framework frontend karena suatu alasan. Kamu akan mengelola array, merendernya ke DOM, dan menangani dua atau tiga event. Jika kamu bisa membuat to-do list dari nol, kamu sudah resmi lulus dari level pemula.

Cara membuatnya: buat sebuah array berisi object tugas yang memiliki properti id, text, dan done. Render ulang daftar tersebut sebagai elemen <ul> setiap kali ada perubahan. Saat tombol enter ditekan, masukkan (push) tugas baru ke array. Saat diklik, ubah status selesai (toggle done) atau hapus elemen dari array menggunakan splice. Tantangan tambahan: simpan data ke localStorage agar daftar tugas tidak hilang saat halaman di-refresh.

8. Stopwatch dengan Waktu Putaran (Lap)

Apa itu: stopwatch yang dilengkapi tombol mulai (start), berhenti (stop), reset, dan tombol putaran (lap).

Mengapa ini bagus: lebih menantang daripada jam digital biasa, karena kamu harus mengelola variabel waktu yang telah berlalu sendiri alih-alih meminta waktu dari sistem. Kamu akan belajar tentang Date.now(), interval, dan logika jeda (pause).

Cara membuatnya: simpan variabel startTime dan akumulator elapsed. Saat tombol start diklik, atur startTime = Date.now() and jalankan interval. Saat tombol stop diklik, lakukan elapsed += Date.now() - startTime. Saat tombol lap diklik, masukkan catatan waktu saat ini ke dalam array lalu tampilkan di layar. Tantangan tambahan: format tampilan milidetik agar terlihat rapi.

9. Timer Pomodoro

Apa itu: 25 menit waktu fokus bekerja, 5 menit waktu istirahat, lalu ulangi. Bunyi bip akan terdengar saat waktu beralih.

Mengapa ini bagus: ini adalah pengenalan konsep state machine untuk pemula. Kamu akan mengelola status seperti "work" (bekerja), "break" (istirahat), atau "paused" (jeda), dan tampilan UI akan berubah sesuai dengan mode aktif saat itu.

Cara membuatnya: gunakan pola interval yang sama seperti stopwatch, tetapi dengan hitungan mundur. Pantau mode apa yang sedang aktif. Ketika timer mencapai angka nol, ganti mode dan putar suara singkat menggunakan new Audio('beep.mp3').play(). Tantangan tambahan: buat penghitung sesi kerja yang berhasil diselesaikan hari itu.

10. Aplikasi Kuis

Apa itu: kuis pilihan ganda yang akan menampilkan skormu di akhir sesi.

Mengapa ini bagus: menggabungkan iterasi array, kondisi (if/else), dan konsep sederhana tentang "screen state" (pertanyaan saat ini, layar hasil).

Cara membuatnya: buat sebuah array berisi object pertanyaan yang memiliki properti text, options, and correctIndex. Tampilkan satu pertanyaan saja dalam satu waktu. Saat jawaban diklik, periksa apakah cocok dengan correctIndex, tambahkan skor jika benar, lalu lanjutkan ke indeks berikutnya. Jika pertanyaan sudah habis, tampilkan layar hasil. Tantangan tambahan: tambahkan timer untuk setiap pertanyaan.

11. Pembuat Kata Sandi (Password Generator)

Apa itu: tentukan panjang karakter dan jenis karakter apa saja yang ingin dimasukkan, lalu dapatkan kata sandi acak.

Mengapa ini bagus: menggabungkan manipulasi string, nilai acak, dan input checkbox dalam satu proyek. Selain itu, proyek ini benar-benar berguna untuk kehidupan sehari-hari, sesuatu yang jarang ditemukan pada proyek latihan biasa.

Cara membuatnya: buat empat kumpulan karakter (huruf kecil, huruf besar, angka, simbol). Gabungkan kumpulan karakter yang aktif berdasarkan checkbox yang dicentang. Lakukan perulangan sebanyak n kali untuk memilih karakter acak dari kumpulan yang sudah digabungkan tersebut. Tantangan tambahan: buat indikator kekuatan kata sandi untuk menilai hasil yang dibuat.

12. Validasi Form

Apa itu: form pendaftaran yang akan menandai kolom yang tidak valid dengan warna merah dan menampilkan pesan error di bawahnya.

Mengapa ini bagus: JavaScript di dunia nyata sangat sering digunakan untuk hal ini. Kamu akan belajar tentang Regex, focus event, dan manipulasi DOM, semuanya diterapkan pada tata letak form yang biasa kita temui.

Cara membuatnya: buat fungsi validator kecil untuk setiap kolom (pola email, panjang kata sandi, kecocokan kata sandi). Saat event blur terjadi (ketika pengguna keluar dari kolom input), jalankan validator dan ubah class pada input tersebut, serta perbarui span error-nya. Saat form dikirim (submit), proses hanya boleh dilanjutkan jika semua validator lolos. Tantangan tambahan: lakukan validasi langsung (live validation) setelah event blur pertama.

Game Mini: Saatnya Bersenang-senang

Game akan melatih kemampuanmu lebih jauh karena melibatkan state yang terus berjalan, pengaturan waktu, dan interaksi. Pertama kali kamu berhasil menggerakkan piksel di elemen canvas, kamu akan benar-benar memahami potensi asli dari JavaScript.

13. Gunting Batu Kertas

Apa itu: pilih gunting, batu, atau kertas. Komputer juga akan memilih secara acak. Lihat siapa yang menang.

Mengapa ini bagus: latihan yang sangat bagus untuk memahami kondisi (if/else) dan nilai acak, lengkap dengan momen menang/kalah yang seru.

Cara membuatnya: buat tiga tombol untuk pilihan pemain. Saat diklik, komputer akan memilih secara acak dari tiga pilihan yang sama. Gunakan pencarian sederhana (atau if/else bersarang) untuk menentukan hasilnya. Catat jumlah kemenangan dan kekalahan di setiap ronde. Tantangan tambahan: buat sistem best-of-five (siapa cepat menang tiga kali) lengkap dengan layar kemenangan.

14. Tic-Tac-Toe

Apa itu: game 3x3 klasik, di mana dua pemain bergantian mengisi kotak di layar yang sama.

Mengapa ini bagus: memperkenalkan penggunaan array dengan panjang 9 sebagai representasi grid 2D dan logika untuk memeriksa kondisi kemenangan. Sangat memuaskan rasanya bisa menyelesaikan game seikonik ini.

Cara membuatnya: render sembilan kotak. Pantau giliran siapa saat ini. Saat kotak diklik, tempatkan tanda pemain aktif dan periksa kedelapan garis kemenangan untuk melihat apakah ada yang cocok. Tampilkan banner pemenang jika ada yang menang. Tantangan tambahan: buat AI sederhana yang memilih kotak kosong secara acak.

15. Game Mencocokkan Gambar (Memory Match)

Apa itu: kumpulan kartu yang tertutup. Klik dua kartu. Jika cocok, kartu akan tetap terbuka. Jika tidak, kartu akan tertutup kembali.

Mengapa ini bagus: melatih pengacakan array, timeout, dan kondisi kemenangan yang jelas. Pertama kali kamu berhasil membuat logika "menutup kembali kartu setelah satu detik", kamu akan benar-benar memahami cara kerja setTimeout.

Cara membuatnya: duplikat sebuah array nilai untuk membuat pasangan kartu, lalu acak menggunakan algoritma Fisher-Yates. Render kartu dalam keadaan tertutup. Saat diklik, buka kartu tersebut. Ketika dua kartu terbuka, bandingkan keduanya; jika cocok, kunci kartu tersebut; jika tidak, tutup kembali kedua kartu setelah jeda beberapa saat. Game berakhir ketika semua pasangan berhasil dicocokkan. Tantangan tambahan: buat penghitung langkah dan pelacak skor terbaik menggunakan localStorage.

16. Game Tebak Angka

Apa itu: komputer memilih angka acak antara 1 dan 100. Kamu harus menebaknya. Komputer akan memberikan petunjuk "lebih tinggi" atau "lebih rendah" sampai tebakanmu benar.

Mengapa ini bagus: sederhana namun sangat baik untuk melatih penanganan input, perbandingan nilai, dan pola perulangan-sampai-benar yang sering digunakan di berbagai program.

Cara membuatnya: buat satu angka target acak di awal. Catat jumlah tebakan. Pada setiap tebakan, bandingkan dengan angka target dan perbarui pesan petunjuk di layar. Hentikan input setelah tebakan benar. Tantangan tambahan: batasi pemain hanya sampai tujuh kali tebakan, dan tampilkan layar game-over jika kesempatan habis.

17. Hangman

Apa itu: komputer memilih sebuah kata secara acak. Kamu harus menebak hurufnya satu per satu. Tebakan yang salah akan menggambar bagian tubuh hangman secara bertahap.

Mengapa ini bagus: ini adalah proyek yang akan membuatmu tidak takut lagi dengan manipulasi string. Membuat tampilan "huruf yang berhasil ditebak" akan langsung mengajarkanmu cara kerja split, map, dan join sekaligus.

Cara membuatnya: pilih satu kata dari sebuah array. Tampilkan garis bawah (underscore) untuk setiap huruf. Saat pemain memilih huruf, tampilkan huruf di posisi yang cocok atau catat sebagai tebakan salah. Gambar hangman secara bertahap (biasanya maksimal enam kali salah tebak) menggunakan CSS atau canvas. Tantangan tambahan: ambil kata-kata secara dinamis dari API kamus publik.

18. Game Ular (Snake)

Apa itu: game ular klasik, makan makanan untuk tumbuh lebih panjang, dan game over jika menabrak tubuh sendiri atau dinding.

Mengapa ini bagus: ini adalah proyek level bos untuk kategori pemula. Kamu akan bersentuhan langsung dengan grid (canvas atau CSS), keyboard event, game loop, deteksi tabrakan (collision detection), dan mekanika pertumbuhan karakter.

Cara membuatnya: render grid menggunakan CSS atau <canvas>. Simpan data ular sebagai array berisi object koordinat. Pada setiap detak (tick) game, geser ular satu kotak ke arah yang ditentukan. Jika kepala ular berada di posisi makanan, buat ular tumbuh lebih panjang dan munculkan makanan baru di tempat acak. Jika kepala menabrak dinding atau bagian tubuhnya sendiri, game over. Tangkap input tombol panah pada keyboard untuk mengubah arah ular. Tantangan tambahan: buat kecepatan game (tick rate) bertambah cepat seiring bertambahnya skor.

Bonus: Aplikasi Cuaca

Apa itu: masukkan nama kota, lalu dapatkan informasi suhu saat ini dan deskripsi cuaca di kota tersebut.

Mengapa ini bagus: pengalaman nyata pertamamu menggunakan API publik dan kode asinkron (async). API cuaca gratis apa pun sudah cukup untuk kamu gunakan berlatih.

Cara membuatnya: dapatkan API key gratis. Saat form dikirim, gunakan fetch dengan menyertakan nama kota di dalam URL. Await responsnya, konversi ke JSON, lalu perbarui DOM dengan data yang relevan. Bungkus kode dalam blok try/catch agar nama kota yang tidak valid tidak merusak tampilan UI. Tantangan tambahan: tampilkan perkiraan cuaca untuk lima hari ke depan.

Cara Menyelesaikan Proyek yang Kamu Mulai

Daftar di atas tidak akan berguna jika kamu hanya membuat setengahnya lalu membiarkan sisanya terbengkalai. Berikut beberapa tips yang bisa membantumu:

• Pilih proyek paling sederhana yang membuatmu tertarik. Rasa tertarik membuatmu mulai melangkah. Kesederhanaan membuatmu bisa menyelesaikannya. Setelah itu, ulangi.
• Batasi waktu, bukan cakupan (scope). Berikan dirimu waktu satu atau dua jam yang fokus untuk menyelesaikan proyek pemula. Jika belum selesai, itu adalah informasi berharga tentang di bagian mana kamu mengalami kesulitan, bukan sebuah kegagalan.
• Buat fungsinya dulu, rapikan tampilannya nanti. Selesaikan versi kasarnya yang penting berfungsi sebelum kamu menyentuh CSS. Tampilan rapi tapi error jauh lebih buruk daripada tampilan biasa saja tapi berfungsi dengan baik.
• Jangan hobi berpindah-pindah tutorial (tutorial-hop). Menonton tiga tutorial berbeda untuk proyek yang sama hanya akan membuang waktumu tanpa menulis kode sama sekali. Buat saja dulu meskipun belum sempurna, lalu cari tahu bagian spesifik yang belum kamu pahami.
• Latih dasar-dasar pemrograman di hari-hari saat kamu tidak bisa membuat proyek. Belajar lima menit di Coddy saat berada di dalam bus adalah sesi belajar yang nyata. Fitur streak akan terus bertambah.

Poin terakhir itulah yang menghubungkan semuanya. Proyek membuat apa yang telah kamu pelajari terasa nyata, tetapi semuanya tetap bergantung pada pemahaman dasar-dasarmu. Pelajaran harian yang singkat adalah kunci agar proyek-proyek sulit tersebut tidak terasa mustahil untuk diselesaikan.

Di Sinilah Peran Coddy

Ini bukan promosi untuk menggunakan alat tertentu dalam membuat proyek-proyek ini. Gunakan editor apa pun yang kamu suka, jalankan di browser, dan host di mana saja.

Bagian yang ditangani oleh Coddy adalah tahap yang lebih awal: memastikan dasar-dasar JavaScript-mu cukup kuat sehingga ketika ingin "membuat aplikasi kuis", kamu tidak perlu menghabiskan waktu dua jam hanya untuk mencari tahu di Google apa fungsi dari .map."

Coddy telah mengajarkan JavaScript kepada jutaan pelajar di web, iOS, dan Android. Pelajaran yang sama, progres yang sama, dan Bugsy yang sama di mana pun kamu membukanya.

Akses gratis mencakup setiap pelajaran JS tanpa perlu setup apa pun. Kamu hanya dibatasi oleh sistem energi yang akan terisi kembali setelah beberapa jam.

Ingin sesi tanpa batas dan bantuan Bugsy di setiap pertanyaan? Paket berbayar kami ditawarkan dengan harga sekitar setengah dari platform sejenis. Apa pun pilihanmu: kuasai dasar-dasarnya dulu, baru buat proyeknya kemudian.