This is a web-based Todo List application that allows users to:
- Add, edit, and remove tasks.
- Categorize tasks into Current Tasks, Other Tasks, and Completed Tasks.
- Automatically move tasks to Completed Tasks upon checking them, with the completion date recorded.
- Reorder tasks within each category.
- Markdown notes can also be added and rendered as formatted text.
- Persistent task data is stored in a
tasks.json
file to keep a record of task history.
- Task Management: Add, edit, remove, and categorize tasks.
- Task Reordering: Drag and drop tasks within lists to reorder them.
- Completed Tasks: Mark tasks as complete and automatically log their completion date.
- Task History: Tasks persist through page reloads and server restarts with a completion history.
- Markdown Notes: Add notes in Markdown format, which are rendered dynamically on the page.
- Task Sorting: Sort tasks by due date.
- Flask: Backend server to serve the HTML page and manage tasks.
- HTML/CSS/JavaScript: Frontend for managing tasks and rendering notes.
- JSON: Storage for tasks with persistence across sessions.
- YAML: Storage for task categories.
- Showdown.js: A library for converting Markdown to HTML.
- Flexbox: For clean, responsive task layout.
- Python 3.x
- pip (Python package installer)
-
Clone the repository:
git clone https://github.com/MiConnell/todo-list-with-notes.git cd todo-list-with-notes
-
Create a virtual environment (optional but recommended):
python -m venv venv source venv/bin/activate # On Windows: venv\Scripts\activate
-
Install the required Python packages:
pip install -r requirements.txt
-
Start the Flask development server:
python app.py
-
Open your web browser and go to
http://localhost:42069
to use the Todo List app.
├── app.py # Main Flask backend
├── templates
│ └── index.html # Main HTML page for the app
├── static
│ ├── css
│ │ └── style.css # Styles for the app
│ └── js
│ └── script.js # Frontend logic
├── tasks.json # Stores task data persistently
├── categories.yaml # Stores task categories
├── README.md # Documentation for the project
└── requirements.txt # Python dependencies
tasks.json
: Stores task data, including task names, due dates, categories, completion status, and completed date.categories.yaml
: Stores task categories that can be selected when adding or editing tasks.
-
Add a Task:
- Enter the task name, due date, and category, then click Add Task.
- The task will appear in the Other Tasks list by default.
-
Move a Task to Current Tasks:
- Click Select next to a task in Other Tasks to move it to Current Tasks.
-
Complete a Task:
- Check the box next to a task. It will automatically move to the Completed Tasks section and record the completion date.
-
View Completed Tasks:
- You can toggle the visibility of Completed Tasks using the Toggle button.
- Tasks will show the date they were completed next to their category.
-
Edit a Task:
- Click Edit next to a task to change its details.
- After making changes, click Save to update the task.
-
Markdown Notes:
- Use the Markdown editor at the bottom of the page to add notes.
- Click Render Notes to view the formatted Markdown below the editor.
Contributions are welcome! If you'd like to report issues or request new features, please create an issue or submit a pull request.
- Fork the repository.
- Create a new branch:
git checkout -b feature-new-task
- Make your changes and commit:
git commit -m "Add new task feature"
- Push to your fork:
git push origin feature-new-task
- Create a pull request.
- Task Prioritization: Add priority levels to tasks.
- Notifications: Send email or browser notifications for tasks close to their due date.
- Search and Filter: Add the ability to search for and filter tasks by category or due date.
This project is licensed under the MIT License. See the LICENSE
file for details.