Bikin To-Do List Simpel Pakai JavaScript Murni (Vanilla JS)

Halo gaes! Pengen nyemplung ke dunia ngoding JavaScript tapi bingung mulai dari mana? Atau udah sering pake framework tapi penasaran vibes ngoding murni alias Vanilla JS? Nah, pas banget nih! Kita bakal spill tuntas gimana caranya bikin aplikasi To-Do List sederhana yang fungsional pake JavaScript murni, tanpa embel-embel framework atau library lainnya. Dijamin, ini project yang asik banget buat ngebangun fondasi skill JS kamu!

Kenapa To-Do List dan Kenapa JavaScript Murni?

Sebelum kita skuy ngoding, yuk pahami dulu kenapa project To-Do List ini jadi bestie buat pemula:

Fundamental Banget: Kamu bakal belajar dasar-dasar DOM manipulation (gimana cara JS "ngobrol" sama elemen HTML), event handling (gimana JS nanggepin aksi user), dan pengelolaan data.
Visual dan Interaktif: Hasilnya langsung kelihatan di browser. Kamu bisa langsung interaksi, nambahin, nyoret, atau ngehapus tugas. Seru, kan?
Bikin PD: Setelah ini jadi, auto kamu bakal ngerasa lebih pede buat explore project-project JS lainnya yang lebih kompleks.
JavaScript Murni (Vanilla JS): Ini penting banget! Dengan pake JS murni, kamu jadi paham jeroan kerja JS. Nanti kalau udah paham dasar, mau belajar React, Vue, atau Angular, jadi jauh lebih gampang dan enggak kagok.

Siap? Gaskeun!

Struktur Project Kita

Kita bakal bikin tiga file standar: index.html, style.css, dan script.js. Simpel aja kok.

1. Setup HTML (`index.html`)

Pertama, kita siapkan struktur dasar HTML-nya. Ini bakal jadi "kerangka" To-Do List kita.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List Simple - Vanilla JS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <h1>My To-Do List</h1>
        <div class="input-section">
            <input type="text" id="task-input" placeholder="Apa yang mau kamu lakukan hari ini?">
            <button id="add-task-btn">Tambah Tugas</button>
        </div>
        <ul id="task-list">
            <!-- Tugas akan muncul di sini -->
        </ul>
    </div>

    <script src="script.js"></script>
</body>
</html>

Penjelasan Singkat:

div.container: Wadah utama biar rapi.
h1: Judul aplikasi.
div.input-section: Ada input buat nulis tugas baru dan button buat nambahin. Ingat id="task-input" dan id="add-task-btn", ini penting buat JS nanti.
ul#task-list: unordered list tempat tugas-tugas kita bakal nongol. Ini juga punya id khusus.
script src="script.js": Ini yang paling penting! Ini bakal nyambungin file JavaScript kita. Pastikan taruh di paling bawah <body> biar HTML-nya ke-load semua sebelum JS-nya dieksekusi.

2. Sedikit Sentuhan CSS (`style.css`)

Biar enggak polosan banget, kita kasih sedikit styling biar nyaman dilihat. Styling ini enggak akan terlalu dibahas mendalam karena fokus kita di JS ya gaes.

body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f7f6;
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Align to top */
    min-height: 100vh;
    margin: 0;
    padding-top: 50px; /* Add some padding from top */
    box-sizing: border-box;
}

.container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    width: 100%;
    max-width: 500px;
}

h1 {
    text-align: center;
    color: #333;
    margin-bottom: 30px;
}

.input-section {
    display: flex;
    margin-bottom: 20px;
    gap: 10px; /* Jarak antar elemen */
}

#task-input {
    flex-grow: 1;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

#task-input:focus {
    outline: none;
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
}

#add-task-btn {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

#add-task-btn:hover {
    background-color: #45a049;
}

#task-list {
    list-style: none;
    padding: 0;
}

#task-list li {
    background-color: #f9f9f9;
    padding: 15px;
    margin-bottom: 10px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 0.3s ease, text-decoration 0.3s ease;
}

#task-list li.completed {
    background-color: #e0ffe0; /* Warna lebih hijau muda untuk yang selesai */
    text-decoration: line-through;
    color: #888;
}

#task-list li span {
    flex-grow: 1;
    cursor: pointer; /* Biar kelihatan bisa diklik */
}

#task-list li button {
    background-color: #f44336;
    color: white;
    border: none;
    padding: 8px 12px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 14px;
    margin-left: 10px;
    transition: background-color 0.3s ease;
}

#task-list li button:hover {
    background-color: #d32f2f;
}

3. Otak Utamanya: JavaScript Murni (`script.js`)

Nah, ini dia main course-nya, ngab! Kita bakal tulis semua logikanya di sini.

// 1. Ambil elemen-elemen HTML yang dibutuhkan
const taskInput = document.getElementById('task-input');
const addTaskBtn = document.getElementById('add-task-btn');
const taskList = document.getElementById('task-list');

