Stopwatch dengan Lap
Stopwatch presisi dengan tombol start, pause, reset, dan pencatat waktu putaran.
Naik Level dari Jam Digital
Jam digital hanya menampilkan waktu. Stopwatch harus MENGUKUR waktu dengan presisi, bisa dijeda, dan mencatat putaran (lap). Ini mengajarkan perbedaan penting: setInterval tidak akurat untuk mengukur waktu.
Kenapa setInterval Tidak Akurat?
setInterval(fn, 10) tidak menjamin tepat tiap 10ms; browser bisa terlambat karena sibuk. Kalau kamu menambah 10ms tiap tick, kesalahan menumpuk. Solusi profesional: catat waktuMulai = Date.now(), lalu tiap tick hitung Date.now() - waktuMulai. Selisih waktu nyata tidak pernah berbohong.
Untuk jeda: simpan terkumpul (total ms sebelum jeda). Saat lanjut, waktuMulai = Date.now() lagi dan total = terkumpul + (sekarang - waktuMulai).
Langkah Membangun
HTML: Display MM:SS.cs (centisecond), tombol Start/Pause (satu tombol toggle), Reset, Lap, dan daftar lap.
CSS: Display besar monospace, tombol-tombol bulat berwarna (hijau start, kuning pause, merah reset, biru lap).
JS: State: berjalan, waktuMulai, terkumpul, intervalId. Tick tiap 31ms (cukup mulus untuk centisecond tanpa boros CPU). Fungsi format mengubah ms menjadi "01:23.45". Lap: catat waktu saat ini ke array, render daftar dengan selisih antar lap.
Kesalahan Umum
- Menambah counter tiap tick alih-alih menghitung selisih Date.now() (drift menumpuk).
- Interval tidak di-clear saat pause sehingga banyak interval berjalan bersamaan (selalu clearInterval dulu).
- Tombol Start bisa diklik berkali-kali membuat banyak interval (nonaktifkan atau cek flag berjalan).
export default function App(): JSX.Element { return <h1>Hello world</h1> }
Tantangan
Tantangan: Waktu Terbaik
Tandai lap tercepat dengan warna hijau dan terlambat dengan warna merah. Simpan rekor lap tercepat di localStorage sehingga bertahan setelah refresh.