Todo List: Plan, Track & Stay Productive

Overview

Todo List is a simple and effective web app designed to help users manage their daily tasks. Built with a clean interface and essential features, this tool allows users to add, mark complete, delete, and save tasks directly in the browser.

This project was created to learn core web development concepts including DOM manipulation and local storage.

Key Features

Add Tasks ➕ – Enter and list tasks quickly for better planning.
Check/Uncheck ✅❌ – Mark tasks as completed or revert them when needed.
Delete Tasks 🗑️ – Easily remove completed or unnecessary tasks.
Save to Local Storage 💾 – Tasks persist even after closing the browser.
Clean & Minimal UI 🧼 – Built for distraction-free task management.
Responsive Design 📱 – Optimized for both desktop and mobile screens.

Hosted Website

Try the live version of the Todo List here:

User Experience & Design Approach

- Designed for simplicity and clarity with intuitive task management flow.

- Used JavaScript DOM APIs for dynamic task updates and interactions.

- Implemented CSS Flexbox and Bootstrap to align content cleanly.

- Focused on user convenience by storing data in local storage automatically.

Key Learnings from the Project

Frontend Development

- Improved skills in HTML, CSS, and JavaScript.

- Practiced event handling, dynamic DOM updates, and form control.

- Used Bootstrap for layout structuring and responsiveness.

Web Storage

- Implemented localStorage to persist user data between sessions.