Membuat Aplikasi Todo List dengan JavaScript: Panduan Langkah demi Langkah

Aplikasi Todo List dengan JavaScript

Pendahuluan

Aplikasi Todo List adalah salah satu proyek sederhana dan menarik untuk mempelajari cara kerja JavaScript. Dengan proyek ini, Anda akan memahami manipulasi DOM, event handling, dan penyimpanan data sementara. Artikel ini akan membimbing Anda membuat aplikasi Todo List dari awal.

1. Persiapan Proyek

Buat struktur folder untuk proyek Anda seperti berikut:


todo-list/
│
├── index.html
├── style.css
├── script.js

2. Membuat Halaman HTML

Buat file index.html:

html

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Belajar membuat aplikasi Todo List sederhana dengan HTML, CSS, dan JavaScript.">
    <meta name="keywords" content="Todo List, JavaScript, HTML, CSS, Pemrograman Web">
    <meta name="author" content="filmotaku.com">
    <title>Aplikasi Todo List</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>Aplikasi Todo List</h1>
        <p>Kelola tugas Anda dengan mudah</p>
    </header>
    <main>
        <section class="todo-app">
            <input type="text" id="todo-input" placeholder="Tambahkan tugas baru...">
            <button id="add-btn">Tambah</button>
            <ul id="todo-list"></ul>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 filmotaku.com - Semua Hak Dilindungi</p>
    </footer>
    <script src="script.js"></script>
</body>
</html>

3. Membuat Gaya Tampilan dengan CSS

Buat file style.css:

css

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f9f9f9;
    color: #333;
}

header {
    text-align: center;
    padding: 20px;
    background-color: #007BFF;
    color: white;
}

main {
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.todo-app {
    width: 300px;
}

#todo-input {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

#add-btn {
    width: 100%;
    padding: 10px;
    background-color: #007BFF;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#add-btn:hover {
    background-color: #0056b3;
}

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

#todo-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-bottom: 5px;
    background-color: #f1f1f1;
    border-radius: 5px;
}

#todo-list li button {
    background-color: red;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#todo-list li button:hover {
    background-color: darkred;
}

4. Menambahkan Interaktivitas dengan JavaScript

Buat file script.js:

javascript

document.addEventListener("DOMContentLoaded", () => {
    const inputField = document.getElementById("todo-input");
    const addButton = document.getElementById("add-btn");
    const todoList = document.getElementById("todo-list");

    // Fungsi untuk menambahkan item ke daftar
    const addTodo = () => {
        const todoText = inputField.value.trim();
        if (todoText === "") {
            alert("Tugas tidak boleh kosong!");
            return;
        }

        // Membuat elemen baru untuk item todo
        const listItem = document.createElement("li");
        listItem.textContent = todoText;

        // Tombol hapus untuk item
        const deleteButton = document.createElement("button");
        deleteButton.textContent = "Hapus";
        deleteButton.addEventListener("click", () => {
            listItem.remove();
        });

        listItem.appendChild(deleteButton);
        todoList.appendChild(listItem);

        // Reset input
        inputField.value = "";
    };

    // Menambahkan event listener ke tombol tambah
    addButton.addEventListener("click", addTodo);

    // Menambahkan event listener ke input untuk menangani Enter
    inputField.addEventListener("keypress", (event) => {
        if (event.key === "Enter") {
            addTodo();
        }
    });
});

5. Menjalankan Aplikasi

  1. Simpan semua file ke dalam folder todo-list/.
  2. Buka file index.html di browser.
  3. Cobalah menambahkan, menyelesaikan, atau menghapus tugas dari daftar.

Kesimpulan

Proyek Todo List sederhana ini adalah cara yang bagus untuk belajar JavaScript dasar. Anda dapat memperluas aplikasi ini dengan fitur tambahan seperti penyimpanan lokal atau integrasi dengan database.

Tags

Anda mungkin menyukai postingan ini

Lebih baru Lebih lama