Cara menggunakan membuat counter dengan javascript

Taufiksi – Kita akan mencoba membuat animasi counter angka. Animasi ini akan berguna untuk beberapa project yang ingin kamu buat kedepannya.

Bahkan saya juga ingin menggunakannya kedalam salah satu project tutorial landing page menggunakan bootstrap nantinya.

Untuk membuat animasi ini kamu hanya memerlukan beberapa tools seperti yang pastinya teks editor dan browser.

Tapi yang lebih penting project yang kamu miliki sudah terinstall jquery terlebih dahulu, tidak menginstal juga tidak apa apa asalkan sudah ada kode CDN di dalamnya.

Kamu bisa menemukan CDN jquery disini dan bisa memilih sesuai versi yang kamu ingin gunakan, mungkin lebih baik versi yang terbarunya.

Pasangkan kode jquery di dalam tag ... , jika sudah maka kamu akan siap untuk ngoding membuat animasi counter angka.

Isi Artikel

• 1 Membuat Animasi Counter Angka
  • 1.1 Javascript
  • 1.2 HTML
• 2 Penjelasan Kode Animasi Counter Angka

Kita akan mulai mmebuat animasinya, usahakan projectmu sudah ada jquery terlebih dahulu. Kemudian kamu hanya tinggal memasukan kode berikut ini.

Javascript

jQuery[{ Counter: 0 }].animate[{
    Counter: jQuery['.counter'].text[]
  }, {
    duration: 10000,
    easing: 'swing',
    step: function[] {
      jQuery['.counter'].text[Math.ceil[this.Counter].toLocaleString['id']];
    }  
}];

HTML

7000

Penjelasan Kode Animasi Counter Angka

Jadi kalau kamu sudah melihat kode tersebut kan, untuk kode javascript kamu bisa memasukannya kedalam file js secara terpisah maupun dalam satu file yang di bungkus dengan tag .

Sedangkan untuk yang HTML kamu bisa mengkombinasikan dengan berbagai tag html, tidak hanya menggunakan span, asalkan dilengkapi dengan class counter sebagai targetnya.

Penjelasan kode javascript sebagai berikut.

• Counter: 0 merupakan angka awal untuk menuju ke angka 7000 yang ada di kode HTML.
• .counter adalah sebuah class yang kita tambahkan pada tag html sebagai penanda target script
• duration :10000 adalah rentang waktu yang dibutuhkan untuk mencounter angka, atau bisa dibilang untuk menyelesaikan animasi, jika durasi 10000 maka artinya adalah animasi akan selesai sekitar 10 detik.
• easing : swing adalah model animasi yang digunakan. Ada beberapa animasi yaitu linier dan swing, kamu bisa melihat selengkapnya di sini.
• .toLocaleString[‘id’] adalah sebuah kode untuk merubah angka mengikuti standar indonesia. Misalnya menggunakan pemisah seperti koma dan lain lain.

Penutup

Baiklah mungkin sampai sini dulu artikel kali ini, sampai jumpa di artikel berikutnya babay.

Terima kasih sudah membaca artikelnya, tetap semangat jalani harimu meskipun dunia bertolak belakang dengan keinginanmu. Dan jangan lupa ngopi supaya sadar pahitnya dunia tidak semanis mimpi. Ahay

Tertanda Sayang

Taufik Nurhidayah

Traktir Kopi

Pada pembahasan kali ini, saya ingin memberikan tutorial kepada kamu, yaitu cara membuat penghitung pengunjung situs web dengan menggunakan JavaScript. Dalam postingan ini saya akan menunjukkan kepada kamu code penghitung pengunjung situs web html, dengan cara membuat Penghitung Sederhana Menggunakan Javascript, HTML & CSS [Bootstrap]? Saya akan memberi kamu demo dan contoh untuk diterapkan. Dalam postingan ini, kita akan belajar tentang cara membuat penghitung pengunjung dalam html dan dengan sebuah contoh.

Pada postingan ini, kita akan membuat aplikasi penghitung pengunjung situs web dengan fungsi berikut:

• Tampilkan jumlah total kunjungan di halaman. 
• Fungsionalitas untuk mengatur ulang jumlah kunjungan pada tombol klik.
• Tingkatkan hitungan refresh dan kunjungan mendatang.

Pertama-tama kita akan mulai dengan membuat struktur HTML dan kemudian membuat fungsionalitas dengan JavaScript yang diikuti dengan menambahkan style CSS [Bootstrap].

1. Buat file HTML

Teks judul ditambahkan ke file HTML dengan menambahkan pembungkusnya dalam

 
   Penghitung Situs Web
   
 
 
   Jumlah kunjungan situs web:
   
   Reset
 

2. DOM querySelector[] untuk mencocokkan kontainer menggunakan JavaScript

Langkah selanjutnya adalah menggunakan document.querySelector[] agar sesuai dengan elemen HTML dengan id "website-counter" dan menetapkannya ke variabel untuk operasi manipulasi DOM di kemudian hari.

var counterContainer = document.querySelector["#website-counter"];

3. Mengambil jumlah pengunjung menggunakan LocalStorage.getItem[]

Sekarang kita mengambil nilai sebelumnya dari jumlah pengunjung situs web dari localStorage dengan menggunakan metode localStorage.getItem[] dengan  meneruskan kunci "page_view" sebagai parameter. Nilai disimpan di localStorage browser web dan menyimpan data di luar satu sesi.

