My 30-Day JavaScript Challenge & Learning Journey 📖✨
This repository documents my 30-Day JavaScript Challenge where I built a new project every Day- to master modern web development. Each project focuses on different JavaScript concepts, APIs, and real-world applications.
Challenge Status: ✅ COMPLETED! (30/30 Days) 🏆
📦 daily-dev-journal
┣ 📂 JavaScript Projects # 30 JavaScript challenge projects
┃ ┣ 📂 01_Drum Kit # Interactive drum kit
┃ ┣ 📂 02_Clock # Real-time analog clock
┃ ┣ 📂 03_CSS Variables # CSS variable controller
┃ ┣ 📂 04_Array Cardio 1 # Array methods practice
┃ ┣ 📂 05_Flex Panel Gallery # CSS Flexbox image gallery
┃ ┣ 📂 06_Type Ahead # AJAX search functionality
┃ ┣ 📂 07_Array Cardio Day 2 # Advanced array methods
┃ ┣ 📂 08_Fun with HTML Canvas # HTML5 Canvas drawing
┃ ┣ 📂 09_Dev Tools Domination # Browser DevTools tricks
┃ ┣ 📂 10_Checkboxes # Multiple checkbox selection
┃ ┣ 📂 11_VideoPlayer # Custom HTML5 video player
┃ ┣ 📂 12_Key Sequence Detection # Konami code sequence detection
┃ ┣ 📂 13_Slide On Scroll # Scroll-based animations
┃ ┣ 📂 14_References # JavaScript references vs copies
┃ ┣ 📂 15_LocalStorage # LocalStorage to-do list
┃ ┣ 📂 16_MouseShadow # CSS text shadow effects
┃ ┣ 📂 17_Sorting # Array sorting without articles
┃ ┣ 📂 18_TimeCalc # Video time calculator
┃ ┣ 📂 19_Webcam Fun # Webcam photo effects
┃ ┣ 📂 20_Speech Detection # Speech recognition API
┃ ┣ 📂 21_Geolocation # Compass with geolocation
┃ ┣ 📂 22_LinkFollower # Highlight link hover effect
┃ ┣ 📂 23_Speech Synthesis # Web Audio API synthesizer
┃ ┣ 📂 24_Sticky Nav # Fixed navigation on scroll
┃ ┣ 📂 25_EventCapture # Event bubbling & capturing
┃ ┣ 📂 26_StripeNav # Animated dropdown navigation
┃ ┣ 📂 27_Click and Drag # Click and drag interface
┃ ┣ 📂 28_Video Speed # Video playback speed control
┃ ┣ 📂 29_Countdown Timer # Countdown timer application
┃ ┗ 📂 Day-30_Whack A Mole # Modern whack-a-mole game
┣ 📜 LICENSE # MIT License
┗ 📜 README.md # This file
Experience all projects live on GitHub Pages:
| Day- | Project | Live Demo | Key Features |
|---|---|---|---|
| 01 | Drum Kit | 🔗 Demo | Keyboard-triggered audio |
| 02 | JS Clock | 🔗 Demo | Real-time analog clock |
| 03 | CSS Variables | 🔗 Demo | Dynamic styling controls |
| 04 | Array Cardio 1 | 🔗 Demo | Array methods practice |
| 05 | Flex Panels | 🔗 Demo | CSS Flexbox gallery |
| 06 | Type Ahead | 🔗 Demo | AJAX search with filters |
| 07 | Array Cardio 2 | 🔗 Demo | Advanced array methods |
| 08 | HTML Canvas | 🔗 Demo | Drawing application |
| 09 | Dev Tools | 🔗 Demo | Console tricks & tips |
| 10 | Checkboxes | 🔗 Demo | Multiple selection UI |
| 11 | Video Player | 🔗 Demo | Custom HTML5 controls |
| 12 | Key Detection | 🔗 Demo | Secret code sequences |
| 13 | Slide on Scroll | 🔗 Demo | Scroll animations |
| 14 | References | 🔗 Demo | JS references vs copies |
| 15 | Local Storage | 🔗 Demo | Persistent to-do list |
| 16 | Mouse Shadow | 🔗 Demo | Dynamic text shadows |
| 17 | Sorting | 🔗 Demo | Smart text sorting |
| 18 | Time Calculator | 🔗 Demo | Video duration sum |
| 19 | Webcam Fun | 🔗 Demo | Photo filters & effects |
| 20 | Speech Detection | 🔗 Demo | Voice-to-text interface |
| 21 | Geolocation | 🔗 Demo | Location-based compass |
| 22 | Link Follower | 🔗 Demo | Dynamic link highlighting |
| 23 | Speech Synth | 🔗 Demo | Web Audio synthesizer |
| 24 | Sticky Nav | 🔗 Demo | Fixed navigation scroll |
| 25 | Event Capture | 🔗 Demo | Event propagation demo |
| 26 | Stripe Navigation | 🔗 Demo | Animated dropdown menu |
| 27 | Click & Drag | 🔗 Demo | Drag scrolling interface |
| 28 | Video Speed | 🔗 Demo | Playback speed control |
| 29 | Countdown Timer | 🔗 Demo | Custom timer application |
| 30 | Whack-a-Mole Pro | 🔗 Demo | Modern arcade game |
- ES6+ Features (Classes, Arrow Functions, Destructuring)
- Array Methods (map, filter, reduce, etc.)
- Event Handling & Propagation
- Async/Await & Promises
- Local Storage & Session Management
- HTML5 Canvas & Web Audio
- Geolocation & Speech Recognition
- Intersection Observer & Fetch API
- Webcam & Media Devices
- Vibration & Notification APIs
- Flexbox & CSS Grid Layouts
- CSS Custom Properties (Variables)
- Animations & Transitions
- Responsive Design Principles
- Modern Design Patterns (Glassmorphism, etc.)
- Object-Oriented Programming
- Game Development Fundamentals
- Performance Optimization
- Browser DevTools Mastery
- Accessibility Best Practices
- 30 Consecutive Days of coding and learning
- 30 Unique Projects with increasing complexity
- Modern Web Development practices throughout
- Responsive Design for all projects
- Professional UI/UX with attention to detail
- Performance Optimization and best practices
- Browse through projects to see progression and techniques
- View source code to understand implementation details
- Use live demos to interact with completed projects
- Copy code snippets and adapt for your projects
- Learn from different approaches to common problems
- Use as portfolio examples for web development skills
- Open issues for bugs or suggestions
- Submit pull requests for improvements
- Share feedback and learning experiences
Aaditya Dubey
📍 Varanasi, India
🎯 Full-Stack Developer
This project is licensed under the MIT License - see the LICENSE file for details.
"30 Days of consistent coding, countless lessons learned, and a portfolio of projects that showcase the journey from beginner concepts to advanced implementations. This challenge proved that daily commitment leads to extraordinary growth." 🚀
— Challenge Complete: 30/30 Days ✅ | Skills Unlocked: ∞