This week we learned about components! This will be laying the foundation for when we get into React next week. We learned that components are essentially blocks of reusable code that include the HTML, CSS, and JavaScript. You can create a function that creates DOM elements that then get rendered to the web page. But those elements made with each call of that function will all get the same styling! Pretty neat! This helps make your code a lot more DRY (do not repeat yourself). To practice, our project was to make a simple “newsfeed” by creating article components so that each article would look the same.

We also learned about asynchronous JavaScript this week, with Promises and HTTP requests. We learned how to use axios to make an API request to get data from a server! JavaScript executes its code synchronously, in order from left to right, top to bottom. Asynchronous code gets executed “out of order”. For example, when we request data from a server, you usually want to then do something with that data in the code that follows. However, it takes some time for that data to come back to you. In order to make sure the rest of your code “waits” for the data before executing, you can declare the function to be asynchronous and tell another block of code to wait. For our project, we use the GitHub API to request public user profile information and created component “cards” populated with the data we received.

The Spring Challenge this week required us to create component functions for a mock news site, perform an API request, and use the received data to actually create the components. I was able to finish quickly, in about 45 minutes, and spend a good 2 hours on the stretch goal! The stretch assignment was to create an image carousel. My overachiever self wanted to make the component function more dynamic, so I spent probably too much time figuring out how to do an XMLHTTPRequest to figure out how many images were in my images folder, instead of hard coding them all in. So I ran out of time during the 3 hours to actually make the carousel functional, but I was able to make it so that the images were displaying, and would always display all the images in that folder even if you added/deleted some images from it.