Membuat Tally Counter dengan Vanilla Javascript dan HTML

2 min read

Membuat Tally Counter dengan Vanilla Javascript
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:

  • Menambah angka saat klik atau tap (mobile)
  • Reset angka
  • Angka tersimpan meskipun browser ditutup
  • Tidak ada eksternal Javascript library
  • Tampilan versi mobile dan desktop sama
  • Dapat digunakan offline (tanpa internet)

Baca Juga
GitHub Comments untuk Static Website

Sebagai gambaran berikut ini adalah hasil akhir tampilan project Tally Counter yang akan dibuat pada tulisan ini.

Tally Counter Demo
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.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Tally Counter</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<style>
html,
body {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
html {
    display: table;
}
body {
    background-color: #222;
    color: #a9a9a9;
    display: table-cell;
    box-sizing: border-box;
    vertical-align: middle;
    font-family: "Lucida Console", "Monaco", "Monospace", "Sans-serif";
}
#counter {
    margin: 0 auto;
    font-size: 8em;
    width: 99%;
    text-align: center;
    overflow: hidden;
}
#reset {
    position: absolute;
    right: 0;
    top: 0;
    font-size: 1em;
    color: inherit;
    text-decoration: none;
    padding: 0.2em 0.5em;
    background-color: #333;
    z-index: 1000;
}
#reset:visited {
    color: inherit;
}
</style>
</head>
<body>
  <div id="counter">0</div>
  <a id="reset" href="#">Reset</a></div>
  <script>
    // Tally caounter script
  </script>
</body>
</html>

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.

Baca Juga
Tutorial Javascript Membuat Youtube Loop Player

Menambahkan Kode Javascript

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.

<script>
/**
 * Write cookie and set the expiration to forever. It will only write once.
 *
 * @param String name
 * @param String value
 * @param Boolean checkWithValue
 * @return void
 */
function writePermanentCookie(name, value)
{
    var currentYear = (new Date()).getFullYear() + 3;
    var expires = (new Date(currentYear, 12, 12)).toUTCString();
    document.cookie = name + '=' + value + ';path=/;expires=' + expires;
}

var counter = document.getElementById('counter');
function increment()
{
    counter.innerHTML = parseInt(counter.innerHTML) + 1;
    writePermanentCookie('lastCounter', counter.innerHTML);
}

document.onmousedown = function(e)
{
    e.preventDefault();
    return false;
}

document.onkeypress = function(e)
{
    increment();
}

document.onclick = function(e)
{
    increment();
}

document.getElementById('reset').onclick = function(e)
{
    e.preventDefault();
    counter.innerHTML = -1;
}

window.onload = function(e)
{
    var lastValue = document.cookie.replace(/(?:(?:^|.*;\s*)lastCounter\s*\=\s*([^;]*).*$)|^.*$/, "$1");
    if (lastValue) {
        counter.innerHTML = lastValue;
    }
}
</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.

Source code lengkap project ini juga dapat dilihat pada GitHub Rio Astamal di url https://github.com/rioastamal/tally-counter/.