DEV Community

Justin Lowen
Justin Lowen

Posted on

JavaScriptmas 2020 with Scrimba

There are a lot of exciting ways to engage with the software & technology community, particularly in December. There are many platforms which offer interesting coding challenges to improve your dev skills, and often they put a holiday spin on it to engage learns.

Scrimba is a unique learning platform with an emphasis on frontend development and technology which differentiates itself by giving you ability to seamlessly code inside its tutorial videos. It gives you the ability to fiddle with the code the instructor is discussing it see its impact live in a simulated browser inside the video. They just wrapped up their 24-day Advent challenge called #JavaScriptmas. It was a lot of fun and they offered some great prizes for participation including membership giveaways, cash prizes, and certification for completing the challenges.

I just completed Scrimba's Frontend Developer Career Path this year which covers 14 Modules going in depth in topics such as HTML, CSS, and Javascript. You also go deep into the React frontend library and build some amazing projects to really exercise your skills. You can see some examples of what I learned from Scrimba on my portfolio site! Scrimba can help you quickly get your coding skills career-ready.

The JavaScriptmas Challenge covers foundational skills in JavaScript particularly algorithms which is a critical skill to build as you prepare for frontend interviews. Challenges are approachable for any level, and you can still go back and complete this year's challenges and earn yourself a nice certificate to show off πŸŽ„. Some challenges allow to test your design skills, making an interactive page or game.

The final day in particular was really fun - you are tasked with making an interactive game with JavaScript - testing user's mouse clicking agility! The challenge tests your ability in DOM manipulation, event listeners, and async-await - all important concepts for aspiring frontend developers.

Test Your Agility Game

Code Sample From the Challenge

const spin = async () => {
    let currentNumber = 0
    while (!pushed) {
        currentNumber = currentNumber + 1 <= 100 ? currentNumber + 1 : 0
        spinningElem.innerHTML = currentNumber
        await sleep(difficultyMillisec)
Enter fullscreen mode Exit fullscreen mode

My solutions for this year's challenges are included below! Let me know if you try it out - we also have a great community on Discord, you should check it out!

JavaScriptmas Solutions:
Day 1 - Christmas Candy: Modulus Math
Day 2 - Deposit Profit: Find Years For Target Balance
Day 3 - Chunky Monkey: Make Nested Array from Flat Array
Day 4 - Century From Year: if-else & math
Day 5 - Reverse a String
Day 6 - Sort By Length: Sorting Array by String Length
Day 7 - Count Vowel Consonant: If-Else Logic Within String
Day 8 - The Rolling Dice: DOM Manipulation & CSS
Day 9 - Sum Odd Fibonacci Numbers: Iteration or Recursion
Day 10 - Adjacent Elements Product: If-Else or Reduce
Day 11 - Avoid Obstacles: Array Algorithm
Day 12 - Valid Time: String Methods
Day 13 - Extract Each Kth: Filter With Modulus
Day 14 - Maximal Array Difference: Math Methods and Array Algorithms
Day 15 - JavaScript Carousel: JS DOM, CSS, Animation
Day 16 - Insert Dashes: String Methods
Day 17 - Different Symbols NaΓ―ve: Sets or Hash Table
Day 18 - Array Previous Less: Array Iteration
Day 19 - Alphabet Subsequence: String Methods
Day 20 - Domain Types: String Methods
Day 21 - Sum Of Two: Working With Arrays
Day 22 - Extract Matrix Column: Indexing & Array Methods
Day 23 - Social Media Input: Frontend Development
Day 24 - Test Your Agility: Frontend Development & Games

Top comments (1)

bookercodes profile image
Alex Booker

Awesome post, Justin - I loved the last challenge by Carla, too!

I like that you elevated your solution with an animated background and difficulty variable.

You also improved the user experience by allowing the user to "Play again" rather than reload the page - amazing ✨