Website To Do List Menggunakan HTML, CSS, dan JavaScript

Website To Do List Menggunakan HTML, CSS, dan JavaScript

Halo Bro! Di artikel kali ini, saya akan membahas sebuah website To Do List sederhana bernama Beresin yang saya buat menggunakan HTML, CSS, dan JavaScript.

Beresin dirancang untuk membantu Anda mencatat, mengatur, dan mengelola tugas harian agar lebih teratur dan efisien. Website ini juga responsive, sehingga bisa Anda akses dengan nyaman baik lewat laptop maupun HP. Anda bisa mencoba langsung melalui link berikut: https://beresin.vercel.app/.

Setelah membuka website Beresin, Anda akan langsung disambut dengan notifikasi izin. Silakan klik "Izinkan" agar website dapat mengirimkan notifikasi pengingat tugas kepada Anda.

Tampilan Website Beresin - To Do List

Fitur-Fitur Unggulan di Website Beresin

Berikut ini adalah beberapa fitur unggulan yang tersedia:

1. Install Sebagai Aplikasi

Website ini mendukung fitur PWA (Progressive Web App). Anda bisa langsung klik tombol "Install Aplikasi", dan website akan otomatis terpasang di layar utama perangkat Anda, seperti aplikasi biasa.

Fitur Install Sebagai Aplikasi

2. Mode Gelap & Mode Terang

Anda bisa dengan mudah mengubah tampilan ke mode gelap atau terang sesuai preferensi Anda, cukup dengan mengklik tombol (Mode Gelap) dan (Mode Terang).

Fitur Mode Gelap & Mode Terang

3. Tambah Tugas

Untuk menambahkan tugas:

  • Ketik nama tugas Anda
  • Pilih kategori (Pekerjaan, Pribadi, atau Sekolah)
  • Tentukan tenggat waktu/deadline
  • Klik tombol "Tambah"
Fitur Tambah Tugas

Tugas Anda akan langsung muncul dalam daftar tugas di bawah.

Daftar Tugas

Jika tugas mendekati deadline (5 menit sebelum), website akan mengirimkan notifikasi suara sebagai pengingat.

4. Statistik Tugas

Fitur ini akan menampilkan:

  • Jumlah total tugas
  • Tugas yang belum selesai
  • Tugas yang sudah selesai
Fitur Statistik Tugas

Dengan begitu, Anda bisa dengan mudah memantau progres penyelesaian tugas Anda.

5. Filter Tugas

Untuk memudahkan pencarian tugas, tersedia 3 jenis filter:

  • Berdasarkan Kategori: hanya menampilkan tugas dari kategori tertentu.
  • Berdasarkan Kata Kunci: cukup ketik nama tugas, dan hasilnya akan langsung ditampilkan.
  • Berdasarkan Status: menampilkan tugas berdasarkan status Semua, Belum dan Selesai.
Fitur Filter Tugas

6. Tandai Tugas Selesai

Anda bisa menandai tugas sudah selesai dengan mengklik ikon centang () pada tugas tersebut. Jika ingin mengaktifkan kembali tugas tersebut, tinggal klik lagi ikonnya.

Fitur Tandai Tugas Selesai

7. Hapus Tugas

Ada dua opsi penghapusan:

  • Klik ikon silang () pada tugas untuk menghapus tugas satu per satu
  • Klik tombol "Hapus Semua Tugas" untuk menghapus seluruh daftar tugas sekaligus
Fitur Hapus Tugas

Keamanan dan Penyimpanan Data

Tenang saja, meskipun Anda menutup atau keluar dari website Beresin, semua data tugas Anda akan tetap tersimpan di perangkat, selama Anda tidak membersihkan cache atau menghapus data browser secara manual.

Nah, itu dia penjelasan tentang website To Do List Beresin yang saya buat dengan HTML, CSS, dan JavaScript. Dengan fitur lengkap dan tampilan responsif, Anda bisa mencatat dan mengelola tugas dengan lebih mudah, baik lewat laptop maupun HP.

Semoga artikel ini bermanfaat dan bisa membantu Anda menjadi lebih produktif dalam menyelesaikan pekerjaan harian. Jika Anda masih kurang paham dengan penjelasan versi artikel ini, Anda juga bisa menonton versi videonya melalui link berikut: Website To Do List Menggunakan HTML CSS dan JavaScript.

Terima kasih!

Posting Komentar

Lebih baru Lebih lama