How to hide information with an event listener — JavaScript
With this blog post, I intend to explain a part of my first Flat Iron School project that I had difficulty getting to function as intended. My project was to create a Single Page Application (SPA) that would communicate with a public Application Programming Interface (API) to do something. That something was left up to me and I decided to build a very simple SPA that would display information taken from an API about Star Wars (https://swapi.dev/). The project required me to create this SPA that communicated with an API but the SPA must-have event listeners that the SPA user could interact with. An event listener is simply a procedure in Javascript that waits for an event to be called. An event is simply something that the user does on a website and that “thing” that they do is tied to a callback function that in turn creates an appropriate response for the event. The most common event that users unknowingly use daily is the “click” event where the user uses their mouse to “click” something and see a response happen on the website in real-time.
For my project, I decided that the three-event listeners I would use would be as simple as possible. Since I am new to coding I did not want to create a project that would be overly complicated. After all, would be my first time creating something like this so I wanted it to go as smoothly as possible. I very quickly realized that as a software engineer things seldomly go smoothly or as according to plan. I decided that I would use the event ‘click’ three times for my project and that all my project would do is display info, hide info, and submit comments that the user left at the bottom of the website. It sounded simple enough and I even had bigger ideas as to what I wanted the SPA to do with those event listeners, but as I continued I realized that the best options are usually the simples ones so I decided that the website would load with all the data, there would be a button to hide the data, and then another button to display data.
To create an event listener that would hide the information automatically displayed I first had to go into my index.html file and create a <button> element in the appropriate place and set that element with an ID. Once it was created I switched over to my index.js file where all my javascript code was located and began creating a variable and setting that variable equal to the unique ID created for the button. Once you have your variable created you simply append an event listener to your variable by writing `variable.addeventlistener(‘event’, ‘callback function’)`. The ‘event’ i chose was determined in the beginning as ‘click’ and the most important part of the event listener is the callback function. Within the event listener, I created a function that would first create a variable that I would set equal to the class name I created earlier in my javascript code that was set to house all of the data from the API. The next step was to set up a ‘for’ loop that would start at the very first object within the API, then to set the loop to stop at the end of the data set, and finally to have the loop move forward until it ended. The last step in the code block was to set a loop to change the display for each piece of information that went through the for loop. To change the display I appended my variable to ‘.item(i)’ and then continued to append that to the style then append style to display and finally to set the display equal to “none”. Once that was completed all that was left to do was test it out to see if my code was correct!
