https://github.com/anjola-adeuyi/task_tracker_vue

Task Tracker Vue is a simple project built with Vue.js to track tasks with reminders.
https://github.com/anjola-adeuyi/task_tracker_vue

api-client api-rest crud crud-api crud-application crud-operation javascript json-api json-server routing vue vue-cli vue-router vue3 vuejs

Last synced: about 9 hours ago
JSON representation

Task Tracker Vue is a simple project built with Vue.js to track tasks with reminders.

• Host: GitHub
• URL: https://github.com/anjola-adeuyi/task_tracker_vue
• Owner: anjola-adeuyi
• Created: 2024-02-27T22:01:19.000Z (8 months ago)
• Default Branch: main
• Last Pushed: 2024-02-28T02:36:42.000Z (8 months ago)
• Last Synced: 2024-02-28T23:32:30.473Z (8 months ago)
• Topics: api-client, api-rest, crud, crud-api, crud-application, crud-operation, javascript, json-api, json-server, routing, vue, vue-cli, vue-router, vue3, vuejs
• Language: Vue
• Homepage: https://task-tracker-vue-seven.vercel.app
• Size: 187 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Task Tracker Vue

Task Tracker Vue is a simple project built with Vue.js to track tasks with reminders. [https://task-tracker-vue-seven.vercel.app/](https://task-tracker-vue-seven.vercel.app/)

## Key Features when working with Vue

- **Event Emission**: Utilizes Vue's event emission for communication between components.

- **Data Binding**: Demonstrates data binding capabilities in Vue.js.

- **Methods Usage**: Incorporates Vue methods for handling user interactions.

- **Props**: Utilizes props to pass data between parent and child components.

- **Dynamic Styling**: Shows dynamic styling using Vue directives.

- **Iterating Over Tasks**: Utilizes Vue's `v-for` directive for rendering tasks dynamically.

## Vue Code Snippets

```markdown

In Vue:

- `:` -> `v-bind`

- `@` -> `v-on`

- `v-bind:style="{ background: color }"` -> `:style="{ background: color }"`

- `v-on:click="onClick()"` -> `@click="onClick()"`

- `v-on:dblclick="$emit('toggle-reminder', task.id)"` -> `@dblclick="$emit('toggle-reminder', task.id)"`

- `v-on:delete-task="deleteFromTasks(task.id)"` -> `@delete-task="deleteFromTasks(task.id)"`

- `v-bind:class="[task.reminder ? 'reminder' : '', 'task']"` -> `:class="[task.reminder ? 'reminder' : '', 'task']"`

- `v-bind:tasks="tasks"` -> `:tasks="tasks"`

- `v-for="task in tasks"` -> `:key="task.id" v-for="task in tasks"`

```

## Usage

1. Add Task: Click on the input field and enter a task description, then press Enter to add it to the list.

2. Toggle Reminder: Double click on a task to toggle its reminder status.

3. Delete Task: Click on the delete icon next to a task to remove it from the list.

4. Fetch Task from API

![assets/tracker_preview.png](src/assets/preview.png)

## Project Setup

To set up the project, follow these simple steps:

1. **Install Dependencies**: Run the following command to install project dependencies:

```sh

npm install

```

1. **Compile and Hot-Reload for Development**: For development purposes, compile and enable hot-reloading with:

```sh

npm run dev

```

1. **Compile and Minify for Production**: When ready for production, compile and minify the project using:

```sh

npm run build

```