script.js

// SELECTING ELEMENTS
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskContainer = document.getElementById('taskContainer');
const emptyState = document.getElementById('emptyState');

// ARRAY TO STORE TASKS
let tasks = [];

// FUNCTION TO ADD TASK
function addTask() {
    text = taskInput.value.trim();

    if (text === '') {
        taskInput.setAttribute('placeholder', 'Enter a Task!');
        return;
    }

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

    tasks.push(task);
    taskInput.value = '';
    renderTasks();
}

// FUNCTION TO TOGGLE TASK
function toggleTask(id) {
    tasks = tasks.map(task => 
        task.id === id ? {...task, completed: !task.completed} : task
    );
    renderTasks();
}

// FUNCTION TO DELETE TASK
function deleteTask(id) {
    tasks = tasks.filter(task => task.id !== id);
    renderTasks();
}

// FUNCTION TO RENDER TASKS
function renderTasks() {
    if (tasks.length === 0) {
        taskContainer.innerHTML = `
            <div class="empty-state">
                No tasks yet. Add one above to get started!
            </div>
        `;
        return;
    }
    
    taskContainer.innerHTML = tasks.map(task => `
        <div class="task">
            <input type="checkbox" class="checkbox" ${task.completed ? 'checked' : ''}
            onchange="toggleTask(${task.id})">
            <span class="task-text ${task.completed ? 'completed' : ''}">${task.text}</span>
            <button class="delete-btn" onclick="deleteTask(${task.id})">×</button>
        </div>
    `).join('');
}

// EVENT LISTENERS
taskInput.focus();

addBtn.addEventListener('click', addTask);

taskInput.addEventListener('click', () => {
    taskInput.setAttribute('placeholder', 'Task');
});

taskInput.addEventListener('keypress', e => {
    if (e.key === 'Enter') {
        addTask();
    }
});