JavaScript 30 Challenge by WesBos

Participating in and completing 30 day Vanilla JS challenge (#JavaScript30) by WesBos.

Todo Challenges

• [x] 🥁 JS Drum Kit
• [x] 🕒 JS and CSS Clock
• [x] 🖼 CSS Variables
• [x] 🕺🏻 Array Cardio Day 1
• [x] 💪🏻 Flex Panel Gallery
• [x] ⌨ Type Ahead
• [x] 💃🏻 Array Cardio Day 2
• [x] 🌈 Fun with HTML5 Canvas
• [x] 🛠 Dev Tools Domination
• [x] ✔ Hold Shift and Check Checkboxes
• [x] 📽 Custom Video Player
• [x] 🎊 Key Sequence Detection
• [x] 🤜🏻 Slide in on Scroll
• [x] 📋 JavaScript References vs Copying
• [x] 🏪 LocalStorage
• [x] 🐁 Mouse Move Shadow
• [x] 🗃 Sort Without Articles
• [x] ➕ Adding Up Times with Reduce
• [x] 📷 Webcam Fun
• [x] 🗣 Speech Detection
• [x] 📌 Geolocation
• [x] 🔗 Follow Along Link Highlighter
• [x] 💬 Speech Synthesis
• [x] 🍡 Sticky Nav
• [x] 💭 Event Capture, Propogation, Bubbling and Once
• [x] 🏃🏻‍♂️ Stripe Follow Along Nav
• [x] 🎚 Click and Drag
• [x] 📹 Video Speed Controller
• [x] ⏱ Countdown Timer
• [x] 🎮 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.