It's been about a week but I have finished the 2nd challenge of Wes Bos's JavaScript30. Realistically I finished this challenge in about 5 hours spread across 3 days. I thoroughly enjoyed this challenge more than the drumkit which is extremely surprising considering how different the levels of interactivity of the finished products are.
Starting the challenge was a bit different than before since it was obvious this challenge included doing a bit of CSS work. Mostly obvious because it was in the title...but also because Wes stated it in the beginning of the video. Unlike the Drumkit, this video began and, after about a minute, it seemed as if there would never be a pause or a safe spot to pause so I could start coding myself. I decided to just stop watching and start the challenge (it wasn't until I was finished and watched the video to completion that I realized he did give a spot to do some coding on your own, but I didn't want to take the risk).
My CSS (top) Wes's CSS (bottom)
After figuring out the CSS of angling the hands relatively quickly, I started on the JS code. I immediately grabbed each clock hand with document.getElementsByClassName and googled how to get the current time/date with Date(). Then I remembered how to set an interval from a previous lesson and had set the console log to log out hours, minutes and seconds respectively. And then I hit a wall.
I realized I had ZERO idea how to actually make the hands move but I knew I had to get them to move X amount of degrees and decided I would work out the math later and focus on just getting them to do anything every second. I spend hours thinking about how I could do this while I was away from my laptop. I googled, I talked to ChatGPT, I phoned a friend...and eventually came up with a function that rotated the second hand (pretty wildly at first).
After getting the first hand to move it was easy to get the others to move as well. I eventually named and colored the hands differently so I could tell them apart (kind of like how you would apply a border to every container while figuring out how to use flexbox). I also realized I was a complete fool by thinking the math would be the easy part of this challenge. I wrote out my own equations, came up with my own answers and basically had to throw out everything I came up with. I looked at ChatGPT's idea for a clock and tried that and it almost worked. I did eventually realize that I was overlooking the fact that the hands initially started at 9 o'clock and I had to factor that into the equation...yeah...
Alright...alright...this is getting wordy...but I DID figure this out my own way. No I didn't make a smooth transition like Wes did in his solution...but GUESS WHAT WES MY CLOCK DOESNT BUG OUT AT THE END OF EVERY MINUTE LIKE YOURS!!! okay...this isn't a competition but I still consider this to be a win for me!
Well...it's time for me to start the next JavaScript30 challenge so I'll see you again for the 3rd iteration of this...journal(?)...blog(?)...whatever this is with: Playing With CSS Variables and JS!
Top comments (0)