script.js

const todoInput = document.getElementById('todoinput');
const addButton = document.getElementById('addinput');
const taskList = document.querySelector('.todo ul');
// const footer = document.querySelector('.todo footer');

let tasks = []; // Array to store tasks

addButton.addEventListener('click', function() {
    const taskText = todoInput.value.trim(); // Get input value and remove whitespace

    if (taskText !== '') {
        addTask(taskText);
        todoInput.value = ''; // Clear input field
        updateFooter();
    }
});

function addTask(text) {
    const task = {
        id: Date.now(), // Unique identifier for each task
        text: text,
        completed: false
    };

    tasks.push(task);
    renderTask(task);
}

function renderTask(task) {
    const li = document.createElement('li');
    li.setAttribute('data-key', task.id);

    const taskText = document.createElement('span');
    taskText.textContent = task.text;
    if (task.completed) {
        taskText.style.textDecoration = 'line-through';
    }

    const deleteButton = document.createElement('button');
    deleteButton.textContent = 'Delete';
    deleteButton.classList.add('but');
    deleteButton.addEventListener('click', function() {
        deleteTask(task.id);
    });

    li.appendChild(taskText);
    li.appendChild(deleteButton);
    taskList.appendChild(li);
}

function deleteTask(id) {
    tasks = tasks.filter(task => task.id !== id);
    const taskItem = document.querySelector(`[data-key='${id}']`);
    if (taskItem) {
        taskItem.remove();
    }
    updateFooter();
}

function updateFooter() {
    const completedTasks = tasks.filter(task => task.completed).length;
    const uncompletedTasks = tasks.length - completedTasks;
    footer.textContent = `completed: ${completedTasks} | uncompleted: ${uncompletedTasks}`;
}

function toggleTaskCompletion(id) {
    const task = tasks.find(task => task.id === id);
    if (task) {
        task.completed = !task.completed;
        const taskItem = document.querySelector(`[data-key='${id}']`);
        if (taskItem) {
            const taskText = taskItem.querySelector('span');
            taskText.style.textDecoration = task.completed ? 'line-through' : 'none';
        }
        updateFooter();
    }
}