In this project, we primarily focused on How Javascript works when we click on Buttons.
We have seen this kind of functionality before in many web pages.
When we click on any box, the hidden content pop-up's screen, we can close the pop - up in 3 ways.
1. Clicking on Close option "X":
2. Click any where on background overlay and
3. Only when user enters Esc Key the pop up disappears.
We here use above function in such a way when user clicks on close button the content will hidden and background overlays gets disable.
We have used few API's to make Javascript work in this project;
1.document.querySelector / All: returns the first element that is a descendant of the element on which it is invoked that matches the specified group of selectors.
2.Element.classList : is a read-only property that returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.
3.EventTarget.addEventListener() : The addEventListener() method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.
We used EventListener in this project to invoke the function when user clicks on BOX , clicks on X close, and user enters Esc key.