script.js

document.addEventListener('DOMContentLoaded', () => {
 // State management
 let todos = JSON.parse(localStorage.getItem('todos')) || [];
 let currentFilter = 'all';

 // DOM Elements
 const todoInput = document.getElementById('todo-input');
 const addBtn = document.getElementById('add-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');

 // Initialize
 renderTodos();

 // Functions
 function addTodo() {
 const text = todoInput.value.trim();
 if (text === '') return;

 const newTodo = {
 id: Date.now(),
 text: text,
 completed: false,
 createdAt: new Date().toISOString()
 };

 todos.unshift(newTodo);
 todoInput.value = '';
 saveAndRender();

 // Focus back to input
 todoInput.focus();
 }

 function toggleTodo(id) {
 todos = todos.map(todo => {
 if (todo.id === id) {
 return { ...todo, completed: !todo.completed };
 }
 return todo;
 });
 saveAndRender();
 }

 function deleteTodo(id) {
 const element = document.querySelector(`[data-id="${id}"]`);
 element.style.transform = 'translateX(20px)';
 element.style.opacity = '0';

 setTimeout(() => {
 todos = todos.filter(todo => todo.id !== id);
 saveAndRender();
 }, 200);
 }

 function clearCompleted() {
 todos = todos.filter(todo => !todo.completed);
 saveAndRender();
 }

 function setFilter(filter) {
 currentFilter = filter;
 filterBtns.forEach(btn => {
 btn.classList.toggle('active', btn.dataset.filter === filter);
 });
 renderTodos();
 }

 function saveAndRender() {
 localStorage.setItem('todos', JSON.stringify(todos));
 renderTodos();
 }

 function renderTodos() {
 let filteredTodos = todos;
 if (currentFilter === 'active') {
 filteredTodos = todos.filter(todo => !todo.completed);
 } else if (currentFilter === 'completed') {
 filteredTodos = todos.filter(todo => todo.completed);
 }

 if (filteredTodos.length === 0) {
 todoList.innerHTML = `
 <div class="empty-state">
 <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
 <p>${getEmptyMessage()}</p>
 </div>
 `;
 } else {
 todoList.innerHTML = filteredTodos.map(todo => `
 <li class="todo-item ${todo.completed ? 'completed' : ''}" data-id="${todo.id}">
 <div class="checkbox-custom" onclick="window.app.toggleTodo(${todo.id})">
 <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
 </div>
 <span class="todo-text" onclick="window.app.toggleTodo(${todo.id})">${escapeHTML(todo.text)}</span>
 <button class="delete-btn" onclick="window.app.deleteTodo(${todo.id})" aria-label="Delete Task">
 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
 </button>
 </li>
 `).join('');
 }

 const activeCount = todos.filter(todo => !todo.completed).length;
 itemsLeft.textContent = `${activeCount} item${activeCount !== 1 ? 's' : ''} left`;
 }

 function getEmptyMessage() {
 if (currentFilter === 'all') return 'No tasks yet. Start by adding one!';
 if (currentFilter === 'active') return 'No active tasks. Good job!';
 if (currentFilter === 'completed') return 'No completed tasks yet.';
 return '';
 }

 function escapeHTML(str) {
 const div = document.createElement('div');
 div.textContent = str;
 return div.innerHTML;
 }

 // Event Listeners
 addBtn.addEventListener('click', addTodo);
 todoInput.addEventListener('keypress', (e) => {
 if (e.key === 'Enter') addTodo();
 });

 clearCompletedBtn.addEventListener('click', clearCompleted);

 filterBtns.forEach(btn => {
 btn.addEventListener('click', () => setFilter(btn.dataset.filter));
 });

 // Expose functions to window for onclick handlers
 window.app = {
 toggleTodo,
 deleteTodo
 };
});