🎯 DOM Practice Project

A comprehensive interactive web application showcasing advanced DOM (Document Object Model) manipulation techniques, event handling, animations, and modern JavaScript practices.

Live-Link: https://d162005.github.io/dom/

---

📋 Table of Contents

• Overview
• Technologies Used
• Features
• Project Structure
• Getting Started
• Interactive Sections
• Installation & Usage
• Browser Support
• Learning Outcomes
• Code Quality
• File Descriptions
• Customization
• Contributing
• License
• Author
• Support
• Future Enhancements

---

🎨 Overview

This project is an educational platform designed to demonstrate practical DOM manipulation techniques through 17 interactive sections. Each section focuses on different JavaScript concepts and DOM APIs, providing hands-on learning experience with real-world implementations.

Key Highlights:

• ✨ Dynamic index with image preview system
• 🎮 Multiple interactive games and animations
• 🎯 Advanced event handling and DOM traversal
• 🎨 CSS animations with JavaScript control
• 🖼️ Real-time image manipulation and filters

---

🛠️ Technologies Used

Frontend Stack

Technology	Purpose
HTML5	Semantic markup and structure
CSS3	Styling, animations, gradients, Grid layouts
JavaScript (ES6+)	DOM manipulation, event handling, game logic
GSAP	Advanced animations and tweening
Remixicon	Icon library for UI elements
Material Symbols	Material Design icons

Key JavaScript Concepts

• Event listeners (click, hover, mousemove, dragstart)
• DOM traversal and manipulation
• Array methods (map, forEach, filter)
• Arrow functions and closures
• and dataTransfer API
• Canvas API for image processing
• setInterval and setTimeout
• requestAnimationFrame concepts

---

✨ Features

Core Features

• Dynamic Index Navigation - Intelligent preview system with position-aware image popups
• Interactive Games - Bubble clicking game, Snake game, Color matching game
• Real-time Effects - Cursor customization, hover effects, throttled animations
• Image Processing - Professional image editor with multiple filters
• Media Integration - Video/Reel playing with interactive controls
• Drag & Drop - Interactive sorting by color
• Smooth Animations - CSS-based animations with JavaScript orchestration

---

📁 Project Structure

DOM/
├── index.html           # Main HTML file with all sections
├── script.js            # Core JavaScript logic (main application)
├── style.css            # Styling and animations
├── data.js              # Data arrays (teams, headlines, cursors, reels, filters)
├── img/                 # Image assets folder
│   ├── box1prev.png     # Box preview images
│   ├── box2prev.png
│   ├── ...
│   ├── box17prev.png
│   ├── cursor_design-removebg-preview.png
│   └── [other assets]
└── README.md            # This file

---

🚀 Getting Started

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• No build tools or dependencies required
• Basic knowledge of JavaScript and DOM concepts

Installation

1. Clone or Download the Project

   git clone <repository-url>
   cd DOM

2. Open in Browser

   # Simply open index.html in your web browser
   # Or use a local server (recommended)

3. Using Live Server (Recommended)

   # Using Python
   python -m http.server 8000
   
   # Using Node.js (http-server)
   npx http-server

---

🎮 Interactive Sections

Box 0: Dynamic Index

• Description: Intelligent navigation system with dynamic index
• Features:
  • Auto-generated index from data
  • Smart image preview positioning
  • Left-side items show preview on right
  • Right-side items show preview on left
• Technologies: Map function, DOM positioning, event listeners

Box 1: Change Content (Random Team Selector)

• Description: Generate random team data with color changes
• Features: IPL teams database with dynamic styling
• Click Event: Updates heading, motto, and background colors

Box 2: Create Element

• Description: Dynamically create random elements
• Features: Generate random shapes and text with rotation
• Technologies: Math.random(), DOM creation

Box 3: Download Progress

• Description: Animated download progress indicator
• Features:
  • Progress bar animation
  • Percentage display
  • Download time calculation
  • Reset button

Box 4: Like My Post

• Description: Animated heart animation on click
• Features:
  • Image click detection
  • Heart icon animation with scaling
  • Rising animation with opacity
• Technologies: GSAP animations

Box 5: Cursor Changer

• Description: Custom cursor selection and display
• Features:
  • Multiple cursor options
  • Real-time cursor replacement
  • Mouse position tracking
  • Custom styling per cursor

Box 6: Bubble Game

• Description: Interactive number clicking game
• Features:
  • Timed gameplay (60 seconds)
  • Score tracking
  • Random bubble generation
  • Hit target highlighting

Box 7: Reels Section

• Description: Social media-style video reels
• Features:
  • Like/Unlike functionality
  • Follow/Unfollow system
  • Video playback controls
  • Comment and share icons

Box 8: Hide and Seek

• Description: Interactive spotlight effect
• Features:
  • Radial gradient spotlight following mouse
  • Text scramble animation on hover
  • Dynamic image reveal effect

Box 9: Card Heading Animation

• Description: CSS-only card animation with hover effects
• Features:
  • Pure CSS transitions
  • Border animations
  • Image hover effects

Box 10-11: Custom Animations

• Description: Advanced CSS-based animations
• Features:
  • Transform effects
  • Keyframe animations
  • Scroll-based triggers

Box 12: Color Box

• Description: Interactive color mixer
• Features:
  • Mouse position-based color mapping
  • RGB value calculation with GSAP
  • Border color sync

