FocusFlow - Your Personal Productivity Companion

FocusFlow is a modern, feature-rich task management application designed to help you organize your daily tasks, boost productivity, and achieve your goals with style.

✨ Features

📝 Task Management

• Create tasks with titles, descriptions, and priority levels (Low, Medium, High)
• Schedule tasks with date and time using the built-in calendar
• Set reminders to get notified before tasks are due
• Organize tasks into Active, Completed, and Deleted views
• Restore deleted tasks or permanently delete them

🎨 Personalization

• 6 Beautiful Themes - Default, Sapphire, Emerald, Amethyst, Crimson, Ocean
• Dark Mode - Easy on the eyes during nighttime use
• Font Customization - Choose from 5 different font families
• Adjustable Font Size - Perfect for your reading preference

👤 User Profile

• Character Avatars - Choose from 6 unique character images
• Profile Statistics - Track tasks created and completed
• Member since date display
• Account management options

🔔 Smart Notifications

• Popup reminders for scheduled tasks
• Custom notification timing
• Toggle notifications on/off
• Persistent notifications across page refreshes

💾 Data Management

• Local storage - All data saved in your browser
• Export/Import your task data as JSON files
• Account deletion with confirmation

🛠️ Technologies Used

• HTML5
• CSS3
• JavaScript (Vanilla - No frameworks)
• LocalStorage API
• Font Awesome 6
• Google Fonts

📋 Prerequisites

• A modern web browser (Chrome, Firefox, Safari, Edge)
• No server required - runs entirely in the browser!

🔧 Installation

1. Clone the repository

   git clone https://github.com/yourusername/focusflow.git
   cd focusflow

2. 🏗️ Project Structure

    focusflow/
    ├── index.html
    ├── taskmaster-app.html
    ├── css/
    │   ├── styles.css
    │   └── FocusFlow-app.css
    ├── images/
    │   ├── task.png
    │   ├── female1.jpg
    │   ├── male1.jpg
    │   ├── female2.avif
    │   ├── male2.png
    │   ├── female3.jpg
    │   └── male3.jpg
    └── README.md

3. Open the application

• Simply open index.html in your browser.
• Create an account or login.

🎯 How to Use

Getting Started

• Register with username, email, and password
• Login with your credentials
• Choose a character avatar on your profile page
• Start adding tasks!

Creating Tasks

• Enter task title (required)
• Add description (optional)
• Select priority
• Set notification time in minutes
• Schedule with date/time picker
• Click "Add Task"

Managing Tasks

• ✅ Check box to mark complete
• 🗑️ Click trash icon to delete
• ♻️ Restore from deleted view
• ⚡ Filter views: Active, Completed, Deleted

Customizing

• Theme: Click color dots in Settings
• Dark Mode: Toggle switch in Settings
• Font: Select from dropdown
• Font Size: Use slider

🤝 Contributing

• Fork the repository
• Create a feature branch (git checkout -b feature/AmazingFeature)
• Commit changes (git commit -m 'Add AmazingFeature')
• Push to branch (git push origin feature/AmazingFeature)
• Open a Pull Request

🐛 Bug Reports

• Report issues here with:
• Clear description
• Steps to reproduce
• Screenshots (if applicable)
• Browser and OS version

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

👨‍💻 Developer

Siyamthanda Dlakavu

• Portfolio: https://siyamthanda-dlakavu-profile.netlify.app/
• GitHub: https://github.com/siseko-D
• LinkedIn: https://www.linkedin.com/in/siyamthandad/

🙏 Acknowledgments

• Font Awesome for icons
• Google Fonts for typography
• Open-source community for inspiration

🚀 Future Updates

• Cloud sync across devices
• Collaborative task sharing
• Mobile app
• Recurring tasks
• Task categories/tags
• Pomodoro timer
• Analytics dashboard

⭐ Support

• Star the repo on GitHub if you find this useful!