Week Three
| 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
-
Crash Course Computer Science - Data Structures- (10
minutes)
(Please pay attention to 'Stack' & 'Queue' as you will see these terms in the next video) - How Does JavaScript Work? - (25 minutes)
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
Text- Intro to Browser Events: A List of Most Useful Events
- Intro to Events
- Test Your Skills about JS Events
- How to Toggle Text in JavaScript
- How to Toggle Like / Dislike Icons
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
Text- Scroll Event
- How to Create a Scroll Indicator
- Window Sizing and Scrolling
- Definition of clientHeight, offsetHeight and scrollHeight
- Stackoverflow Discussion: What is offsetHeight, clientHeight, scrollHeight?
Day 4: Keyboard Event
Text Demo:Day 5: Sound Effect Kit
Text- How to Use Data Attributes
- What is <audio> Element
- What Are Attribute Selectors
- What Are Template Literals
- HTML Audio Properties
- What is Transitioned Event
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 ?
Text
- Dark Light Mode with Pure CSS
- What is Mix-Blend-Mode
- Intro to Command Line
- Intro to Git, No Deep Shit
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. 🎉 🎉
What's Next?