Wes Bos says you can complete these activities in a variety of ways. He provides a video with the activity overview, then you can pause and attempt it, or you can continue watching the video for their process and then attempt it on your own. For Day 1, three of us decided to take on the challenge together. That challenge was creating a Drum Kit where if you hit a specific key on your keyboard, it would light-up, make a sound, and return to normal.
And above is the result! The solution only needed about 20 lines of script, but it was excellent practice for CSS class types, querying from the DOM, and adding eventListeners. We hit two points of notability.
- A typo in the word transform. It was ‘tranform’ for about 30 minutes before the bug was found. I took away a reminder to do a thorough and slow code review before trying too many new solutions. Many were not necessary and time could have been spent more efficiently.
- As mini activities, the code is short, so Wes Bos contains their script in their html file. But anything longer than a few dozen lines can get very messy. So we decided to move our script into its own file in order to allow for scalability and legibility.
From start to finish, Day 1 took a little over a couple of hours. This certainly could have been done faster. That typo! But we also spent time looking into best code practices and documentation on potentially deprecated code and thought through changing the file structure and simplifying our solution code to be as clean as possible. It was time well spent and a good hands-on practice working DOM elements.
Day 1 was a fun, satisfying challenge that provided practice and a decent amount of achievable challenge. If you want to check out the code, here’s my repo: I’ll be adding 29 more soon!