Project 6: Todo List App

Project Overview

This todo list app allows users to add, delete, and mark tasks as complete. It uses local storage to persist data across sessions.

1. Structure and Layout

The app is composed of a header containing the input field and add button, a main section listing the tasks, and a footer showing the number of remaining tasks.

2. Key Features

- Add new tasks and display them in a list
- Mark tasks as completed or delete them
- Persist tasks using localStorage
- Responsive layout that adapts to mobile and desktop screens

3. Code Snippet

The following snippet shows how tasks are added:

// Todo List App - JavaScript Code Example
const addButton = document.getElementById('add-btn');
addButton.addEventListener('click', () => {
    const input = document.getElementById('new-task');
    const task = input.value.trim();
    if (task !== '') {
        addTaskToList(task);
        input.value = '';
    }
});

function addTaskToList(task) {
    const li = document.createElement('li');
    li.textContent = task;
    document.getElementById('task-list').appendChild(li);
}
    

Below is a screenshot of the code:

4. Challenges and Learnings

Implementing data persistence with local storage and ensuring the application remained responsive across devices were key challenges. Through this project I strengthened my understanding of DOM manipulation and browser storage APIs.