No, chcesz być web developerem?

Możesz obejrzeć 50 godzin tutoriali, albo możesz zbudować coś.

A Tap Counter jest kanoniczym "Pierwszym Projektem" dla programistów front-end. Pokrywa wszystkie podstawy: zmienne, funkcje, słuchacze zdarzeń i manipulację DOM.

W tym przewodniku nie dostarczy nam copy-paste kodu. Wyjaśnimy logikę działania licznika tapów pod spodem.

The Logic flow

A counter app robi trzy rzeczy:

1. Stan: Pamięta liczbę (np. `count = 0`). 1. Wydarzenie: Czeka, aż klikniesz przycisk. 1. Aktualizacja: Kiedy kliknięte, wykonuje `count = count + 1` i aktualizuje ekran.

Krok 1: HTML (Szkielet)

Potrzebujesz miejsca, w którym można pokazać liczbę i przycisku do kliknięcia.

```

0

To właśnie to. Jest brzydkie, ale istnieje.

Krok 2: The JavaScript (The Brain)

To właśnie tutaj dzieje się magia.

Musimy powiedzieć komputerowi: "Ej, znajdź to przycisk. Kiedy ktoś na niego kliknie, weź to licznik, dodaj 1 i pokaż go ponownie."

Kod logic wygląda następująco:

``` let count = 0; // Stan

function increase() { count++; // Dodaj 1 document.getElementById("number").innerText = count; // Aktualizuj ekran } ```

Krok 3: LocalStorage (Pamięć)

Problem z kodem powyżej? Jeśli odświeżysz stronę, licznik wraca do 0.

Aby stworzyć przydatny licznik (np. Tasbeeh lub licznik rzędów), musi zapamiętywać.

Przeglądarki mają małą bazę danych o nazwie `localStorage`.

• Zapisz: Za każdym razem, gdy klikamy, mówimy przeglądarce: „Zapisz ‘count’ na stałe.”
• Załaduj: Kiedy strona się ładuje, pytamy: „Czy masz zapisany numer?” Jeśli tak, zacznij od niego.

Dlaczego ten projekt ma znaczenie

Budowanie licznika tapów uczy podstawowego konceptu Zarządzania Stanem.

Czy budujesz listę zadań, koszyk zakupowy lub Facebook, to wszystko jest po prostu wyrafinowanymi wersjami licznika kleików.

• Facebook Like Button? That’s a tap counter.
• Twitter Retweet count? To jest licznik tap.
• Amazon Cart Item count? That's a tap counter.

Wniosek

Nie tylko używaj narzędzi, buduj je. Otwórz plik tekstowy, napisz te dziesięć linii kodu i zobacz, jak Twój własny, spersonalizowany licznik ożyje. To pierwszy krok do większego świata.