Membangun Aplikasi To-Do List dengan HTML, CSS, dan JavaScript

To-Do List adalah aplikasi yang sangat populer untuk mencatat dan mengorganisir tugas. Dalam tutorial ini, kita akan membuat aplikasi To-Do List sederhana menggunakan HTML, CSS, dan JavaScript. Aplikasi ini memungkinkan pengguna untuk menambahkan tugas, menandai tugas sebagai selesai, dan menghapus tugas yang sudah selesai.

Dengan menggunakan tiga teknologi ini, kita dapat membangun aplikasi interaktif tanpa perlu menggunakan framework atau library eksternal. Mari kita mulai!

1. Membuat Struktur HTML

Langkah pertama adalah membuat struktur dasar HTML untuk aplikasi To-Do List. Kita akan memiliki input untuk menambahkan tugas baru, tombol untuk menambahkannya ke daftar, dan daftar untuk menampilkan tugas-tugas yang sudah ada.

<div class="todo-container">
  <h1>To-Do List</h1>
  <input type="text" id="todo-input" placeholder="Masukkan tugas...">
  <button id="add-todo">Tambah Tugas</button>
  <ul id="todo-list"></ul>
</div>

Penjelasan:

• <input> digunakan untuk menambahkan tugas baru.
• <button> berfungsi untuk menambahkan tugas ke daftar saat diklik.
• <ul> adalah daftar yang akan menampilkan semua tugas yang ada.

2. Menambahkan Styling dengan CSS

Setelah struktur HTML selesai, kita akan menambahkan beberapa CSS untuk mempercantik tampilan aplikasi kita.

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f4f4f9;
}

.todo-container {
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 20px;
  width: 300px;
}

h1 {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

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

button {
  width: 100%;
  padding: 10px;
  background-color: #2196F3;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

button:hover {
  background-color: #0b7dda;
}

ul {
  list-style: none;
  margin-top: 20px;
}

li {
  padding: 10px;
  border-bottom: 1px solid #ddd;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

li.done {
  text-decoration: line-through;
  color: #888;
}

li button {
  background-color: #e74c3c;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

li button:hover {
  background-color: #c0392b;
}
</style>

CSS di atas memberikan desain yang bersih dan sederhana dengan tombol yang jelas terlihat, dan tugas yang sudah selesai akan ditandai dengan teks yang dicoret. Sekarang, aplikasi kita sudah memiliki tampilan yang rapi.

3. Menambahkan Fungsi dengan JavaScript

Setelah tampilan selesai, kita akan menambahkan fungsi JavaScript untuk menambahkan, menandai selesai, dan menghapus tugas. Berikut adalah kode JavaScript yang dibutuhkan:

<script>
document.getElementById('add-todo').addEventListener('click', function() {
  const todoInput = document.getElementById('todo-input');
  const todoText = todoInput.value.trim();

  if (todoText !== '') {
    const li = document.createElement('li');
    li.textContent = todoText;

    // Tambahkan tombol untuk menghapus tugas
    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Hapus';
    li.appendChild(deleteButton);

    // Tandai tugas sebagai selesai
    li.addEventListener('click', function() {
      li.classList.toggle('done');
    });

    // Hapus tugas dari daftar
    deleteButton.addEventListener('click', function(event) {
      event.stopPropagation(); // Menghindari pemanggilan event click pada li
      li.remove();
    });

    // Masukkan tugas baru ke dalam daftar
    document.getElementById('todo-list').appendChild(li);
    todoInput.value = ''; // Reset input setelah menambah tugas
  }
});
</script>

Penjelasan kode JavaScript:

• Kita menambahkan event listener pada tombol Tambah Tugas untuk mengambil teks dari input, membuat elemen <li>, dan menambahkannya ke dalam daftar.
• Tugas dapat ditandai selesai dengan mengkliknya, yang akan memberi efek coret teks pada tugas yang selesai.
• Tugas yang sudah selesai dapat dihapus dengan mengklik tombol Hapus.

4. Kesimpulan

Dengan menggunakan HTML, CSS, dan JavaScript, kita berhasil membuat aplikasi To-Do List yang sederhana namun fungsional. Aplikasi ini bisa dikembangkan lebih lanjut dengan menambahkan fitur penyimpanan tugas ke localStorage atau bahkan menghubungkannya ke backend untuk penyimpanan yang lebih permanen.

Semoga tutorial ini bermanfaat bagi Anda yang ingin belajar membuat aplikasi interaktif menggunakan HTML, CSS, dan JavaScript. Jangan lupa untuk terus bereksperimen dan menambahkan fitur-fitur baru sesuai dengan kebutuhan Anda.

Terima kasih telah membaca, dan pastikan untuk terus mengunjungi Dede Rizqi Dev Blog untuk tutorial menarik lainnya!