This repository contains my progress and code for the JavaScript30 challenge created by Wes Bos.
While the core concepts follow the original tutorial, I am actively expanding on the base codebase by:
- Adding custom UI/UX designs
- Implementing extended JavaScript logic
Here are some of the key modifications I made to the projects:
- Added click-to-play support so drums trigger on mouse click, not just keyboard.
- Added clock numbers, a center pin, and colored hands.
- Added a transition-removal fix that stops the second hand from snapping backward at minute 0.
- Added a Grayscale slider that applies a grayscale filter via CSS variable.
- Added a Reset button that restores all variables and inputs to their defaults.
- Added accordion behavior — only one panel can be open at a time, clicking a new one closes the previous.
- Added an Eraser toggle that switches between draw and erase mode.
- Added a Clear Canvas button that wipes the canvas instantly.
- Added a mouseenter fix that resumes drawing when re-entering the canvas with the mouse button still held.
- Added a live time display that updates in real time.
- Added a fullscreen button and double-click to fullscreen on the video.
- Added keyboard shortcuts — Space (play/pause), Arrow keys (skip), F (fullscreen).
- Added live volume and speed labels next to the sliders.
- 10 emojis fly to random screen positions every 500ms when
"helloworld"is typed. - Space key is ignored so it doesn't interfere with the tracked key array.
- Added Check All and Uncheck All buttons synced to localStorage.
- Added a per-item Delete button that removes items from the list and localStorage.
- Added inline contenteditable text editing with auto-save to localStorage.
- Added Ghosting Effect and Magic Colors toggle buttons.
- Added Clear Strip button that removes all captured photos.
- Added Mirror effect to flip the video and canvas
- Added a manual Start Listening button to give users control over the microphone.
- Added keyboard accessibility via
focusevent tracking for tab-navigation support.
- Replaced hover trigger with deliberate click-and-drag interaction to prevent accidental activation.
- Added an audio alarm with a Stop/Reset button, and a visual progress bar.
- Added difficulty selector (Easy/Medium/Hard) for dynamic mole speeds, live countdown timer, hit sound effects, and fixed game state management to prevent multiple game instances if the start button is spammed.
- Day 1: JavaScript Drum Kit
- Day 2: JS and CSS Clock
- Day 3: CSS Variables
- Day 4: Array Cardio Day 1
- Day 5: Flex Panel Gallery
- Day 6: Type Ahead
- Day 7: Array Cardio Day 2
- Day 8: Fun with HTML5 Canvas
- Day 9: Dev Tools Domination
- Day 10: Hold Shift and Check Checkboxes
- Day 11: Custom Video Player
- Day 12: Key Sequence Detection
- Day 13: Slide in on Scroll
- Day 14: JavaScript References VS Copying
- Day 15: LocalStorage
- Day 16: Mouse Move Shadow
- Day 17: Sort Without Articles
- Day 18: Adding Up Times with Reduce
- Day 19: Webcam Booth
- Day 20: Speech Detection
- Day 21: Geolocation
- Day 22: Follow Along Link Highlighter
- Day 23: Speech Synthesis
- Day 24: Sticky Nav
- Day 25: Event Capture, Propagation, Bubbling and Once
- Day 26: Stripe Follow Along Nav
- Day 27: Click and Drag
- Day 28: Video Speed Controller
- Day 29: Countdown Timer
- Day 30: Whack A Mole
Huge thanks to Wes Bos for providing the starter files and the incredible course structure.
