File size: 2,877 Bytes
fa5264e |
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 |
// Main app functionality
class TodoApp {
constructor() {
this.tasks = JSON.parse(localStorage.getItem('tasks')) || {};
this.initEventListeners();
}
initEventListeners() {
// Add task form submission
document.addEventListener('submit', (e) => {
if (e.target.classList.contains('add-task-form')) {
e.preventDefault();
const input = e.target.querySelector('input');
if (input.value.trim()) {
this.addTask(input.value.trim(), e.target.dataset.month);
input.value = '';
}
}
});
// Task completion toggle
document.addEventListener('click', (e) => {
if (e.target.classList.contains('task-checkbox')) {
const taskId = e.target.dataset.taskId;
const month = e.target.dataset.month;
this.toggleTaskCompletion(taskId, month);
}
});
}
addTask(text, month) {
if (!this.tasks[month]) {
this.tasks[month] = [];
}
const newTask = {
id: Date.now().toString(),
text,
completed: false,
createdAt: new Date().toISOString()
};
this.tasks[month].push(newTask);
this.saveTasks();
this.renderTask(newTask, month);
}
toggleTaskCompletion(taskId, month) {
const task = this.tasks[month].find(t => t.id === taskId);
if (task) {
task.completed = !task.completed;
this.saveTasks();
}
}
saveTasks() {
localStorage.setItem('tasks', JSON.stringify(this.tasks));
}
renderTask(task, month) {
const taskList = document.querySelector(`custom-month-accordion[month="${month}"] .task-list`);
if (taskList) {
const taskElement = document.createElement('div');
taskElement.className = 'task-item flex items-center p-4 border-b border-gray-200';
taskElement.innerHTML = `
<div class="flex items-center flex-1">
<input type="checkbox" data-task-id="${task.id}" data-month="${month}"
class="task-checkbox w-6 h-6 rounded border-gray-300 text-blue-500 mr-3">
<span class="${task.completed ? 'line-through text-gray-400' : 'text-gray-800'}">${task.text}</span>
</div>
<button class="delete-task text-gray-400 hover:text-red-500 p-2">
<i data-feather="trash-2" class="w-5 h-5"></i>
</button>
`;
taskList.appendChild(taskElement);
feather.replace();
}
}
}
// Initialize the app
document.addEventListener('DOMContentLoaded', () => {
const app = new TodoApp();
}); |