HTML, CSS & jQuery: Membuat To Do List

Kekuatan jQuery untuk mengubah struktur halaman HTML memang tidak diragukan lagi. Oleh karena itu saya menggunakan jQuery untuk membuat to do list yang memiliki beberapa fungsi, seperti menambahkan dan menghapus item, mengedit item dan memberi tanda selesai pada suatu item. Tombol Add to list! akan menyimpan isi dari teks input disebelahnya ke sebuah variable dan mencetak list item menggunakan tag HTML <li> berisi variable tadi.

Menggunakan event .click() pada setiap list item yang secara default ada di jQuery, saya memunculkan popup yang meminta user untuk memilih antara menghapus item, mengedit item dan memberi tanda selesai dikerjakan. Selain itu, saya juga menambahkan kode .sortable() dari jQuery UI untuk membuat setiap list item dapat diatur urutannya tanpa perlu menghapusnya. Kalau anda ingin mencobanya, silahkan kesini.