Task Manager - README

Overview

Task Manager is a beautiful, interactive web application that helps you organize your tasks with a cosmic-themed interface. It allows you to create, manage, and track your tasks with priority levels and filtering options.

🔗 Link - https://teenasahu406.github.io/task-manager/

Features

• ✨ Cosmic Design: Beautiful starry background with a space-themed interface
• 📝 Task Management: Add, edit, delete, and mark tasks as complete
• 🎯 Priority Levels: Organize tasks by Low, Medium, and High priority
• 🔍 Filtering: View tasks by status (All, Active, Completed) or by High Priority
• 📊 Statistics: Real-time tracking of total, completed, and pending tasks
• 🖱️ Interactive Elements:
  • Double-click to edit tasks
  • Drag and drop to reorder tasks
• 📱 Responsive Design: Works on desktop and mobile devices

Technologies Used

• HTML5: Structure and semantic markup
• CSS3: Styling with animations and responsive design
• JavaScript: Interactive functionality and task management
• Font Awesome: Icons for enhanced UI
• Google Fonts: Typography (Poppins)

File Structure

task-manager/
│
├── index.html          # Main HTML file
├── style.css           # Stylesheet with cosmic theme
├── script.js           # JavaScript functionality
└── README.md           # This file

Installation & Usage

1. Download the files: Save all three files (index.html, style.css, script.js) in the same directory.

2. Open the application:

   • Simply open index.html in your web browser
   • Or host it on a local server

3. Start managing tasks:

   • Type your task in the input field
   • Select a priority level
   • Click "Add Task" or press Enter
   • Use the filter buttons to view different task categories

How to Use

Adding Tasks

1. Enter your task in the input field
2. Select a priority level (Low, Medium, High)
3. Click the "Add Task" button or press Enter

Managing Tasks

• Complete a task: Click the checkbox next to any task
• Edit a task: Double-click on the task text
• Delete a task: Click the trash can icon
• Reorder tasks: Drag and drop tasks to rearrange them

Filtering Tasks

• All: View all tasks
• Active: View only incomplete tasks
• Completed: View only completed tasks
• High Priority: View only high priority tasks

Priority Levels

• Low Priority: Standard importance tasks
• Medium Priority: Important tasks
• High Priority: Urgent and critical tasks

Browser Compatibility

This application works on all modern browsers including:

• Chrome
• Firefox
• Safari
• Edge

Customization

You can customize the application by modifying:

• Colors in style.css (CSS variables at the top of the file)
• Task priorities and their visual indicators
• Animation timings and effects
• Font sizes and spacing

Contributing

Contributions are welcome! Please feel free to submit pull requests or open issues for bugs and feature requests.