TaskFlow - Your Fun To-Do App 🚀

A beautifully designed to-do application with a unique black & white theme, handwriting fonts, and engaging visuals to keep you hooked while managing your tasks.

Features

📋 Task Management

• Add Tasks - Create new tasks with title, description, and details
• Multiple Task Types:
  • Today's Tasks - Tasks due today
  • Upcoming Tasks - Future tasks with specific dates
  • Anytime Tasks - No deadline tasks
  • Expired Tasks - Overdue uncompleted tasks
• Task Details:
  • Priority levels (High, Medium, Low)
  • Due dates with smart date formatting
  • Task descriptions
  • Reference links to websites
  • Category/List assignment

🎯 List Organization

• Multiple custom lists for task categorization
• Default lists: Personal, Work, Shopping
• Create your own lists with custom colors
• Filter tasks by list

📅 Calendar View

• Visual calendar showing all months
• See which dates have tasks assigned
• Click on any date to filter tasks
• Today's date highlighted
• Task indicators on dates

🎀 Sticky Wall

• Create important notes on a virtual sticky wall
• Fun, rotating sticky notes with colors
• Quick way to save important reminders
• Delete notes as needed

🔔 Reminders

• Enable/disable reminders per task
• Get notifications for tasks due today
• Automatic overdue task warnings
• Background reminder checking

🎨 User Interface

• Black & White Theme - Clean, professional design
• Handwriting Fonts - Fun, creative typography
• Three-Panel Layout:
  • Left: Navigation sidebar with menus and lists
  • Middle: Tasks view with add task button
  • Right: Detailed task information panel
• Engaging Visuals - Gradient backgrounds, smooth animations
• Responsive Design - Works on different screen sizes

💾 Data Persistence

• All data saved to browser's local storage
• Tasks, lists, and sticky notes saved automatically
• Data persists between sessions

How to Use

Getting Started

1. Open index.html in your web browser
2. You'll see the main dashboard with today's tasks

Creating a Task

1. Click the "+ Add Task" button in the middle section
2. Fill in the task details:
   • Task Title (required)
   • Description (optional)
   • Category/List (required)
   • Task Type: Today, Upcoming, or Anytime (required)
   • Due Date (for Upcoming tasks)
   • Priority level
   • Reference link (optional)
   • Enable/disable reminder
3. Click "Create Task" button

Viewing Tasks

1. Today's Tasks - Click "Today's Tasks" to see tasks due today
2. Upcoming Tasks - Click "Upcoming Tasks" to see future tasks
3. Expired Tasks - Click "Expired Tasks" to see overdue items
4. Anytime Tasks - Click "Anytime" to see tasks without deadlines
5. Filter by List - Use the list buttons to filter tasks by category

Marking Tasks Complete

1. Click the checkbox on a task card to mark it as complete
2. Completed tasks will show with a strikethrough
3. You'll get a celebration notification! 🎉

Using the Calendar

1. Click the "Calendar" button in the sidebar
2. View the current month
3. Dates with tasks show a small dot indicator
4. Click on any date to filter tasks for that date
5. Today's date is highlighted in pink

Creating Sticky Notes

1. Click the "Sticky Wall" button in the sidebar
2. Click "+ New Note" to add a sticky note
3. Type your note and confirm
4. Notes appear with random fun colors
5. Click "Delete" to remove a note

Creating Custom Lists

1. Click "+ New List" at the bottom of the sidebar
2. Enter a list name
3. Choose a color for the list
4. Click "Create List"
5. Your new list will appear in the sidebar

Keyboard Shortcuts

• Ctrl + N - Open Add Task modal
• Escape - Close any modal

Design Features

Color Scheme

• Primary Dark: #1a1a1a (Dark backgrounds)
• Primary Light: #f5f5f5 (Light backgrounds)
• Accent Pink: #ff6b9d (Highlights and buttons)
• Color List Icons: Pink, Blue, Orange, Green, Lime

Fonts

• Handwriting Font: Caveat (for headings and playful text)
• Fun Font: Indie Flower (for task titles)
• Primary Font: Fredoka (for body text and UI)

Visual Effects

• Smooth transitions and animations
• Gradient backgrounds
• Hover effects on cards and buttons
• Rotating sticky notes
• Notification pop-ups

Browser Compatibility

• Chrome/Edge (latest)
• Firefox (latest)
• Safari (latest)
• Mobile browsers with responsive design

Files Structure

ToDoApp/
├── index.html       - Main HTML file
├── styles.css       - All styling and themes
├── script.js        - All JavaScript functionality
└── README.md        - This file

Tips for Best Experience

1. Use Categories - Create lists that match your workflow
2. Set Priorities - Mark important tasks as High priority
3. Add Links - Reference relevant websites directly in tasks
4. Use Sticky Wall - Save quick thoughts and important reminders
5. Check Calendar - Visualize your tasks across dates
6. Enable Reminders - Get notifications for important tasks

Future Enhancement Ideas

• Task edits and updates
• Recurring tasks
• Subtasks/checklists
• Export tasks to PDF
• Dark theme toggle
• Sound notifications
• Drag and drop task reordering
• Search functionality

Tips for Productivity

• Start your day by checking "Today's Tasks"
• Break down large tasks into smaller subtasks
• Use the priority system to focus on what matters
• Schedule time blocks in upcoming tasks
• Review expired tasks weekly
• Keep your sticky wall for important reminders

---

Enjoy TaskFlow! Keep yourself hooked on productivity! 🎯✨