Proyek: Kalkulator

Sepanjang course ini kita telah mengenal variabel, fungsi, module, class, DOM, event, hingga pengujian otomatis — masing-masing dalam contoh kecil yang berdiri sendiri. Proyek ini merangkai semua bekal tersebut menjadi satu produk yang benar-benar bisa dipakai: kalkulator web dengan layar, tombol angka, empat operasi aritmetika, dan pesan galat yang sopan kepada penggunanya.

Kalkulator adalah latihan proyek yang baik karena tiga alasan. Pertama, perilakunya familier: semua orang tahu apa yang seharusnya terjadi ketika menekan 2, +, 3, lalu =, sehingga kita bisa fokus pada kode tanpa perlu menjelaskan ulang domain masalahnya. Kedua, ukurannya kecil tetapi keputusan desainnya nyata — kapan operasi dievaluasi, bagaimana menampilkan hasil 1 / 3, dan apa yang seharusnya terjadi ketika tombol + ditekan dua kali berturut-turut. Ketiga, pembangunannya menyentuh hampir semua materi course: logika murni hidup di module tersendiri, antarmuka memakai DOM dan event, dan setiap perilaku dikunci oleh uji otomatis.

Pendekatan utama proyek ini adalah pemisahan logika dari tampilan. Seluruh perhitungan hidup di src/logika.mjs — module murni tanpa satu pun document — sehingga bisa diuji langsung dengan Node tanpa browser. Berkas HTML hanya bertugas menampilkan state dan meneruskan ketukan tombol ke logika.

Proyek dikerjakan dalam tiga bagian berurutan:

• Bagian 1: Struktur dan Logika — merancang state kalkulator (angkaBaru, simbolOperasi, angkaPertama), menulis module logika pertama, menyusun kerangka antarmuka HTML dan CSS, serta menjalankan uji pertama dengan node --test. Kita belajar memisahkan logika dari tampilan dan mengelola state tanpa mutasi.
• Bagian 2: Operasi Aritmetika — menambahkan tambah, kurang, kali, bagi dalam satu peta Map, mengevaluasi rantai operasi dari kiri ke kanan, dan membulatkan hasil dengan hati-hati. Kita belajar memetakan data ke fungsi, menjaga satu operasi menunggu pada satu waktu, dan menghadapi sifat angka biner JavaScript.
• Bagian 3: Validasi dan Error Handling — menolak pembagian dengan nol, input yang bukan angka, dan dua operator berurutan; melempar galat khusus GalatKalkulator; menampilkan pesan galat di layar. Kita belajar membangun lapisan pertahanan di logika dan menangkap galat di batas antarmuka.

Struktur Berkas Proyek #

Seluruh kode proyek tinggal di tiga folder pada content/javascript/proyek/kalkulator/:

kalkulator/
├── src/
│   ├── logika.mjs        # logika inti: state, operasi, dan galat
│   └── index.html.txt    # contoh antarmuka (salin ulang sebagai index.html)
├── styles/
│   └── styles.css        # tampilan kalkulator
└── tests/
    └── logika.test.mjs   # uji otomatis untuk logika.mjs

Peran tiap berkas:

Setiap bagian menampilkan kondisi berkas pada akhir bagian tersebut: blok kode yang membahas sebuah berkas menyediakan tautan unduhan salinannya di header blok. Versi lengkap dan terakhir dari seluruh berkas selalu ada di folder src/, styles/, dan tests/ di atas — jika Anda mengikuti proyek dari Bagian 1, berkas-berkas itu tumbuh bertahap mengikuti pembahasan.

Menjalankan Pengujian #

Uji otomatis dijalankan dari folder proyek dengan test runner bawaan Node.js:

cd kalkulator
node --test

Node mencari berkas uji dengan pola nama seperti *.test.mjs, menemukan tests/logika.test.mjs, lalu menjalankan seluruh ujinya. Ringkasan di ujung keluarannya pada akhir proyek berbunyi:

ℹ tests 18
ℹ suites 5
ℹ pass 18
ℹ fail 0
ℹ cancelled 0
ℹ skipped 0
ℹ todo 0
ℹ duration_ms 78.74736

Angka pass 18 berarti seluruh uji lulus; duration_ms akan berbeda-beda di mesin Anda karena mengukur waktu eksekusi. Bila ingin menyasar satu berkas uji secara eksplisit, gunakan node --test tests/logika.test.mjs.

Mulailah dari Bagian 1 dan ikuti urutannya — setiap bagian dibangun di atas bagian sebelumnya, dan pada bagian akhir kalkulator siap dipakai lengkap dengan penanganan galatnya.

/* styles.css — tampilan kalkulator sederhana */

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f3f4f6;
  font-family: system-ui, sans-serif;
}

.kalkulator {
  width: 240px;
  padding: 16px;
  background-color: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.layar {
  display: block;
  min-height: 48px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background-color: #111827;
  color: #f9fafb;
  font-size: 2rem;
  text-align: right;
  white-space: nowrap;
  overflow-x: auto;
  border-radius: 8px;
}

.tombol-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.tombol {
  padding: 12px 0;
  font-size: 1.25rem;
  border: none;
  border-radius: 8px;
  background-color: #e5e7eb;
  cursor: pointer;
}

.tombol:hover {
  background-color: #d1d5db;
}

.tombol--operasi {
  background-color: #fde68a;
}

.tombol--sama-dengan {
  background-color: #86efac;
}

.tombol--hapus {
  background-color: #fecaca;
}

.tombol--nol {
  grid-column: span 2;
}