Project Description

An advanced web application for managing daily tasks with high efficiency. The app provides an easy-to-use interface for adding, editing, and deleting tasks, with the ability to categorize them by priority and deadline. The application is designed as a Progressive Web App (PWA) that can be installed on mobile devices and used offline.

Key Features

• Easy addition, editing, and deletion of tasks
• Task categorization by priority (high, medium, low)
• Setting deadlines for tasks with notifications
• Task filtering (all tasks, completed, incomplete)
• Quick search in tasks
• Local data storage using Local Storage
• Export and import tasks in JSON format
• Responsive design with Drag & Drop support
• Detailed productivity statistics
• Dark mode support

Technologies Used

• HTML5: For semantic structure and interactive elements
• CSS3: For advanced design with Animations and Transitions
• JavaScript ES6+: For programming logic and state management
• Local Storage API: For local data storage
• Service Workers: For offline functionality (PWA)
• Drag and Drop API: For task reordering

Challenges and Solutions

The biggest challenge was managing application state effectively, especially with multiple concurrent operations. This was solved by implementing the Observer Pattern and separating programming logic from the user interface. Performance was also improved by using Debouncing for search and Throttling for drag and drop events.

Lessons Learned

Through this project, I learned the importance of designing scalable code architecture, how to handle local data securely, and developing Progressive Web Apps (PWA) that provide a user experience similar to native applications.

Code Examples

Here are some examples of the code used in the project:

JavaScript - Task Management with Local Storage

// Save tasks to Local Storage
function saveTasks(tasks) {
    localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Load tasks from Local Storage
function loadTasks() {
    const tasks = localStorage.getItem('tasks');
    return tasks ? JSON.parse(tasks) : [];
}

// Add new task
function addTask(title, priority, deadline) {
    const tasks = loadTasks();
    const newTask = {
        id: Date.now(),
        title,
        priority,
        deadline,
        completed: false,
        createdAt: new Date().toISOString()
    };
    tasks.push(newTask);
    saveTasks(tasks);
    renderTasks();
}

JavaScript - Drag and Drop

// Enable drag and drop
function enableDragAndDrop() {
    const taskItems = document.querySelectorAll('.task-item');
    
    taskItems.forEach(item => {
        item.draggable = true;
        
        item.addEventListener('dragstart', (e) => {
            e.dataTransfer.effectAllowed = 'move';
            e.dataTransfer.setData('text/html', item.innerHTML);
            item.classList.add('dragging');
        });
        
        item.addEventListener('dragend', () => {
            item.classList.remove('dragging');
        });
    });
}

Links