| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Task Manager</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <style> |
| .task-completed { |
| text-decoration: line-through; |
| color: #9ca3af; |
| } |
| .priority-high { |
| border-left: 4px solid #ef4444; |
| } |
| .priority-medium { |
| border-left: 4px solid #f59e0b; |
| } |
| .priority-low { |
| border-left: 4px solid #10b981; |
| } |
| .fade-in { |
| animation: fadeIn 0.3s ease-in; |
| } |
| @keyframes fadeIn { |
| from { opacity: 0; transform: translateY(10px); } |
| to { opacity: 1; transform: translateY(0); } |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 min-h-screen"> |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> |
| <div class="flex justify-between items-center mb-8"> |
| <h1 class="text-3xl font-bold text-gray-800">My Tasks</h1> |
| <button id="addTaskBtn" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center transition-colors"> |
| <i class="fas fa-plus mr-2"></i> Add Task |
| </button> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow p-4 mb-6"> |
| <div class="flex flex-wrap items-center gap-4"> |
| <div class="flex-1 min-w-[200px]"> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Search</label> |
| <input type="text" id="searchInput" placeholder="Filter tasks..." class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Priority</label> |
| <select id="priorityFilter" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="all">All Priorities</option> |
| <option value="high">High</option> |
| <option value="medium">Medium</option> |
| <option value="low">Low</option> |
| </select> |
| </div> |
| <div> |
| <label class="block text-sm font-medium text-gray-700 mb-1">Status</label> |
| <select id="statusFilter" class="px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="all">All Statuses</option> |
| <option value="completed">Completed</option> |
| <option value="pending">Pending</option> |
| </select> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-white rounded-lg shadow overflow-hidden"> |
| <div class="overflow-x-auto"> |
| <table class="min-w-full divide-y divide-gray-200"> |
| <thead class="bg-gray-50"> |
| <tr> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Task</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Priority</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Due Date</th> |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> |
| </tr> |
| </thead> |
| <tbody id="taskTableBody" class="bg-white divide-y divide-gray-200"> |
| |
| </tbody> |
| </table> |
| </div> |
| <div id="emptyState" class="py-12 text-center"> |
| <i class="fas fa-tasks text-4xl text-gray-300 mb-4"></i> |
| <h3 class="text-lg font-medium text-gray-500">No tasks found</h3> |
| <p class="text-gray-400 mt-1">Add your first task by clicking the button above</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="taskModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden"> |
| <div class="bg-white rounded-lg shadow-xl w-full max-w-md"> |
| <div class="flex justify-between items-center border-b px-6 py-4"> |
| <h3 id="modalTitle" class="text-lg font-semibold text-gray-800">Add New Task</h3> |
| <button id="closeModalBtn" class="text-gray-400 hover:text-gray-500"> |
| <i class="fas fa-times"></i> |
| </button> |
| </div> |
| <div class="p-6"> |
| <form id="taskForm"> |
| <input type="hidden" id="taskId"> |
| <div class="mb-4"> |
| <label for="taskTitle" class="block text-sm font-medium text-gray-700 mb-1">Task Title</label> |
| <input type="text" id="taskTitle" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| <div class="mb-4"> |
| <label for="taskDescription" class="block text-sm font-medium text-gray-700 mb-1">Description</label> |
| <textarea id="taskDescription" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
| </div> |
| <div class="grid grid-cols-2 gap-4 mb-4"> |
| <div> |
| <label for="taskPriority" class="block text-sm font-medium text-gray-700 mb-1">Priority</label> |
| <select id="taskPriority" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| <option value="high">High</option> |
| <option value="medium" selected>Medium</option> |
| <option value="low">Low</option> |
| </select> |
| </div> |
| <div> |
| <label for="taskDueDate" class="block text-sm font-medium text-gray-700 mb-1">Due Date</label> |
| <input type="date" id="taskDueDate" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"> |
| </div> |
| </div> |
| <div class="flex justify-end space-x-3 mt-6"> |
| <button type="button" id="cancelTaskBtn" class="px-4 py-2 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-50">Cancel</button> |
| <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">Save Task</button> |
| </div> |
| </form> |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| |
| let tasks = [ |
| { id: 1, title: 'Complete project proposal', description: 'Finish the draft and send for review', priority: 'high', dueDate: '2023-06-15', completed: false }, |
| { id: 2, title: 'Buy groceries', description: 'Milk, eggs, bread, fruits', priority: 'medium', dueDate: '2023-06-10', completed: true }, |
| { id: 3, title: 'Schedule team meeting', description: 'Discuss quarterly goals', priority: 'low', dueDate: '2023-06-12', completed: false }, |
| { id: 4, title: 'Update portfolio website', description: 'Add new projects and testimonials', priority: 'medium', dueDate: '2023-06-20', completed: false } |
| ]; |
| |
| |
| const taskTableBody = document.getElementById('taskTableBody'); |
| const emptyState = document.getElementById('emptyState'); |
| const searchInput = document.getElementById('searchInput'); |
| const priorityFilter = document.getElementById('priorityFilter'); |
| const statusFilter = document.getElementById('statusFilter'); |
| 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 modalTitle = document.getElementById('modalTitle'); |
| const taskIdInput = document.getElementById('taskId'); |
| const taskTitleInput = document.getElementById('taskTitle'); |
| const taskDescriptionInput = document.getElementById('taskDescription'); |
| const taskPriorityInput = document.getElementById('taskPriority'); |
| const taskDueDateInput = document.getElementById('taskDueDate'); |
| |
| |
| const today = new Date().toISOString().split('T')[0]; |
| taskDueDateInput.min = today; |
| |
| |
| function renderTasks() { |
| const searchTerm = searchInput.value.toLowerCase(); |
| const priorityFilterValue = priorityFilter.value; |
| const statusFilterValue = statusFilter.value; |
| |
| const filteredTasks = tasks.filter(task => { |
| const matchesSearch = task.title.toLowerCase().includes(searchTerm) || |
| task.description.toLowerCase().includes(searchTerm); |
| const matchesPriority = priorityFilterValue === 'all' || task.priority === priorityFilterValue; |
| const matchesStatus = statusFilterValue === 'all' || |
| (statusFilterValue === 'completed' && task.completed) || |
| (statusFilterValue === 'pending' && !task.completed); |
| |
| return matchesSearch && matchesPriority && matchesStatus; |
| }); |
| |
| if (filteredTasks.length === 0) { |
| taskTableBody.innerHTML = ''; |
| emptyState.classList.remove('hidden'); |
| return; |
| } |
| |
| emptyState.classList.add('hidden'); |
| taskTableBody.innerHTML = ''; |
| |
| filteredTasks.forEach(task => { |
| const row = document.createElement('tr'); |
| row.className = `fade-in ${task.completed ? 'bg-gray-50' : ''} priority-${task.priority}`; |
| |
| |
| const statusCell = document.createElement('td'); |
| statusCell.className = 'px-6 py-4 whitespace-nowrap'; |
| const statusCheckbox = document.createElement('input'); |
| statusCheckbox.type = 'checkbox'; |
| statusCheckbox.className = 'h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded cursor-pointer'; |
| statusCheckbox.checked = task.completed; |
| statusCheckbox.addEventListener('change', () => toggleTaskStatus(task.id)); |
| statusCell.appendChild(statusCheckbox); |
| row.appendChild(statusCell); |
| |
| |
| const titleCell = document.createElement('td'); |
| titleCell.className = 'px-6 py-4'; |
| const titleDiv = document.createElement('div'); |
| titleDiv.className = 'flex items-center'; |
| |
| const titleText = document.createElement('div'); |
| titleText.className = 'ml-4'; |
| |
| const title = document.createElement('div'); |
| title.className = `text-sm font-medium ${task.completed ? 'task-completed' : 'text-gray-900'}`; |
| title.textContent = task.title; |
| |
| const description = document.createElement('div'); |
| description.className = `text-sm ${task.completed ? 'task-completed' : 'text-gray-500'}`; |
| description.textContent = task.description; |
| |
| titleText.appendChild(title); |
| titleText.appendChild(description); |
| titleDiv.appendChild(titleText); |
| titleCell.appendChild(titleDiv); |
| row.appendChild(titleCell); |
| |
| |
| const priorityCell = document.createElement('td'); |
| priorityCell.className = 'px-6 py-4 whitespace-nowrap'; |
| const priorityBadge = document.createElement('span'); |
| priorityBadge.className = `px-2 inline-flex text-xs leading-5 font-semibold rounded-full ${ |
| task.priority === 'high' ? 'bg-red-100 text-red-800' : |
| task.priority === 'medium' ? 'bg-yellow-100 text-yellow-800' : |
| 'bg-green-100 text-green-800' |
| }`; |
| priorityBadge.textContent = task.priority.charAt(0).toUpperCase() + task.priority.slice(1); |
| priorityCell.appendChild(priorityBadge); |
| row.appendChild(priorityCell); |
| |
| |
| const dueDateCell = document.createElement('td'); |
| dueDateCell.className = 'px-6 py-4 whitespace-nowrap'; |
| const dueDateDiv = document.createElement('div'); |
| dueDateDiv.className = `text-sm ${task.completed ? 'task-completed' : 'text-gray-900'}`; |
| |
| const dueDate = new Date(task.dueDate); |
| const now = new Date(); |
| now.setHours(0, 0, 0, 0); |
| |
| if (dueDate < now && !task.completed) { |
| dueDateDiv.innerHTML = `<span class="text-red-600">${formatDate(task.dueDate)} (Overdue)</span>`; |
| } else { |
| dueDateDiv.textContent = formatDate(task.dueDate); |
| } |
| |
| dueDateCell.appendChild(dueDateDiv); |
| row.appendChild(dueDateCell); |
| |
| |
| const actionsCell = document.createElement('td'); |
| actionsCell.className = 'px-6 py-4 whitespace-nowrap text-right text-sm font-medium'; |
| |
| const editBtn = document.createElement('button'); |
| editBtn.className = 'text-blue-600 hover:text-blue-900 mr-4'; |
| editBtn.innerHTML = '<i class="fas fa-edit"></i>'; |
| editBtn.addEventListener('click', () => openEditModal(task.id)); |
| |
| const deleteBtn = document.createElement('button'); |
| deleteBtn.className = 'text-red-600 hover:text-red-900'; |
| deleteBtn.innerHTML = '<i class="fas fa-trash"></i>'; |
| deleteBtn.addEventListener('click', () => deleteTask(task.id)); |
| |
| actionsCell.appendChild(editBtn); |
| actionsCell.appendChild(deleteBtn); |
| row.appendChild(actionsCell); |
| |
| taskTableBody.appendChild(row); |
| }); |
| } |
| |
| |
| function formatDate(dateString) { |
| const options = { year: 'numeric', month: 'short', day: 'numeric' }; |
| return new Date(dateString).toLocaleDateString(undefined, options); |
| } |
| |
| |
| function toggleTaskStatus(taskId) { |
| const taskIndex = tasks.findIndex(task => task.id === taskId); |
| if (taskIndex !== -1) { |
| tasks[taskIndex].completed = !tasks[taskIndex].completed; |
| renderTasks(); |
| } |
| } |
| |
| |
| function deleteTask(taskId) { |
| if (confirm('Are you sure you want to delete this task?')) { |
| tasks = tasks.filter(task => task.id !== taskId); |
| renderTasks(); |
| } |
| } |
| |
| |
| function openAddModal() { |
| taskIdInput.value = ''; |
| taskTitleInput.value = ''; |
| taskDescriptionInput.value = ''; |
| taskPriorityInput.value = 'medium'; |
| taskDueDateInput.value = ''; |
| modalTitle.textContent = 'Add New Task'; |
| taskModal.classList.remove('hidden'); |
| } |
| |
| |
| function openEditModal(taskId) { |
| const task = tasks.find(task => task.id === taskId); |
| if (task) { |
| taskIdInput.value = task.id; |
| taskTitleInput.value = task.title; |
| taskDescriptionInput.value = task.description; |
| taskPriorityInput.value = task.priority; |
| taskDueDateInput.value = task.dueDate; |
| modalTitle.textContent = 'Edit Task'; |
| taskModal.classList.remove('hidden'); |
| } |
| } |
| |
| |
| function closeModal() { |
| taskModal.classList.add('hidden'); |
| } |
| |
| |
| function handleFormSubmit(e) { |
| e.preventDefault(); |
| |
| const taskData = { |
| id: taskIdInput.value ? parseInt(taskIdInput.value) : Date.now(), |
| title: taskTitleInput.value, |
| description: taskDescriptionInput.value, |
| priority: taskPriorityInput.value, |
| dueDate: taskDueDateInput.value, |
| completed: false |
| }; |
| |
| if (taskIdInput.value) { |
| |
| const taskIndex = tasks.findIndex(task => task.id === parseInt(taskIdInput.value)); |
| if (taskIndex !== -1) { |
| tasks[taskIndex] = taskData; |
| } |
| } else { |
| |
| tasks.push(taskData); |
| } |
| |
| closeModal(); |
| renderTasks(); |
| } |
| |
| |
| addTaskBtn.addEventListener('click', openAddModal); |
| closeModalBtn.addEventListener('click', closeModal); |
| cancelTaskBtn.addEventListener('click', closeModal); |
| taskForm.addEventListener('submit', handleFormSubmit); |
| searchInput.addEventListener('input', renderTasks); |
| priorityFilter.addEventListener('change', renderTasks); |
| statusFilter.addEventListener('change', renderTasks); |
| |
| |
| renderTasks(); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Hamid-x/share" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
