Jadi, Anda ingin menjadi seorang web developer?

Anda bisa menonton 50 jam tutorial, atau Anda bisa membangun sesuatu.

A Tap Counter adalah proyek “Pertama yang Dapat Diterima” yang paling umum untuk pengembang front-end. Ini mencakup semua dasar-dasar: variabel, fungsi, pendengar peristiwa, dan manipulasi DOM.

Dalam panduan ini, kami tidak akan memberi Anda kode salin-tempel. Kami akan menjelaskan logika bagaimana sebuah penghitung sentuhan bekerja di balik layar.

The Logic flow

Sebuah aplikasi penghitung melakukan tiga hal:

1. Negara: Ini mengingat sebuah angka (misalnya, `count = 0`). 1. Acara: Menunggu Anda untuk mengklik tombol. 1. Perbarui: Ketika diklik, ia melakukan `count = count + 1` dan memperbarui layar.

Langkah 1: HTML (Tulang Punggung)

Anda memerlukan tempat untuk menampilkan jumlah dan tombol untuk diklik.

```

0

Itu saja. Ini jelek, tetapi ada.

Langkah 2: JavaScript (Otak)

Ini adalah tempat keajaiban terjadi.

Kita perlu memberi tahu komputer: "Hei, temukan Tombol itu. Ketika seseorang mengkliknya, ambil Angka itu, tambahkan 1, dan tampilkan lagi."

Kode logikanya terlihat seperti ini:

``` let count = 0; // The State

function increase() { count++; // Tambah 1 document.getElementById("number").innerText = count; // Update Layar } ```

Langkah 3: LocalStorage (Memori)

Masalah dengan kode di atas? Jika Anda menyegarkan halaman, jumlahnya kembali ke 0.

Untuk membuat penghitung yang berguna (seperti Tasbeeh atau penghitung baris), ia perlu mengingat.

Browser memiliki database kecil bernama `localStorage`.

• Simpan: Setiap kali kita mengklik, kita memberi tahu browser: "Simpan 'count' secara permanen."
• Muat: Saat halaman dimuat, kami bertanya: "Apakah Anda memiliki nomor yang tersimpan?" Jika ya, mulai dari sana.

Mengapa Proyek Ini Penting

Building a tap counter mengajarkan Anda konsep fundamental tentang State Management.

Baiklah, jika Anda sedang membuat daftar tugas, keranjang belanja, atau Facebook, semuanya hanyalah versi mewah dari Penghitung Ketuk.

• Facebook Like Button? Itu adalah penghitung sentuhan.
• Twitter Retweet count? Itu adalah penghitung ketukan.
• Amazon Cart Item count? That’s a tap counter.

Kesimpulan

Jangan hanya menggunakan alat, bangunlah mereka. Buka sebuah file teks, tulis sepuluh baris kode itu, dan saksikan penghitung khusus Anda menjadi hidup. Ini adalah langkah pertama menuju dunia yang lebih besar.