Membuat Aplikasi Todo List Interaktif dengan Bootstrap dan jQuery
Halo teman-teman! Kali ini kita akan belajar membuat aplikasi sederhana yaitu Todo List dengan menggunakan Bootstrap dan jQuery. Apa sih fungsinya? Aplikasi ini bisa membantu teman-teman dalam mencatat tugas atau kegiatan yang perlu dilakukan, dan setiap tugas bisa kita tandai sebagai selesai atau bahkan dihapus jika sudah tidak diperlukan lagi. Keren, kan?
Jangan khawatir, tutorial ini dirancang dengan bahasa yang santai dan mudah dipahami. Jadi, kalau teman-teman baru belajar pemrograman, tenang aja, kita akan jelasin langkah demi langkah dengan sangat detail.
Apa yang Akan Kita Buat?
Kita akan membuat sebuah aplikasi Todo List yang memiliki fitur:
- Menambahkan tugas: Teman-teman bisa menambah item tugas yang perlu dilakukan.
- Menandai sebagai selesai: Setiap tugas bisa ditandai sebagai selesai, dan tampilannya akan dicoret.
- Menghapus tugas: Teman-teman juga bisa menghapus tugas yang sudah tidak diperlukan.
Selain itu, kita juga akan menggunakan Bootstrap untuk tampilannya agar lebih rapi dan cantik, serta jQuery untuk memanipulasi DOM, seperti mengubah status tugas dan menghapus item.
Langkah 1: Menyiapkan Struktur HTML Dasar
Pertama-tama, kita perlu menyiapkan file HTML dasar. Dalam hal ini, kita juga akan menghubungkan Bootstrap dan jQuery agar teman-teman bisa menggunakan fitur-fitur mereka dengan mudah.
HTML Dasar:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Todo List with Bootstrap and jQuery</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="text-center my-4">Todo List</h1>
<!-- Input to add new todo item -->
<div class="input-group mb-3">
<input type="text" id="new-todo" class="form-control" placeholder="Tambahkan item baru">
<button class="btn btn-primary" id="add-todo">Tambah</button>
</div>
<!-- Todo List -->
<ul class="list-group" id="todo-list">
<!-- List items akan ditambahkan di sini -->
</ul>
</div>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Setelah struktur dasar ini siap, ayo kita berikan sedikit gaya (CSS) dan mulailah dengan logika untuk menambah, menandai selesai, dan menghapus tugas.
Langkah 2: Menambahkan CSS dan Gradien untuk Background
Agar tampilan aplikasi lebih keren, kita akan menambahkan gradien di background dan memberikan sedikit gaya pada elemen-elemen seperti daftar tugas dan tombol.
CSS:
<style>
body {
background: linear-gradient(to right, #6a11cb, #2575fc);
min-height: 100vh;
color: white;
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 5px 0;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
}
.todo-item.completed {
text-decoration: line-through;
opacity: 0.6;
}
.todo-item button {
background-color: white;
color: #6a11cb;
}
</style>
Dengan gaya di atas, aplikasi Todo List teman-teman akan memiliki latar belakang gradien yang menarik dan daftar tugas yang tertata dengan baik.
Langkah 3: Menambahkan Fungsi Tambah, Selesai, dan Hapus Tugas dengan jQuery
Sekarang saatnya menambahkan jQuery untuk membuat daftar tugas menjadi interaktif! Kita akan membuat tiga fitur utama: menambah tugas, menandai sebagai selesai, dan menghapus tugas.
Script jQuery:
<script>
$(document).ready(function() {
// Function to add new todo item
$('#add-todo').click(function() {
var newTodo = $('#new-todo').val();
if (newTodo) {
$('#todo-list').append(`
<li class="todo-item list-group-item d-flex justify-content-between align-items-center">
<span>${newTodo}</span>
<div>
<button class="btn btn-sm btn-success mark-complete">Selesai</button>
<button class="btn btn-sm btn-danger remove-item">Hapus</button>
</div>
</li>
`);
$('#new-todo').val(''); // Clear input after adding
}
});
// Function to mark item as completed
$(document).on('click', '.mark-complete', function() {
$(this).closest('.todo-item').toggleClass('completed');
});
// Function to remove todo item
$(document).on('click', '.remove-item', function() {
$(this).closest('.todo-item').remove();
});
// Allow adding todo with Enter key
$('#new-todo').keypress(function(e) {
if (e.which == 13) { // 13 is the Enter key
$('#add-todo').click();
}
});
});
</script>
Kode di atas berfungsi untuk menambahkan item baru, menandai tugas sebagai selesai dengan efek coretan, serta menghapus tugas yang sudah tidak diperlukan.
Langkah 4: Coba dan Modifikasi!
Sekarang, teman-teman sudah punya aplikasi Todo List yang berfungsi penuh! Kalian bisa menambah tugas, menandainya sebagai selesai, dan menghapus tugas yang sudah tidak diperlukan. Aplikasi ini bisa teman-teman kembangkan lebih lanjut, seperti menambahkan fitur penyimpanan lokal (local storage) agar tugas tidak hilang ketika halaman direfresh, atau mungkin menambahkan fitur deadline untuk setiap tugas.
Kesimpulan
Pada tutorial ini, kita telah membuat aplikasi Todo List yang sederhana namun sangat berguna dengan menggunakan Bootstrap dan jQuery. Kita mempelajari cara membuat dan menata elemen HTML, menggunakan jQuery untuk menambah interaktivitas, dan juga memberikan sentuhan visual menggunakan CSS gradien.
Dengan aplikasi ini, teman-teman bisa mulai mengelola tugas harian atau bahkan bisa dimodifikasi menjadi aplikasi lain yang lebih kompleks. Semoga artikel ini bermanfaat dan jangan ragu untuk memodifikasi atau bereksperimen lebih lanjut.
Selamat ngoding, teman-teman! Jika ada pertanyaan atau ide menarik lainnya, jangan sungkan untuk berbagi di komentar! 😊
Posting Komentar untuk "Membuat Aplikasi Todo List Interaktif dengan Bootstrap dan jQuery"
Posting Komentar