JavaScript 30 Challenge by WesBos
Participating in and completing 30 day Vanilla JS challenge (#JavaScript30) by WesBos.
Todo Challenges
- 🥁 JS Drum Kit
- 🕒 JS and CSS Clock
- 🖼 CSS Variables
- 🕺🏻 Array Cardio Day 1
- 💪🏻 Flex Panel Gallery
- ⌨ Type Ahead
- 💃🏻 Array Cardio Day 2
- 🌈 Fun with HTML5 Canvas
- 🛠 Dev Tools Domination
- ✔ Hold Shift and Check Checkboxes
- 📽 Custom Video Player
- 🎊 Key Sequence Detection
- 🤜🏻 Slide in on Scroll
- 📋 JavaScript References vs Copying
- 🏪 LocalStorage
- 🐁 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, Propogation, Bubbling and Once
- 🏃🏻♂️ Stripe Follow Along Nav
- 🎚 Click and Drag
- 📹 Video Speed Controller
- ⏱ Countdown Timer
- 🎮 Whack A Mole
Add-Ons
I have mentioned below the add-ons I added in some of the JavaScript30 projects for fun.
-
✨ * - All projects
Updated design of all projects because designing is therapeutic.
-
🥁 #1 - JS Drum Kit
Added touch & click event handling on keys
-
🕒 #2 - JS and CSS Clock
Changed size of clock hands & added a pivot in center
-
🖼 #3 - CSS Variables
Added border-radius controller
-
📽 #11 - Custom Video Player
Added FullScreen button
-
🎊 #12 - Key Sequence Detection
Added confetti options
-
🏪 #15 - LocalStorage
Added Check All, Uncheck All, Delete All buttons.
-
📷 #19 - Webcam fun
Added mirror image for video.
-
🎮 #30 - Whack A Mole
Notify user about game over.