Босс доволен вашим прогрессом и доверяет вам серьёзную задачу. Нужно запрограммировать всплывающее окно. Для краткости такое окно можно называть проще — попап.

Мяу! Ты доказал, что можешь писать код и решать задачи. Пора переходить из стажёров в джуниоры!

Только не расслабляйся, работы много. Нужно оживлять интерфейсы и добавлять взаимодействие с пользователем.

Запрограммируй всплывающее окно с контактами компании. Тебе нужен элемент с классом modal.

При клике по кнопке с классом button-open попапу должен добавляться класс modal--show, так окно появится на странице.

По клику по кнопке с классом button-close у окна должен удаляться класс modal--show, и попап должен закрыться.

Ещё попап должен закрываться, если пользователь нажал клавишу ESC, пока окно было открыто.

Приступай к работе.

Давайте сначала разберёмся, что значит «оживлять» интерфейс?

У нас уже есть готовая разметка и стили, все состояния элементов подготовлены верстальщиком. Но пока что страница статическая. Это просто набор тегов и текста. В разметке у нас есть попап с классом modal, его не видно на странице. Если мы добавим этому попапу класс modal--show, окно отобразится в интерфейсе. Но ведь пользователь не будет сам менять классы в разметке?

Если представить взаимодействие пользователя и страницы, получится примерно такой сценарий: кнопка на странице, попап скрыт → пользователь нажимает на кнопку → попап появляется на странице.

Этап, где пользователь нажимает на кнопку — связующее звено между состоянием закрытого и открытого попапа. Интерфейс становится «живым» и реагирует на действия пользователя. Действие, когда пользователь что-то делает с элементами страницы (например, кликает по кнопке или нажимает клавишу) называется событием. Именно с событиями мы и будем работать, чтобы выполнить задачу от Кекса.

Сначала с помощью querySelector найдём попап, с которым будем работать, и сохраним его в переменную. Затем проверим, как будет выглядеть окно в открытом состоянии.

Мы уже разбирали, как работает querySelector. Если вам нужно освежить знания, загляните в это задание части «Знакомство с JavaScript в браузере». А если вы хотите вспомнить, как работает добавление класса classList.add(), посмотрите это задание.