• Теория
  • Теория

Кекстаграм: наконец-то JavaScript

Всё готово для «оживления» интерфейса с помощью JavaScript. HTML-код Кекстаграма приведён в исходное состояние: фильтр ещё не выбран и к фото не применён.

Сначала включим фильтр toaster и применим его к фотографии. Для этого:

1. Найдём кнопку с классом toaster и сохраним её в переменную control:

var control = document.querySelector('button.toaster');

2. Найдём блок с фотографией с классом photo и сохраним его в переменную photo:

var photo = document.querySelector('.photo');

3. Теперь к кнопке, хранящейся в переменной control, добавим класс active:

control.classList.add('active');

4. А к блоку большой фотографии, она уже в переменной photo, добавим класс toaster:

photo.classList.add('toaster');

Теперь попробуйте повторить это сами. Обратите внимание, что при добавлении класса с помощью classList.add точка в начале строки не пишется.

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 27 мая 2024. Всего от 4690 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Кекстаграм: Эпилог. JavaScript» тренажёра «Практика: фотоприложение с фильтрами» можно после регистрации и оформления подписки.