Мы научились определять, есть ли у элемента класс. От класса зависит, что нам нужно делать: увеличивать или уменьшать число на счётчике лайков. Как сказать JavaScript, чтобы в одном случае выполнялись одни инструкции, а в другом — другие? Воспользуемся условной конструкцией.

Условная конструкция позволяет выполнять действия в зависимости от условия. Условие — это инструкция, которая возвращает true или false. Условная конструкция выглядит так:

if (условие) {
  // Инструкции, которые выполнятся, если условие истинно
}

Условие записывают в круглых скобках после слова if (переводится с английского как «если»). После этого внутри фигурных скобок пишут инструкции, которые выполнятся, если условие истинно. Условие считается истинным, если инструкция внутри круглых скобок возвращает true. Например:

let element = document.querySelector('div');
if (element.classList.contains('some-class')) {
  // Сообщение выведется, только если класс у элемента есть
  console.log('Условие истинно');
}

Если у элемента heart есть класс added, значит, пользователь уже поставил лайк и теперь хочет его отменить. В этом случае мы должны уменьшить значение счётчика. Добавим в скрипт условную конструкцию: если класс у элемента есть, то значение счётчика уменьшается на 1.