Desktop Todo List App

A modern, minimalist desktop todo list application built with Electron. Features a dark theme, calendar integration, task categories, priority levels, and notifications.

Features

Core Functionality

• Quick Add: Type and press Enter to quickly add tasks
• Advanced Add: Detailed task creation with description, date, time, priority, and file attachments
• Task Management: Mark tasks as complete, edit, or delete them
• Categories: Organize tasks into custom categories with color coding
• Priority Levels: Assign high, medium, low, or no priority to tasks
• Date & Time: Schedule tasks with specific dates and times

Calendar System

• Calendar View: Visual calendar grid showing tasks by date
• List View: Grouped list view showing tasks organized by date
• Date Restrictions: Only allow adding tasks for today or future dates
• Visual Indicators: Color-coded task dots based on priority or category

Notifications

• Smart Notifications: Receive notifications for:
  • 1 week before task due date
  • 1 day before task due date
  • On the day of the task
  • 1 minute before scheduled time
  • Exact time animation when task time arrives

User Interface

• Dark Minimalist Theme: Clean, modern dark interface
• Responsive Sidebar: Collapsible details sidebar with drag-to-resize
• Smooth Animations: Subtle, classy animations throughout
• Hover Interactions: Edit and delete buttons appear on hover
• Task Progress: Visual progress counter showing completed/total tasks
• Particle Effects: Celebration animations when tasks are completed

Task Details

• Detailed View: Click on detailed tasks to view full information
• File Attachments: Attach images or files to tasks
• Task Descriptions: Add detailed descriptions to tasks
• Priority Display: Visual priority indicators with colored dots

Installation

Prerequisites

• Node.js (v14 or higher)
• npm or yarn

Setup

1. Clone or download the project
2. Install dependencies:

npm install

3. Run the application:

npm start

Build for Distribution

To create a distributable version:

npm run build

This will create platform-specific builds in the dist folder.

Usage

Adding Tasks

Quick Add:

1. Type your task in the input field at the bottom
2. Press Enter or click the arrow button (→)

Advanced Add:

1. Click the gear icon (⚙) next to the input field
2. Fill in task details:
   • Title (required)
   • Description (optional)
   • Date and time (optional, must be today or future)
   • Priority level
   • File attachment (optional)
3. Click "save"

Managing Tasks

• Complete Task: Click the checkbox next to a task
• View Details: Click on the task title (for detailed tasks)
• Edit Task: Hover over a task and click the edit icon (✎)
• Delete Task: Hover over a task and click the delete icon (×)

Categories

• Create Category: Click "+ new category" in the sidebar
• Select Category: Click on a category to filter tasks
• Delete Category: Hover over a category and click the × button

Calendar View

• Switch to Calendar: Click "calendar" in the header
• Navigate Months: Use the arrow buttons (‹ ›) to move between months
• Add Task to Date: Click on any date in the calendar
• Toggle View: Click the calendar icon to switch between grid and list view

Task Details Sidebar

• View Details: Click on a detailed task title
• Resize Sidebar: Drag the left edge of the sidebar to resize
• Collapse Sidebar: Click the collapse button (›) in the sidebar header
• Edit from Sidebar: Click the edit icon in the sidebar header

Project Structure

DesktopTodoListApp/
├── main.js           # Electron main process
├── preload.js        # Preload script for secure IPC
├── renderer.js       # Renderer process (UI logic)
├── index.html        # Application HTML structure
├── styles.css        # Application styles
├── package.json      # Project configuration
├── data/             # Data storage directory
│   ├── tasks.json   # Tasks and categories data
│   └── uploads/     # Uploaded files
└── README.md        # This file

Technology Stack

• Electron: Desktop application framework
• JavaScript: Core application logic
• HTML/CSS: User interface
• Node.js: File system operations and notifications

Data Storage

All data is stored locally in JSON format:

• Tasks: data/tasks.json
• Uploaded Files: data/uploads/

The application automatically creates these directories if they don't exist.

Features in Detail

Notifications

The app checks for upcoming tasks every minute and sends system notifications for:

• Tasks due in 1 week
• Tasks due in 1 day
• Tasks due today
• Tasks due in 1 minute
• Tasks at exact scheduled time (triggers visual animation)

Animations

• Task Completion: Particle effect when marking tasks complete
• Strikethrough: Animated line through completed tasks
• All Tasks Complete: Celebration animation on progress counter
• Task Active: Gradient border animation when task time arrives
• Smooth Transitions: Subtle animations throughout the interface

Date Restrictions

• Only today and future dates can be selected
• Past dates in calendar are visually disabled
• Past dates are automatically corrected to today if entered

Keyboard Shortcuts

• Enter: Quick add task (when input is focused)

License

This project is open source and available for personal use.

Notes

• All text in the application is lowercase for a minimalist aesthetic
• The app uses a dark theme optimized for extended use
• Task data persists between sessions automatically
• File uploads are stored locally in the data/uploads directory