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.