Spaces:
Running
Running
File size: 4,448 Bytes
8104128 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
document.addEventListener('DOMContentLoaded', () => {
const taskForm = document.getElementById('task-form');
const newTaskInput = document.getElementById('new-task');
const taskList = document.getElementById('task-list');
const emptyState = document.getElementById('empty-state');
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
// Render tasks on page load
renderTasks();
// Add new task
taskForm.addEventListener('submit', (e) => {
e.preventDefault();
const taskText = newTaskInput.value.trim();
if (taskText) {
addTask(taskText);
newTaskInput.value = '';
newTaskInput.focus();
}
});
// Add task function
function addTask(text) {
const newTask = {
id: Date.now(),
text: text,
completed: false
};
tasks.unshift(newTask); // Add to beginning of array
saveTasks();
renderTasks();
}
// Delete task
function deleteTask(id) {
tasks = tasks.filter(task => task.id !== id);
saveTasks();
renderTasks();
}
// Toggle task completion
function toggleTask(id) {
tasks = tasks.map(task => {
if (task.id === id) {
return {...task, completed: !task.completed};
}
return task;
});
// Sort tasks: incomplete first
tasks.sort((a, b) => {
if (a.completed && !b.completed) return 1;
if (!a.completed && b.completed) return -1;
return 0;
});
saveTasks();
renderTasks();
}
// Save tasks to localStorage
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// Render tasks to the DOM
function renderTasks() {
if (tasks.length === 0) {
taskList.innerHTML = '';
emptyState.classList.remove('hidden');
return;
}
emptyState.classList.add('hidden');
// Sort tasks: incomplete first
const sortedTasks = [...tasks].sort((a, b) => {
if (a.completed && !b.completed) return 1;
if (!a.completed && b.completed) return -1;
return 0;
});
taskList.innerHTML = sortedTasks.map(task => `
<li class="task-item ${task.completed ? 'completed' : ''} p-4 flex items-center justify-between transition-all duration-200 hover:bg-pink-50">
<div class="flex items-center space-x-3">
<button
class="check-button w-6 h-6 rounded-full border-2 border-pink-300 flex items-center justify-center ${task.completed ? 'checked bg-pink-400 border-pink-400' : ''}"
data-id="${task.id}"
aria-label="${task.completed ? 'Mark as incomplete' : 'Mark as complete'}"
>
${task.completed ? '<i data-feather="check" class="w-4 h-4 text-white"></i>' : ''}
</button>
<span class="task-text ${task.completed ? 'text-pink-400' : 'text-gray-700'}">${task.text}</span>
</div>
<div class="task-actions flex space-x-2">
<button
class="delete-button text-pink-400 hover:text-pink-600 transition-colors"
data-id="${task.id}"
aria-label="Delete task"
>
<i data-feather="trash-2" class="w-5 h-5"></i>
</button>
</div>
</li>
`).join('');
// Add event listeners to new buttons
document.querySelectorAll('.check-button').forEach(button => {
button.addEventListener('click', (e) => {
const id = parseInt(e.currentTarget.getAttribute('data-id'));
toggleTask(id);
});
});
document.querySelectorAll('.delete-button').forEach(button => {
button.addEventListener('click', (e) => {
const id = parseInt(e.currentTarget.getAttribute('data-id'));
deleteTask(id);
});
});
// Re-initialize Feather icons
feather.replace();
}
}); |