An innovative Todo List application featuring real-time Virtual DOM visualization with diffing algorithm implementation and interactive D3.js tree representation.
- Add/Edit/Delete tasks & nested sub-tasks
- Visual parent-child relationships
- Bootstrap-styled UI components
- Custom diffing algorithm
- Efficient patch-based updates
- Collapsible node visualization
- Real-time D3.js tree updates
- Context menu for node operations
- Smooth CSS animations
- Click-to-select node interactions
- Right-click context menu
- Node collapse/expand toggle
- Visual feedback for selections
- Animated tree transitions
# Clone the repository
git clone https://github.com/yourusername/virtual-dom-todo.git
cd virtual-dom-todo
# Open index.html in a modern browser- Enter a task in the input field.
- Click "Add Task" or press Enter.
- Select a node → "Add Sub-Task" for hierarchy.
Right-click nodes for the context menu:
- ✏️ Edit text
- 🗑️ Delete node
- ➕ Create child node
↔️ Toggle collapse
- Click nodes to select.
- Watch real-time DOM updates.
- Observe animated tree transitions.
{
type: 'div',
id: 'root',
attributes: { class: 'list-group' },
children: [],
text: '',
collapsed: false
}- Node addition/removal detection
- Attribute comparison
- Text content changes
- Recursive child comparison
- Minimal DOM operations
- Batched updates
- CSS transition integration
- D3.js hierarchical layout
- Animated node transitions
- Interactive zoom/pan support
- Collapse/expand functionality
- D3.js (v7) - Data visualization
- Bootstrap (v5.3) - UI styling
Contributions are welcome! To contribute:
- Fork the repository.
- Create a feature branch.
- Submit a PR with a detailed description.
This project is licensed under the MIT License.
Created with ❤️ by Arafat Gamzawe