Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/yan-pi/vue-todo

VueTodo is a simple Todo list application built with Vue.js and Vite. It allows users to create and manage tasks, categorizing them as "business" or "personal," track their completion status, and edit or delete tasks as needed.
https://github.com/yan-pi/vue-todo

todo todoapp todolist vuejs

Last synced: 9 days ago
JSON representation

Host: GitHub
URL: https://github.com/yan-pi/vue-todo
Owner: yan-pi
Created: 2023-06-07T03:03:05.000Z (over 1 year ago)
Default Branch: main
Last Pushed: 2023-07-28T01:28:15.000Z (over 1 year ago)
Last Synced: 2024-11-28T22:19:18.020Z (2 months ago)
Topics: todo, todoapp, todolist, vuejs
Language: Vue
Homepage: https://vue-todo-yanpi.vercel.app
Size: 16.3 MB
Stars: 2
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

# VueTodo

## Features

- **Task Creation:** Users can create new tasks by providing a task title and selecting the task type as either "business" or "personal."
- **Task Management:** Users can view all tasks in a list format, sorted by their creation time. Each task displays its title, type, and completion status.
- **Task Completion:** Users can mark tasks as completed or mark them as incomplete if they are not finished yet.
- **Task Editing:** Users have the ability to edit the title, type, and completion status of tasks.
- **Task Deletion:** Users can delete unwanted tasks from the list.

## Installation

To run the VueTodo application locally, follow these steps:

1. Clone the repository:

```bash
git clone https://github.com/Yan-pi/VueTodo.git
```

2. Navigate to the project directory:

```bash
cd VueTodo
```

3. Install the dependencies using npm:

```bash
npm install
```

4. Start the development server:

```bash
npm run dev
```

5. Open your browser and visit `http://localhost:3000` to access the application.

## Usage

Once the application is running, you can start managing your tasks:

1. **Creating a Task:**
- Click on the "Add Task" button.
- Enter a task title in the input field.
- Select the task type as either "business" or "personal."
- Click the "Create" button to add the task to the list.

2. **Managing Tasks:**
- Each task is displayed in a card format.
- To mark a task as completed, click on the checkbox next to the task title.
- To mark a completed task as incomplete, click on the checkbox again.
- To edit a task, click on the "Edit" button on the task card. This will open a modal where you can modify the task title, type, or completion status.
- To delete a task, click on the "Delete" button on the task card. A confirmation prompt will appear, asking you to confirm the deletion.

## Technologies Used

VueTodo is built using the following technologies:

- Vue.js: A progressive JavaScript framework for building user interfaces.
- Vite: A fast build tool for modern web applications.
- Vuex: A state management pattern and library for Vue.js applications.
- Vue Router: A routing library for Vue.js applications.
- HTML5: The latest version of the HTML markup language.
- CSS3: The latest version of the Cascading Style Sheets language.

## Contributing

Contributions to VueTodo are welcome and encouraged! If you would like to contribute, please follow these steps:

1. Fork the repository.
2. Create a new branch for your feature or bug fix.
3. Make your changes and commit them with descriptive commit messages.
4. Push your changes to your forked repository.
5. Submit a pull request to the main repository.

Please ensure that your code follows the project's coding conventions and includes any necessary tests.

## License

VueTodo is open-source software licensed under the [MIT license](https://github.com/Yan-pi/VueTodo/blob/master/LICENSE).

## Contact

If you have any questions, suggestions, or feedback, please feel free to contact the project maintainer, Yan Pi, through the GitHub repository.