Membuat Aplikasi To-Do List

Dalam tutorial ini, kita akan membuat sebuah aplikasi To-Do List sederhana menggunakan JavaScript. Aplikasi ini akan memungkinkan Anda untuk menambahkan, mengedit, dan menghapus tugas-tugas yang perlu dilakukan.

Langkah 1: Membuat Struktur HTML

Mulailah dengan membuat struktur HTML dasar untuk aplikasi Anda:

<!DOCTYPE html>
<html>
<head>
    <title>Aplikasi To-Do List</title>
</head>
<body>
    <h1>To-Do List</h1>
    <div id="app">
        <input type="text" id="task" placeholder="Tambahkan tugas...">
        <button onclick="addTask()">Tambah</button>
        <ul id="taskList"></ul>
    </div>

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

Langkah 2: Menambahkan CSS (Opsional)

Anda dapat menambahkan beberapa gaya CSS untuk menghias tampilan aplikasi Anda agar terlihat lebih menarik.

Langkah 3: Membuat Logika JavaScript

Buat file app.js untuk menambahkan logika JavaScript ke dalam aplikasi Anda:

// Ambil elemen-elemen HTML
const taskInput = document.getElementById("task");
const taskList = document.getElementById("taskList");

// Fungsi untuk menambahkan tugas baru
function addTask() {
    const taskText = taskInput.value.trim();
    if (taskText !== "") {
        const li = document.createElement("li");
        li.innerHTML = `${taskText} <button onclick="deleteTask(this)">Hapus</button>`;
        taskList.appendChild(li);
        taskInput.value = "";
    }
}

// Fungsi untuk menghapus tugas
function deleteTask(button) {
    const li = button.parentElement;
    taskList.removeChild(li);
}

Langkah 4: Uji Aplikasi Anda

Buka file HTML di browser Anda dan coba tambahkan beberapa tugas ke dalam daftar Anda. Anda sekarang memiliki aplikasi To-Do List sederhana yang dapat menambahkan dan menghapus tugas!

Selanjutnya, Anda dapat mengembangkan aplikasi ini dengan menambahkan fitur-fitur seperti penyimpanan data lokal atau mengedit tugas. Semoga tutorial ini membantu Anda memulai dengan JavaScript dalam pembuatan aplikasi To-Do List.

PREVIOUS
NEXT