Така че, искаш да бъдеш уеб разработчик?

Можеше да гледате 50 часа уроци, или можеше да изградите нещо.

A Tap Counter е каноничен "Първи проект" за front-end разработчици. То обхваща всички основи: променливи, функции, слушатели на събития и манипулиране на DOM.

В този справочник няма да ви предоставим код за копиране и поставяне. Ще обясним логиката как работи брояч за докосване зад кулисите.

The Logic flow

A counter app прави три неща:

1. Състояние: То помни число (напр. `count = 0`). 1. Събитие: Чака те да кликнеш бутон. 1. Актуализация: Когато се кликне, изпълнява `count = count + 1` и актуализира екрана.

Стъпка 1: HTML (Основата)

Трябва ви място, за да покажете броя и бутон за кликване.

```

0

Това е всичко. Това е грозно, но съществува.

Стъпка 2: JavaScript (The Brain)

Това е мястото, където се случва магията.

Трябва да кажем на компютъра: "Хей, намери този Button. Когато някой го натисне, вземи Number-а, добави 1 и го покажи отново."

Кодът е написан по следния начин:

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

function increase() { count++; // Добавете 1 document.getElementById("number").innerText = count; // Обновете екрана } ```

Стъпка 3: LocalStorage (Паметта)

Проблемът с кода по-горе? Ако презаредите страницата, броячът се връща към 0.

За да се направи полезен брояч (като Tasbeeh или брояч на редове), той трябва да запомня.

Браузърите имат малка база данни, наречена `localStorage`.

• Запази: Всеки път, когато кликнем, казваме на браузъра: "Запази 'count' трайно."
• Зареждане: Когато страницата се зареди, задаваме въпроса: „Имате ли запазени номера?“ Ако отговорът е да, започвайте от там.

Защо този проект е важен

Изграждането на брояч за вода ви учи на фундаменталния концепт на Управление на състоянието.

Дали създавате списък със задачи, количка за пазаруване или Facebook, всичко това всъщност са просто сложни варианти на брояч за кликвания.

• Facebook Like Button? Това е брояч на кликвания.
• Twitter Retweet count? Това е брояч на докосвания.
• Amazon Cart Item count? Това е брояч на кликвания.

Заключение

Не използвайте просто инструменти, създавайте ги. Отворете текстов файл, напишете тези десет реда код и наблюдавайте как вашият собствен персонализиран брояч оживява. Това е първата стъпка към по-голям свят.