script.js

const todoInput = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const todoContainer = document.getElementById('todoContainer');
const emptyState = document.getElementById('emptyState');
let todos = [];

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

    const todo = {
        id: Date.now(),
        text: text,
        completed: false
    };

    todos.push(todo);
    todoInput.value = '';
    renderTodos();
}

function deleteTodo(id) {
    todos = todos.filter(todo => todo.id !== id);
    renderTodos();
}

function toggleTodo(id) {
    todos = todos.map(todo => 
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
    );
    renderTodos();
}

function renderTodos() {
    if (todos.length === 0) {
        todoContainer.innerHTML = '<div class="empty-state">No todos yet. Add one above to get started!</div>';
        return;
    }

    todoContainer.innerHTML = todos.map(todo => `
                <div class="todo-item">
                    <input type="checkbox" class="todo-checkbox" ${todo.completed ? 'checked' : ''} 
                           onchange="toggleTodo(${todo.id})">
                    <span class="todo-text ${todo.completed ? 'completed' : ''}">${todo.text}</span>
                    <button class="delete-btn" onclick="deleteTodo(${todo.id})">×</button>
                </div>
            `).join('');
}

// Checks if the add button is clicked or enter key is pressed
addBtn.addEventListener('click', addTodo);
todoInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
                addTodo();
            }
});

// Focus input on page load
todoInput.focus();