Day 26 to 30

This is a series of posts going over the free JavaScript 30 course by Wes Bos that gets you to work through 30 vanilla (no framework) JavaScript ideas. Each post will cover a few days from the course. This is totally free and well worth taking a try at. As someone who hasn’t used JavaScript much in the last few years it was a great way to get myself rolling again and see all the cool things you can do with what’s built into the browser!

For reference each of the day comes with a set of files to start from - CSS and HTML was prebuilt. I just added the JavaScript.

Day 26 - Stripe Follow Along Nav

• we created a follow along nav like Stripe and when you hover on an item a larger dropdown opens
• entering the hover has two parts, we add a class first and then after a timeout period we add another class. This allows us to be sure they are hovering for a bit and also allows us to show a nice transition effect
• when they leave we just remove the classes

Day 27 - Click and Drag

• this one we worked with some complex CSS to show an accordion like page
• we used a lot of coordinates, offsets, and scroll information to make this all work

Day 28 - Video Speed Controller

• another example using the video element, this time we wanted to be able to speed up or slow it down using a slider
• to accomplish this we used the playbackRate property on the video element
• we also setup a ratio between the slider and the min and max playback rate we defined

Day 29 - Countdown Timer

• we used setInterval and clearInterval to create a countdown timer
• this is another case where string literals came in handy to break apart the minutes and seconds
• also did some work with the ternary operator to help with adding the leading zero when needed

Day 30 - Whack A Mole

• the final day we built a little Whack-A-Mole game!
• we used random to somewhat randomize where the moles will pop-up but with only 6 spots it’s not very good so we added a check to make sure it’s not the same hole as before and this helped
• the isTrusted property on the event let’s you know if the click was from the user or something else like a script