This is my first project since I embarked on the intimidating endeavor to learn about the skillsets that entail software engineering. JavaScript is the first programming language I was introduced to, and it was just like learning a new speaking language. There are precise rules to abide by: syntax, vocabulary, punctuation, and even learning how to elevate ones style of writing code. As a novice in computer programming, a little translator had to be embedded in my mind to articulate what I was trying to say in JavaScript, HTML, and CSS lingo. In this post, I will attempt to walk through core challenges I faced.
Explain It Like I’m Five:
The beginning of this project was the easiest: picking a public API that was of interest to me. As stated above, concepts and techniques used will be translated for the everyday person. Application Programming Interface (API) , basically allows an exchange of information between you (user/customer) and the server. An API acts as the middle-man. For example, it’s just like ordering food at a restaurant. The customers don’t go to the chef in person and ask for what they want, a waiter is the liaison between them and the chef.
In this project, I used a public API that warehoused memes. From hereon out, I would have to start building the features of what I wanted to do with the tons of meme data I now have.
Now that I have the data, I want to be able to display it on the page. JavaScript allows a method called fetch(), and the meaning is in the name. We request to the server to bring the data and so we can use it. Part of the fetch method, is (.then()). I was confused with the concept because there are a few steps in retrieving the data you want to use and displaying it.
For example, imagine that you ordered something online. Fetch will deliver the package to you, but .then will help you open up the package and utilize what’s inside.
Now that I know how to load the data of memes onto my webpage, I need to give everything a label. One aspect I had to learn while writing code was abstracting everything. Don’t complicate things further, try to simplify things and keep your code clean so even other programmers can understand it.
Here, I reference the location of data sets within the variables, starting with const (short for constant, which means these values will not change) . I can now refer to these data sets with a shorten version.
Document Object Model (DOM). We use the DOM so we can interact with webpages, so pretty much add, remove, and change things around! Now the document is the webpage, objects are the elements that go into creating a webpage. The <head></head>, <body></body>, <ul></ul>, and so forth. The model portion is a hierarchy of the structure of the DOM. We start with the HTML, branching out to the head and body, then branching further into title, an unorganized list (ul), and other HTML attributes. In layman’s terms, within the DOM, we can change the color of the background of a webpage, size of text, and everything else that makes up a webpage!
Here, it shows that the DOM is actually an event listener. That’s because things take time to load, and JavaScript has to be able to listen carefully to when everything is ready. We use the (document.addEventListener) to execute this role.
There is a lot more code in creating a webpage, but the hardest challenge for me was grasping the concepts I mentioned above. Liking a meme, or clicking an arrow to get to the next page are things we can visually see happen. Therefore, I struggled with understanding what DOM and fetch were initially because it wasn’t something that manifested into a simple heart or arrow. The struggle to create a SPA (single page application) using a public API, was greater than I thought. I had to combine everything I learned, and all parts had to work seamlessly. Even the smallest of mistakes amount to a huge error. Having said that, this project reinforced the important of practicing techniques and skillsets used that were taught in phase 1.
