Local Todo Application

A private, fully local, and beautifully designed Todo application built with pure HTML, CSS, and vanilla JavaScript. It works directly in your web browser with zero installation required, treating a local .json file as its secure database.

🚀 Getting Started

1. Launch the App: Simply open index.html in any modern web browser (Google Chrome or Microsoft Edge recommended).
2. Connect a Database:
   • First Time? Click Export in the bottom left corner to create a new todo-data.json database file anywhere on your hard drive (e.g., inside your OneDrive folder for cloud syncing).
   • Returning? Click Import and select your existing todo-data.json file.

💾 How Saving Works (The Database)

This application has no backend server and does not permanently cache data in your browser. This means your data is completely private.

• Auto-Saving: Once you import/export a file, it becomes "Linked". Every edit, checkmark, or reorder you make is instantly and silently auto-saved directly to that .json file on your hard drive!
• Session Security:
  • If you refresh the tab, your data stays loaded and the file stays linked.
  • If you close the tab, the browser instantly wipes its memory for security. When you open a new tab, the app will start blank and you must click Import to reconnect your database.
• Manual Save: While the app auto-saves constantly, you can always click the Save button for peace of mind.

✨ Features

• Multiple Lists: Create as many separate lists as you need using the sidebar.
• Drag and Drop: Grab the handle (⠿) next to any list or task to seamlessly reorder them with smooth animations.
• Edit Anything:
  • Click on a list's title at the top to rename the list.
  • Click on any task's text to rename the task. Just press Enter or click away to save.
• Rich Text Comments: Every task has a comment box that supports rich formatting (Bold, Italic, Underline, Bulleted Lists, and Numbered Lists).
• Responsive Design: On mobile devices or small windows, the sidebar cleanly slides off-screen into an accessible "Hamburger Menu" (☰).
• Collapsible Sidebar: On desktop, click the hamburger menu to collapse the sidebar into a minimalist, icon-only view.