Как добавить счетчик лайков на сайт

Счетчик лайков является отличным инструментом для увеличения вовлеченности пользователей на вашем сайте. В этой статье мы рассмотрим, как добавить простой счетчик лайков на ваш сайт с помощью HTML, CSS и JavaScript.

Шаг 1: Создание HTML-структуры

Сначала создадим основную структуру нашего счетчика лайков с помощью HTML. Вам потребуется контейнер с классом like-container, внутри которого будет кнопка с классом like-button и элемент для отображения количества лайков с классом like-count.

<div class="like-container">
  <button class="like-button">👍</button>
  <span class="like-count">0</span>
</div>

Шаг 2: Оформление счетчика лайков с помощью CSS

Теперь давайте добавим немного стилей для нашего счетчика лайков с помощью CSS. Мы зададим размеры, цвета и отступы для кнопки и счетчика.

.like-container {
  display: flex;
  align-items: center;
}

.like-button {
  font-size: 24px;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  margin-right: 8px;
}

.like-count {
  font-size: 18px;
}

Шаг 3: Добавление функциональности счетчика лайков с помощью JavaScript

Наконец, давайте добавим функциональность нашему счетчику лайков с помощью JavaScript. Мы будем слушать событие клика на кнопке лайка и увеличивать счетчик на 1 каждый раз, когда пользователь нажимает на кнопку.

const likeButton = document.querySelector('.like-button');
const likeCount = document.querySelector('.like-count');

likeButton.addEventListener('click', () => {
  // Получаем текущее значение счетчика лайков и увеличиваем на 1
  const currentCount = parseInt(likeCount.textContent, 10);
  likeCount.textContent = currentCount + 1;
});

Вот и все! Теперь у вас есть простой и функциональный счетчик лайков на вашем сайте. Вы можете легко разместить его на любой странице и настроить внешний вид с помощью CSS. Удачи в вашей веб-разработке! 😉