📝 Todo List Source Code

Project Features

✅ Add tasks | ✅ Mark complete | ✅ Delete tasks | ✅ localStorage persistence | ✅ Responsive UI

HTML Structure

<div class="container">
    <h1>📝 Todo List</h1>
    
    <div class="input-container">
        <input type="text" id="todoInput" placeholder="Add a new task...">
        <button id="addBtn">Add</button>
    </div>
    
    <ul class="todos" id="todoList"></ul>
    <div class="empty-message" id="emptyMsg">No tasks yet</div>
</div>

JavaScript - Add Todo Function

function addTodo() {
    const text = todoInput.value.trim();
    if (text === '') return;
    
    todos.push({ text, completed: false });
    todoInput.value = '';
    saveTodos();
    render();
}

JavaScript - Render Todos

function render() {
    todoList.innerHTML = '';
    emptyMsg.style.display = todos.length === 0 ? 'block' : 'none';
    
    todos.forEach((todo, index) => {
        const li = document.createElement('li');
        li.className = `todo-item ${todo.completed ? 'completed' : ''}`;
        li.innerHTML = `
            <span class="todo-text">${todo.text}</span>
            <button class="delete-btn" onclick="deleteTodo(${index})">Delete</button>
        `;
        
        li.querySelector('.todo-text').addEventListener('click', () => toggleTodo(index));
        todoList.appendChild(li);
    });
}

JavaScript - Toggle and Delete

function deleteTodo(index) {
    todos.splice(index, 1);
    saveTodos();
    render();
}

function toggleTodo(index) {
    todos[index].completed = !todos[index].completed;
    saveTodos();
    render();
}

function saveTodos() {
    localStorage.setItem('todos', JSON.stringify(todos));
}

Key Concepts

• DOM Manipulation (createElement, appendChild, innerHTML)
• Event Listeners (click, keypress, addEventListener)
• Array Methods (push, splice, forEach)
• localStorage API (getItem, setItem)
• JSON Methods (parse, stringify)
• Conditional Rendering
• CSS Classes Toggle