▍Projek
Projek
Benda sebenar yang anda bina daripada kod permulaan hingga menjadi aplikasi yang berfungsi — satu peringkat pada satu masa.
Halaman Portfolio Peribadi
Bina halaman portfolio peribadi yang kemas dan responsif — hero, bahagian tentang diri, grid projek dan pautan hubungan — dengan HTML dan CSS sahaja.
Hasil · Portfolio satu halaman yang betul-betul boleh anda terbitkan: hero yang menonjol, cerita ringkas tentang diri anda, grid kad projek yang bertukar daripada satu ke tiga lajur, dan pautan hubungan yang berfungsi.
Kalkulator Tip & Pembahagi Bil
Bina kalkulator untuk membahagi bil restoran: bil + tip % + bilangan orang → tip dan jumlah seorang dalam RM, dengan validasi dan pembundaran yang betul.
Hasil · Borang yang berfungsi, memaparkan “Tip seorang” dan “Jumlah seorang” dalam RM dengan dua tempat perpuluhan, menolak input yang salah dengan mesej yang mesra, dan boleh di-reset dengan kemas.
Aplikasi To-do Yang Ingat
Bina aplikasi to-do klasik dengan cara yang betul: state dalam array, function render, event untuk tambah/siap/padam/tapis, dan localStorage supaya ia kekal selepas refresh.
Hasil · Senarai to-do di mana anda boleh tambah tugasan, tandakan siap, padam, tapis All / Active / Completed, lihat berapa yang tinggal — dan semuanya masih ada selepas halaman dimuat semula.
Penjejak Perbelanjaan Bulanan
Jejak ke mana ringgit anda pergi: tambah perbelanjaan mengikut kategori, lihat jumlah setiap kategori, baki berbanding bajet, padam kesilapan — dan simpan semuanya dalam storan pelayar.
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.
Papan Pemuka Cuaca (dengan Data Contoh)
Guna fetch, async/await dan pengendalian ralat untuk membina papan pemuka cuaca bagi bandar-bandar di Malaysia — dikuasakan oleh fail data contoh yang dilabel dengan jelas.
Hasil · Papan pemuka di mana anda cari “Kuching” dan dapat keadaan semasa serta ramalan 3 hari — dengan mesej loading, “bandar tidak dijumpai” yang mesra, dan pemulihan yang baik daripada ralat rangkaian.
Landing Page Beranimasi
Hidupkan landing page dengan transition CSS, keadaan hover dan fokus, animasi masuk @keyframes dan pendedahan berperingkat — sambil menghormati pengguna yang mahukan kurang gerakan.
Hasil · Landing page yang kemas, dengan butang dan kad yang bertindak balas dengan lancar terhadap hover dan fokus papan kekunci, hero dan ciri-ciri yang meluncur masuk semasa dimuatkan, yang tenang sepenuhnya untuk `prefers-reduced-motion`, dan menyusun semula pada sebarang skrin.