Beranda » Programming » Membuat Tally Counter dengan Vanilla Javascript dan HTML
Membuat Tally Counter dengan Vanilla Javascript dan HTML
2 min read
Disclaimer Saya bekerja di AWS, semua opini adalah dari saya pribadi.
(I work for AWS, my opinions are my own.)
Potongan Kode Javascript Tally Counter (Ilustrasi: Rio Astamal)
TeknoCerdas.com – Salam cerdas untuk kita semua. Tally counter atau penghitung angka adalah sebuah aplikasi untuk menambah angka secara berurutan. Tally counter dapat digunakan sebagai media bantu untuk menghitung jumlah objek dengan cepat dengan melakukan klik atau tap. Dapat juga disebut sebagai tasbih digital bagi sebagian orang. Pada tulisan ini kita akan membuat Tally counter dengan Javascript dan HTML. Tidak ada eksternal library yang digunakan hanya Javascript murni.
Kriteria yang yang harus ada pada Tally Counter yang dibuat adalah:
Sebagai gambaran berikut ini adalah hasil akhir tampilan project Tally Counter yang akan dibuat pada tulisan ini.
Hasil akhir project Tally Counter
Persiapan Membuat Tally Counter
Buat sebuah direktori baru dengan nama tally-counter misal di direktori $HOME anda.
$ mkdir $HOME/tally-counter
Membuat Tampilan Tally Counter
Masuk pada direktori tally-counter yang telah dibuat sebelumnya. Buat sebuah file bernama index.html dan gunakan teks editor untuk menambahkan kode HTML berikut.
Sekarang buka file index.html menggunakan browser untuk melihat tampilan Tally Counter. Saat ini counter belum berjalan karena belum ada kode Javascript yang ditambahkan.
Halaman tersebut hanya terdiri dari dua komponen utama yaitu div#counter dan anchor#reset.
Agar angka berada ditengah secara vertical maka display element body dibuat sebagai table-cell. Dengan dibah menjadi tabel maka opsi style vertical-align yang mengatur posisi vertical dari text didalam sebuah cell dapat diaplikasikan.
Sedangkan agar angka berada ditengah secara horizontal caranya hanya dengan mengatur margin kanan dan kiri dari div#counter sebagai auto.
Sekarang waktunya menambahkan kode Javascript agar Tally Counter yang dibuat dapat berfungsi. Edit file index.html yang dibuat sebelumnya, ubah bagian yang berada dalam tag script.
Simpan kembali file index.html tersebut. Buka kembali tersebut dengan browser. Jika semua benar maka harusnya ketika halaman diklik angka otomatis bertambah 1 sesuai dengan tampilan demo diatas. Untuk mereset cukup klik tombol “Reset” dan angka harusnya kembali menjadi 0.
Fungsi utama pada Tally counter yang dibuat ada dua fungsi yaitu writePermanentCookie() dan increment().
writePermanentCookie() digunakan untuk menyimpan nilai counter terakhir ke dalam Cookie browser. Sehingga sewaktu browser ditutup dan dibuka nilai dari counter terakhir dapat dimunculkan.
increment() digunakan untuk update nilai dari counter dengan plus satu. Caranya sederhana dapatkan nilai sebelumnya dengan mengambil nilai dari element div#counter. Nilainya masih dalam bentuk string dan harus diubah dalam bentuk integer sebelum ditambah 1.
Sebagai catatan Cookie secara default hanya berfungsi pada protocol HTTP. Jika dibuka menggunakan protokol file:/// maka tidak berfungsi. Untuk mencoba cookie anda dapat menempatkan file index.html pada sebuah web server. Sebagai contoh berikut adalah web server built-in dari PHP.
$ php -S 0.0.0.0:8080 -t ./
Diasumsikan sudah berada pada direktori tally-counter/. Perintah diatas akan mengaktifkan web server pada alamat http://localhost:8080.
Rio Astamal FollowAdalah penulis utama di TeknoCerdas.com. Rio Astamal seorang yang sangat antusias dengan web development sejak 2003. Sejak November 2021 Rio Astamal bekerja di Amazon Web Services (AWS) sebagai Developer Advocate untuk Indonesia. Dia mengelola TeknoCerdas.com di waktu senggangnya sebagai salah satu sarana untuk ikut mencerdaskan pembaca dalam dunia IT.
