Crouching Tiger, Hidden Search Bar

You ever wonder how you can just make things disappear? Well I am not a magician but I am a coding student at Flat Iron. So with that knowledge I am going to do just that; teach you how to make things disappear in JavaScript.

For this trick I am going to use an app I made called Top Blog. It is a Single
Page Application(SPA) where users can write blogs and also like them. The blogs are displayed in the order of most likes. Since it may be hard to find the blog you are looking for once the database becomes more populated, I have added a search bar. The search bar does not always need to be displayed to the user, therefor we are going to need a way to make it disappear!

Without going to far into our file structure the important line we are looking at is Line 18. This is where we are setting this div to the id of “bar”. So everything that is contained inside of the bar div can be manipulated through our code.

Since we have have defined our bar div in our html we now can create functions where we call on the element by the ID of “bar” As seen in the functions hideSearchBar() and showSearchBar(). As the name of the function suggests in hideSearchBar() is where we make things disappear! This is achieved by calling CSS on our “bar” node .style.display = ‘none’; is setting the CCS on that node to not display to the view. To make our node reappear showSearchBar() is blocking the CSS that has been set by hideSearchBar() resulting in the search bar reappearing.

While the search bar is active we can see that the “bar” node’s style is set to block.

And while it is hidden, bar’s style is set to display none. That's what it all looks like but we skipped ahead a step so we could visualize it.

Further down in the index.js file we need to call this function so our code knows when to use it. That is the the big question here When? Well we would like the search bar to only be visible when the list of blogs is also visible. That occurs during two events: When the page loads (Line 36) and when the blogLinkEvent() occurs (Line 27). So we call our showSearchBar() function inside of these events on Lines 31; when we click to list the blogs and when “DOMContentLoaded” occurs when the page loads Line 38. Bring us to the disappearing act. As apart of formLinkEvent() when we click to create a blog along with the form for creating a blog we also hide the search bar on line 21. This alone is just a small fraction of what you can do with JavaScript. Well that’s enough from me time to take my leave.