A comprehensive collection of interactive DOM manipulation challenges designed to help developers master JavaScript DOM operations through hands-on practice.
This project contains 11 progressive challenges focused on DOM manipulation techniques using vanilla JavaScript. Each challenge is designed to teach specific concepts while building practical components that you might use in real-world web applications.
| # | Challenge | Concepts Covered | Preview |
|---|---|---|---|
| 1 | Light Bulb Toggle | Event listeners, DOM state management | 💡 |
| 2 | Change Text Color | DOM style manipulation, event handling | 🦎 |
| 3 | Real-time Form Input Display | Form events, DOM updates, input handling | 📋 |
| 4 | Task Management | CRUD operations, local storage, event delegation | 🧏🏻♂️ |
| 5 | Image Carousel | Timers, CSS transitions, DOM traversal | 🖼️ |
| 6 | Enhanced Clock | Date object, requestAnimationFrame, SVG manipulation | ⏰ |
| 7 | Accordion | DOM traversal, animations, event handling | 🪗 |
| 8 | Simple Shopping Cart | State management, event delegation, DOM updates | 🛒 |
| 9 | Sliding Menu | CSS transitions, event handling, accessibility | 🪟 |
| 10 | Memory Card Game | Array manipulation, DOM creation, game logic | 🂫 |
| 11 | Color Button Creator | Closures, dynamic element creation, color management | 🎨 |
- Progressive Difficulty: Start with simple challenges and advance to more complex ones
- Real-world Components: Build UI components used in modern web applications
- Vanilla JavaScript: No frameworks or libraries - pure DOM manipulation
- Responsive Design: All challenges work across different screen sizes
- Accessibility Features: Focus states, keyboard navigation, and ARIA attributes
- Dark Mode Support: Light and dark theme options
- DOM selection and traversal techniques
- Event handling and delegation
- Dynamic content creation and manipulation
- State management in vanilla JavaScript
- UI component development
- Responsive design implementation
- Accessibility best practices
- A modern web browser (Chrome, Firefox, Safari, or Edge)
- Basic knowledge of HTML, CSS, and JavaScript
- Code editor (VS Code, Sublime Text, etc.)
-
Clone the repository:
git clone https://github.com/sagar-1m/JavaScript-DOM-Challenges.git
-
Navigate to the project directory:
cd JavaScript-DOM-Challenges -
Open the landing page to navigate through challenges:
open index.html # On macOS # Or simply double-click index.html in your file explorer
Each challenge follows this structure:
challenge-X/
├── index.html # HTML structure
├── styles.css # Challenge-specific styling
├── script.js # JavaScript implementation
Contributions are welcome! Here's how you can contribute:
- Fork the repository
- Create your feature branch:
git checkout -b feature/new-challenge - Add your challenge following the project structure
- Commit your changes:
git commit -m 'Add new challenge: Name' - Push to the branch:
git push origin feature/new-challenge - Open a Pull Request
Please ensure your code follows the project's style and includes appropriate documentation.
This project is licensed under the MIT License - see the LICENSE file for details.
- Font Awesome for the icons
- Inter Font for typography
- Hitesh Choudhary and Piyush Garg for their easy learning approach towards a complex topic
- All contributors and users of this learning resource
Created with 💻 by Sagar Maheshwari
