Cara Mudah Membuat Aplikasi To-Do List Sederhana dengan JavaScript
Membuat aplikasi To-Do List adalah langkah awal yang sangat populer dan efektif bagi siapa saja yang baru belajar pemrograman web. Melalui proyek sederhana ini, kamu akan langsung mempraktikkan konsep dasar manipulasi DOM (Document Object Model) di JavaScript, mulai dari mengambil input, menambahkan elemen baru, hingga menghapus tugas.
Mari kita bedah langkah demi langkah untuk membuat aplikasi daftar tugas interaktif menggunakan kombinasi HTML, CSS, dan JavaScript vanilla!
1. Menyiapkan Struktur HTML
Langkah pertama adalah membuat pondasi halaman web kita. Salin kode HTML berikut dan simpan dengan nama index.html. Elemen utama yang kita butuhkan adalah sebuah input teks untuk mengetik tugas, sebuah tombol tambah, dan sebuah kontainer <ul> kosong sebagai tempat daftar tugas akan ditampilkan.
Loading...
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Aplikasi To-Do List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="todo-container">
<h2>Daftar Tugas Saya</h2>
<div class="input-section">
<input type="text" id="taskInput" placeholder="Tulis tugas baru di sini...">
<button id="addBtn">Tambah</button>
</div>
<ul id="taskList"></ul>
</div>
<script href="script.js"></script>
</body>
</html>2. Mempercantik Tampilan dengan CSS
Agar aplikasi terlihat modern dan nyaman digunakan, berikan sedikit sentuhan gaya. Simpan kode CSS berikut dengan nama style.css. Kita akan membuat layout terpusat (center) dengan latar belakang yang bersih.
Loading...
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #f4f7f6;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.todo-container {
background: #ffffff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
width: 350px;
}
h2 {
margin-top: 0;
color: #333;
text-align: center;
}
.input-section {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
outline: none;
}
button {
padding: 10px 15px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
}
button:hover {
background-color: #27ae60;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
background: #f9f9f9;
padding: 12px;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 4px;
margin-bottom: 8px;
}
.delete-btn {
background-color: #e74c3c;
padding: 5px 10px;
font-size: 12px;
}
.delete-btn:hover {
background-color: #c0392b;
}3. Menghidupkan Aplikasi dengan JavaScript
Sekarang saatnya masuk ke bagian inti! Buat file bernama script.js. Di sini kita akan mendengarkan aksi klik dari pengguna, mengambil teks dari input, membuat elemen daftar (<li>) secara dinamis, serta memberikan tombol hapus untuk setiap tugas.
Loading...
// 1. Ambil elemen HTML yang dibutuhkan
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
// 2. Fungsi untuk menambah tugas baru
function addTask() {
const taskText = taskInput.value.trim();
// Validasi agar pengguna tidak memasukkan teks kosong
if (taskText === "") {
alert("Silakan tulis tugas terlebih dahulu!");
return;
}
// Buat elemen <li> baru
const li = document.createElement('li');
li.textContent = taskText;
// Buat tombol hapus untuk tugas tersebut
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Hapus';
deleteBtn.className = 'delete-btn';
// Tambahkan fungsi hapus ketika tombol diklik
deleteBtn.onclick = function() {
taskList.removeChild(li);
};
// Gabungkan tombol hapus ke dalam elemen <li>
li.appendChild(deleteBtn);
// Masukkan elemen <li> ke dalam daftar utama <ul>
taskList.appendChild(li);
// Kosongkan kembali kolom input dan beri fokus ke input
taskInput.value = "";
taskInput.focus();
}
// 3. Jalankan fungsi saat tombol "Tambah" diklik
addBtn.addEventListener('click', addTask);
// 4. Jalankan fungsi saat pengguna menekan tombol "Enter" di keyboard
taskInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
addTask();
}
});Bagaimana Kode JavaScript Ini Bekerja?
- document.getElementById(): Berfungsi menangkap elemen dari HTML berdasarkan ID agar bisa kita manipulasi menggunakan JavaScript.
- trim(): Berfungsi menghapus ruang kosong (spasi berlebih) di awal dan akhir teks input agar pengguna tidak bisa memasukkan tugas yang hanya berisi spasi kosong.
- document.createElement(): Berfungsi menciptakan elemen HTML baru (seperti <li> dan <button>) langsung dari memori JavaScript secara dinamis.
- appendChild(): Berfungsi menyisipkan elemen baru yang telah kita buat ke dalam elemen induk yang ada di halaman web.
Tantangan Selanjutnya untuk Kamu!
Jika kamu sudah berhasil menjalankan kode di atas, coba tingkatkan kemampuan kodingmu dengan menambahkan fitur-fitur baru berikut secara mandiri:
- Fitur Coret Tugas: Buat tugas tercoret saat teksnya diklik menandakan tugas tersebut "Selesai".
- Penyimpanan Lokal (LocalStorage): Simpan data tugas di browser agar daftar tidak hilang saat halaman web di-refresh.