HTML Academy
Previous task
Getting to know events1/25
Back to the list of tasks
  • 1. Introduction to events
  • 2. How to add a handler
  • 3. How events are arranged
  • 4. Default actions
  • 5. Please pass the function
  • 6. Hiding the popup
  • 7. Pressing a key
  • 8. Choosing a key
  • 9. With one click
  • 10. Summary of “Events in JavaScript”, part 1
  • 11. First program: “Don’t be shy”
  • 12. Welcome to our photo gallery
  • 13. Click ’em all!
  • 14. Adding an image
  • 15. A bug has crept into the system
  • 16. Scope
  • 17. Global scope
  • 18. Inside out variables
  • 19. Becoming Independent
  • 20. Closures
  • 21. Let’s prepare for school
  • 22. Fixing the gallery
  • 23. Getting to the heart of the matter
  • 24. Summary of “Events in JavaScript”, part 2
  • 25. The Second Program: “Señor Tomato”
How to add a handler
  • Sign up
  • Log in

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Introduction to 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.

Comments

  • index.html
  • style.css
  • script.js
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CandyShop</title> <link href="candy-shop/setting.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body> <section class="card"> <div class="card__content"> <h1 class="visually-hidden">The CandyShop Ice Cream Parlor</h1> <img class="card__logo" src="candy-shop/candyshop.svg" width="205" height="63" alt="The CandyShop"> <p class="card__text">We make ice cream from the freshest cream!</p> <img class="card__img" src="candy-shop/icecream.png" width="196" height="240" alt="Ice cream"> </div> <div class="card__controls"> <a href="contacts.html" class="card__button button-open">Show contacts</a> </div> </section> <section class="modal"> <div class="modal__content"> <h2 class="visually-hidden">Contact us</h2> <h3>Address:</h3> <p>19/8 Bolshaya Konyushennaya, St. Petersburg, 191186</p> <h3>Phone:</h3> <p>+7 (812) 275-75-75</p> <h3>Email:</h3> <p>mail@htmlacademy.ru</p> <button class="modal__button button-close" type="button">Close</button> </div> </section> <script src="script.js"></script> </body> </html>
CSS
h3 { margin: 0.5em 0; } p { margin: 0.5em 0 2em; } .card { width: 420px; margin: 50px auto 0; } .card__content { position: relative; background-color: #fad400; display: flex; flex-direction: column; align-items: flex-start; padding-top: 15px; padding-left: 20px; box-shadow: 0 5px 8px 0 #e8e8e8; } .card__img { align-self: flex-end; margin-top: auto; } .card__logo { position: absolute; } .card__text { font-size: 16px; line-height: 22px; font-weight: bold; position: absolute; left: 20px; top: 100px; width: 190px; } .card__controls { display: flex; justify-content: center; align-items: center; border: 2px solid #e8e8e8; border-top: 0; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; padding-top: 20px; padding-bottom: 20px; } .card__button { border: 0; padding: 12px 0; width: 230px; text-transform: uppercase; text-align: center; border-radius: 50px; color: #ffffff; font-weight: bold; font-size: 16px; text-decoration: none; background-color: #fad400; } .card__button:hover, .card__button:focus { background-color: #82da03; } .card__button:active { color: rgba(255, 255, 255, 0.3); background-color: #6cb502; } .modal { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .modal--show { display: block; } .modal::after { content: ""; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.3); z-index: 1; } .modal__content { position: relative; width: 300px; margin: 100px auto; padding: 30px 70px 15px; background-color: #ffffff; box-shadow: -1px 5px 12px 0 rgba(89, 90, 90, 0.3); z-index: 2; } .modal__button { position: absolute; top: 20px; right: 20px; width: 20px; height: 20px; font-size: 0; background: none; border: 0; } .modal__button::after, .modal__button::before { content: ""; position: absolute; right: 0; top: 20px; width: 26px; height: 6px; margin: -13px -3px; background-color: #7656de; } .modal__button::before { transform: rotate(45deg); } .modal__button::after { transform: rotate(-45deg); } .modal__button:hover::after, .modal__button:hover::before, .modal__button:focus::after, .modal__button:focus::before { background-color: #9b7ff7; } .modal__button:active::after, .modal__button:active::before { background-color: #4023a0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; clip-path: inset(100%); clip: rect(0 0 0 0); overflow: hidden; }
JavaScript

What didn’t you like in this task?

Thanks! We’ll fix everything at once!

Click inside the mini browser to put the focus in this window.

100%
Console
Goalscompleted
0
    1. Create a variable popup and write an element with the modalclass to it.
    2. Then add the modal--show class to the popup element using classList.add().

    Cookies ∙ Privacy ∙ License Agreement ∙ About ∙ Contacts ∙ © HTML Academy OÜ, 2019−2025

    VISAMastercard

    Log in

    or

    Forgot your password?

    Sign up

    Sign up

    or
    Log in

    Restore access

    Have you forgotten your password or lost access to your profile? Enter your email connected to your profile and we will send you a link to restore access.

    Forgot to connect your email to the profile? Email us and we’ll help.