Мяу! Хочу знать, сколько человек лайкнули новость. Сделай счётчик!

Нет предела совершенству и хотелкам босса! Нам предстоит доработать систему лайков. Сейчас пользователь может ставить и отменять свои лайки, кликая на «сердечко» под картинкой в новости. Но при этом не учитывается и не показывается, сколько человек лайкнули новость. Исправим это, добавив счётчик.

Кнопка «сердечко» сохранена в переменной heart. Когда пользователь ставит лайк, кнопке добавляется класс added, и «сердечко» становится полностью закрашенным. Когда лайк отменяют, класс added убирается, и кнопка возвращается в первоначальное состояние. За переключение класса отвечает метод classList.toggle, мы с ним уже знакомы. Для отображения числа лайков на странице верстальщик подготовил элемент с классом likes-number.

Вот как кнопка выглядит в разметке:

<!-- Лайка нет, сердечко пустое -->
<button class="heart" type="button"><span class="likes-number"></span></button>

<!-- Лайк есть, сердечко закрашено -->
<button class="heart added" type="button"><span class="likes-number"></span></button>

Чтобы хранить количество лайков, нам понадобится переменная-счётчик. Её значением будет число.

// Присвоим переменной значение — число
let number = 7;

Обратите внимание, мы не оборачиваем числа в кавычки.

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