script.js•4.01 kB
// DOM Elements
const taskInput = document.getElementById('task-input');
const addTaskBtn = document.getElementById('add-task-btn');
const todoList = document.getElementById('todo-list');
const itemsLeft = document.getElementById('items-left');
const clearCompletedBtn = document.getElementById('clear-completed');
const filterBtns = document.querySelectorAll('.filter-btn');
// App State
let todos = [];
let currentFilter = 'all';
// Initialize the app
window.addEventListener('DOMContentLoaded', () => {
// Initialize with empty array
todos = [];
// Try to load from localStorage if available
const savedTodos = localStorage.getItem('todos');
if (savedTodos) {
try {
todos = JSON.parse(savedTodos);
} catch (e) {
console.error("Error parsing saved todos:", e);
}
}
renderTodos();
updateItemsCount();
});
// Event Listeners
addTaskBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
addTask();
}
});
clearCompletedBtn.addEventListener('click', clearCompleted);
filterBtns.forEach(btn => {
btn.addEventListener('click', () => {
filterBtns.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
currentFilter = btn.dataset.filter;
renderTodos();
});
});
// Functions
function saveTodos() {
try {
localStorage.setItem('todos', JSON.stringify(todos));
} catch (error) {
console.error("Error saving todos:", error);
}
}
function addTask() {
const taskText = taskInput.value.trim();
if (taskText) {
const newTodo = {
id: Date.now(),
text: taskText,
completed: false,
createdAt: new Date().toISOString()
};
todos.push(newTodo);
taskInput.value = '';
renderTodos();
updateItemsCount();
saveTodos();
}
}
function toggleTodo(id) {
todos = todos.map(todo => {
if (todo.id === id) {
return { ...todo, completed: !todo.completed };
}
return todo;
});
renderTodos();
updateItemsCount();
saveTodos();
}
function deleteTodo(id) {
todos = todos.filter(todo => todo.id !== id);
renderTodos();
updateItemsCount();
saveTodos();
}
function clearCompleted() {
todos = todos.filter(todo => !todo.completed);
renderTodos();
updateItemsCount();
saveTodos();
}
function updateItemsCount() {
const activeCount = todos.filter(todo => !todo.completed).length;
itemsLeft.textContent = `${activeCount} item${activeCount !== 1 ? 's' : ''} left`;
}
function renderTodos() {
todoList.innerHTML = '';
const filteredTodos = todos.filter(todo => {
if (currentFilter === 'active') return !todo.completed;
if (currentFilter === 'completed') return todo.completed;
return true; // 'all' filter
});
filteredTodos.forEach(todo => {
const todoItem = document.createElement('li');
todoItem.className = `todo-item ${todo.completed ? 'completed' : ''}`;
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.className = 'todo-checkbox';
checkbox.checked = todo.completed;
checkbox.addEventListener('change', () => toggleTodo(todo.id));
const todoText = document.createElement('span');
todoText.className = 'todo-text';
todoText.textContent = todo.text;
const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn';
deleteBtn.textContent = 'Delete';
deleteBtn.addEventListener('click', () => deleteTodo(todo.id));
todoItem.appendChild(checkbox);
todoItem.appendChild(todoText);
todoItem.appendChild(deleteBtn);
todoList.appendChild(todoItem);
});
}