A note-taking app built with TypeScript and Vue, allowing users to create, prioritize, edit, delete, and manage tasks with various filter and sort functionalities.
- Add tasks with priority levels: low, medium, high
- Edit tasks (text and priority)
- Delete individual tasks
- Mark tasks as completed
- Filter tasks by status (completed/incomplete) or priority (low, medium, high)
- Sort tasks by priority (default, high to low, low to high)
- Smooth task reordering with
v-auto-animate - Planned improvements: Add a "Delete All" tasks function and improve accessibility.
- Node.js installed on your machine
- Clone the repository:
git clone https://github.com/chayboats/typescript-vue-todo.git
- Navigate to the project directory:
cd typescript-vue-todo - Install dependencies:
npm install
- Start the development server:
npm run dev
- Visit the app locally at
http://localhost:5170or try the live version on Netlify.
- TypeScript
- Vue.js
- v-auto-animate
- HTML5 & CSS3
This project was my first experience with TypeScript, helping me improve my understanding of type definitions and stricter typing within a Vue.js project. I also gained experience with UI transitions using v-auto-animate and managing state in a task management system.
In future updates, I plan to:
- Add a "Delete All" tasks option.
- Improve accessibility to meet Web Accessibility standards.
- Ensure tasks are navigable via keyboard (e.g., tab keys) and adjust color contrast to better distinguish task priorities.
If you have any questions, comments, or suggestions, please don't hesitate to reach out. I'd love to hear from you!
Chaley Williams
- Email: chaleylwilliams@gmail.com
- GitHub: chayboats
Thank you for visiting my repository!