| document.addEventListener('DOMContentLoaded', () => { |
| |
| const addTaskBtn = document.getElementById('addTaskBtn'); |
| const taskModal = document.getElementById('taskModal'); |
| const closeModalBtn = document.getElementById('closeModalBtn'); |
| const cancelTaskBtn = document.getElementById('cancelTaskBtn'); |
| const taskForm = document.getElementById('taskForm'); |
| |
| |
| const todoTasks = document.getElementById('todoTasks'); |
| const inProgressTasks = document.getElementById('inProgressTasks'); |
| const completedTasks = document.getElementById('completedTasks'); |
| |
| |
| let tasks = [ |
| { |
| id: 1, |
| title: 'Design dashboard UI', |
| description: 'Create wireframes for the new dashboard', |
| status: 'todo', |
| priority: 'high', |
| createdAt: new Date() |
| }, |
| { |
| id: 2, |
| title: 'Write documentation', |
| description: 'Document the API endpoints', |
| status: 'in-progress', |
| priority: 'medium', |
| createdAt: new Date() |
| }, |
| { |
| id: 3, |
| title: 'Fix login bug', |
| description: 'Users unable to login on mobile', |
| status: 'completed', |
| priority: 'high', |
| createdAt: new Date() |
| } |
| ]; |
| |
| |
| addTaskBtn.addEventListener('click', () => { |
| taskModal.classList.remove('hidden'); |
| }); |
| |
| closeModalBtn.addEventListener('click', () => { |
| taskModal.classList.add('hidden'); |
| }); |
| |
| cancelTaskBtn.addEventListener('click', () => { |
| taskModal.classList.add('hidden'); |
| }); |
| |
| |
| taskForm.addEventListener('submit', (e) => { |
| e.preventDefault(); |
| |
| const title = document.getElementById('taskTitle').value; |
| const description = document.getElementById('taskDescription').value; |
| const priority = document.getElementById('taskPriority').value; |
| |
| const newTask = { |
| id: Date.now(), |
| title, |
| description, |
| status: 'todo', |
| priority, |
| createdAt: new Date() |
| }; |
| |
| tasks.push(newTask); |
| renderTasks(); |
| taskModal.classList.add('hidden'); |
| taskForm.reset(); |
| }); |
| |
| |
| function renderTasks() { |
| todoTasks.innerHTML = ''; |
| inProgressTasks.innerHTML = ''; |
| completedTasks.innerHTML = ''; |
| |
| tasks.forEach(task => { |
| const taskElement = createTaskElement(task); |
| |
| if (task.status === 'todo') { |
| todoTasks.appendChild(taskElement); |
| } else if (task.status === 'in-progress') { |
| inProgressTasks.appendChild(taskElement); |
| } else { |
| completedTasks.appendChild(taskElement); |
| } |
| }); |
| |
| feather.replace(); |
| addDragEvents(); |
| } |
| |
| |
| function createTaskElement(task) { |
| const taskElement = document.createElement('div'); |
| taskElement.className = `task-card bg-white rounded-lg shadow p-4 cursor-move task-animate priority-${task.priority}`; |
| taskElement.setAttribute('draggable', 'true'); |
| taskElement.dataset.id = task.id; |
| |
| let priorityColor = 'bg-gray-400'; |
| if (task.priority === 'high') priorityColor = 'bg-red-500'; |
| else if (task.priority === 'medium') priorityColor = 'bg-yellow-500'; |
| else if (task.priority === 'low') priorityColor = 'bg-green-500'; |
| |
| taskElement.innerHTML = ` |
| <div class="flex justify-between items-start mb-2"> |
| <h3 class="font-medium text-gray-800">${task.title}</h3> |
| <span class="text-xs px-2 py-1 rounded-full ${priorityColor} text-white">${task.priority}</span> |
| </div> |
| <p class="text-sm text-gray-600 mb-3">${task.description}</p> |
| <div class="flex justify-between items-center text-xs text-gray-500"> |
| <span>${formatDate(task.createdAt)}</span> |
| <div class="flex space-x-2"> |
| <button class="task-edit-btn hover:text-fuchsia-600" data-id="${task.id}"> |
| <i data-feather="edit-2" class="w-4 h-4"></i> |
| </button> |
| <button class="task-delete-btn hover:text-fuchsia-600" data-id="${task.id}"> |
| <i data-feather="trash-2" class="w-4 h-4"></i> |
| </button> |
| </div> |
| </div> |
| `; |
| |
| return taskElement; |
| } |
| |
| |
| function formatDate(date) { |
| return new Date(date).toLocaleDateString('en-US', { |
| month: 'short', |
| day: 'numeric' |
| }); |
| } |
| |
| |
| function addDragEvents() { |
| const taskElements = document.querySelectorAll('.task-card'); |
| |
| taskElements.forEach(task => { |
| task.addEventListener('dragstart', () => { |
| task.classList.add('opacity-50'); |
| setTimeout(() => { |
| task.classList.add('hidden'); |
| }, 0); |
| }); |
| |
| task.addEventListener('dragend', () => { |
| task.classList.remove('opacity-50', 'hidden'); |
| }); |
| }); |
| |
| const columns = [todoTasks, inProgressTasks, completedTasks]; |
| |
| columns.forEach(column => { |
| column.addEventListener('dragover', (e) => { |
| e.preventDefault(); |
| const afterElement = getDragAfterElement(column, e.clientY); |
| const draggable = document.querySelector('.opacity-50'); |
| |
| if (afterElement == null) { |
| column.appendChild(draggable); |
| } else { |
| column.insertBefore(draggable, afterElement); |
| } |
| }); |
| |
| column.addEventListener('drop', (e) => { |
| e.preventDefault(); |
| const taskId = parseInt(document.querySelector('.opacity-50').dataset.id); |
| const task = tasks.find(t => t.id === taskId); |
| |
| if (column === todoTasks) { |
| task.status = 'todo'; |
| } else if (column === inProgressTasks) { |
| task.status = 'in-progress'; |
| } else { |
| task.status = 'completed'; |
| } |
| }); |
| }); |
| } |
| |
| function getDragAfterElement(container, y) { |
| const draggableElements = [...container.querySelectorAll('.task-card:not(.opacity-50)')]; |
| |
| return draggableElements.reduce((closest, child) => { |
| const box = child.getBoundingClientRect(); |
| const offset = y - box.top - box.height / 2; |
| |
| if (offset < 0 && offset > closest.offset) { |
| return { offset: offset, element: child }; |
| } else { |
| return closest; |
| } |
| }, { offset: Number.NEGATIVE_INFINITY }).element; |
| } |
| |
| |
| renderTasks(); |
| }); |
