Итак, вы хотите быть веб-разработчиком?

Вы могли бы посмотреть 50 часов учебных пособий, или вы могли создать что-то.

Tap Counter – это каноничный "Первый проект" для фронтенд-разработчиков. Он охватывает все основы: переменные, функции, слушатели событий и манипулирование 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() { счёт++; // Add 1 document.getElementById("number").innerText = count; // Обновить экран } ```

Шаг 3: LocalStorage (Память)

Проблема с кодом выше? Если обновить страницу, счетчик возвращается к 0.

Чтобы сделать полезный счетчик (например, Тасбих или счетчик строк), ему нужно запоминать.

Браузеры имеют небольшую базу данных под названием `localStorage`.

• Сохранить: Каждый раз, когда мы кликаем, мы говорим браузеру: "Сохранить 'count' постоянно."
• Загрузка: При загрузке страницы мы спрашиваем: "У вас есть сохраненный номер?" Если да, начните с него.

Почему этот проект важен

Создание счетчика нажатий позволяет вам понять фундаментальное понятие Управление состоянием.

Whether you are building a To-Do list, a shopping cart, or Facebook, it’s all just fancy versions of a Tap Counter.

• Facebook Like Button? Это счетчик нажатий.
• Twitter Retweet count? That's a tap counter.
• Amazon Cart Item count? That's a tap counter.

Заключение

Не просто используйте инструменты, создавайте их. Откройте текстовый файл, напишите те десять строк кода и посмотрите, как ваш собственный пользовательский счетчик оживает. Это первый шаг в более широком мире.