|
|
<!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> |
