Popular Post

Bikin To-Do List App Sendiri Pakai HTML, CSS & JavaScript — Simple Tapi Powerful!

Posted by on

 Membuat aplikasi To-Do List adalah salah satu project terbaik untuk pemula yang ingin belajar web development. Project ini sederhana, tetapi sangat berguna karena bisa langsung digunakan dalam kehidupan sehari-hari.



Melalui project ini, kamu akan belajar bagaimana HTML digunakan untuk membuat struktur aplikasi, CSS untuk mempercantik tampilan, dan JavaScript untuk mengatur logika seperti menambahkan, menghapus, dan menyimpan data.

Selain itu, kamu juga akan mengenal penggunaan localStorage, yang memungkinkan data tetap tersimpan walaupun halaman di-refresh.

Pada tutorial ini, kita akan membuat aplikasi To-Do List dengan fitur berikut:

  • Menambahkan tugas
  • Menghapus tugas
  • Menyimpan data secara otomatis
  • Menampilkan daftar tugas

1. Struktur Project

Kita akan menggunakan 3 file utama:

  • index.html
  • style.css
  • script.js

Struktur ini penting agar kode tetap rapi dan mudah dikembangkan.

2. Membuat Struktur HTML

Buat file index.html, lalu isi dengan kode berikut:

<!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</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <div class="container">
    <h1>To-Do List</h1>

    <div class="input-area">
      <input type="text" id="taskInput" placeholder="Masukkan tugas...">
      <button onclick="addTask()">Tambah</button>
    </div>

    <ul id="taskList"></ul>
  </div>

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

Penjelasan HTML

Pada bagian ini, kita membuat struktur dasar aplikasi. Terdapat sebuah input untuk memasukkan tugas, tombol untuk menambahkan tugas, dan elemen <ul> untuk menampilkan daftar tugas.

Semua elemen ini nantinya akan dikontrol menggunakan JavaScript.

3. Membuat Tampilan dengan CSS

Buat file style.css, lalu isi dengan kode berikut:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #f4f4f4;
  display: flex;
  justify-content: center;
  padding-top: 50px;
}

.container {
  background: white;
  padding: 25px;
  border-radius: 16px;
  width: 320px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}

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

.input-area {
  display: flex;
  gap: 10px;
}

input {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #ddd;
}

button {
  padding: 10px 15px;
  border: none;
  background: #333;
  color: white;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background: #555;
}

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

li {
  display: flex;
  justify-content: space-between;
  background: #eee;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 10px;
}

Penjelasan CSS

CSS digunakan untuk membuat tampilan aplikasi lebih rapi dan nyaman digunakan. Layout dibuat sederhana dengan posisi di tengah layar, serta penggunaan warna yang bersih agar mudah dibaca.

4. Menambahkan Logika dengan JavaScript

Buat file script.js, lalu isi dengan kode berikut:

const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

function renderTasks() {
  taskList.innerHTML = '';

  tasks.forEach((task, index) => {
    const li = document.createElement('li');
    li.innerHTML = `
      ${task}
      <button onclick="deleteTask(${index})">Hapus</button>
    `;
    taskList.appendChild(li);
  });
}

function addTask() {
  const task = taskInput.value.trim();

  if (task === '') return;

  tasks.push(task);
  localStorage.setItem('tasks', JSON.stringify(tasks));

  taskInput.value = '';
  renderTasks();
}

function deleteTask(index) {
  tasks.splice(index, 1);
  localStorage.setItem('tasks', JSON.stringify(tasks));
  renderTasks();
}

renderTasks();

5. Penjelasan JavaScript

Mengambil Elemen

const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

Kode ini digunakan untuk mengambil elemen input dan daftar tugas agar bisa dimanipulasi.

Menyimpan Data

let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

Data tugas disimpan di dalam localStorage, sehingga tidak hilang ketika halaman di-refresh.

Menampilkan Data

Fungsi renderTasks() digunakan untuk menampilkan semua tugas ke dalam halaman.

Menambahkan Tugas

Fungsi addTask() akan mengambil input dari user, menyimpannya ke dalam array, lalu memperbarui tampilan.

Menghapus Tugas

Fungsi deleteTask() digunakan untuk menghapus tugas berdasarkan index.

6. Cara Menjalankan Project

Simpan semua file dalam satu folder:

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

Kemudian buka file index.html di browser.

7. Hasil yang Didapat

Dengan project ini, kamu sudah berhasil membuat aplikasi yang tidak hanya sebagai latihan, tetapi juga bisa digunakan dalam kehidupan sehari-hari.

Kamu juga mulai memahami bagaimana data dapat disimpan di browser dan bagaimana interaksi user bisa langsung mempengaruhi tampilan aplikasi.

8. Pengembangan Selanjutnya

Setelah ini, kamu bisa mengembangkan aplikasi menjadi lebih kompleks, seperti:

  • Menambahkan status selesai (checkbox)
  • Edit tugas
  • Filter tugas
  • Tampilan dark mode
  • Sinkronisasi dengan database

9. Kesimpulan

Membuat To-Do List sederhana adalah langkah yang sangat baik untuk memahami dasar pengembangan web. Project ini menggabungkan struktur, tampilan, dan logika dalam satu aplikasi yang mudah dipahami.

Dengan terus membuat project kecil seperti ini, kemampuan kamu akan berkembang secara bertahap dan lebih solid.

Comments

Post a Comment