It’s JavaScript time. Taking the next adventure in my coding journey and beginning a new language was at first exciting but also was daunting. At first I was excited. I know JavaScript is one of the most popular languages and I am sure most, if not all, employers are looking for someone with experience with JavaScript. I have seen videos of people making full websites with it as well as games and other useful programs.
As we began to learn more and more about JavaScript the more I began to enjoy the functionality, the ability to make dynamic websites that did not need to reload a new page to display new data, and it opened a ton of possibilities with event listeners to really make the UI experience for the user responsive and exciting. As we moved into project week I wanted to do a callback (no pun intended) to my first CLI project, a covid-19 tracker app.
I could see the website in my mind very clearly, I wanted a map of the United States and allow the user to click any state they would like and after the click all the covid information such as; total cases, new cases, deaths, etc would display on the page. Then with the power of JavaScript the user could simply click another state and the process would go again with that state specific state’s covid data. Sound simple right? Well, like a true beginner, I thought this would be a easy project to demonstrate my skills with.
I knew the plan I wanted, but the only aspect I was worried about was the map that would allow me to create event listeners per state. I knew I needed event listeners, which would then call on a function specifically for that state, I would also need to perform a fetch call on a external API to gather all that data. I was searching for my API to use and found one that also came with a map to use! Hooray! Google to the rescue to help me solve a problem I knew I would have trouble with!
I quickly built out my internal API using ruby. Luckily ruby allows the user to input — — api only to the end of the a new project command to only give me the files I need for the backend. This kept my files organized and I created two models, a state class as well as a comment class.
Both of these classes would help me fulfill the basic MVP requirements for the project. Allowing the user of my program to leave comments on a specific state would allow people to communicate specifically about a state. Think of it like a NextDoor app, but for whole states with COVID as the focal point. The state class would has_many comments and comments would belong_to a state.
As I was confident my backend was set up it was time to move to the front end. I was excited to get started with my external API and map all ready to go! I copied the files from the API to allow for a clickable map. Instead of making 50 different event listeners for each state i wanted to iterate through the API to create the event listeners while loading up the DOM. Unfortunately, the map that was provided was inside a <Iframe> tag. After struggling to figure out how to access the Information inside the iframe tag to be able to iterate through it, I learned iframe is basically like a html file inside a html file and if you’re not hosting that iframe tag, you won’t be able to manipulate that iframe tag. So I had to abandon that idea.
Instead I turned to buttons. Not as visually appealing, but this project is to demonstrate my understanding of JavaScript rather then making a pretty picture on the screen. After my fetch call to my external API I iterated through the hash to create specific buttons for each state, and equip an event listener to each button to my getCovidData function bringing along with it all the state information my function will need to identify the right hash to pull and display.
It was amazing to see my once CLI project that was displaying in my terminal come to life on a webpage. Seeing how dynamic it could be with all the buttons giving the application all the tools it needed to find the correct data was very encouraging.
Now it is time to implement comments!
According to our project requirements we needed 3 different fetch requests. And at least two of those requests needed to be from CRUD functionality. So my obvious choice would be to have a read request for all the comments as well as a create request for a user to add a new comment. Sounds easy enough. Boy was I wrong.
As I began to write out my read fetch request I had a very big issue, there was no way for my application to know/communicate to my backend what button was clicked, and that would make it impossible to get that state specific comments. After trial and error for what felt like weeks, I had to seek advice.
Do I scrap comments all together and find a new relationship to the states? Or do I make a general comment section then add a users model to my backend and have users be my has_many relationship?
I liked the idea of the second option, and would like to do that as a stretch goal, but having the states have their own comment section was one I felt was better to demonstrate my learning.
After talking with my cohort and my lead I figured out I will need to have a second event listener to my button, to call my getComments function. Since JavaScript is so powerful it would be able to take in both event listeners and return both at the same time, got to love that asynchronous JavaScript!
This fixed my issue of not providing the correct state to my function to access the correct data. After overcoming that problem, it was time to set up a post fetch method to create a new comment. After some playing around and realizing I wasn’t sending the request to the correct route I got it working just fine. Yay!
One of the last requirement was that it has OOJS. So I began refactoring to create specific comments within my comments class.
My take away from this phase was how powerful JavaScript is in creating dynamic websites that allows you to create an amazing user experience as opposed to having a static webpage or requiring to have multiple static webpages. Of course static pages still have their use, but JavaScript opens a whole new world of possibilities. I can’t wait to learn more and get more comfortable with it as I continue to experiment and learn more about this language!
