Selamat Mencuba

Senarai semak Ramadan untuk anak. Boleh buat menggunakan Canva code. Depa boleh tanda sendiri apa yang dah dibuat sepanjang Ramadan. Data akan disimpan secara auto dalam Canva Sheet.

Prompt A (disyorkan): Siap bina + data 30 hari (1 Ramadan–30 Ramadan)
Tampal terus dalam Canva Code:

Bina sebuah “Senarai Semak Interaktif Ramadan Al-Mubarak” untuk anak, mesra telefon (mobile-first), kemas dan ceria, sesuai untuk sekolah rendah Malaysia.

KEPERLUAN DATA (WAJIB)
- Jadual 30 hari: Hari Ramadan = 1 hingga 30
- Tarikh bermula 19.02.2026 hingga 20.03.2026 (30 hari berturut-turut)
- Lajur/aktiviti (checkbox untuk setiap hari):
1) Solat Subuh
2) Pergi Sekolah
3) Solat Zohor
4) Pergi KAFA
5) Solat Asar
6) Berbuka Puasa
7) Solat Maghrib
8) Mengaji Al-Quran
9) Solat Isyak
10) Solat Tarawikh
11) Niat Puasa
12) Zikir
13) Bersedekah

CIRI INTERAKTIF (WAJIB)
1) Paparan dalam bentuk kad harian (1 kad = 1 hari) dengan:
- Tajuk: “Hari Ramadan X”
- Tarikh: format DD.MM.YYYY
- Senarai checkbox aktiviti
2) Carian/penapis:
- Penapis “Belum lengkap”, “Lengkap”, “Semua”
- Carian “Hari Ramadan” atau “Tarikh”
3) Statistik automatik:
- Jumlah checklist siap (keseluruhan)
- Peratus siap keseluruhan
- Bilangan hari lengkap (semua aktiviti pada hari itu ditanda)
- “Streak” hari lengkap berturut-turut
4) Simpanan automatik:
- Simpan status checkbox (local storage / state persist) supaya bila refresh tidak hilang
5) Butang tindakan:
- “Tandakan Semua Hari Ini”
- “Kosongkan Hari Ini”
- “Reset Semua” (minta pengesahan)
6) Paparan ringkas hari semasa:
- Secara automatik highlight kad mengikut tarikh hari ini (jika tarikh berada dalam julat)
- Jika di luar julat, highlight hari pertama sahaja

REKA BENTUK UI/UX (WAJIB)
- Tema Ramadan: warna lembut (biru malam, hijau zamrud, emas lembut), ikon kecil (bulan sabit, bintang, masjid) tanpa keterlaluan.
- Tipografi jelas, tajuk besar, ruang putih mencukupi.
- Susun atur satu lajur untuk telefon; untuk desktop boleh jadi 2 lajur.
- Setiap aktiviti ada ikon kecil dan label ringkas.
- Progress bar untuk setiap hari (contoh: 7/13 selesai).
- Elakkan jadual lebar yang menyukarkan telefon.

DATASET (WAJIB)
Sediakan data awal 30 entri dengan medan:
- ramadanDay (1..30)
- date (ISO atau DD.MM.YYYY)
- tasks (array objek: { id, label, checked })

Pastikan tarikh tepat 30 hari berturut-turut:
Hari 1 = 19.02.2026
Hari 30 = 20.03.2026

HASIL AKHIR
Berikan kod Canva Code yang lengkap, kemas, boleh terus run, siap dengan data 30 hari dan semua fungsi di atas.

Prompt B: Auto-jana tarikh (lebih mudah ubah tahun akan datang)
Tampal terus dalam Canva Code:

Bina Senarai Semak Interaktif Ramadan Al-Mubarak (mobile-first) untuk anak sekolah rendah.

LOGIK JANA DATA
- Jana 30 hari secara automatik:
- Hari Ramadan: 1..30
- Tarikh mula: 2026-02-19
- Untuk setiap hari, date = startDate + (hari-1)
- Paparkan tarikh dalam format DD.MM.YYYY.

AKTIVITI (checkbox):
Solat Subuh, Pergi Sekolah, Solat Zohor, Pergi KAFA, Solat Asar, Berbuka Puasa, Solat Maghrib, Mengaji Al-Quran, Solat Isyak, Solat Tarawikh, Niat Puasa, Zikir, Bersedekah

FUNGSI WAJIB
- Kad harian + progress bar per hari (x/13)
- Statistik keseluruhan + streak hari lengkap
- Filter: Semua / Belum lengkap / Lengkap
- Carian Hari/Tarikh
- Simpan status checkbox (persist)
- Butang: Tandakan Semua Hari Ini, Kosongkan Hari Ini, Reset Semua (confirm)
- Highlight hari semasa jika berada dalam julat

HASIL
Tulis kod lengkap yang boleh terus digunakan dalam Canva Code, termasuk fungsi persist dan UI kemas bertema Ramadan.

Cadangan agentic paling sesuai (supaya jadi “seronok” untuk anak)
Tambah satu modul kecil dalam prompt (boleh copy masuk bawah “CIRI INTERAKTIF”):

1. Ganjaran bintang: setiap hari lengkap dapat 1 bintang; kumpul 5 bintang dapat “badge”.
2. Mesej motivasi rawak bila tekan “Simpan” atau bila hari lengkap (contoh: “Alhamdulillah, hebat hari ini!”).
3. Mod ibu bapa: butang “Kunci suntingan” (PIN ringkas) supaya anak tak reset sesuka hati.

Dikuasakan oleh Flow

Dikuasakan oleh Grok

Buat lagu simpel 30 saat dengan Gemini