IMK
TUGAS 1
==========================================================================TUGAS 2
Analisis Kegunaan
Buka codepen.io, setelah registrasi akun ambil template kalkulator yang sudah tersedia, identifikasi minimal 5 aspek kegunaan (mudah dipahami, konsisten, error handling, feedback, estetika, dll).
Tulis apa yang masih kurang.
Contoh analisis :
Konsistensi : Adanya tombol 0 sampai 9 mirip kalkulator fisik.
feedback : Hasil tampil langsung di layar.
kekurangan : Tidak ada tombol +, -, untuk ubah tanda negatif
kekurangan : Warna semua tombol angka sama agak membingungkan.
Re-design Interface
Buat variasi design (misal nya warna operator berbeda, tampilan yang lebih baik).
Analisis Error dan iterasi
1. Coba masukkan input yang tidak biasa (misalnya 10/0).
2. Catat bagaimana sistem merespons.
3. Berikan saran perbaikan agar pengguna tidak bingung (contoh: munculkan pesan "Tidak valid") atau buat handling error / exception).
penyelesaian
Kelebihan (Ringkasan)
1. Mudah dipahami: Susunan tombol angka mengikuti standar kalkulator fisik.
2. Rapi & konsisten: Semua tombol seragam dan memiliki jarak yang seimbang.
3. Layar jelas: Angka input maupun hasil perhitungan mudah dibaca.
4. Sederhana: Hanya memuat fungsi dasar yang esensial.
5. Tombol "=" menonjol: Desain vertikal dengan ukuran berbeda memudahkan fokus pada hasil akhir.
Kekurangan (Ringkasan)
1. Tombol tidak berbeda: Angka dan operator terlihat sama tanpa pembeda visual.
2. Error kurang jelas: Tidak ada pesan saat input salah (misalnya pembagian nol).
3. Kurang aksesibel: Screen reader tidak otomatis membaca hasil.
4. Kurang efisien: Belum ada pintasan keyboard & tombol ±.
5. Kurang responsif di seluler: Area sentuh tombol terlalu kecil, rawan salah tekan.
Redisign Interface
Dark Mode & Light Mode Toggle
Penjelasan
Sekarang kalkulatormu bisa berganti tampilan tema terang (Light) dan tema gelap (Dark).
Ada tombol 🌙 / ☀️ di atas kalkulator → jika diklik, maka seluruh warna kalkulator akan berubah.
Light mode: latar putih, tombol terang, teks gelap → cocok dipakai siang hari.
Dark mode: latar hitam/abu gelap, tombol gelap, teks terang → lebih nyaman untuk malam hari atau ruangan redup.
Cara kerja
Tema dikendalikan lewat atribut data-theme pada elemen <body>.
CSS mendefinisikan dua set warna: satu untuk data-theme="light", satu lagi untuk data-theme="dark".
JavaScript kecil menukar nilai data-theme setiap kali tombol ditekan.
Manfaat
Membuat kalkulator lebih nyaman dipakai di berbagai kondisi pencahayaan.
Memberi kesan aplikasi lebih modern dan fleksibel.
Komentar
Posting Komentar