Box 13: Moving Box

• Description: Mouse-tracking animation
• Features:
  • GSAP animations
  • Real-time position mapping
  • Smooth easing

Box 14: Nature Is Beautiful

• Description: Throttled particle effect on hover
• Features:
  • Image particle generation
  • Throttled mousemove events
  • Animated particle rise effect

Box 15: Snake Game

• Description: Classic snake game implementation
• Features:
  • WASD controls
  • Food collision detection
  • Score tracking
  • Game over detection
  • Reset functionality

Box 16: Filter Fun Game

• Description: Color-based drag and drop game
• Features:
  • Draggable colored boxes
  • Color-coded drop zones
  • Visual feedback on drop
  • Drag state styling

Box 17: Image Editor

• Description: Professional image filter application
• Features:
  • File upload
  • Real-time filter adjustments:
    • Brightness, Contrast, Saturation
    • Grayscale, Sepia, Blur
    • Hue-rotate, Opacity, Invert
  • Canvas-based rendering
  • Download edited image
  • Reset to original

---

📖 Installation & Usage

Running the Application

1. Local File System

   Simply open index.html in your browser
   Note: Some features may have restrictions with file:// protocol
   

2. Access in Browser

   http://localhost:8000
   

Features Usage

• Index Navigation: Hover over index items to preview images, click to navigate
• Games: Follow on-screen instructions for each game section
• Image Editor: Upload image → Adjust filters → Download edited version
• Cursor Changer: Click button to reveal cursor options → Select cursor

---

🌐 Browser Support

Browser	Support	Notes
Chrome	✅ Full	Recommended
Firefox	✅ Full	Full support
Safari	✅ Full	Supported
Edge	✅ Full	Chromium-based
IE 11	❌ No	Not supported

Required Features

• ES6 JavaScript support
• CSS Grid & Flexbox
• Canvas API
• File API (for image editor)

---

📚 Learning Outcomes

By exploring this project, you'll learn:

✅ DOM Manipulation

• Creating, updating, and removing DOM elements
• Traversing the DOM tree
• Event delegation and handling

✅ Event Handling

• Click, hover, mousemove events
• Drag and drop API
• Custom event listeners

✅ JavaScript Concepts

• Higher-order functions (map, forEach)
• Closures and scope
• Async operations (setInterval, setTimeout)
• Array and Object methods

✅ Animation Techniques

• CSS animations and transitions
• GSAP library usage
• Canvas-based effects
• Throttling and debouncing

✅ Advanced Patterns

• Game loop implementation
• State management
• Real-time calculations
• Performance optimization

---

🎓 Code Quality

• ✅ Clean, readable code structure
• ✅ Proper variable naming conventions
• ✅ Organized function implementations
• ✅ Comprehensive data structures
• ✅ Reusable component patterns

---

📝 File Descriptions

index.html

• Semantic HTML5 structure
• 17 interactive sections (box0 to box17)
• CDN links for external libraries
• Responsive design meta tags

script.js

• Main application logic
• All event listeners and handlers
• Game implementations
• Animation orchestration
• Data-driven UI updates

style.css

• Comprehensive styling system
• CSS Grid and Flexbox layouts
• Smooth transitions and animations
• Responsive design breakpoints
• Gradient backgrounds and effects

data.js

• IPL teams database
• Motivation headlines array
• Custom cursor options
• Social media reels data
• CSS filter configurations

img/ Folder

• Box preview images (17 total)
• Custom cursor assets
• Miscellaneous UI graphics

---

🔧 Customization

Add New Sections

1. Add HTML markup in index.html
2. Update boxTitles in data.js with new box
3. Add styles to style.css
4. Implement logic in script.js

Modify Colors

Edit CSS variables or class colors in style.css:

#box1 { background-color: #your-color; }

Update Data

Modify arrays in data.js:

let iplTeams = [ /* your data */ ];
let headlines = [ /* your data */ ];

---

🤝 Contributing

Contributions are welcome! To contribute:

1. Fork the repository
2. Create a new branch for your feature (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

This project is provided as an educational resource. Feel free to use, modify, and distribute for learning purposes.

---

👨‍💻 Author

Darshan Patil

• 🌐 GitHub: @D162005
• 📧 Email: darshanpatil16012005@gmail.com
• 💼 LinkedIn: Darshan Patil

---

📞 Support

For issues, questions, or suggestions:

• Report Issues: Open an Issue
• Ask Questions: Check Discussions
• Contact Author:
  • Email: darshanmpatil16012005@gmail.com
  • LinkedIn: Darshan Patil

Common Issues

Images not loading?

• Ensure image files exist in the img/ folder
• Check file paths in the code
• Use a local server instead of file:// protocol

Scripts not working?

• Check browser console for JavaScript errors
• Verify external CDN libraries are loading
• Ensure JavaScript is enabled in your browser

Styling issues?

• Clear browser cache and reload
• Check CSS file is properly linked
• Test in different browsers

---

🎯 Future Enhancements

• Mobile responsiveness improvements
• Accessibility (A11y) features
• Progressive Web App (PWA) support
• TypeScript migration
• Unit testing integration
• Performance optimization
• Additional games and features
• Dark/Light mode toggle

---

Made with ❤️ for DOM Learning by Darshan Patil

Give it a ⭐ if you like this project!