script.js

// Select DOM Elements 
const input = document.getElementById('todo-input')
const addBtn = document.getElementById('add-btn')
const list = document.getElementById('todo-list')

// try to load save todos from localStorage (if any)
const saved = localStorage.getItem('todos');
const todos = saved ? JSON.parse(saved) : [];
function saveTodos() {
    // save current todo arry to localStorage
    localStorage.setItem('todos', JSON.stringify(todos));
}

// creat a dom node for a todo objectand append it to tha list

function creatTodoNode(todo, index) {

    const li = document.createElement('li');
    // checkbox to toggle completion
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.checked = !!todo.completed;
    checkbox.addEventListener("change", () => {
        todo.completed = checkbox.checked;

        //visual feedback`: strike-through when completed

        textSpan.style.textDecoration = todo.completed ? 'line-through' : "";
        saveTodos();
    })

    // Text of the todo 
    const textSpan = document.createElement("span");
    textSpan.textContent = todo.text;
    textSpan.style.margin = '0 8px';
    if (todo.completed) {
        textSpan.style.textDecoration = 'line-through'
    }
    // Add double click eventlistener to edit todo
    textSpan.addEventListener("dblclick", () => {
        const newText = prompt("Edit Todo", todo.text);

        if (newText !== null) {
            todo.text = newText.trim();
            textSpan.textContent = todo.text;
            saveTodos();
        }
    })

    // Delete Todo button
    const delBtn = document.createElement('button');
    delBtn.textContent = "delete";
    delBtn.addEventListener('click', () => {
        todos.splice(index, 1);
        render();
        saveTodos();
    })

    li.appendChild(checkbox);
    li.appendChild(textSpan);
    li.appendChild(delBtn);
    return li
}

// Render the whole todo list from todos arry
function render() {
    list.innerHTML = '';
    // Recreat each items
    todos.forEach((todo, index) => {
        const node = creatTodoNode(todo, index);
        list.appendChild(node)
    });
}

function addTodo() {
    const text = input.value.trim();
    if (!text) {
        return
    }

    // Push a new todo object
    todos.push({ text, completed: false });
    input.value = '';
    render();
    saveTodos();
}

addBtn.addEventListener('click', addTodo)// Input field par Enter key ka event lagana
input.addEventListener('keydown', (event) => {
    // Check karna ke dabi hui key 'Enter' hi hy
    if (event.key === 'Enter') {
        addTodo(); // Hamara purana function jo task add karta hy
    }
});
render();