My JavaScriptmas Journey

Eric Zumwalt — Sun, 20 Dec 2020 22:51:41 +0000

Coding through the Advent season

I had the fortune of working through the Scrimba JavaScriptmas challenge this year and thought I could dedicate my first Dev.to post to my solutions as well as what I learned along the way!

The challenge is drawing to a close, and I'm already anticipating what cool things will be in next years challenge

Pretty simple layout here: each day is listed out below along with the link to my solution and any notes I had from the challenge. Leave a comment if you learned something or have insight on how I could improve my solutions!

tldr; If you're just perusing my favs are Days 1, 6, 7, 8, 15.

AND I am wondering if you have better solutions for Days 9, 11, 21. Comment if you do!

Day 1 - Candies

Link to solution
For absolutely no reason at all I chose to use recursion for this solution. Technically I altered the original function so I could pass in the running count, but hey, recursion needs what recursion needs what recursion needs .....

Day 2 - Deposit Profit

Link to solution
Simple for loop here, with a bit of compounding percentage math.

Day 3 - Chunky Monkey

Link to solution
I became more familiar with how the slice() method worked on this one. Particularly that the second argument is not the amount of items to remove, but where to stop.

Day 4 - Century From Year

Link to solution
Went for a sweeeet one-liner here using Math.floor() and the modulo operator. Learned a bit more on what Math.floor() returns when the argument passed is a decimal.

Day 5 - Reverse A String

Link to solution
Nothing fancy here, but it was good practice with some common string / array methods and how to move between the two types.

Day 6 - Sort By Length

Link to solution
Did you know you can pass a function to the Array.prototype.sort() method?? You can, and it will make you feel like you have super-powers...

Day 7 - Count Vowel Consonant

-Link to solution

Fair warning, I got a bit flashy on this one... a RegExp && reducer in the same solution?? 🤓 This was a fun one to work through. I've used reducers in React before, but never in the wild!

Day 8 - Rolling Dice

Link to solution
This was a challenge... not just JS but some CSS as well. I used data attributes, multiple Math methods, and some DOM manipulation. Things like this are great practice for real world scenarios.

Day 9 - Sum Odd Fibonacci Numbers

Link to solution
This one took a lot of finagling on the logic to get right. Having to generate a Fibonacci sequence in the function, determine if the current step was an odd number, and if so add it to a running total...

Day 10 - Adjacent Elements Product

Link to solution
Somewhat simple logic here, but another great example of making yourself think of a problem the way a computer does. Step by step until the solution is found, then quick --> return!!!

Day 11 - Avoid Obstacles

Link to solution
I got to learn about the every() method on this one (never used it before). It was also fun to figure out how to make sure the loop ran until it checked up to the value of the largest entry and didn't just run for the length of the array.

Day 12 - Valid Time

Link to solution
Used our old friend RegExp on this one again! Not for the official solution, but for the format check I added 😁.

Day 13 - Extract Each Kth

Link to solution

Uh-Oh! Truth time ... In reviewing these for the blog post I found my solution for this one was correct, but in the wrong way 😅; meaning I got the correct solution but not what the problem was asking. Let me just clean it up real quick ...

Alrighty, all fixed! I had originally been testing the item at the current position in the array to see if it was a multiple of the index provided instead of checking the position. This worked in the original test case as the items needing removed were also multiples of the index provided.

Day 14 - Maximal Adjacent Difference

Link to soultion
Math.abs() was the hero on this one. I had no idea Math went to the gym! Nice abs Math... very helpful.

Day 15 - JavaScript Carousel

Link to solution
Another great real-world challenge! I added some 'flare' on this one by using IntersectionObserver to work the little dots under the slider, indicating which item in the carousel you are on. IntersectionObserver is super handy. Always there, always watching ... 😳

Day 16 - Insert Dashes

Link to solution
Another chance to split() things apart and join() them back together. The challenge here was really that you can't let a dash land after a word boundary ... that's the spaces space.

Day 17 - Different Symbols Naive

Link to solution
I started to add fun things like 'null checks' and force the input to fit the type needed on this one. For the actual solution Set() was the shining star. Gotta make sure each item is one of a kind!

Day 18 - Array Previous Less

Link to solution

Ignore the extra tests again, I just added them to look cool 🤓

I opted to reverse(), then check, then shift() for this one. I was familiar with shift() before hand, but I have never used it before in my coding, so another opportunity to learn!

Day 19 - Alphabet Subsequence

Link to soution

I hope you're enjoying my terrible grammar and wordplay in the catches and var names. If not, I am so sorry. I'll go sit in the corner now...

This JavaScriptmas challenge has definitely taught me a lot about array and string methods! Example: on this one I learned that sort() changes the original array and returns a reference. That became clear to me as I was working through the solution for this one.

Day 20 - Domain Type

Link to solution
I love switch statements ... probably too much, so this solution got one. Thanks to the previous challenges I was becoming pretty comfortable with array methods at this point so the solution wasn't too difficult.

Day 21 - Sum Of 2

Link to solution
Thought about this one for a bit, and in my mind there was no way around having to add each number in both arrays to get a solution. The question was do I add them all and then check if the value was there or check as I go? 🤔 I went with option number B.
My solution included nested for loops, but I am curious if there is a faster way. ? Drop a comment if you have a different approach!

Day 22 - Extract Matrix Column

Link to solution
This was an example of what makes the JavaScriptmas challenge so great. It's not about solving exceedingly difficult problems, for me it's more about being able to quickly identify how you might solve the problem and then start implementing that line of thought. Get out of your head, stop overthinking, use your smarts to get a base idea and then run with it!

Day 23 - Social Media Input

Link to solution
Tracking user input and adjusting DOM elements based on it is a very valuable skill, and that's exactly the practice this exercise gives. I threw in a few extra CSS animations for fun, but tried to keep the JS focused on what was needed for the solution.

Day 24 - Test Your Agility

Link to solution
Whoa, this one made me stop and think hard. It was a blast learning how to work with async await in order to keep / stop a running timer. Before this I only used async functions to initiate a fetch! Cool use case...

Well,

That's it for this year's JavaScriptmas! Learned a lot of cool things over the course of completing the challenges. Can't wait to see what Scrimba has for us next year!

DEV Community: Eric Zumwalt