Description Learning Mode
01 JavaScript warm up exercises & intro to data structure Text / Video
02 JavaScript events Text
03 JavaScript event - let's create a scroll indicator! Text
04 JavaScript event - keydown and keyup events! Text
05 Our final project - sound effect kit with keyboard events Project
06 Final touch on the JS project with dark light mode in plain CSS & Learn Git command (Yes! Let's practice typing in your terminal!) Text / Video
07 Woohooooo You've made it !😃😃 Reflect on what you've learned in the last 20 days, do you enjoy coding? Share your projects on Twitter! Celebration!

Day 1: JS Exercises & Intro to Data Structure

Challenge One:

Fix the code below

  function incrementItems(arr) {
    for (let i = 0; i < array.length; i++)
      arr[i] === arr[i] + 1
    return array

The intended behavior is to increment by one but why is this function not working? Can you fix this?

For example: Input ➞ Output

  incrementItems([0, 1, 2, 3]) ➞ [1, 2, 3, 4]
  incrementItems([2, 4, 6, 8]) ➞ [3, 5, 7, 9]            
  incrementItems([-1, -2, -3, -4]) ➞ [0, -1, -2, -3]                
Credit to Edabit

Challenge Two:

Given an array of integers, write a function to decipher the message and return a string. You can assume that the input array will only include integers!

If it's too easy for you, can you write a function to turn the string into an array of integers?

For example: Input ➞ Output

[72,101,108,108,111,33] ➞ "Hello!" 
[67,111,100,105,110,103] ➞ "Coding" 
[74,97,118,97,83,99,114,105,112,116] ➞ "JavaScript"
Hint 1 Hint 2 Hint 3
Text Video

Attention ⚠️: In the video 'How Does JavaScript Work', Andrei mentioned terms such as call stack, callback queue, event loop, memory heap, ...etc. These are a bit more advanced topics that require some time to fully understand, so please don't feel discouraged if it doesn't make sense!

Day 2: JS Events


Please take some time to try out these exercises in your code editor to consolidate your knowledge about JS events

If you are stuck, check out the common beginner mistakes !

Day 3: Scroll Event


Day 4: Keyboard Event

Text Demo:

Day 5: Sound Effect Kit

Text Video

Day 6: Final Touch & Git Command

As promised, I want to share with you a cool CSS trick to mimic the dark / light mode effect!

You can check out the LIVE DEMO here!

The key is to use mix-blend-mode and change the opacity of the overlay element when the input is checked! Crazy right?! The emojis are simply pseudo elements.

However, when you inspect the elements, do you notice any potential issues with this CSS styling?

Why did I put z-index on input? What if I didn't ?

laughinig kit screen shot here

Text Video

Git is really hard to master! Typing in the terminal / pushing your changes to Github seems daunting, but it's an essential skill for any developers!

Day 7

OMG! YOU MADE IT !! Let's celebrate together!

I would love to see what you've created!

Share your achievement on Twitter with one click. 🎉 🎉

GIF video

What's Next?