JavaScript Practice with #JavaScript30
One of the things I was greatful for after my interview was being told I could have a week to practice before I get my coding test. I wasn’t told what would specifically be on the coding test, but I was told to practice my Vanilla JavaScript.
Considering it’s been about three years since I’ve worked with JavaScript at all, I decided to go back to something I did enjoying working through, which is a set of exercises called #JavaScript30, created by Wes Bos.
You can find out more about Wes’ course at javascript30.com
Basically, the challenge is to work on one video a day over the course of 30 days, learning how to use Vanilla JavaScript over time. I’ll admit, I’ve never actually made it through all 30 days of the challenge, but I do remember enjoying the challenges and felt I learned at lot from the ones I was able to complete.
And to get some more GitHub practice in, I created a repo to contain my solutions as I work through the challenges. This was what I was having so much trouble setting up in my previous post in Visual Studio Code. Luckily, once everything is set up, you just have to add, commit, and push your updates to the repo - so things worked out well in that respect.
Anyway, back to JavaScript!
I do remember the basics, which is what Wes has you work through with the Drum Kit, Clock, and CSS Variable exercises. I did have to look up how to fix the visual glitch with the Clock since I was completely lost on how to even set that up. I knew you had to select the hand and tell it to continue around the clock instead of resetting to 90 degrees each time for each hand, but putting that into code had me stumped.
I usually blame my lack of sleep for not being able to code or figure out simple math, but this time I really wasn’t even sure where to start outside of selecting the seconds clock hand with document.querySelector. And I wasn’t sure how to ask AI for help since I didn’t have enough of a foundation to set up my code to find any errors with it.
And I will say, it takes a LOT to admit to not knowing how to do something. It doesn’t make you stupid. It doesn’t make you slow. And it doesn’t mean you don’t know how to code overall. It just means you don’t know how to figure out this particular problem, so you need a little extra help.
So I used my Google Fu and found a Medium post by Mike Ekkel that helped me out!
I realized I was along the right path when I knew to select the seconds clock hand and tell it not to reset to 90 when it reached the “12” at the top of the clock. I wasn’t selecting the degrees I needed correctly (I was doing 450 degrees and not 90 degrees, but I think it could work that way too) and I wasn’t explicitly setting my equals to the degrees I wanted. I also was selecting the incorrect CSS style property. I was trying to reset the transform property and not the transition property. Which when you think about it makes a lot of sense. You don’t want the transform to change since this tells the hand to rotate around the clock. I want to change the transition property so I can tell it how I want it to move around the clock.
Once I saw my mistake and realized how to set up the code, things started to line up in my mind on how to solve the problem. I just didn’t know the syntax for how to do that. 😅 And, as always, the code it pretty simple to solve the behavior of the seconds hand.
Mike continued to go over how to set things up so the hour and minute hand would stop resetting to 90 degrees as well. This was the other glitch I was seeing once the seconds hand was fixed and couldn’t figure out what was happening. Basically, now that the seconds hand was fixed, the minute hand would reset and jump back to the top before going to where it needed to be on the clock face. I thought it was the seconds hand not working at first, but I watched it for 2 minutes and saw it was the other hand that was also resetting too. This behavior would continue with the hour hand too, so you would need to select all the hands on the clock face so they would continue moving around and not reset to 90 degrees.
I knew you could use document.querySelectorAll to select the clock hands, but I wasn’t ready for the forEach loop needed to get the code completed. I’m still getting used to using forEach instead of the regular for loop, so I think practice and time will definitely help out with this.
I used Mike’s setup, and my clock was fixed!
I was able to work through using CSS Variable without any problems, but the area that I really have trouble with came up next.
Arrays…..
I can’t stand arrays. I didn’t have any idea what to do with them before ES6 and now I have even more problems with them using ES6. Wes knew a lot of us would have trouble getting used to working with arrays and created a section called “Array Cardio Day 1” so we can used a bunch of loops and methods to get some good practice in.
The majority of my code is covered in comments telling me how things work. And I’m nto planning on removing ANY of it! Because I need to not only know the syntax of how to set up my code, but understand how the code ACTUALLY WORKS. So as much as people tell me to remove comments from my code, they’re going to stay here for this exercise.
.filter(), .map(), .sort(), and .reduce() were all covered in this set of exercises. I understand how they all work now, but still have some trouble figuring out which one to use and when.
As a shorthand, and from what I understand:
.filter() is exactly what it says - it filters out what you’re looking for dependant on the rules you set
.map() loops over every item in an array and creates a new array with the results
.sort() is like it’s name - it sorts the array based on the rules you set
.reduce() is a little tricky, but it returns “reduces” the array down to one value, needs to be set to 0 for the loop to work correctly, and doesn’t work on empty arrays
For example, one of the exercises was to add up the amount of times a word repeated in an array using reduce(). Here’s what my code looks like at the end of this exercise:
So many comments to explain a little bit of code 😅
I listened to Wes go over this at least three times so I knew I understood what was going on with this exercise. (I also want to add - my notes are written so I can understand them. I apologize if reading them makes your brain hurt, but they do make sense to me. 😁)
I know these methods will come up again in later exercises so I’m glad I was able to get in some practice with them. I’m also hoping my notes come in handy for when I need to decide which method will be the best one to use to solve a future problem.
Hope this helps others in some way! As for me, I’m off to practice more JavaScript.
Happy coding! 👩💻