Saatnya Unjuk Gigi: Bikin Proyek Mini Pake JavaScript!

Wih, selamat! Kamu udah ngelewatin banyak banget materi JavaScript, dari variabel, operator, fungsi, sampe ngoprek DOM dan nanganin event. Sekarang, teori doang gak cukup kan? Saatnya kita praktik langsung buat ngeliat gimana semua konsep itu bisa digabungin jadi sesuatu yang beneran jalan dan interaktif!

Di bagian ini, kita bakal coba ngebangun satu atau dua proyek mini sederhana. Tujuannya bukan buat bikin aplikasi super canggih, tapi buat ngelatih pemahamanmu dan ngasih kamu rasa "Aha! Ternyata gini toh cara kerjanya!"

Pilih salah satu proyek di bawah ini yang menurutmu paling menarik, atau kalau semangat, coba kerjain dua-duanya!

Proyek Mini 1: Pengubah Warna Background Acak

Ide Proyek: Kita bakal bikin halaman simpel yang punya satu tombol. Setiap kali tombol itu diklik, warna background halaman bakal berubah jadi warna acak yang keren!

Konsep yang Dipake:

Memilih elemen DOM (button, body).
Event handling (click di tombol).
Fungsi buat nge-generate warna acak.
Memanipulasi style CSS (element.style.backgroundColor).
Mungkin sedikit console.log() buat debugging.

Langkah-langkah Pembuatan:

1. Struktur HTML (`warna-acak.html`)

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pengubah Warna Acak</title>
    <link rel="stylesheet" href="style-warna.css"> <!-- CSS buat tampilan dasar -->
</head>
<body>
    <div class="container">
        <h1>Klik Tombol Buat Ganti Warna!</h1>
        <button id="tombolUbahWarna">Ganti Warna!</button>
        <p>Warna saat ini: <span id="infoWarna">-</span></p>
    </div>
 
    <script src="skrip-warna.js"></script>
</body>
</html>

2. Styling CSS Dasar (`style-warna.css`)

css

body {
    font-family: Arial, sans-serif;
    display: flex; /* Biar container ke tengah */
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #f0f0f0; /* Warna awal */
    transition: background-color 0.5s ease; /* Transisi biar ganti warnanya smooth */
}
 
