Skip to content

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Expense Tracker App — Starter Project

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.


Struktur Berkas

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

Cara Menjalankan Proyek

Proyek ini adalah HTML statis, sehingga tidak memerlukan instalasi apapun.

Opsi 1 (Disarankan): Gunakan ekstensi Live Server di VS Code.

  1. Klik kanan pada index.html
  2. Pilih "Open with Live Server"
  3. 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).


Mulai dari Mana?

  1. Buka index.html, temukan komentar TODO di bagian atas dan ganti teks Siswa Front-End dengan nama lengkap serta username Dicoding Anda.
  2. Buka main.js, baca semua komentar TODO dari atas ke bawah. Setiap TODO menunjukkan satu bagian logika yang perlu Anda tulis.
  3. Mulai dari TODO berlabel [Basic], kemudian lanjut ke [Skilled] dan [Advanced] sesuai target nilai Anda.

Catatan Penting

  • Atribut data-testid pada elemen-elemen di index.html digunakan oleh sistem penilaian untuk memverifikasi struktur aplikasi Anda. Pastikan nilai atribut ini tidak berubah saat Anda membuat elemen kartu transaksi via JavaScript.
  • Atribut id seperti incomeList, expenseList, dan transactionForm juga digunakan oleh JavaScript. Pastikan nilainya tidak berubah.
  • Anda bebas mengubah warna, font, layout, dan styling di style.css untuk membuat tampilan yang unik dan personal.

Cara Mengumpulkan

  1. Pastikan semua fitur sudah berjalan dengan baik di browser.
  2. Kompres seluruh folder proyek menjadi satu berkas ZIP.
  3. Unggah berkas ZIP tersebut ke halaman submission di platform Dicoding.

About

ini merupakan starter project dari Dicoding, dan peserta diminta memanipulasi kode Javascript-nya

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages