Devlog 5

What did I make?

I built a web app that turns any natural language goal into a structured, actionable to-do list. Powered by Groq AI using the openai/gpt-oss-20b model, typing a goal breaks it down into specific tasks with dynamic priorities (high, medium, low), time estimates, and dependencies. It features interactive task cards, live progress tracking, priority statistics, and robust localStorage persistence. The app runs 100% client-side, deployed directly on GitHub Pages.

What was challenging?

Ensuring the AI produced specific tasks rather than generic placeholders, and enforcing strict JSON output parsing without markdown clutter. Refactoring the architecture to a direct browser-level API model while adhering strictly to a zero-HTML-in-JS policy using native DOM manipulation. Also handling edge cases like state restoration on reload and managing Git tracking (.DS_Store).

What am I proud of?

The AI adapts dynamically-generating tailored, high-quality plans for everything from C++ systems programming to personal projects. The codebase is clean, modular, and resilient, with full interactive features like progress bars and checkbox persistence working seamlessly together.

What should people know?

Link: https://osnacc.github.io/AI-To-Do/

Just open the live link, type any goal, click “Generate Plan”, check off tasks, and reload the page to test full state persistence! No backend server or local setup required.

Devlog 4

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress Done

It’s the final development session. The app is fully deployed and working end-to-end: user opens the GitHub Pages link, types any goal, gets back a structured AI-generated plan as task cards, checks off tasks, and the whole state persists in the browser. I finished the interaction layer (progress bar, statistics, localStorage persistence, clear plan) and polished the UI with animations, hover states, and an empty state. The project is now feature-complete.

Features Added/Worked on

• Progress bar with smooth width animation on checkbox click
• Task counter (3 / 8 tasks completed) and live percentage
• Total estimated time calculated from all tasks
• Priority statistics (High / Medium / Low counts)
• Save full plan + checkbox state to localStorage
• Automatic restore of plan and checked tasks on page reload
• Clear Plan button to wipe localStorage and return to empty state
• Empty state hint shown when no plan exists
• Card hover effect with subtle right shift
• Card fade-in animation on first render
• Fixed localStorage edge cases with try / catch
• Added data-task-id on cards for reliable state restoration

What new I learnt

• I learnt how localStorage works and why JSON.stringify / JSON.parse are required
• I learnt why localStorage access must be wrapped in try / catch (private mode, quota)
• I learnt how to restore UI state from storage on page load
• I learnt how CSS animations work with animation-delay for staggered effects
• I learnt that CSS specificity matters when the same class is styled twice
• I learnt how to design an empty state that guides the user
• I learnt how data-task-id attributes bridge DOM and app state
• I learnt to keep the app resilient: even if one part fails, the rest keeps working

Try It

Live Demo - fully working, backend on Render

Note: the first request may take up to 1 minute while the free Render instance wakes up. Subsequent requests are fast.

Devlog 3

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress Done

It’s the 7th hour into the project, and the app is now fully deployed and working end-to-end in the browser. A user opens the GitHub Pages link, types any goal, and the frontend sends a request to a live backend on Render, which calls gpt-4o-mini and returns structured task cards rendered on the page. I have connected OpenAI with Structured Outputs, added validation, loading and error states, interactive checkboxes, and deployed the backend with CORS configured for GitHub Pages.

Features Added/Worked on

• Connected OpenAI gpt-4o-mini with Structured Outputs (JSON Schema)
• Created openai.js as an isolated module for the model call
• Added POST /api/generate with validation (non-empty string, max 500 chars)
• Added error mapping for 401, 429 and generic failures
• System prompt tuned to produce specific, actionable tasks with priorities, time estimates, and dependencies
• Rendered task cards with priority-colored left border, priority badge and estimated time
• Added interactive checkboxes with completed state (dimmed + strikethrough)
• Added live character counter for the textarea
• Added loading spinner and error box
• Deployed backend to Render (Free tier) with OPENAI_API_KEY as an environment variable
• Added CORS middleware allowing requests from GitHub Pages and localhost
• Configured frontend to switch API base URL between localhost and Render

What new I learnt

• I learnt how Structured Outputs work in the OpenAI API (strict schema, additionalProperties)
• I learnt why API keys must live in .env on the server and never in frontend code
• I learnt that fetch does not throw on HTTP 4xx/5xx - you have to check response.ok manually
• I learnt how try / catch / finally works for cleaning up UI state on errors
• I learnt BEM-style class naming for state variants (taskCard–done)
• I learnt building DOM with createElement + appendChild instead of innerHTML (safer, no XSS)
• I learnt how CORS works and why browsers block cross-origin requests by default
• I learnt how to deploy a Node.js backend to Render and connect it to a static frontend on GitHub Pages

Try It

Live Demo - fully working, backend on Render

• First Generate can be until 1 minute wait please until server will wake up ;)

AI To Do List

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

What works now

• Frontend UI: gradient header, glassmorphism goal card, textarea, “Generate Plan” button
• Live character counter (updates on every keystroke)
• Loading spinner while waiting for the backend
• Error box for empty input, auto-clears on retry
• Backend: Express server serving /docs and exposing GET /api/health
• POST /api/generate - validates the goal (non-empty, max 500 chars) and returns a hardcoded JSON plan with three tasks
• GitHub Pages previews the static UI

No AI yet - the endpoint exists so the data shape and client flow can be tested first.

What’s next

• Connect OpenAI gpt-4o-mini with Structured Outputs (JSON Schema)
• Replace the fake response in /api/generate with a real model call
• Replace the frontend placeholder with a real fetch() to the backend
• Render task cards: title, description, priority, time, dependencies
• Checkbox + progress bar + total time
• Priority statistics
• Save plan to localStorage
• Polish, mobile pass, deploy

Stack

• Frontend: HTML, CSS, vanilla JS
• Backend: Node.js, Express 5
• AI: OpenAI gpt-4o-mini, Structured Outputs (planned)
• Persistence: localStorage (planned)
• Preview: GitHub Pages (/docs)

Try It

Live Demo - UI only, backend not connected yet

AI To Do List

Turn any goal written in natural language into a structured, actionable to-do list. Powered by OpenAI.

Progress

• Project restructured into a single directory layout
• Frontend UI finished: gradient header, glassmorphism card with textarea, static character counter, “Generate Plan” button, hidden loading/error/dashboard sections
• server.js - Express server, serves /docs, exposes GET /api/health
• package.json - scripts start / dev, deps: express, dotenv, openai
• .env.example - template for PORT and OPENAI_API_KEY
• .gitignore - protects .env and node_modules/
• docs/style.css - dark theme, gradients, glass cards, responsive
• GitHub Pages previews the UI from docs/

No AI yet - that comes next.

Goal

Remove the “where do I start?” problem. A user types any goal - “build a portfolio website”, “prepare for a C++ exam”, “organize a birthday party” - and gets back a concrete, ordered list of tasks with priorities, time estimates, and dependencies.

The AI must not just rephrase the goal. It must decompose it into specific, actionable steps.

Stack

• Frontend: HTML, CSS, vanilla JS
• Backend: Node.js, Express 5
• AI: OpenAI gpt-4o-mini, Structured Outputs
• Persistence: localStorage (planned)
• Preview: GitHub Pages (/docs)

Try It

Live Demo - UI only, backend not connected yet