Welcome to Your Advanced ToDo List App

This advanced ToDo list app is designed to help you manage your tasks efficiently with a simple, intuitive interface. Whether you’re planning your day, organizing work tasks, or tracking personal goals, this app is equipped with features that make task management a breeze.

Key Features

• Add Tasks: Quickly add new tasks to your list with a press of a button.
• Mark Tasks as Completed: Click on a task to mark it as completed or uncompleted, helping you track your progress.
• Edit Tasks: Made a mistake or need to update a task’s details? Easily edit any task with the edit option.
• Delete Tasks: Remove tasks that are no longer needed to keep your list tidy.
• Sort Tasks: Automatically sort your tasks alphabetically to find them faster and organize your list better.

How to Use the App

1. Adding a New Task: Simply type your task into the input field and click the “Add” button or press enter. Your task will immediately appear at the bottom of the list.
2. Completing Tasks: Complete a task by clicking on it. This will cross the task out, indicating completion. Click again to unmark it.
3. Editing a Task: Next to each task, you’ll find an “Edit” button. Click it to change the task’s text. Confirm your edits in the prompt that appears.
4. Deleting a Task: Use the “Delete” button next to any task to remove it from your list. A confirmation will ask if you’re sure, preventing accidental deletions.
5. Sorting Tasks: Click the “Sort” button to reorder your tasks alphabetically. This feature helps in managing long lists and finding tasks easily.

Persistence and Accessibility

Your tasks are saved locally in your browser’s storage, meaning they’ll still be there when you return or refresh the page. This allows you to close the tab or browser without worrying about losing your tasks.

Designed for Simplicity and Efficiency

With a focus on user-friendly design and essential functionalities, this advanced ToDo list app aims to streamline your task management without overwhelming you with complicated features. It’s a tool created to enhance productivity and keep your focus on what matters most—getting things done.

Advanced ToDo List App: A Detailed Code Explanation

Initial Setup and Event Listeners

document.addEventListener('DOMContentLoaded', function() {

Waits for the entire HTML document to be fully loaded and parsed before running the enclosed script, ensuring all DOM elements are accessible.

const addButton = document.getElementById('add-todo');
const sortButton = document.getElementById('sort-todos');
const inputField = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

Declares constants by selecting HTML elements based on their IDs, used to manipulate the ToDo list.

const savedTodos = JSON.parse(localStorage.getItem('todos')) || [];

Attempts to retrieve saved tasks from localStorage. Defaults to an empty array if none are found.

savedTodos.forEach(todo => addTodoElement(todo.text, todo.completed));

Iterates over each saved task, creating an element on the page for each.

addButton.addEventListener('click', function() {
    addTodo();
});

Adds an event listener to the “Add” button, triggering the addTodo function when clicked.

sortButton.addEventListener('click', function() {
    sortTodos();
});

Adds an event listener to the “Sort” button, triggering the sortTodos function when clicked.

Adding a New Task

function addTodo() {
    const todoText = inputField.value.trim();
    if (todoText !== '') {
        addTodoElement(todoText);
        inputField.value = ''; // Clear input field after adding
    }
}

Gets text from input field, trims whitespace, checks it’s not empty, then calls addTodoElement with the text.

Creating and Manipulating Task Elements

function addTodoElement(text, completed = false) {
    const li = document.createElement('li');
    li.textContent = text;
    li.classList.add('todo-item');
    if (completed) {
        li.classList.add('completed');
    }

Creates a new list item (li) element, sets its text, adds class for styling, and marks as completed if necessary.

const buttonsContainer = document.createElement('div');

const editButton = document.createElement('button');
editButton.textContent = 'Edit';
editButton.classList.add('edit-btn');
editButton.onclick = function() { editTodo(li, text); };

const deleteButton = document.createElement('button');
deleteButton.textContent = 'Delete';
deleteButton.classList.add('delete-btn');
deleteButton.onclick = function() { deleteTodo(li); };

buttonsContainer.appendChild(editButton);
buttonsContainer.appendChild(deleteButton);

li.appendChild(buttonsContainer);

Creates container for buttons, then creates and configures “Edit” and “Delete” buttons, including setting up their event handlers. Adds buttons to the list item.

li.addEventListener('click', function(event) {
    if (event.target.tagName !== 'BUTTON') {
        li.classList.toggle('completed');
        saveTodos();
    }
});

todoList.appendChild(li);
saveTodos();
}

Adds event listener to each task that toggles ‘completed’ class and saves updated list. Ensures clicks on buttons don’t toggle completion.

Editing and Deleting Tasks

function editTodo(item, text) {
    const newText = prompt('Edit your task:', text);
    if (newText !== null && newText.trim() !== '') {
        item.firstChild.nodeValue = newText.trim(); // Update text excluding buttons
        saveTodos();
    }
}

Allows editing a task’s text with a prompt and updates task if new value is entered.

function deleteTodo(item) {
    if (confirm('Are you sure you want to delete this task?')) {
        item.remove();
        saveTodos();
    }
}

Removes a task from the list after confirmation and updates localStorage.

Sorting Tasks

function sortTodos() {
    let items = Array.from(todoList.querySelectorAll('.todo-item'));
    items.sort((a, b) => a.textContent.localeCompare(b.textContent));

    items.forEach(item => todoList.appendChild(item));
    saveTodos(); // Reflect the new order in localStorage
}

Collects tasks, sorts them alphabetically, then re-adds them to the list in sorted order. Updates localStorage with new order.

Saving Tasks to localStorage

function saveTodos() {
    const todos = Array.from(todoList.children).map(li => ({
        text: li.childNodes[0].nodeValue.trim(),
        completed: li.classList.contains('completed')
    }));
    localStorage.setItem('todos', JSON.stringify(todos));
}

Iterates over tasks, creates an array of objects with each task’s text and completion status, then saves to localStorage in JSON format.