This is my journey through 30 days of JavaScript coding challenges based on Wes Bos's JavaScript30 course. Each day, I'll be building a new project using vanilla JavaScript (no frameworks, no libraries, no compilers).
| Day | Project | Description |
|---|---|---|
| 1 | JavaScript Drum Kit | A virtual drum kit that plays sounds when you press keys |
| 2 | JS and CSS Clock | An analog clock built with CSS and JavaScript |
| 3 | CSS Variables with JS | Image editor with adjustable properties using CSS variables |
| 4 | Array Cardio Day 1 | A simple project to practice array methods in JavaScript |
| 5 | Flex Panel Gallery | Interactive image panels that expand with animations using Flexbox |
| 6 | Type Ahead | Search feature that shows real-time suggestions as you type |
| 7 | Array Cardio Day 2 | Advanced array methods practice with real-world examples |
| 8 | Fun with HTML5 Canvas | Interactive drawing application with dynamic colors and line thickness |
| 9 | Dev Tools Domination | This exercise shows JavaScript console methods and debugging techniques |
| 10 | Hold Shift and Check Checkboxes | Multi-select functionality for checkboxes using the Shift key |
| 11 | Custom Video Player | A custom HTML5 video player with custom controls and styling |
| 12 | Key Sequence Detection | "Konami Code" style secret key sequence detection |
| 13 | Slide in on Scroll | Images slide into view as you scroll down the page |
| 14 | JavaScript References VS Copying | Differences between references and copying in JavaScript. |
| 15 | LocalStorage and Event Delegation | LocalStorage API for data persistence & Event Delegation for managing dynamic elements. |
| 16 | Mouse Move Shadow | JavaScript's DOM manipulation and mouse events. |
| 17 | Sort Without Articles | This project effectively demonstrates how to manipulate and sort arrays in JavaScript |
| 18 | Adding Up Times with Reduce | Select-Map-Calculate times |
| 19 | Webcam Fun | Webcam Fun |
| 20 | Speech Detection | Speech Detection |
| 21 | Geolocation | This project uses the browser's Geolocation API to determine and display the user's current speed and direction of travel. |
| 22 | Follow Along Link Highlighter | Dynamically highlights links when hover them |
| 23 | Speech Synthesis | Speech synthesis application that allows users to convert text to speech with customizable voice, rate, and pitch settings |
| 24 | Sticky Nav | Sticky navigation effect that makes the navigation bar stay fixed at the top of the page when scrolling. |
| 25 | Event Capture, Propagation, Bubbling and Once |
- Improve my JavaScript skills
- Learn modern ES6+ features
- Build practical projects
- Understand DOM manipulation better
- Get comfortable with event handling
- Practice problem-solving with JavaScript
Each project is contained in its own folder with everything needed to run it. Simply open the index.html file in your browser to see the project in action.
- Original course by Wes Bos
- Sounds and starter files from JavaScript30