Заставьте её что-то делать

Ваша карточка профиля отлично выглядит — но просто стоит на месте. Кликните, потыкайте — ничего не происходит. Всё потому, что HTML — это структура, а Tailwind — стиль. Поведение — работа JavaScript.

Вот секрет, который не рассказывают новичкам: в вайб-кодинге вы не заучиваете JavaScript. Вы описываете, что должно произойти, а ИИ пишет код. Поведение — это всего лишь предложение:

«Когда кто-то нажимает на кнопку лайка, число рядом с сердечком увеличивается на 1».

Дайте этот промпт ИИ — и он выдаст что-то крошечное вроде этого:

const btn = document.getElementById("like-btn");
btn.addEventListener("click", () => {
  likes = likes + 1;
  count.textContent = likes;
});

Вот и всё. Три шага, каждый раз одни и те же:

1. Найти элемент (getElementById)
2. Слушать событие (addEventListener("click", ...))
3. Изменить что-то (textContent, класс — что угодно)

Найти, слушать, изменить. Почти каждое взаимодействие на каждом сайте, которым вы когда-либо пользовались — выпадающие меню, переключатели тёмной темы, кнопки лайков, — это вариация этого паттерна.

В этом уроке вы добавите счётчик лайков на свою карточку. В конце вы нажмёте на сердечко и увидите, как растёт число, которым управляете вы. Это момент, когда страница становится приложением.