Building Simple components

Exercise: Close the modal

In the last lesson, we were able to successfully reveal the modal when the "Unlock your surprise" button is clicked.

But there is one problem with this modal functionality.

If you notice the modal, there is a "close" button.

But when we click on it, the modal is not getting hidden.

So, here is your exercise

Using the techniques you have learned so far, hide the modal when the "close" button is clicked.

I am waiting.

Come on, open up the project folder, and start coding.

Are you done?

Here is the solution

Basically, to hide the modal, we can use the same technique that we are using for revealing the modal.

Select the "close" button
Add a "click" event listener to it.
If the "close" button is clicked, handle the event by closing the modal.

function hideModal(){
    //Step 1: Select the Discount Modal element
    let discountModal = document.querySelector("#surprise-discount-modal");

    //Step 2: Change the display property of the element to "none"
    discountModal.style.display = "none";
}

//Step 1: Select the "close" button
let hideModalButton = document.querySelector(".hide-modal-btn");

//Step 2: Attach the event listerner to it
hideModalButton.addEventListener("click", hideModal);

Put the above code at the end of the index.js file like this:

/* Functionality for revealing the modal */
function showModal(){
    //Step 1: Select the Discount Modal element
    let discountModal = document.querySelector("#surprise-discount-modal");

    //Step 2: Change the display property of the element to "block"
    discountModal.style.display = "block";
}

//Step 1: Select the "Unlock your surprise" button
let showModalButton = document.querySelector(".show-modal-btn");

//Step 2: Attach the event listerner to it 
showModalButton.addEventListener("click", showModal);


/* Functionality for hiding the modal */
function hideModal(){
    //Step 1: Select the Discount Modal element
    let discountModal = document.querySelector("#surprise-discount-modal");

    //Step 2: Change the display property of the element to "none"
    discountModal.style.display = "none";
}

//Step 1: Select the "close" button
let hideModalButton = document.querySelector(".hide-modal-btn");

//Step 2: Attach the event listerner to it
hideModalButton.addEventListener("click", hideModal);

First, we have defined a new function called hideModal and inside it, we are performing the task of hiding the modal by changing its style to display:none.

But we are not calling the hideModal function.

We want the browser to call it when the "close" button is clicked.

So, we are attaching a "click" event listener to the "close" button.

And finally, we are instructing the browser to execute the hideModal function whenever the button is clicked by providing the hideModal function as the event handler.

That's all.

Easy, right?

If we now go ahead and test things in the browser, we should be able to hide the modal when the "close" button is clicked: