Spaces:
Running
Running
File size: 3,695 Bytes
57361f3 | 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 | const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');
// Initialize todos from Local Storage, defaulting to an empty array
let todos = JSON.parse(localStorage.getItem('todos')) || [];
// Function to save todos to Local Storage
const saveTodos = () => {
localStorage.setItem('todos', JSON.stringify(todos));
};
// Function to render the entire list
const renderTodos = () => {
todoList.innerHTML = ''; // Clear existing list items
if (todos.length === 0) {
const emptyMessage = document.createElement('li');
emptyMessage.textContent = "Great job! No tasks currently pending.";
emptyMessage.className = "todo-item empty-state";
todoList.appendChild(emptyMessage);
return;
}
todos.forEach((todo, index) => {
const listItem = document.createElement('li');
listItem.className = `todo-item ${todo.completed ? 'completed' : ''}`;
listItem.setAttribute('role', 'listitem');
listItem.setAttribute('aria-checked', todo.completed);
// Task Text (Clickable to toggle completion)
const taskText = document.createElement('span');
taskText.className = 'task-text';
taskText.textContent = todo.text;
taskText.setAttribute('tabindex', '0'); // Make text focusable for keyboard users
taskText.addEventListener('click', () => toggleComplete(index));
taskText.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
toggleComplete(index);
}
});
// Actions container
const actions = document.createElement('div');
actions.className = 'todo-actions';
// Delete Button
const deleteBtn = document.createElement('button');
deleteBtn.textContent = 'Delete';
deleteBtn.className = 'delete-btn';
deleteBtn.setAttribute('aria-label', `Delete task: ${todo.text}`);
deleteBtn.addEventListener('click', () => deleteTodo(index));
listItem.appendChild(taskText);
actions.appendChild(deleteBtn);
listItem.appendChild(actions);
todoList.appendChild(listItem);
});
};
// 1. Add Functionality
const addTodo = (e) => {
e.preventDefault();
const taskText = todoInput.value.trim();
if (taskText === "") {
// Use standard constraint validation feedback if input is required,
// but since we prevent default and trim, a simple focus is enough
alert("Please enter a task.");
todoInput.focus();
return;
}
const newTodo = {
text: taskText,
completed: false,
id: Date.now() // Simple unique ID for future scalability if needed
};
todos.push(newTodo);
saveTodos();
renderTodos();
todoInput.value = ''; // Clear input
todoInput.focus();
};
// 2. Delete Functionality
const deleteTodo = (index) => {
// Optional: add a visual confirmation dialog
if (confirm(`Are you sure you want to delete "${todos[index].text}"?`)) {
// Remove 1 element starting at the given index
todos.splice(index, 1);
saveTodos();
renderTodos();
}
};
// 3. Mark as Complete Functionality (Toggle)
const toggleComplete = (index) => {
todos[index].completed = !todos[index].completed;
saveTodos();
renderTodos(); // Re-render to apply the completed class and ARIA state
};
// Event Listeners
document.addEventListener('DOMContentLoaded', renderTodos);
todoForm.addEventListener('submit', addTodo); |