https://github.com/liwa-dev/task-management

A responsive task management application with dynamic animations and a typewriter effect for displaying tasks. Built using HTML, CSS, and JavaScript. Load Save etc.
https://github.com/liwa-dev/task-management

Last synced: 1 day ago
JSON representation

A responsive task management application with dynamic animations and a typewriter effect for displaying tasks. Built using HTML, CSS, and JavaScript. Load Save etc.

• Host: GitHub
• URL: https://github.com/liwa-dev/task-management
• Owner: liwa-dev
• License: apache-2.0
• Created: 2024-07-20T04:29:41.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-07-20T05:11:20.000Z (6 months ago)
• Last Synced: 2024-11-12T11:17:26.876Z (2 months ago)
• Language: JavaScript
• Size: 179 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Interactive Task Visualization Application

## Overview

This dynamic, web-based application offers an intuitive and visually engaging way to manage tasks, ideas, and workflows. Inspired by modern game development environments, it provides a canvas-like interface where users can create, connect, and manipulate task nodes in a tree-like structure.

![Application Interface](imgs/face1.png)

## Key Features

- **Node-Based Task Creation**: Spawn task nodes with customizable shapes and properties.

- **Dynamic Connections**: Create visual links between tasks to represent relationships or dependencies.

- **Interactive Canvas**: Zoom, pan, and navigate through your task ecosystem with ease.

- **Real-Time Editing**: Modify task details on the fly with seamless updates.

- **Engaging UI Elements**: 

  - Typewriter effect for displaying motivational messages

  - Smooth animations for a polished user experience

- **Responsive Design**: Adapts to various screen sizes, from desktop to mobile devices.

- **Persistence**: Save and load your task structures for continued work across sessions.

## Technical Highlights

- **HTML5 Canvas**: Leverages canvas for high-performance rendering of nodes and connections.

- **CSS3 Animations**: Implements fluid transitions and visual effects.

- **Vanilla JavaScript**: Core functionality built with pure JavaScript for optimal performance.

- **Local Storage API**: Utilizes browser's local storage for saving and loading projects.

- **SVG Integration**: Incorporates Scalable Vector Graphics for crisp, resizable UI elements.

- **Touch-Enabled**: Supports multi-touch gestures for mobile and tablet interactions.

## Getting Started

1. Clone the repository:

   ```

   git clone https://github.com/liwa-dev/task-management.git

   ```

2. Open `index.html` in a modern web browser.

## Usage Guide

- **Create a Node**: Click the "Box" button in the top-left corner.

- **Move Nodes**: Click and drag to reposition.

- **Edit Node Content**: Click on a node to modify its title or add entries.

- **Create Connections**: Select one node, then another to establish a visual link.

- **Navigate the Canvas**: 

  - Zoom: Use mouse wheel or pinch gesture

  - Pan: Click and drag on the background

- **Save/Load**: Use dedicated buttons to persist or retrieve your work.

## Customization

Tailor the application by modifying these key files:

- `style.css`: Adjust visual styles and animations

- `script.js`: Extend core functionality and interactions

- `index.html`: Modify structure or introduce new elements

## Contributing

We welcome contributions! Feel free to fork the project and submit pull requests.

## License

This project is open source and available under the [Apache License 2.0](LICENSE).

## Acknowledgements

- Inspired by node-based interfaces in game development and visual programming environments.

- Background patterns and UI elements crafted to enhance user focus and creativity.

---

For questions, feedback, or support, please open an issue in the GitHub repository.