Initial commit
This commit is contained in:
ryang3d
@@ -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
|
||||
Reference in New Issue
Block a user