To-Do List

This is a simple single-page To-Do list app (HTML/CSS/JS). I enhanced it with several UX and visual improvements.

How to run

(Go to the backend directory: npm install npm start)

• Option 1: Open index.html directly in your browser.
• Option 2 (recommended): Run a tiny local server so assets and localStorage behave consistently:

# from project folder
python -m http.server 8000
# then open http://localhost:8000

Modern To‑Do

A small, beautiful, single-file To‑Do web app (vanilla HTML/CSS/JS) focused on pleasant micro-interactions and theme customization.

Features

• Add, edit, and delete tasks (delete supports Undo via toast).
• Separate lists for Pending and Completed tasks.
• Confetti burst when marking a task completed.
• Dark mode (darker neon palette) and Compact mode; both persist to localStorage.
• Inline editing (no blocking prompt) and non-blocking toast UI for confirmations.
• Smooth animations: enter/exit transitions, completion shift, and insertion highlight.
• Animated chroma RGB border around the main card (subtle color cycling).

Files

• index.html — markup and a couple of tiny inline helpers (date display, search hook).
• style.css — all visuals, variables for theming and durations, and animations.
• script.js — app logic (rendering, CRUD, persistence, animations, confetti, theme/compact toggles).

Quick start

1. Clone or download this folder.
2. Open index.html in a modern browser. For the best experience run a simple local server (optional but recommended):

# from the project folder
python -m http.server 8000
# open http://localhost:8000 in your browser

Usage

• Type a task and press Enter or click Add.
• Click the round tick to mark a task done — it will animate out of Pending and into Completed with a highlight.
• Use Edit to change tasks inline, or Delete to remove (the toast offers Undo).
• Use the moon/sun button to toggle theme and the grid button to toggle compact mode.
• Search via the input above the list — it filters tasks live.

To‑Do List — Single page app

This is a small, polished single-page To‑Do app (Vanilla HTML/CSS/JS) with a few productivity and UX extras:

• Add / Edit / Delete tasks (delete supports Undo via toast)
• Completed tasks with confetti on completion
• Canceled Tasks: a dedicated section for canceled items (shows a cross and can be restored)
• Inline date picker for quick task dates (calendar icon next to the Add row)
• Calendar view (monthly grid) with tasks shown on each date and month navigation
• Progress card (canvas pie chart) showing Pending / Completed / Canceled counts
• Theme toggle (light/dark), animated chroma border and subtle UI motion
• Chat widget (client) + backend streaming proxy to a local model (e.g. Ollama phi3)

This README explains how to run the app locally, the environment variables the backend expects, and a short developer note about what to commit.

---

Quick start — frontend only

The frontend is static and can be opened directly, but it's better to serve it over a local server to avoid some browser limitations:

PowerShell (from repo root):

# lightweight server (Python)
python -m http.server 8000
# open http://localhost:8000 in your browser

Or any static server (VS Code Live Server, http-server, etc.).

Backend (chat streaming proxy)

The repository includes a small Express backend in backend/server.js which proxies streaming responses from a local model (for example, Ollama phi3). The backend is optional if you only use the static UI, but the chat widget requires it.

1. Install dependencies:

cd backend
npm install

2. Create a .env file inside backend/ (do NOT commit it). Example keys:

OLLAMA_HOST=localhost
OLLAMA_PORT=11434
# OLLAMA_API_KEY=
SERVER_PORT=4000

3. Start the backend:

cd backend
node server.js

The server will read process.env variables (via dotenv if present) for host/port and expose endpoints used by the frontend chat widget.

Note: If your local model is not running, requests to the streaming endpoint will fail (connection refused). Start your model server first.

Features (detailed)

• Add task: type in the input and press Enter or click Add. Tasks store a timestamp and an optional date.
• Date picker: click the calendar icon next to the date input to pick a date inline. The Add flow will use this date.
• Completed: click the circle/tick to mark done — confetti plays and the task animates into Completed.
• Canceled: click Cancel on a task to move it to the Canceled Tasks section (only the canceled list contains it). You can Restore or Delete a canceled item.
• Calendar: open Calendar view from the menu — month header with prev/next controls, weekday row, and each day shows tasks for that date (canceled tasks are excluded).
• Progress: a canvas pie chart shows the current distribution of Pending / Completed / Canceled tasks and numeric stats.
• Theme: toggle light/dark mode — preference saved to localStorage.

Files

• index.html — main UI
• style.css — styling, theming and animations
• script.js — app logic (rendering, storage, calendar, progress, confetti, date picker, canceled tasks)
• chat/ — chat widget (frontend files)
• backend/ — Node/Express proxy for streaming model responses (optional)

Environment (.env)

• Create backend/.env (do not commit). Example keys above. Keep any API keys out of git.
• We include backend/.env.example (or add one) to show required variables.