From 9145687b68bb6ab36762612403569da622327462 Mon Sep 17 00:00:00 2001
From: ryang3d <13091837+ryang3d@users.noreply.github.com>
Date: Mon, 30 Mar 2026 20:14:14 -0700
Subject: [PATCH] Initial commit
---
.gitignore | 24 ++
README.md | 215 ++++++++++++
index.html | 782 ++++++++++++++++++++++++++++++++++++++++++
package-lock.json | 850 ++++++++++++++++++++++++++++++++++++++++++++++
package.json | 6 +
server.js | 132 +++++++
6 files changed, 2009 insertions(+)
create mode 100644 .gitignore
create mode 100644 README.md
create mode 100644 index.html
create mode 100644 package-lock.json
create mode 100644 package.json
create mode 100644 server.js
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..90a96e6
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,24 @@
+# Dependencies
+node_modules/
+
+# AI assistant configuration
+.claude/
+
+# User data and persistence
+todos.json
+
+# OS-specific files
+.DS_Store
+Thumbs.db
+
+# Editor files
+*.swp
+*.swo
+*~
+.idea/
+.vscode/
+*.sublime-*
+
+# Logs (optional)
+*.log
+npm-debug.log*
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..9937e83
--- /dev/null
+++ b/README.md
@@ -0,0 +1,215 @@
+# Todo List Application
+
+A modern, feature-rich todo list application built with Express.js and vanilla JavaScript. This application provides a clean interface for managing your daily tasks with persistent storage and an intuitive drag-and-drop reordering system.
+
+> **Built with AI Assistants**: This entire application was developed as an **experiment** to test the capabilities of locally hosted LLMs running on consumer-grade hardware. Using agentic coding techniques, every line of code was generated through iterative agent interactions without any cloud-based APIs or external AI services. This demonstrates what's possible with AI-assisted software development workflows running entirely on personal machines.
+
+## Features
+
+### Core Functionality
+- **Create Todos**: Add new tasks with a simple input field
+- **View Todos**: See all your tasks in a clean, organized list
+- **Edit Todos**: Click on any todo text to edit it inline
+- **Complete Tasks**: Check off items as you finish them
+- **Delete Todos**: Remove completed or unwanted tasks
+- **Drag & Drop Reordering**: Reorganize your tasks by dragging and dropping them into your preferred order
+
+### User Experience
+- **Dark/Light Mode Toggle**: Switch between dark and light themes with a single click
+- **Customizable Title**: Click on the "Todo List" title to rename it
+- **Visual Indicators**: Clear visual feedback when dragging items to reorder
+- **Responsive Design**: Clean, modern interface that adapts to your preferences
+
+### Technical Features
+- **Persistent Storage**: All todos are saved to a `todos.json` file, so your data persists between sessions
+- **RESTful API**: Full REST API endpoints for external integration
+- **CORS Enabled**: Supports cross-origin requests for potential mobile or web app integrations
+- **Auto-Initialization**: Automatically creates the storage file if it doesn't exist
+
+## Technologies Used
+
+- **Backend**: Node.js with Express.js v5.2.1
+- **Frontend**: Vanilla JavaScript, HTML5, CSS3
+- **Storage**: File-based JSON storage
+- **Styling**: CSS Variables for theming support
+
+## Prerequisites
+
+Before you begin, ensure you have the following installed:
+- **Node.js** (v14 or higher recommended)
+- **npm** (comes bundled with Node.js)
+
+## Installation & Setup
+
+### 1. Clone or Download the Project
+Make sure you have all the project files in your directory:
+```
+project/
+├── server.js
+├── index.html
+├── package.json
+└── todos.json (created automatically)
+```
+
+### 2. Install Dependencies
+Navigate to the project directory and run:
+
+```bash
+npm install
+```
+
+This will install the required dependencies:
+- `express` - Web framework for Node.js
+- `cors` - Middleware for enabling CORS
+
+### 3. Start the Server
+Run the server with:
+
+```bash
+node server.js
+```
+
+You should see the following message:
+```
+Todo API server running at http://localhost:3000
+```
+
+### 4. Access the Application
+Open your web browser and navigate to:
+```
+http://localhost:3000
+```
+
+## Usage Guide
+
+### Adding a New Todo
+1. Type your task in the input field labeled "What needs to be done?"
+2. Click the "Add" button or press Enter
+3. Your new todo will appear in the list
+
+### Marking a Todo as Complete
+- Click the checkbox to the left of any todo to toggle its completion status
+- Completed items will have a strikethrough text style
+
+### Editing a Todo
+1. Click directly on the todo text you want to edit
+2. The text will become an editable input field
+3. Type your changes and press Enter or click outside to save
+
+### Deleting a Todo
+- Click the delete button (🗑️ icon) on the right side of any todo to remove it
+
+### Reordering Todos
+1. Click and hold on the drag handle (⋮⋮) on the left side of any todo
+2. Drag the todo to your desired position
+3. You'll see visual indicators showing where the item will be inserted
+4. Release to drop the todo in its new position
+
+### Dark Mode Toggle
+- Click the moon/sun icon in the top-right corner to switch between dark and light themes
+- Your theme preference is saved automatically
+
+### Changing the Title
+- Click on the "Todo List" title at the top of the page
+- Type your custom title
+- Press Enter or click outside to save
+
+## API Endpoints
+
+The application provides a RESTful API for programmatic access:
+
+### Get All Todos
+```
+GET /todos
+```
+Returns all todos as a JSON array.
+
+### Create a Todo
+```
+POST /todos
+Content-Type: application/json
+
+{
+ "text": "Your todo text here"
+}
+```
+Creates a new todo and returns it with an assigned ID.
+
+### Update a Todo
+```
+PUT /todos/:id
+Content-Type: application/json
+
+{
+ "text": "Updated text (optional)",
+ "completed": true (optional)
+}
+```
+Updates the specified todo by ID.
+
+### Delete a Todo
+```
+DELETE /todos/:id
+```
+Deletes the todo with the specified ID.
+
+### Reorder Todos
+```
+POST /reorder
+Content-Type: application/json
+
+{
+ "order": [1, 2, 3]
+}
+```
+Reorders todos based on the array of IDs provided.
+
+## File Structure
+
+```
+project/
+├── server.js # Express.js backend server
+├── index.html # Frontend HTML with embedded CSS and JavaScript
+├── package.json # Node.js dependencies
+└── todos.json # Persistent storage file (auto-created)
+```
+
+## Data Storage
+
+All todo data is stored in a `todos.json` file in the project root directory. This file is:
+- Automatically created on first run if it doesn't exist
+- Updated after every create, update, delete, or reorder operation
+- Persisted even after server restart
+
+## Default Port
+
+The application runs on port `3000` by default. You can change this by modifying the `PORT` constant in `server.js`.
+
+## Troubleshooting
+
+### Common Issues
+
+**Port already in use:**
+If port 3000 is already occupied, either:
+- Stop the process using port 3000
+- Change the `PORT` variable in `server.js` to a different value
+
+**Todos not persisting:**
+Check that the `todos.json` file has write permissions in your project directory.
+
+**Dependencies not installed:**
+Run `npm install` again to ensure all dependencies are properly installed.
+
+## License
+
+This project is provided as-is for educational and personal use.
+
+## Future Enhancements
+
+Potential features for future versions:
+- Category/tags support
+- Due dates and reminders
+- Priority levels
+- Search and filter functionality
+- Export/import todos
+- Cloud synchronization
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..b94e9ce
--- /dev/null
+++ b/index.html
@@ -0,0 +1,782 @@
+
+
+
+ Todo List
+
+
+
+ Todo List
+
+
+
+ Add
+
+
+
+
+
+
+