Selamat datang di starter project submission kelas Front-End Web Pemula! 🎉
Proyek ini sudah dilengkapi dengan tampilan HTML dan CSS yang siap pakai. Tugas Anda adalah melengkapi logika JavaScript-nya di berkas main.js agar aplikasi berfungsi sepenuhnya.
expense-tracker-starter-project/
├── index.html ← Struktur halaman (jangan diubah, kecuali bagian greeting)
├── style.css ← Tampilan visual (bebas dimodifikasi untuk portofolio)
├── main.js ← Tempat Anda menulis seluruh logika JavaScript
└── README.md ← Panduan ini
Proyek ini adalah HTML statis, sehingga tidak memerlukan instalasi apapun.
Opsi 1 (Disarankan): Gunakan ekstensi Live Server di VS Code.
- Klik kanan pada
index.html - Pilih "Open with Live Server"
- Browser akan terbuka otomatis di
http://127.0.0.1:5500
Opsi 2: Buka langsung berkas index.html di browser (klik dua kali dari File Explorer).
- Buka
index.html, temukan komentarTODOdi bagian atas dan ganti teksSiswa Front-Enddengan nama lengkap serta username Dicoding Anda. - Buka
main.js, baca semua komentarTODOdari atas ke bawah. Setiap TODO menunjukkan satu bagian logika yang perlu Anda tulis. - Mulai dari TODO berlabel
[Basic], kemudian lanjut ke[Skilled]dan[Advanced]sesuai target nilai Anda.
- Atribut
data-testidpada elemen-elemen diindex.htmldigunakan oleh sistem penilaian untuk memverifikasi struktur aplikasi Anda. Pastikan nilai atribut ini tidak berubah saat Anda membuat elemen kartu transaksi via JavaScript. - Atribut
idsepertiincomeList,expenseList, dantransactionFormjuga digunakan oleh JavaScript. Pastikan nilainya tidak berubah. - Anda bebas mengubah warna, font, layout, dan styling di
style.cssuntuk membuat tampilan yang unik dan personal.
- Pastikan semua fitur sudah berjalan dengan baik di browser.
- Kompres seluruh folder proyek menjadi satu berkas ZIP.
- Unggah berkas ZIP tersebut ke halaman submission di platform Dicoding.