This was the most challenging project of the semester for me. I struggled with it a great deal and it was difficult not to become discouraged. This one, more than any other projects, I wish I had more time with.
The first hurdle was dealing with aesthetics/themes/content. First, I had an idea that the content could be Super Mario-themed. My plan was to use the sounds and images of Super Mario as part of the soundboard and whack-a-mole JS30 challenges. I had hoped to find a bootstrap theme that would be a nice fit but quickly found difficultly importing my JavaScript into several different themes. Worse, I was struggling to present them appropriately as they were often broken due to to the various themes' layouts. My project quickly began to spiral out of control. My project quickly devolved into mess of indexes, multiple Bootstrap themes and broken code everywhere.
At that point, I decided to follow the wise advice found on our class website and keep it simple. This led me to implement the Bare Bootstrap theme. Due to limited time I had, I didn’t get to truly work on the aesthetic of the website but did managed to complete three JS30 challenges and make them functional.
With my bare (literally and figuratively) Bootstrap theme in place, I began incorporating my JavaScript code and troubleshooting accordingly. In all honestly, I had a terrible time following along with the videos while working throw the code. Wes speaks so quickly and the videos don't really highlight well what files he's specifically working on and how they're connected. More often that not, I found myself googling and searching for additional info - specifically, what code was needed where. I spent a great deal of time placing, editing, and deleting code and often found better learning resources outside the JS30 videos.
Mercifully, the soundboard worked fairly easy for me. I was able to change the colors via css as well as the sounds themselves. The whack-a-mole script gave me a tremendous amount of grief. I wasn’t able to incorporate it into my bootstrap theme with the same ease as the soundboard. I eventually discovered that when it was hosted in its own folder and had its own css, it worked fine. In doing so, I was able to replace the images and make them Mario-themed. I truly wish I had a bit more time with this. I feel a little more time to edit the svg files and I'm confident I could have made them correspond better, rather than being slight off to one side. It now occurs to me that the svg files would be edited together on the same canvas for proper sizing, rather than attempting to manipulate the javascript. Never the less, it works if you're super precise!
I’m most proud that despite my struggles, I didn’t not give up. With hindsight, I wish I had simply hand-coded a HTMl site instead of using a Bootstrap them. I know most, if not all of my problems were related to the existing css style sheet for this theme. I even learned a few non-java tricks like using the "!imporant" tag which I used to overide the template's font theme with a google font. (Please forgive me, it's pretty un-readable but I think it fits the arcade theme.) Also, when working on the canvas, I realized I needed a border. I quickly learned I could set border sytles in the css sheet and am delighted by the dotted border that surrounds the canvas.
I learned that JavaScript does not come natural to me and I made my work far harder for myself than I should have. I do feel like I have a glimpse of what is possible in accomplishing the JS30 challenges in that I can piece together how JavaScript works should I need to pull code elsewhere to import into my work. I’ve certainly learned how to make a nice little soundboard, re-design the whack-a-mole game and a drawing canvas!