index.js

document.addEventListener('DOMContentLoaded', function(){
    const todoinput = document.getElementById('todo-input');
    const addtaskbutton = document.getElementById('add-task-btn');
    const todolist = document.getElementById('todo-list');
    const removedlist = document.getElementById('removed-list');

    let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
    let removedtasks = JSON.parse(localStorage.getItem('removed')) || [];

    tasks.forEach(function(task){rendertask(task)});
    removedtasks.forEach(function(remove){if (remove) renderremovedtask(remove)});
    

    addtaskbutton.addEventListener('click',function(event){
        event.preventDefault();
        const tasktext = todoinput.value.trim();
        if (tasktext == "") return;

        const newtask = {
            id: Date.now(),
            text: tasktext,
            completed: false
        }

        tasks.push(newtask);
        savetasks();
        todoinput.value = '';
        rendertask(newtask);
    

    })


    function rendertask(task){
        const li = document.createElement('li');
        li.setAttribute('data-id', task.id);
        if (task.completed) li.classList.add('completed');
        li.innerHTML = `
        <span>${task.text}</span>
        <button id="remove">remove</button>
        `;
        li.addEventListener('click',function(event){
            if (event.target.tagName === 'BUTTON') return;
            task.completed = !task.completed;
            li.classList.toggle('completed')
            savetasks();
        })

        li.querySelector('#remove').addEventListener('click',function(event){
            event.stopPropagation(); //prevent toggle from firing
            for (let i = 0; i < tasks.length; i++){
                if (tasks[i].id == task.id) removedtasks.push(task);
            }
            tasks = tasks.filter(t => t.id !== task.id);
            li.remove();
            savetasks();
            saveremovedtasks();
            renderremovedtask(task);
        })

        todolist.appendChild(li);
        
    }

    function renderremovedtask(removetask){
        let li = document.createElement('li');
        li.setAttribute('data-id', removetask.id);
        li.innerHTML = `
        <span>${removetask.text}</span>
        <button id='restore'>restore</button>
        <button id='delete'>delete</button>`;

        li.querySelector('#restore').addEventListener('click', function(){
            for (let i = 0; i < removedtasks.length; i++){
                if (removetask.id == removedtasks[i].id) tasks.push(removetask);
            }
            removedtasks = removedtasks.filter((t) => t.id != removetask.id);
            li.remove();
            rendertask(removetask);
            savetasks();
            saveremovedtasks();
        })

        removedlist.appendChild(li);

        li.querySelector('#delete').addEventListener('click', function(){
            removedtasks = removedtasks.filter(t => t.id != removetask.id);
            li.remove();
            saveremovedtasks();

        })
    }

    function savetasks(){
        localStorage.setItem('tasks', JSON.stringify(tasks));
    }

    function saveremovedtasks(){
        localStorage.setItem('removed', JSON.stringify(removedtasks));
    }
})