Счетчик лайков является отличным инструментом для увеличения вовлеченности пользователей на вашем сайте. В этой статье мы рассмотрим, как добавить простой счетчик лайков на ваш сайт с помощью 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. Удачи в вашей веб-разработке! 😉
Добавить комментарий