Bloc Jams
Explanation
As a new student to Bloc, this was my first project and I couldn’t have been more excited to get it started! As a person who uses audio playing sites like Spotify, it was fascinating to see how to implement those audio playing capabilities. After learning about HTML, CSS, Javascript, and jQuery, it was time for me to apply what I learned and incorporate it into Bloc Jams. Throughout the project, if I would hit a bump in the road, my mentor Raj was there to give me hints and help me out if needed.
Problem
This being my first large project, there were definitely problems I had to deal with. The first of which would be organization. For a project like this, I learned quickly that proper indentation is key if you want to avoid a headache. Getting some of the HTML to format correctly wasn’t the easiest of tasks either. However, the biggest issue that I experienced was with the Javascript syntax. My experience with Javascript has been mainly CodeWars challenges that deal with variables that hold numbers. Here, it was new to see Javascript variables hold songs as objects as well as seeing Javascript alter play and pause buttons. With that, the main issue I had was getting the Play button on the Player Bar to play music and the pause button to pause the music.
Solution
Organization - As the project began, I was very eager to get started, and I wanted to finish quickly to see what the end result would be. I found that trying to do this caused a lot of issues with my code. In Javascript there was an instance where I put one method inside of the other because I didn’t notice a curly brace at the bottom of my code. From this, I learned two very important lessons. First, taking a “slow and steady wins the race” approach actually ends up saving you more time in the long run. Secondly, Chrome DevTools is your best friend to find any errors and fix them in a reasonable time.
HTML Formatting - The main issue I had stems back to the organization issue of me trying to do things quickly. On a few occasions, when I would run my code I would see an empty webpage with just the background color set. What had happened is that I made a simple typing mistake. Once again, I learned that slow and steady wins the race.
Results
The end product is a website that utilizes HTML, CSS, Javascript, and jQuery, to replicate the functionality of Spotify.
Conclusion
As I reflect on the project I think the biggest takeaway is how I approach the project. The slow and steady pace that I mentioned earlier is the approach I will try to utilize in the future. I think my eagerness to see the end product is what caused me to take more time than I should have on this project. Nonetheless, I am happy with the end result, because it is bug free and it has a professional look to it that I am proud of. I think what surprised me the most about this project was the amount of code it takes to make a website of this caliber. It seems that a skeleton of a site can probably take a couple hundred lines of code, but to get everything on the site to work and be flawless it takes much more. I can only imagine the size of a Google or Facebook. This is just the beginning of my programming journey, I look forward to the next project!