htmlcssjavascriptaplikasiMenengah12 mnt baca

Kalkulator Sederhana

Kalkulator dengan tombol angka dan operasi yang berfungsi penuh.

Kenapa Kalkulator?

Kalkulator mengajarkan state management mini: aplikasi harus "ingat" angka pertama, operasi yang dipilih, dan angka kedua, lalu menghitung saat tombol = ditekan. Ini pola state yang sama dipakai di form multi-langkah dan game.

Langkah Membangun

HTML: Layar display (<div class="layar">) dan grid tombol: angka 0-9, operasi + − × ÷, tombol C (hapus), ⌫ (hapus satu digit), dan =.

CSS: Grid 4 kolom untuk tombol (grid-template-columns: repeat(4, 1fr)). Tombol operasi warna berbeda, tombol = lebih mencolok. Layar: background gelap, teks kanan, font besar.

JS: Tiga variabel state:

js
let angkaSekarang = "0";
let angkaSebelum = null;
let operasi = null;

Alur: klik angka -> tempel ke angkaSekarang. Klik operasi -> simpan angkaSekarang ke angkaSebelum, simpan operasi, reset angkaSekarang. Klik = -> hitung berdasarkan operasi, tampilkan hasil, reset state. Tombol C mengembalikan semua ke awal.

Fungsi hitung memakai switch untuk 4 operasi. Tangani pembagian dengan nol ("Tidak bisa dibagi nol!") dan batasi desimal panjang dengan toFixed + parseFloat.

Kesalahan Umum

  • Memakai eval() untuk menghitung (berbahaya dan tidak mengajarkan logika).
  • State tidak di-reset setelah = sehingga operasi berikutnya memakai hasil lama secara salah (atau justru benar: kalkulator nyata melanjutkan dari hasil, pilih perilaku dan konsisten).
  • Angka "0" di depan menumpuk ("0005") karena tidak menangani angka awal khusus.
Live Playground
export default function App(): JSX.Element {
  return <h1>Hello world</h1>
}
Edit kode di kiri, preview kanan ter-update otomatis.

Tantangan

Tantangan: Riwayat Perhitungan

Tambahkan panel riwayat di bawah kalkulator yang mencatat setiap perhitungan (misal "5 + 3 = 8"). Klik item riwayat untuk memuat hasilnya kembali ke layar.