.container {
    text-align: center;
    background-color: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
 
button {
    padding: 10px 20px;
    font-size: 1rem;
    color: white;
    background-color: dodgerblue;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
 
button:hover {
    background-color: royalblue;
}
 
#infoWarna {
    font-weight: bold;
}

3. Logika JavaScript (`skrip-warna.js`)

javascript

// 1. Pilih elemen-elemen yang dibutuhkan
const tombolUbah = document.getElementById('tombolUbahWarna');
const bodyHalaman = document.body; // Cara gampang milih body
const infoWarnaSpan = document.getElementById('infoWarna');
 
// 2. Fungsi untuk menghasilkan warna HEX acak
function getRandomHexColor() {
    // Karakter yang mungkin buat kode HEX
    const karakterHex = '0123456789ABCDEF';
    let kodeWarna = '#'; // Awali dengan #
    for (let i = 0; i < 6; i++) { // Kita butuh 6 karakter HEX
        // Ambil karakter acak dari karakterHex
        kodeWarna += karakterHex[Math.floor(Math.random() * 16)]; 
    }
    return kodeWarna;
}
 
// 3. Fungsi handler untuk event klik tombol
function ubahWarnaBackground() {
    const warnaBaru = getRandomHexColor(); // Dapatkan warna acak baru
    console.log("Warna baru yang dihasilkan:", warnaBaru); // Buat ngecek di konsol
 
    bodyHalaman.style.backgroundColor = warnaBaru; // Set background body
    infoWarnaSpan.textContent = warnaBaru; // Tampilkan kode warna di span
    infoWarnaSpan.style.color = warnaBaru; // (Opsional) Bikin teks info warnanya sama
}
 
// 4. Pasang event listener ke tombol
tombolUbah.addEventListener('click', ubahWarnaBackground);
 
// (Opsional) Set warna awal pas halaman di-load
ubahWarnaBackground(); // Panggil sekali biar pas load langsung ada warna acak

Penjelasan JavaScript:

Kita pilih tombol, body, dan span buat info warna.
getRandomHexColor(): Fungsi ini bikin kode warna HEX acak (misal, #A3F0C1).
- Math.random() ngasilin angka antara 0 dan (kurang dari) 1.
- Dikali 16 (karena ada 16 karakter HEX: 0-9, A-F).
- Math.floor() buletin ke bawah jadi integer (0-15).
- Hasilnya dipake sebagai indeks buat ngambil karakter dari karakterHex.
- Diulang 6 kali buat dapet 6 digit HEX.
ubahWarnaBackground(): Fungsi ini dipanggil pas tombol diklik. Dia ngambil warna acak baru, terus ngeset backgroundColor body dan nampilin kode warnanya.
addEventListener('click', ...): Masang "pendengar" ke tombol biar fungsi ubahWarnaBackground jalan pas tombol diklik.

Coba Sendiri! Simpen ketiga file itu di satu folder, terus buka warna-acak.html di browser. Klik tombolnya dan liat warnanya berubah-ubah! Asyik kan?

Proyek Mini 2: To-Do List Super Sederhana

Ide Proyek: Kita bikin aplikasi To-Do List yang simpel banget: ada input buat nambahin tugas baru, dan daftar tugas yang udah ditambahin. Kita belum bikin fitur hapus atau tandai selesai dulu ya, biar gak terlalu kompleks buat awal.

Konsep yang Dipake:

Memilih elemen DOM (input, button, ul).
Event handling (click di tombol tambah, mungkin submit di form).
Membaca nilai dari input (input.value).
Membuat elemen HTML baru secara dinamis (document.createElement()).
Menambahkan elemen baru ke DOM (element.appendChild()).
Manipulasi textContent.
Array (buat nyimpen daftar tugas, meskipun di contoh ini kita langsung tambahin ke DOM aja biar simpel).

Langkah-langkah Pembuatan:

1. Struktur HTML (`todo.html`)

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List Sederhana</title>
    <link rel="stylesheet" href="style-todo.css">
</head>
<body>
    <div class="todo-container">
        <h1>Daftar Tugasku Hari Ini</h1>
        <form id="formTambahTugas">
            <input type="text" id="inputTugas" placeholder="Ketik tugas baru..." required>
            <button type="submit">Tambah Tugas</button>
        </form>
        <ul id="daftarListTugas">
            <!-- Tugas akan muncul di sini -->
        </ul>
    </div>
 
    <script src="skrip-todo.js"></script>
</body>
</html>

2. Styling CSS Dasar (`style-todo.css`)

css

body {
    font-family: 'Segoe UI', sans-serif;
    background-color: #f9f9f9;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Biar konten gak terlalu ke tengah kalau panjang */
    min-height: 100vh;
    margin: 0;
    padding-top: 50px;
}
 
.todo-container {
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 450px;
}
 
h1 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}
 
#formTambahTugas {
    display: flex; /* Input dan tombol sejajar */
    margin-bottom: 20px;
}
 
#inputTugas {
    flex-grow: 1; /* Input ngambil sisa ruang */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px 0 0 4px; /* Sudut kiri melengkung */
    font-size: 1rem;
}
 
#formTambahTugas button {
    padding: 10px 15px;
    background-color: dodgerblue;
    color: white;
    border: none;
    border-radius: 0 4px 4px 0; /* Sudut kanan melengkung */
    cursor: pointer;
    font-size: 1rem;
}
 
#formTambahTugas button:hover {
    background-color: royalblue;
}
 
#daftarListTugas {
    list-style-type: none; /* Ilangin bullet default */
    padding: 0;
}
 
#daftarListTugas li {
    background-color: #f0f0f0;
    padding: 12px;
    margin-bottom: 8px;
    border-radius: 4px;
    display: flex;
    justify-content: space-between; /* Buat nanti kalau ada tombol hapus */
    align-items: center;
}

3. Logika JavaScript (`skrip-todo.js`)

javascript

// 1. Pilih elemen-elemen yang dibutuhkan
const formTambahTugas = document.getElementById('formTambahTugas');
const inputTugas = document.getElementById('inputTugas');
const daftarListTugas = document.getElementById('daftarListTugas');
 
