Мяу! Ты хорошо справился с задачей, но нет времени на отдых!

Нужно запрограммировать галерею с моими фотографиями для сайта нашей веб-студии. Заказчики должны знать героя веб-разработки в лицо!

Галерея состоит из нескольких миниатюр (элементы с классом gallery__photo-preview) и большой фотографии (класс full-photo). По клику на миниатюру должно меняться большое изображение. Большая картинка должна соответствовать превью, по которой кликнул пользователь.

Данные для изображений собраны в массив photos. Каждый элемент массива — путь до полноразмерной фотографии. Порядок элементов в этом массиве такой же, как и порядок миниатюр в разметке.

Верстальщик уже всё подготовил: изображения превью лежат внутри кнопок с классом gallery__photo-preview, клики именно по этим кнопкам будут менять содержимое большого изображения (класс full-photo). От нас, как обычно, требуется запрограммировать взаимодействие интерфейса с пользователем.

Сначала мы найдём все миниатюры с помощью querySelectorAll и большое изображение через querySelector, запишем найденные элементы в переменные.

Мы знакомились с querySelectorAll в этом и этом заданиях части «Знакомство с JavaScript в браузере». Загляните туда, если вы забыли, как работает этот метод.