Assignment: Vue.js – Simple To-Do List

Identitas

Nama : Muhammad Aryan Fathurrahman

NIM : F1D022069

Deskripsi Tugas

Pada tugas ini saya membuat aplikasi To-Do List sederhana menggunakan Vue.js 3 (Composition API). Aplikasi ini memiliki fitur utama:

1. CRUD Dasar: Menambah dan Menghapus tugas dari daftar.

2. Validasi Input: Mencegah pengguna menambahkan tugas kosong dengan pesan peringatan.

3. Feedback Interaktif: Menampilkan notifikasi sukses (hijau) saat tugas berhasil ditambahkan atau dihapus, dan notifikasi error (merah) jika input tidak valid.

4. Kondisional Rendering: Menampilkan pesan khusus jika daftar tugas kosong.

Hasil Aplikasi & Fitur

Berikut adalah dokumentasi hasil uji coba aplikasi:

1. Tampilan Awal Aplikasi

Tampilan antarmuka utama aplikasi To-Do List yang bersih dan responsif.

2. Validasi Input (Error Handling)

Jika pengguna mencoba menekan tombol "Tambah" tanpa mengisi teks, sistem akan menolak dan memunculkan pesan error "Tugas tidak boleh kosong!".

3. Berhasil Menambahkan Tugas

Saat tugas valid dimasukkan, tugas akan masuk ke daftar dan muncul notifikasi sukses berwarna hijau "Tugas berhasil ditambahkan!".

4. Berhasil Menghapus Tugas

Saat tombol "Hapus" ditekan, tugas akan hilang dari daftar dan muncul konfirmasi "Tugas berhasil dihapus!".

Penjelasan Singkat Kode

1. State Management: Menggunakan ref untuk reaktivitas data tasks (array tugas), newTask (input), errorMessage, dan successMessage.

2. Fungsi addTask: Melakukan validasi .trim() untuk memastikan input tidak kosong. Jika valid, data di-push ke array dan pesan sukses ditampilkan menggunakan timer.

3. Fungsi deleteTask: Menggunakan .splice(index, 1) untuk menghapus elemen spesifik dari array berdasarkan index-nya.

4. Styling: CSS Scoped digunakan untuk memastikan tampilan rapi, termasuk pewarnaan dinamis untuk pesan notifikasi (Merah untuk error, Hijau untuk sukses).