Perjalanan Reaksi Saya: Hari ke-20

Projek Penjejak Belanjawan

Hari ini, saya mengusahakan projek bertajuk Penjejak Belanjawan. Matlamat projek ini adalah untuk mengaplikasikan konsep yang dipelajari sebelum ini dengan cara yang praktikal dan berfungsi. Berikut ialah gambaran keseluruhan konsep yang saya laksanakan dan cara ia meningkatkan kemahiran saya:

Konsep yang Dipelajari dan Diaplikasi

1.Struktur HTML dan Semantik

• Saya menggunakan reka letak HTML yang semantik dan tersusun dengan baik untuk penjejak belanjawan, memastikan kejelasan dan penyelenggaraan yang mudah. Sebagai contoh, elemen jadual telah digunakan untuk menyusun entri belanjawan dan medan input telah ditambahkan untuk pengumpulan data.

2.CSS untuk Penggayaan
Belajar untuk menggayakan projek untuk kedua-dua fungsi dan estetika:

• Kelas yang digunakan seperti .budget-tracker, .input dan .delete-entry untuk mereka bentuk dan menstruktur UI.
• Fokus pada prinsip reka bentuk responsif, memastikan penjejak berfungsi merentas saiz skrin yang berbeza.
• Menambahkan kesan tuding untuk butang seperti .delete-entry untuk meningkatkan interaktiviti.

3.Modul JavaScript

• Saya memodulasi JavaScript saya dengan mencipta kelas BudgetTracker.js yang berasingan. Ini meningkatkan kebolehgunaan semula kod dan pengasingan kebimbangan.

4.Storan Tempatan

• Saya melaksanakan Storan Tempatan untuk mengekalkan entri belanjawan merentas sesi. Pengguna boleh memuatkan semula apl tanpa kehilangan data mereka:

localStorage.setItem("budget-tracker-entries-dev", JSON.stringify(data));

5. Manipulasi DOM Dinamik

• Baris yang dibuat dan dikemas kini secara dinamik dalam jadual belanjawan menggunakan JavaScript:

this.root.querySelector(".entries").insertAdjacentHTML("beforeend", BudgetTracker.entryHtml());

6.Pengendalian Acara
Saya menggunakan pendengar acara untuk menjadikan apl itu interaktif. Contohnya:

• Mengklik butang "Entri Baharu" menambah baris baharu.
• Mengklik butang "Padam" mengalih keluar satu baris.

row.querySelector(".delete-entry").addEventListener("click", e => {
    this.onDeleteEntryBtcClick(e);
});

7. Pengesahan dan Pemformatan Data

• Logik yang digunakan untuk mengira jumlah pendapatan atau perbelanjaan dan memaparkannya dalam format yang sesuai menggunakan Intl.NumberFormat:

const totalFormatted = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD"
}).format(total);

8. Kawalan Versi dan Nyahpepijat

• Menggunakan alat pembangun penyemak imbas untuk menyahpepijat ralat dan memeriksa kelakuan komponen dinamik.

Hasil Projek

Projek ini memberi saya pemahaman yang lebih mendalam tentang:

• Mereka bentuk antara muka mesra pengguna dengan HTML dan CSS.
• Menyepadukan logik JavaScript untuk mengendalikan data secara dinamik.
• Kepentingan modulariti kod untuk projek penskalaan.
• Menggunakan Storan Tempatan untuk mengekalkan keadaan.

Projek ini juga mempertajam kemahiran menyelesaikan masalah saya, kerana saya menghadapi cabaran seperti mengendalikan medan input kosong dan memastikan pengiraan yang tepat, dsb.

Penjejak terdiri daripada medan input untuk tarikh, perihalan, jenis dan amaun, dengan bahagian ringkasan dinamik memaparkan jumlah baki.

Projek ini mengukuhkan keyakinan saya dalam membina aplikasi dunia sebenar! ?

Bersedia untuk menyelami React Native

Atas ialah kandungan terperinci Perjalanan Reaksi Saya: Hari ke-20. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!