var visitCount = localStorage.getItem["page_view"];

4. Menginisialisasi jumlah pengunjung menjadi 1 di lokalStorage jika entri tidak ditemukan

Entri localStorage tidak ada selama sesi pengguna pertama, oleh karena itu localStorage.getItem["page_view"] akan kembali tidak terdefinisi. Kasus ini ditangani dengan menginisialisasi visitCount ke 1 dan menambahkan entri menggunakan localStorage.setItem[""] dengan "page_view" sebagai kuncinya.

visitCount = 1;
 
//Tambahkan entri untuk key="page_view"
localStorage.setItem["page_view", 1];

5. Tingkatkan jumlah pengunjung dan perbarui localStorage

Sebaliknya skenario sebelumnya, jika entri untuk kunci "page_view" sudah ada, nilai String yang diambil dikonversi ke tipe data angka menggunakan Number[]. VisitCount sesi sebelumnya kemudian bertambah dan nilainya diperbarui di localStorage.

visitCount = Number[visitCount] + 1;
 

localStorage.setItem["page_view", visitCount];

6. Tampilkan jumlah pengunjung pada halaman menggunakan element.innerHTML

Setelah nilai visitCount yang benar ditentukan, itu perlu ditampilkan di layar. Hal ini dilakukan dengan menetapkan variabel visitCount ke element.innerHTML. Properti .innerHTML pada elemen DOM yang dipilih memungkinkan kode HTML ditambahkan di dalam elemen DOM yang dipilih. Akibatnya, kode HTML halaman web akan diperbarui untuk menampilkan jumlah pengunjung situs web.

counterContainer.innerHTML = visitCount;

7. Menerapkan fungsi Reset yang dipicu oleh tombol klik

Sekarang jumlah pengunjung diimplementasikan, kita perlu menambahkan tombol reset untuk memungkinkan pengguna mengatur ulang penghitung kembali ke 1. Langkah pertama adalah memasukkan kode HTML untuk tombol reset dan mencocokkan tombol menggunakan DOM querySelector[] mirip dengan "website-counter".

Elemen DOM yang dipilih dilampirkan dengan event listener klik untuk memicu fungsi pengendali reset. Jumlah pengunjung situs web diatur ulang dengan menginisialisasi ulang visitCount ke 1 dan memperbarui nilai di localStorage. Jumlah pengunjung diperbarui di layar menggunakan element.innerHTML yang mirip dengan langkah sebelumnya.

Reset

// Menambahkan jumlah view ketika onClick
  resetButton.addEventListener["click", [] => {
    visitCount = 1;
    localStorage.setItem["page_view", 1];
    counterContainer.innerHTML = visitCount;
  }];

8. Menambahkan style CSS ke elemen, agar berada ditengah

Setelah semua fungsi penghitung pengunjung situs web diimplementasikan, sekarang saatnya untuk menambahkan style CSS ke aplikasi untuk menambahkan tampilan profesional dan meningkatkan kegunaan. Masukkan tag link dari bootstrap online, dan code CSS yang berada dibawah ini, kemudian ditulis pada bagian di dalam halaman web HTML.

        
        body, .website-counter {
                display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        }
       
        body {
                height: 100vh;
        }

Berikut ini merupakan code akhir dari keseluruhan code "HTML, JavaScript, dan CSS" yang telah dibahas :

  
    Penghitung Situs Web
    
    
      
      body,
      .website-counter {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
 
      body {
        height: 100vh;
      }
    
  
  
    Jumlah kunjungan situs web:
    
    Reset
  

 

  var counterContainer = document.querySelector["#website-counter"];
  var resetButton = document.querySelector["#reset"];
  var visitCount = localStorage.getItem["page_view"];
 
  
  if [visitCount] {
    visitCount = Number[visitCount] + 1;
    localStorage.setItem["page_view", visitCount];
  } else {
    visitCount = 1;
    localStorage.setItem["page_view", 1];
  }
  counterContainer.innerHTML = visitCount;
 
  
  resetButton.addEventListener["click", [] => {
    visitCount = 1;
    localStorage.setItem["page_view", 1];
    counterContainer.innerHTML = visitCount;
  }];

Kita telah membuat penghitung pengunjung situs web sederhana hanya menggunakan Javascript, HTML, dan CSS. Ini adalah metode yang sangat sederhana untuk menambahkan penghitung pengunjung ke situs web kecil atau pribadi kamu. Metode ini mudah diterapkan tetapi memiliki fungsi yang sangat terbatas.

Ada banyak berbagai metode lain yang bisa digunakan, seperti penghitung web yang menggunakan alamat IP atau alat analitik tersedia seperti Google Analytics yang mudah diatur dan juga menyediakan banyak alat dan fitur lain di samping penghitung hit. Ini memberikan laporan terperinci untuk setiap kunjungan ke halaman web. Jadi mending pakai yang mana? Semua itu tergantung kebutuhan masing – masing.

Baiklah mungkin segitu aja dulu untuk postingan kali ini. Jangan lupa di bagikan ke teman-teman kamu yang lain ya, dan jangan lupa kunjungi situs ini untuk mendapatkan info menarik serta terbaru lain nya. Kalau masih bingung caranya, komen aja di bawah! Terima kasih!