Panduan Membuat Timer dengan HTML, CSS, dan JavaScript yang Responsif dan Mudah Dikustomisasi
Ngulik Kode - Pada artikel ini, kita akan belajar membuat timer sederhana dengan fitur milidetik (milliseconds) menggunakan bahasa pemrograman JavaScript. Timer yang akan kita buat ini dapat digunakan untuk berbagai keperluan seperti mengetahui berapa lama waktu yang diperlukan untuk menyelesaikan suatu tugas atau kegiatan, serta dapat digunakan sebagai stopwatch.
Pertama-tama, kita akan memulai dengan menyiapkan struktur HTML dan tampilan CSS untuk timer. Kita akan membuat sebuah container yang berisi elemen timer dan tiga tombol untuk mengontrol timer.
Kemudian, kita akan menggunakan JavaScript untuk mengimplementasikan logika timer yang akan menampilkan waktu pada elemen timer di dalam HTML. Selain itu, kita juga akan membuat fungsi untuk mengontrol timer seperti tombol start, stop, dan reset.
Mari kita mulai dengan menyiapkan struktur HTML dan tampilan CSS terlebih dahulu.
HTML:
CSS:
Dalam struktur HTML di atas, kita menggunakan sebuah div dengan kelas timer-container sebagai wadah utama dari elemen timer dan tombol kontrol. Elemen timer kita buat dengan menggunakan tag span yang memiliki kelas timer, dan pada elemen ini kita menampilkan waktu pada timer.
Di bawah elemen timer, kita menggunakan sebuah div dengan kelas button-container untuk menampung tiga tombol kontrol timer, yaitu start, stop, dan reset.
Pada bagian CSS, kita memberikan styling untuk timer dan tombol-tombol kontrolnya. Kita membuat timer terlihat besar dan tebal dengan font-size 48px dan font-weight bold. Sedangkan tombol-tombol kontrol kita beri warna background hitam dan warna teks putih dengan kelas button. Tombol ketika dihover oleh kursor mouse akan membalikkan warna background dan teksnya.
Kita menggunakan @media untuk menetapkan aturan CSS yang berbeda untuk tampilan desktop, tablet, dan smartphone. Pada tampilan desktop, kita menggunakan font size yang lebih besar, sedangkan pada tampilan tablet dan smartphone, kita menggunakan font size yang lebih kecil agar tampilan tetap responsif. Anda bisa menyesuaikan nilai max-width pada @media sesuai dengan kebutuhan dan desain Anda.
Selanjutnya, mari kita masuk ke bagian implementasi logika timer menggunakan JavaScript.
JavaScript:
Dengan menambahkan variabel milliseconds, kita sekarang bisa menampilkan timer dengan format jam:menit:detik:milidetik. Kita juga sudah menambahkan tombol start, stop, dan reset yang berfungsi dengan baik. Tombol start akan memulai timer, tombol stop akan menghentikan timer, dan tombol reset akan mengembalikan timer ke posisi awal.
Dalam kode di atas, kita menggunakan metode setInterval untuk memanggil fungsi add() setiap 10 milidetik, dan menyimpan variabel yang dikembalikan oleh setInterval() dalam variabel t. Ketika tombol stop ditekan, kita menggunakan clearInterval() untuk menghentikan timer.
Kita juga telah menambahkan fungsi reset yang akan mengembalikan timer ke posisi awal dengan menghentikan timer menggunakan clearInterval() dan mengatur ulang nilai variabel-variabel yang digunakan oleh timer.
Sekarang, kita sudah memiliki timer yang menunjukkan waktu dengan milidetik. Hasilnya akan seperti ini:
See the Pen Untitled by Arizal (@arizalinside) on CodePen.
Dalam pembuatan timer sederhana ini, Anda telah belajar bagaimana membuat timer dengan menggunakan HTML, CSS, dan JavaScript. Anda telah mempelajari bagaimana membuat fungsi untuk menambahkan waktu, bagaimana mengaktifkan timer dengan mengklik tombol Start, serta bagaimana menghentikan dan mengatur ulang timer dengan tombol Stop dan Reset.
Anda juga telah mempelajari cara memodifikasi tampilan timer dengan CSS, sehingga terlihat lebih menarik dan responsif. Namun, ada banyak hal lain yang dapat Anda lakukan untuk meningkatkan timer sederhana ini, seperti menambahkan fitur untuk memilih unit waktu yang berbeda, menambahkan efek suara, dan banyak lagi.
Dengan mempelajari cara membuat timer sederhana ini, Anda telah membuka pintu untuk mempelajari lebih banyak tentang pengembangan web dan mengeksplorasi kemampuan HTML, CSS, dan JavaScript. Semoga tutorial ini bermanfaat bagi Anda dan membantu memperluas pengetahuan Anda tentang pengembangan web!
0 comments
Posting Komentar