Thanks to visit codestin.com
Credit goes to github.com

Skip to content

πŸ“Œ A simple and efficient Task Manager built with JavaScript to add, sort, filter, and manage tasks with ease.

Notifications You must be signed in to change notification settings

Angkon-Kar/Task_Manager

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

27 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“ Advanced Task Manager

A modern, feature-rich Task Manager / To-Do List Web App built with HTML, CSS, and Vanilla JavaScript. This project goes beyond a simple to-do list, providing categories, priorities, recurrence, bulk actions, import/export, and progress tracking β€” all wrapped in a responsive and animated UI.

✨ Features

  • πŸ”§ Task Management
  • βž• Add tasks with title, description, due date, priority, category, recurrence.
  • ✏️ Edit existing tasks in place.
  • πŸ—‘οΈ Delete tasks with a smooth fade-out animation.
  • βœ… Mark tasks complete (supports recurring tasks that auto-generate the next due date).

🏷️ Categories & Priorities

  • Assign tasks to Work, Personal, Study or custom categories.
  • Priority levels: High πŸ”΄, Medium 🟠, Low 🟒 with color-coded badges.
  • Logical sorting (High > Medium > Low).

πŸ“… Smart Due Dates

  • Overdue tasks are highlighted.
  • "Today" badge for tasks due today.
  • Sort tasks by created date, priority, or nearest due date.

πŸ“Š Productivity Tools

  • Progress Tracker: shows % of completed tasks with animated progress bar.
  • Bulk Actions:
    • Select multiple tasks
    • Mark selected complete
    • Delete selected

πŸ” Recurring Tasks

  • Supports daily, weekly, monthly recurrence.
  • New instance automatically generated after completion.

πŸ’Ύ Data Handling

  • LocalStorage persistence β€” your tasks are saved even after refreshing.
  • Import/Export JSON for backups or moving data across browsers.

πŸ–₯️ UI & UX

  • Clean, modern responsive layout.
  • Smooth animations for adding/removing tasks.
  • Expand/collapse edit mode with highlighting.

πŸš€ Demo

πŸ‘‰ Live Demo

πŸ“‚ Project Structure

πŸ“¦ Task-Manager
β”œβ”€β”€ index.html       # Main HTML page
β”œβ”€β”€ styles.css       # App styling (responsive + animations)
β”œβ”€β”€ script.js        # App logic (UI interactions)
β”œβ”€β”€ taskManager.js   # Core TaskManager class (data handling)
└── README.md        # Documentation

βš™οΈ Installation & Usage

  • Clone the repo
git clone https://github.com/Angkon-Kar/Task_Manager.git
cd Task-Manager

Open the app

  • Simply open index.html in your browser.
  • No build tools required (pure Vanilla JS).

Start managing tasks! βœ…

πŸ› οΈ Tech Stack

  • HTML5
  • CSS3 (Flexbox, Animations, Responsive Design)
  • Vanilla JavaScript (ES6+)
  • LocalStorage API

πŸ“Έ Screenshots

  • Main UI
  • Edit Mode

πŸ“Œ Roadmap

  • Drag & Drop task ordering
  • Calendar view πŸ“…
  • Notifications / Reminders πŸ””

🀝 Contributing

Contributions are welcome!

To contribute:

  • Fork the repo
  • Create a new branch (feature/my-feature)
  • Commit your changes
  • Submit a Pull Request πŸš€

πŸ“œ License

  • This project is licensed under the MIT License.
  • Feel free to use, modify, and distribute as you like.