// 2. Fungsi handler untuk event submit form
function handleTambahTugas(event) {
    event.preventDefault(); // PENTING! Mencegah form di-submit secara normal (reload halaman)
 
    const teksTugasBaru = inputTugas.value.trim(); // Ambil nilai input & hilangkan spasi ekstra
 
    if (teksTugasBaru === "") {
        alert("Tugas tidak boleh kosong!");
        return; // Hentikan fungsi kalau input kosong
    }
 
    // Buat elemen <li> baru
    const itemTugasBaru = document.createElement('li');
    itemTugasBaru.textContent = teksTugasBaru; // Set teksnya
 
    // (Opsional) Tambahkan tombol hapus (tapi fungsionalitasnya belum kita buat)
    // const tombolHapus = document.createElement('button');
    // tombolHapus.textContent = 'Hapus';
    // tombolHapus.className = 'hapus-tugas'; // Buat styling nanti
    // itemTugasBaru.appendChild(tombolHapus);
 
    // Tambahkan item tugas baru ke dalam <ul>
    daftarListTugas.appendChild(itemTugasBaru);
 
    // Kosongkan input field setelah tugas ditambah
    inputTugas.value = "";
    inputTugas.focus(); // (Opsional) Fokuskan lagi ke input field
 
    console.log("Tugas baru ditambahkan:", teksTugasBaru);
}
 
// 3. Pasang event listener ke form
formTambahTugas.addEventListener('submit', handleTambahTugas);

Penjelasan JavaScript:

Kita pilih form, input, dan <ul> buat daftar tugas.
handleTambahTugas(event): Fungsi ini jalan pas form di-submit.
- event.preventDefault();: Ini krusial! Mencegah halaman nge-reload pas form disubmit.
- Kita ambil nilai dari inputTugas.value dan pake .trim() buat ngilangin spasi di awal/akhir.
- Ada validasi simpel buat ngecek input kosong.
- document.createElement('li'): Bikin elemen <li> baru di memori.
- itemTugasBaru.textContent = teksTugasBaru;: Ngisi teks ke <li> baru itu.
- daftarListTugas.appendChild(itemTugasBaru);: "Nempelin" <li> baru itu jadi anak terakhir dari <ul>. Ini yang bikin dia tampil di halaman!
- Input field dikosongin lagi.
addEventListener('submit', ...): Masang pendengar ke form. Event submit itu lebih baik daripada click di tombol, karena submit juga bisa kepicu pas pengguna neken Enter di input field.

Coba Sendiri! Simpen ketiga file itu, buka todo.html di browser. Coba ketik tugas baru terus klik tombol "Tambah Tugas" atau tekan Enter. Tugasnya bakal muncul di daftar!

Tantangan Tambahan (Kalau Kamu Tertantang!)

Pengubah Warna Acak:
- Gimana caranya biar warna teks info warnanya juga ikut berubah jadi kontras sama background? (Mungkin butuh fungsi buat ngecek kecerahan warna).
- Bisa gak kamu nambahin pilihan buat ganti warna ke gradient acak, bukan cuma warna solid?
To-Do List:
- Gimana caranya nambahin tombol "Hapus" di tiap item tugas yang beneran bisa ngapus tugas itu dari daftar? (Hint: element.remove() dan event listener di tombol hapus).
- Gimana caranya nandain tugas udah selesai (misal, teksnya dicoret atau background-nya beda) pas diklik? (Hint: classList.toggle() dan style CSS buat state selesai).
- Bisa gak kamu nyimpen daftar tugasnya pake Web Storage (localStorage) biar gak ilang pas halaman di-refresh? (Ini udah lumayan advance!).

Proyek-proyek mini kayak gini adalah cara terbaik buat nguji dan ngasah pemahamanmu soal JavaScript. Jangan takut buat ngoprek kodenya, nambahin fitur sendiri, atau bahkan bikin proyek mini lain dari idemu sendiri!

Semakin banyak kamu praktik, semakin jago kamu ngasih "otak" dan "kehidupan" ke halaman web-mu. Ini baru awal dari petualangan seru di dunia JavaScript!

Di bagian terakhir panduan JavaScript ini, kita bakal ngasih beberapa kata penutup dan arahan buat langkah belajarmu selanjutnya.

Proyek Mini JS

Saatnya Unjuk Gigi: Bikin Proyek Mini Pake JavaScript!

Proyek Mini 1: Pengubah Warna Background Acak

1. Struktur HTML (warna-acak.html)

2. Styling CSS Dasar (style-warna.css)

3. Logika JavaScript (skrip-warna.js)