Koding dan Kecerdasan Artifisial (KKA) XII TJKT 2627
Mapel Kejuruan
Aplikasi Kalkulator Gizi Program Makan Bergizi Gratis (MBG) telah dibuat dengan tampilan profesional berstandar institusi (menggunakan desain modern ala dashboard pemerintah/kesehatan dengan Tailwind CSS, dukungan diagram Chart.js, serta fitur kalkulasi gizi otomatis real-time).
Kustomisasi Antarmuka (UI)
1. Mengganti Warna Tema Utama (Header & Tombol):
Cari kata bg-emerald-700 di dalam kode program, lalu ubah kata emerald menjadi warna pilihanmu yang lain, misalnya blue, indigo, atau rose.
2. Mengubah Judul Website di Bagian Atas (Header):
Cari teks Kalkulator Gizi Program MBG di dalam kode HTML, lalu ganti dengan nama kelompok atau nama panggilanmu sendiri.
3. Mengganti Logo Teks "MBG":
Cari kotak logo bertuliskan ðŸ¥ðŸ¥— MBG, lalu ganti huruf "MBG" dengan inisial namamu atau singkatan kelompokmu (contoh: XII-T1).
4. Mengubah Warna Kotak Total Kalori:
Cari kode warna kartu hasil total kalori seperti bg-emerald-900, lalu ubah kata emerald menjadi slate atau zinc agar warnanya berubah menjadi abu-abu gelap yang elegan.
5. Membuat Sudut Kotak Menjadi Lebih Melengkung atau Kotak Siku:
Cari tulisan rounded-2xl pada kotak putih di kode program, lalu ubah angka 2xl menjadi 3xl (agar sudutnya sangat membulat) atau ubah menjadi rounded-none (agar sudutnya siku-siku).
6. Mengganti Warna Latar Belakang Halaman (Background):
Cari tulisan bg-slate-50 pada bagian <body>, lalu ganti dengan warna lain yang lembut, misalnya bg-blue-50 atau bg-amber-50.
7. Mengubah Tulisan pada Tombol Cetak / Simpan PDF:
Cari bagian tombol Cetak / Simpan PDF, lalu tambahkan atau ubah kalimatnya sesuai selera (contoh: Cetak Laporan Saya).
8. Menuliskan Nama Anda di Bagian Bawah (Footer):
Cari teks bagian paling bawah (footer) yang bertuliskan "Aplikasi Perhitungan Gizi...", lalu tambahkan namamu di akhir kalimat sebagai pembuat aplikasi.
9. Mengganti Warna Garis Pinggir Kotak Input saat Diklik:
Cari kode focus:ring-emerald-500 pada kotak input angka, lalu ubah warna emerald menjadi purple atau orange.
10. Mengubah Teks Status Gizi Bawah:
Cari kalimat peringatan gizi seperti Sempurna! Kalori memenuhi standar..., lalu ubah kalimatnya dengan gaya bahasa santai buatanmu sendiri.
Link Pengumpulan Jawaban : https://forms.gle/gP7TcYtaEMKZV2Gf9
Kustomisasi Antarmuka (UI)
1. Ubahlah nama "Koperasi Desa Sejahtera Mandiri" di bagian atas halaman web menjadi nama toko buatanmu sendiri!
2. Ubahlah warna latar belakang bagian atas (header) aplikasi dari warna biru (bg-blue-900) menjadi warna ungu (bg-purple-900) atau hijau (bg-emerald-900)!
3. Ubahlah ikon emoji pada produk "Beras Premium 5kg" dan "Minyak Goreng 2L" di katalog dengan emoji lain pilihanmu!
4. Ubahlah warna tombol utama bayar (💳 BAYAR TRANSAKSI) dari warna biru menjadi warna hijau (bg-emerald-600)!
5. Ubahlah warna latar belakang kartu produk di katalog saat kursor diarahkan ke atasnya (hover) menjadi warna merah muda atau kuning!
6. Ubahlah kalimat teks pemberitahuan saat keranjang belanja masih kosong menjadi kalimat buatanmu sendiri yang lebih menarik!
7. Ubahlah ukuran huruf (font size) untuk tulisan "TOTAL AKHIR" di keranjang belanja agar terlihat lebih besar dari sebelumnya!
8. Ubahlah simbol tombol tambah (+) dan kurang (-) pada daftar item di keranjang belanja menjadi simbol panah (▲ dan ▼)!
9. Tambahkan satu tombol kategori baru di bawah kotak pencarian, misalnya kategori khusus untuk barang "Peralatan Mandi"!
10. Ubahlah teks ucapan terima kasih yang tercetak di bagian paling bawah struk belanja menjadi kalimat buatanmu sendiri!
Link Pengumpulan Jawaban : https://forms.gle/7BCYV4WAFjLFsJdA7
2. Ubahlah warna latar belakang bagian atas (header) aplikasi dari warna biru Traveloka (bg-[#0194F3]) menjadi warna hijau (bg-emerald-800) atau ungu (bg-purple-800)!
3. Ubahlah ikon emoji pada armada "Kapuas Raya Express" (bus) dan "Borneo Trans International" (bus/travel) di daftar jadwal dengan emoji lain pilihanmu!
4. Ubahlah warna tombol utama "LANJUTKAN PEMBAYARAN" dari warna biru menjadi warna oranye terang (bg-amber-600) atau ungu (bg-purple-600)!
5. Ubahlah warna latar belakang kartu jadwal di sebelah kiri saat kursor diarahkan ke atasnya (hover) dari border biru menjadi warna latar kuning muda (hover:bg-amber-50) atau merah muda!
6. Ubahlah kalimat teks pemberitahuan saat belum ada tiket yang dipilih (Belum ada tiket dipilih. Silakan pilih jadwal...) menjadi kalimat buatanmu sendiri yang lebih menarik!
7. Ubahlah ukuran huruf (font size) untuk tulisan "Total Bayar:" di bagian bawah rincian pesanan agar terlihat lebih besar dari sebelumnya (misalnya menggunakan text-base atau text-xl)!
8. Ubahlah teks tombol aksi "Pilih" pada setiap kartu jadwal di sebelah kiri menjadi kata lain seperti "Ambil Kursi" atau "Booking"!
9. Tambahkan satu pilihan rute baru di kotak filter "Ke" bagian atas (misalnya rute tambahan ke "Ketapang" atau "Pontianak Bandara")!
10. Ubahlah teks catatan kaki di bagian paling bawah struk e-ticket (Tunjukkan e-ticket ini kepada petugas...) menjadi kalimat instruksi buatanmu sendiri!
Link Pengumpulan Soal : https://forms.gle/p8hEfqYEFos9P2di8
Kegiatan 8 - 1 September 2026
Fokus Utama: HTML/CSS dasar, sistem koordinat layar, dan pembentukan objek 2D awal.
Materi Pembahasan:
•Sistem koordinat layar & variabel lokasi (X, Y).
•Perintah gambar 2D awal: fillRect, arc, lineTo, fillText.
0 komentar: