While my initial focus is on bettering my understanding of (front-end) JS (and consequentially honing my skills), at the same time I'm also interested in applying my Git learning. So, this is my first bite at it, at GitHub and at Markdown.
- Start 👍
- Getting Started: 9/30 projects done by
30/0527/05 🥉💪 - Halfway there: 15/30 projects done by
2/0631/05 🥈💪 -
Finish all the mini-projects by 10/06 🥇🎉 -
Stretch Goal: Finish by 7/06 🏆🔥
Due to time constraints and (positive) change of circumstances, I decided to:
- Postpone the remaining objectives ✅
- Do projects I deem worthy by 01/06 ✅
Included below are links to bullet points of new stuff I learned from each project. (WIP)
- Drum Kit ✅
data-{whatever}: Create user-defined attributestransitionendevent: Fired when a CSS transition has completedclassList: Returns all classes attached to element<audio>:audio.currentTimeandaudio.play()
- JS and CSS Clock ✅
selector.style.cssAttribute = value: Directly setcssAttribute's value- A method cannot be passed as a parameter in JS
- CSS Variables ✅
- CSS Variables:
--varName: value;(Declaration) andvar(--varName);(Usage) - The diff between
NodeListandArray: More methods - Short-circuit evaluation
Document.documentElement: Always returns<html>element
- CSS Variables:
- Array Cardio Day 1 ✅
- One-liner arrow functions have an implicit
return ⚠️ Always put aninitialvalue in areducefunction: to avoid headaches
- One-liner arrow functions have an implicit
- Flex Panel Gallery ✅
- The
thisyou're thinking of should probably be inside a regular function
- The
- Type Ahead ✅
- The spread operator
...: spreads over an iterable object (i.e: string, array and object)
- The spread operator
- Array Cardio Day 2 ✅
everyis the opposite ofsome
- Fun with HTML5 Canvas ✅
- HSL: 60 Young Guys Can Be Messy Rascals
- Dev Tools Domination ✅
- Hold Shift and Checkboxes ✅
- This is was so far the most frustrating exercise
- Custom Video Player ✅
- This was by far the most fun exercise ! Read the code.
- Key Sequence Detection ✅
- Slide in on Scroll ✅
- reference VS Copying ✅
- JS is pass-by-value. Mostly.
- LocalStorage ✅
- Basically there are two main methods:
localStorage.setItem(): adds item to localStoragelocalStorage.getItem(): gets item from localStorage
- Basically there are two main methods:
- Mouse Move Shadow
- Sort Without Articles
- Adding Up Times with Reduce
- Webcam Fun
- Speech Detection
- Geolocation
- Follow Along Link Highlighter
- Speech Synthesis
- Sticky Nav
- Event Capture, Propagation, Bubbling and Once ✅
- Event capture: The browser reads the doc from top to bottom
- Propagation == Bubbling: The event bubbles up, it propagates
- Stripe Follow Along Nav
- Click and Drag
- Video Speed Controller
- Countdown Timer
- Whack A Mole