Penjejak Perbelanjaan Bulanan

1.8 jamPertengahanJavaScriptArrays & objectsreduceFormslocalStorage

Hasil

Aplikasi bajet dengan ringkasan langsung (belanja, baki yang bertukar merah bila terlebih belanja), jumlah kategori dengan bar, senarai perbelanjaan yang boleh dipadam, dan data yang kekal selepas refresh.

Objektif pembelajaran

Modelkan data sebagai array objek dengan jenis yang betul (jumlah sebagai nombor, bukan string)
Hasilkan jumlah dengan reduce dan kumpulkan dalam objek mengikut kategori
Validasi input borang dan paparkan mesej ralat terus pada borang
Simpan dan pulihkan data dengan localStorage dan JSON

Prasyarat

Selesa dengan array, objek, function dan event DOM — trek JavaScript ada menerangkannya
Disyorkan: siapkan projek Aplikasi To-do Yang Ingat dahulu — projek ini guna corak state → render → save yang sama

Tingkah laku yang dijangka

Menambah “Nasi lemak · RM 8.50 · Food” akan memasukkannya ke dalam senarai dan menaikkan Spent serta jumlah Food sebanyak RM 8.50.
Penerangan kosong atau jumlah 0 / negatif memaparkan ralat dan tidak menambah apa-apa.
Memadam perbelanjaan akan membuangnya dan setiap jumlah dikemas kini serta-merta.
Baki = Bajet − Belanja, dan ia bertukar merah apabila jatuh bawah sifar.
Refresh halaman tidak menghilangkan sebarang perbelanjaan.

Aplikasi bajet nampak rumit, tetapi di sebaliknya ia hanyalah satu array perbelanjaan dan beberapa nombor yang dikira daripada array itu. Anda tidak simpan jumlah — anda kira daripada data setiap kali. Itu memastikan semuanya sentiasa selari tanpa usaha tambahan.

JavaScript

expenses = [
  { id: "k1", desc: "Nasi lemak", amount: 8.5,  category: "Food" },
  { id: "k2", desc: "LRT",        amount: 3.2,  category: "Transport" },
  { id: "k3", desc: "Teh tarik",  amount: 2.8,  category: "Food" },
]

total       → 14.5
byCategory  → { Food: 11.3, Transport: 3.2, Bills: 0, … }

Data yang disimpan (atas) dan data terbitan (bawah). Hanya bahagian atas yang disimpan.

Method array

// baris yang dijalankan
const nums = [1, 2, 3, 4, 5];

nums

1[0]
2[1]
3[2]
4[3]
5[4]

const nums = [1, 2, 3, 4, 5];. Array ialah senarai tersusun. Setiap nilai ada indeks, bermula dari 0.

indeks

push dan pop mengubah (mutate) array asal. map dan filter tidak pernah mengubahnya — ia memulangkan array baharu. Nilai dikekalkan kecil supaya muat di skrin.

reduce melipat seluruh array menjadi satu nilai — sesuai untuk jumlah.

Komputer menyimpan perpuluhan dalam binari, jadi 0.1 + 0.2 ialah 0.30000000000000004. Untuk penjejak peribadi, membundarkan semasa paparan dengan toFixed(2) sudah memadai. Sistem kewangan sebenar biasanya menyimpan sen sebagai integer.

Peringkat

Kendalikan event submit borang:

1. preventDefault(), kemudian baca penerangan (trim()), jumlah (Number(...)) dan kategori. 2. Jika penerangan kosong atau jumlah bukan nombor melebihi 0, letak mesej dalam #form-error dan berhenti. 3. Jika tidak, kosongkan #form-error, push { id, desc, amount, category } ke dalam expenses, panggil render() dan form.reset().

Dalam render(), lukis satu <li> bagi setiap perbelanjaan dalam #expense-list yang memaparkan penerangan, kategori dan jumlah melalui formatRM().

Semakan

Tambah memaparkan perbelanjaan dalam senarai
Jumlah disimpan sebagai nombor
Input tidak sah memaparkan ralat dan tidak menambah apa-apa
Borang di-reset dan ralat hilang selepas tambah yang sah

Senarai semak penyiapan

Tandakan item ini apabila ia benar untuk projek anda. Projek selesai apabila setiap peringkat lulus dan setiap item ditanda.

Jumlah sentiasa dikira daripada array expenses — saya tidak pernah simpan jumlah berjalanSaya tambah beberapa perbelanjaan, padam satu, refresh, dan setiap nombor masih sepadanInput yang salah (kosong, 0, negatif, huruf) tidak pernah masuk ke dalam senaraiSusun atur berfungsi pada lebar telefon (ringkasan dan borang bertindan dalam satu lajur)Saya faham data ini hanya ada dalam pelayar ini — memadam data laman atau menukar peranti akan menghilangkannya

Pratonton

Output konsol daripada kod anda akan dipaparkan di sini.