Interactive online courses HTML Academy
2026-03-09 12:30 Diff
https://htmlacademy.org/courses/javascript-browser/events/intro-events

The boss is pleased with your progress so far, and he is now entrusting you with a serious assignment. You need to program a popup window. For the sake of brevity, we will simply refer to this window as a “popup”.

Meow! You have proven that you know how to write code and solve problems. It’s time to promote you from intern to junior employee!

However, there is no time to rest on your laurels. There is a lot of work to do. I want you to breathe some new life into some interfaces and to add user interaction elements.

Program a popup window with company contact information. You need an element with the modal class.

When you click on a button with the button-open class, the modal--show class should be added to the popup so that the window will appear on the page.

When you click on a button with the button-close class, the modal-show class should be removed from the window and the popup should close.

The popup should close if the user presses the ESC key while the window is open.

Let’s get to work.

We first need to understand what we mean by “reviving” the interface?

We already have a ready-made layout and styles. The web designer has already prepared the current states of all the elements. However, currently the page is static. It is just a collection of tags and text. We have a popup with the modal class in the markup. It is not visible on the page. If we were to add the modal--show class to this popup, the window would appear in the interface. However, won’t the user change the classes in the markup himself after all?

If you were to picture to yourself how the user interacts with the page, you would get something like the following scenario: We see a button on the page, but the popup is hidden. → The user clicks on the button. → The popup appears on the page..

The stage where the user clicks on the button is the link connecting the state of the closed and open popups. The interface is now “live” and responds to user actions. An action where a user does something with the page elements (for example, clicks on a button or presses a key) is called an event. In fact, we need to work with events in order to carry out Muffin’s assignment.

First we will use querySelector to find the popup that we will be working with and to save it as a variable. Then we will check how the window looks when it is open.

We have already explained how querySelector works. If you need to refresh your knowledge, you should check out this assignment from the “Introduction to JavaScript in the browser” chapter. And if you want to refresh your memory about how to add a classList.add() class, then take a look at this assignment.