The frontend of the "To Do List" application is built using Vue.js. It provides a user interface for creating, editing, and managing tasks with deadlines.
- Framework: Vue.js
- Build Tool: Webpack
- Package Manager: npm
- Node.js (version 14 or above) - Download
- npm (comes with Node.js)
-
Navigate to the
frontenddirectory:cd frontend -
Install the necessary dependencies:
npm install
-
Start the development server:
npm run serve
The frontend will be available at http://localhost:8080.
-
Add New Task: Click the "+" icon next to the title "TO DO LIST" to open the form for adding a new task.
- You must provide a title and an optional description for the task.
- The deadline field is not required, and tasks with expired deadlines will be highlighted in red.
-
Edit Task: To edit an existing task, click the pencil icon (✏️) next to the task. A pop-up will appear where you can modify the title, description, and deadline (the rules for adding a task are also applied for editing).
-
Complete Task: To mark a task as complete, simply check the box next to it. Completed tasks will be moved to the bottom of the list, and a popup will appear saying "Task Completed! Congratulations! 🎉" with a progress bar indicating how long the popup will remain visible. The popup countdown will pause if you hover over it.
-
Delete Task: To delete a task, click the trash can icon (🗑️) next to the task.
- Past Deadline: If a task’s deadline has passed, the deadline text will turn red.
- Task Order: Tasks are displayed in the order of their deadlines. Completed tasks are listed at the bottom, also ordered by their deadline.
- The layout is responsive and will adjust for different screen sizes.
- Tasks are displayed in a list format, with each task having its own separate box with rounded borders.