Theory
Theory
Comments

How to add a handler

We have a button that should cause a popup to appear when it is clicked. The plan is this: we need to catch the moment when the user clicks on the button. When this happens, we will add the modal--show class so that the window appears on the page.

The action “Catch the moment when the user clicks the button” has various names: add a click event handler for the button. Next, for the sake of simplicity, we can omit the word “event” and say this: Add a click handler for the button.

What does adding a handler mean? In order to determine the moment when an event occurs on the page, such as a button click in our case, we add a handler to the button that will be triggered when a click occurs.

Let’s take a look at the syntax for adding a handler.

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

button.addEventListener('click', function () {
  // Instructions
});

The addEventListener() function says that we are adding an event handler to the element. Literally speaking, “we are adding an event listener.” The handler “hears” everything that happens on the page, and it will certainly register the event that we need when it occurs. That is, it will do this if we configure it correctly.

Next, we will analyze the syntax of event handlers and their settings in detail, but for the moment we will find a button that will cause the popup to open when it is clicked. This is a button with the button-open class. Add a handler to this button in a way similar to the example above.

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

var popup = document.querySelector('.modal');

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

Goalscompleted

After the popup variable create a variable openPopupButton and write a button with the button-open class to it.
After you have declared the variables, add the following handler to the button: openPopupButton.addEventListener('click', function () { });.

How to add a handler

Comments

Log in

Sign up

Restore access