// 2. Fungsi untuk menyimpan tugas ke Local Storage
function saveTasksToLocalStorage(tasks) {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// 3. Fungsi untuk mengambil tugas dari Local Storage
function getTasksFromLocalStorage() {
    const tasksString = localStorage.getItem('tasks');
    return tasksString ? JSON.parse(tasksString) : [];
}

// 4. Fungsi untuk menambahkan tugas baru
function addTask(taskText, isCompleted = false) {
    // Validasi input: Jangan tambahkan tugas kosong
    if (taskText.trim() === '') {
        alert('Tugas tidak boleh kosong, gaes!');
        return;
    }

    // Buat elemen <li> baru
    const listItem = document.createElement('li');
    listItem.classList.add('task-item'); // Tambahkan class untuk styling

    // Tambahkan class 'completed' jika tugas sudah selesai
    if (isCompleted) {
        listItem.classList.add('completed');
    }

    // Buat elemen <span> untuk teks tugas
    const taskSpan = document.createElement('span');
    taskSpan.textContent = taskText;
    taskSpan.addEventListener('click', () => {
        // Toggle class 'completed' saat span diklik
        listItem.classList.toggle('completed');
        updateAndSaveTasks(); // Update status di local storage
    });

    // Buat tombol delete
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Hapus';
    deleteBtn.addEventListener('click', () => {
        // Hapus elemen <li> dari daftar
        taskList.removeChild(listItem);
        updateAndSaveTasks(); // Update di local storage setelah dihapus
    });

    // Masukkan span dan tombol ke dalam <li>
    listItem.appendChild(taskSpan);
    listItem.appendChild(deleteBtn);

    // Masukkan <li> ke dalam <ul>#task-list
    taskList.appendChild(listItem);

    // Kosongkan input setelah tugas ditambahkan
    taskInput.value = '';

    // Simpan tugas ke local storage setiap kali ada perubahan
    updateAndSaveTasks();
}

// 5. Fungsi untuk merender semua tugas dari Local Storage saat halaman dimuat
function renderTasks() {
    taskList.innerHTML = ''; // Bersihkan daftar tugas yang ada
    const tasks = getTasksFromLocalStorage();
    tasks.forEach(task => {
        addTask(task.text, task.completed); // Render setiap tugas yang ada
    });
}

// 6. Fungsi untuk mengupdate dan menyimpan semua tugas ke Local Storage
function updateAndSaveTasks() {
    const currentTasks = [];
    taskList.querySelectorAll('li').forEach(listItem => {
        currentTasks.push({
            text: listItem.querySelector('span').textContent,
            completed: listItem.classList.contains('completed')
        });
    });
    saveTasksToLocalStorage(currentTasks);
}

// 7. Event Listener untuk tombol "Tambah Tugas"
addTaskBtn.addEventListener('click', () => {
    addTask(taskInput.value);
});

// 8. Event Listener untuk menekan 'Enter' di input
taskInput.addEventListener('keypress', (event) => {
    if (event.key === 'Enter') {
        addTask(taskInput.value);
    }
});

// 9. Panggil fungsi renderTasks saat halaman pertama kali dimuat
document.addEventListener('DOMContentLoaded', renderTasks);

Penjelasan Kode script.js:

Langkah 1: Mengambil Elemen HTML Kita pakai document.getElementById() buat "pegang" elemen input, button, dan ul dari HTML. Ini penting biar JavaScript bisa berinteraksi sama elemen-elemen tersebut.
Langkah 2 & 3: Local Storage Ini bagian kerennya! localStorage di browser itu kayak "otak" buat nyimpen data secara lokal. Jadi, To-Do List kita enggak akan hilang kalau browser di-refresh atau ditutup.
- saveTasksToLocalStorage(): Menyimpan array tugas ke localStorage. Kita pakai JSON.stringify() karena localStorage cuma bisa nyimpan data dalam bentuk string.
- getTasksFromLocalStorage(): Mengambil data tugas dari localStorage dan mengubahnya kembali jadi array objek pakai JSON.parse().
Langkah 4: addTask(taskText, isCompleted = false) Ini fungsi inti buat nambahin tugas baru.
- Validasi: Cek biar enggak nambahin tugas kosong.
- document.createElement('li'): Bikin elemen <li> baru di memory.
- listItem.classList.add('task-item'): Nambahin class task-item biar bisa di-styling.
- document.createElement('span') & textContent: Bikin <span> buat teks tugasnya.
- addEventListener('click', ...) untuk taskSpan: Setiap <span> diklik, kita toggle class completed di <li> induknya. Ini buat efek line-through (coret) dan ganti warna latar.
- document.createElement('button'): Bikin tombol "Hapus".
- addEventListener('click', ...) untuk deleteBtn: Kalau tombol hapus diklik, elemen <li> (parent dari tombol) bakal dihapus dari taskList.
- listItem.appendChild(taskSpan); listItem.appendChild(deleteBtn);: Masukin span dan button ke dalam <li>.
- taskList.appendChild(listItem): Masukin <li> yang udah lengkap tadi ke dalam <ul> induknya.
- taskInput.value = '': Setelah tugas ditambahkan, input dikosongin lagi.
- updateAndSaveTasks(): Ini dipanggil setiap ada penambahan, penghapusan, atau perubahan status tugas, supaya data di localStorage selalu sinkron.
Langkah 5 & 6: renderTasks() dan updateAndSaveTasks()
- renderTasks(): Fungsi ini dipanggil pas halaman pertama kali dimuat. Dia ngambil semua data tugas dari localStorage terus nampilin satu per satu ke UI.
- updateAndSaveTasks(): Fungsi ini "memindai" semua tugas yang ada di UI, bikin objek data baru dari tugas-tugas itu, lalu menyimpannya ke localStorage.
Langkah 7 & 8: Event Listener
- addTaskBtn.addEventListener('click', ...): Setiap tombol "Tambah Tugas" diklik, fungsi addTask() dipanggil dengan nilai dari input.
- taskInput.addEventListener('keypress', ...): Ini buat user experience yang lebih baik. Kalau user ngetik tugas terus tekan Enter, tugasnya langsung otomatis tertambah.
Langkah 9: DOMContentLoaded document.addEventListener('DOMContentLoaded', renderTasks); Ini penting banget! Kode ini memastikan fungsi renderTasks (yang nampilin semua tugas dari localStorage) bakal dijalankan setelah seluruh struktur HTML dan DOM selesai di-load oleh browser. Jadi, pas buka halaman, tugas yang udah disimpen sebelumnya langsung muncul.

Demo dan Hasil Akhir

Setelah semua kode di atas kamu tulis di file masing-masing, coba buka index.html di browser kamu. Harusnya auto muncul To-Do List yang sudah bisa kamu pakai. Kamu bisa:

Menambahkan tugas baru.
Menandai tugas sebagai selesai (dicoret) dengan mengklik teks tugasnya.
Menghapus tugas.
Melihat tugas tetap ada meskipun browser di-refresh (karena pakai localStorage!).

Keren abis kan? Kamu baru aja bikin aplikasi web interaktif pake JS murni!

Tips dan Tantangan Selanjutnya

Validasi Lebih Lanjut: Gimana kalau inputnya ada spasi doang? Coba tambahin validasi lagi.
Filter Tugas: Tambahin tombol "Semua", "Selesai", "Belum Selesai" buat nyaring tugas.
Edit Tugas: Bikin fitur biar teks tugas bisa diedit setelah ditambahkan.
Prioritas: Tambahin opsi prioritas (tinggi, sedang, rendah) ke setiap tugas.
Konfirmasi Hapus: Sebelum menghapus, minta konfirmasi dulu pake confirm('Yakin mau hapus?').

Kesimpulan

Nah, ngab, itu dia step-by-step bikin To-Do List sederhana pake JavaScript murni. Project ini emang kelihatan kecil, tapi manfaatnya gede banget buat ngasah fundamental kamu di DOM manipulation, event handling, dan localStorage. Dengan paham konsep-konsep dasar ini, kamu auto bakal lebih siap buat belajar framework atau library JavaScript yang lebih kompleks di masa depan.

Jangan pernah berhenti explore dan experiment, ya! Semangat terus ngodingnya! Keep coding and stay awesome!

JavaScript

Bikin To-Do List Simpel Pakai JavaScript Murni (Vanilla JS)

Kenapa To-Do List dan Kenapa JavaScript Murni?

Struktur Project Kita

1. Setup HTML (`index.html`)

2. Sedikit Sentuhan CSS (`style.css`)

3. Otak Utamanya: JavaScript Murni (`script.js`)

Demo dan Hasil Akhir

Tips dan Tantangan Selanjutnya

Kesimpulan

Komentar (0)

Menyukai Artikel (1)

Rekomendasi Untukmu

Cara Mudah Menguasai Fetch API di JavaScript untuk Pemula

Belajar JavaScript: Variabel, Tipe Data, dan Operator Dasar

Styling Dinamis JavaScript: Bikin UI Interaktif & Kece

Bikin To-Do List Simpel Pakai JavaScript Murni (Vanilla JS)

Kenapa To-Do List dan Kenapa JavaScript Murni?

Struktur Project Kita

1. Setup HTML (index.html)

2. Sedikit Sentuhan CSS (style.css)

3. Otak Utamanya: JavaScript Murni (script.js)

Demo dan Hasil Akhir

Tips dan Tantangan Selanjutnya

Kesimpulan

Komentar (0)

Menyukai Artikel (1)

Pembaca Artikel

Rekomendasi Untukmu

Cara Mudah Menguasai Fetch API di JavaScript untuk Pemula

Belajar JavaScript: Variabel, Tipe Data, dan Operator Dasar

Styling Dinamis JavaScript: Bikin UI Interaktif & Kece

1. Setup HTML (`index.html`)

2. Sedikit Sentuhan CSS (`style.css`)

3. Otak Utamanya: JavaScript Murni (`script.js`)