Course overview
The JavaScript course was my first hands-on experience with working with the JavaScript programming language, and the DOM (Document Object Model) to query, retrieve, and alter objects on webpages. Using the DOM I learned how to select document objects, setup event listeners, validate data, add classes, add/remove attributes etc.
course reflection
JavaScript is so important to learn because it’s what powers all website out on the internet. Website features such logging into websites, playing videos/audio, animations, live chat, hiding content, clicking buttons, etc. is all JavaScript at work. Combine JavaScript with the excellent HTML and CSS programming languages, and boom! You got interactive and “living” websites that make the internet so much fun to use!
It’s also fascinating to learn that you can use JavaScript outside the browser through the use of Node.js. This allows you to control the environment and also take advantage of plugins such as Babel: a tool that converts modern JavaScript into old JavaScript that can be read by older browsers, and Webpack: a plugin that helps bundle modules. Two very effective plugins that change the game up drastically!
I also learned how to properly call, resolve, and process data returned from an Application Programming Interface (API) and display that data on the website using the DOM. Some examples of APIs used in the course:
- Google Firebase – Retrieve, add/remove, and alter data for user recipes and To-do lists.
- OMDB – Retrieve information regarding movies such as release date, plot, actors, etc.
All in all, the things I’ve learned in this course will help me drastically going forward, as these are very important skills that will help me in the software development industry.
The dropdowns assignment
In this assignment, I had to utilize dropdowns to group content about a specific topic. When I first started I was cruising along until it came to the part where I had to remove the “active” class from the all dropdowns except for the one selected by the user. The active class is used to show the content and when the active class is removed, the CSS sets the display for the dropdown content to none in order to hide it.
Now, the problem I had was I keep mixing up what the “this” keyword was for and keep assuming it could be used on all the dropdowns. Well, I soon realized that the class to toggle the “active” dropdown iterates through the dropdowns one at a time. Meaning, the “this” keyword would only work on the user selected dropdowns and not all of them like I originally thought. Going back and looking at a few other assignments and watching some course videos again, I realized I needed to use a forEach statement on all the dropdowns, and then remove the “active” class that way. Then I could apply the “active” class to the user selected dropdown.
Zach Birrell 