I have to admit, when we were doing the JavaScript module in bootcamp it was tough. Half of the time I had no idea what was going on, we had just learned Ruby and Ruby on Rails and making the transition to learning JavaScript felt like such a 180. When I feel like I'm not good at something my reaction isn't to avoid it, I want to master it out of spite! Since practice makes perfect I decided to take on #JavaScript30.
I will be blogging about the challenge but making an individual post per day is a bit excessive to me so the plan is to do 5 days per post.
You can check out this GitHub repo for my code! Each day will be uploaded into it's own file.
Day 1 - JavaScript Drum Kit 🥁
GitHub
The first day of #JavaScript30 is making a fun browser-based drum kit that is triggered by keystrokes. This is accomplished by correlating the key on your keyboard with a data-key which uses data atrributes to hook up the audio and the CSS for the 'playing' animation. Wes Bos has a great resource keycode.info which gives you the number associated with each key on your keyboard.
In this exercise I learned about data-* attributes and transition events, as well as the important reminder that when you have an array of events you can't listen on all of them at the same time. You have to exclusively loop over every element and attach an event listener.
To customize this project I swapped out the provided background image with a 35mm photo I took at Jay Pritzker Pavillion in Millenium Park a few years ago.
Day 2 - Clock 🕐
This was a fun exercise that combined CSS and JavaScript to create a working clock. I learned about transform and transition in CSS, which I have never really worked with before, and used them in conjunction with JavaScript. A quick simple exercise before I went to a Memorial Day BBQ!
Day 3 - CSS Variables and JavaScript
Ok definitely learned some things about CSS and how to manipulate it with JS today plus some more about data-* attributes. Like how you can just set them to pretty much anything and how the dataset is an object that will contain all of the data attributes from that specific element. It takes everything that has data-* on that element and puts it into an object for you, super cool!
Day 4 - Array Cardio Day 1
Whew! This was a fun challenge. I definitely needed the practice working with arrays and am glad this is a part of the series. During bootcamp we did get a lot of practice with map and filter but I had not done a lot of work with reduce before. It is so useful! This exercise also had some great practice with ternaries which are my favorite!
Day 5 - Flex Panel Image Gallery
I loved this one! I had been meaning to learn more about flex in CSS and this was a great exercise. Wes Bos really makes it look so easy. One thing I learned was that an element in CSS can be both a flex item and a flex container. I also really like how this exercised combined CSS and JavaScript to create a dynamic site! I customized mine with Polaroid images I took on a trip to California a few years ago.
I'm really glad I took on #JavaScript30! The videos are fun and easy to follow along with and have clear direction. I'll be posting again in 5 days about the next five parts of the challenge.
Top comments (3)
Hey Alexandra! I found this article a great read and look forward to your journey. I just started the JavaScript30 yesterday to further my skills in JavaScript. Best of luck to the both of us!
Awesome, thank you! Good luck with JavaScript30!! Feel free to message me if you want to chat about it further :)
Will do! thanks for friendly reach!