Summary
- Code the behavior of Interactivity
Disclaimer: At this round that we could also markup and style the content of elements that need to be clicked to reveal its content. However, ideally, it should be part of the process beginning in Plain Text.
JavaScript handles the behavior aspect of the interactivity. An example of what JS can do is to listen for events like click and scroll; add and remove CSS class names in HTML elements. These examples made it possible to have a menu appear whenever we click on the “Google apps” icon beside the Sign In button.
Now, while the menu is active, try clicking outside it. We would see that the behavior when clicking outside the menu will deactivate or close it. Also, if the web page is vertically shorter than its content, consequently there will be a scrollbar. Scrolling the web page while the menu is active will also close it. These behavior are made possible by combining JavaScript’s capability to listen for events and manipulate the DOM.
See the Pen RE:Creation No. 1: Google | JS (Round 1) by Brian Dys (@briandys) on CodePen.
Leave a Reply