JS To-Do List

Project Overview

A simple yet functional to-do list web application developed with pure HTML, CSS, and JavaScript. Users can add, edit, delete, and mark tasks as complete. The app features a responsive design optimized for both desktop and mobile, along with a dark mode for comfortable night-time use. All tasks are persisted to localStorage so they survive page refreshes.

Features

• ✓Add, edit, and delete tasks for efficient task management
• ✓Mark tasks as complete to track progress
• ✓Responsive design optimized for desktop and mobile devices
• ✓Dark mode for reduced eye strain during night-time use
• ✓localStorage persistence — tasks survive page refreshes without a backend

Challenges

• •Designing a minimal UI that stays usable on both desktop and mobile
• •Implementing a clean dark mode toggle without a CSS framework
• •Syncing task state reliably to localStorage on every mutation

Solution

Used CSS custom properties for theming — a single class toggle on the root element swaps the entire color scheme. The task array is the single source of truth, serialized to JSON and synced to localStorage on every change.

Architecture

Single-page vanilla JavaScript app. DOM manipulation handles all UI updates. A task array is the single source of truth, serialized to localStorage on every mutation. CSS custom properties power the dark/light theme toggle.

Results & Impact

• ✓Live demo instantly accessible via GitHub Pages
• ✓Tasks persist across sessions with zero backend infrastructure
• ✓Dark mode and responsive layout work seamlessly across all devices