├── .browserslistrc
├── .gitignore
├── README.md
├── babel.config.js
├── db.json
├── jsconfig.json
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── screenshots
    └── preview.gif
├── src
    ├── App.vue
    ├── components
    │   ├── AddTask.vue
    │   ├── Button.vue
    │   ├── Footer.vue
    │   ├── Header.vue
    │   ├── Task.vue
    │   └── Tasks.vue
    ├── main.js
    ├── router
    │   └── index.js
    ├── services
    │   └── tasksServices.js
    ├── styles
    │   ├── AddTask.css
    │   ├── App.css
    │   └── Task.css
    └── views
    │   ├── About.vue
    │   └── Home.vue
└── vue.config.js


/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | not dead
4 | not ie 11
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Task Tracker
 2 | 
 3 | It is a simple task tracker built with Vue JS. It enables you to create goals for yourself and set a day and a reminder to them.
 4 | 
 5 | This project was inspired from [Traversy Media Vue JS Crash Course](https://youtu.be/qZXt1Aom3Cs) 🙌🏽❤️
 6 | 
 7 | ## Preview
 8 | 
 9 | ![preview](./screenshots/preview.gif)
10 | 
11 | ## Project setup
12 | 
13 | ```bash
14 | git clone https://github.com/abdullahalshawafi/Task-Tracker.git
15 | cd Task-Tracker/
16 | npm install
17 | ```
18 | 
19 | ### Compile and hot-reloads for development
20 | 
21 | ```bash
22 | npm run serve
23 | ```
24 | 
25 | ### Compile and minify for production
26 | 
27 | ```bash
28 | npm run build
29 | ```
30 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "tasks": [
 3 |     {
 4 |       "id": 1,
 5 |       "text": "Learn Vue",
 6 |       "day": "March 1st at 10:00 AM",
 7 |       "reminder": true
 8 |     },
 9 |     {
10 |       "id": 2,
11 |       "text": "Learn Vuex",
12 |       "day": "April 1st at 11:00 PM",
13 |       "reminder": false
14 |     },
15 |     {
16 |       "id": 3,
17 |       "text": "Learn Vue Router",
18 |       "day": "May 1st at 12:00 PM",
19 |       "reminder": true
20 |     }
21 |   ]
22 | }


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "module": "esnext",
 5 |     "baseUrl": "./",
 6 |     "moduleResolution": "node",
 7 |     "paths": {
 8 |       "@/*": [
 9 |         "src/*"
10 |       ]
11 |     },
12 |     "lib": [
13 |       "esnext",
14 |       "dom",
15 |       "dom.iterable",
16 |       "scripthost"
17 |     ]
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "task-tracker",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "backend": "json-server --watch db.json --port 4000",
 7 |     "serve": "concurrently \"npm run backend\" \"vue-cli-service serve\"",
 8 |     "build": "vue-cli-service build"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.8.3",
12 |     "vue": "^3.2.13",
13 |     "vue-router": "^4.0.13"
14 |   },
15 |   "devDependencies": {
16 |     "@vue/cli-plugin-babel": "~5.0.0",
17 |     "@vue/cli-service": "~5.0.0",
18 |     "concurrently": "^7.2.0",
19 |     "json-server": "^0.17.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdullahalshawafi/Task-Tracker/00aff46934ad83874d152bd88b4559bb977659be/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width,initial-scale=1.0">
 8 |   <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
10 |     integrity="sha512-KfkfwYDsLkIlwQp6LFnl8zNdLGxu9YAA1QvwINks4PhcElQSvqcyVLLD9aMhXd13uQjoXtEKNosOWaZqXgel0g=="
11 |     crossorigin="anonymous" referrerpolicy="no-referrer" />
12 |   <title>Task Tracker</title>
13 | </head>
14 | 
15 | <body>
16 |   <noscript>
17 |     <strong>We're sorry but Task Tracker doesn't work properly without JavaScript enabled.
18 |       Please enable it to continue.</strong>
19 |   </noscript>
20 |   <div id="app"></div>
21 |   <!-- built files will be auto injected -->
22 | </body>
23 | 
24 | </html>


--------------------------------------------------------------------------------
/screenshots/preview.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/abdullahalshawafi/Task-Tracker/00aff46934ad83874d152bd88b4559bb977659be/screenshots/preview.gif


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="container">
 3 |     <Header
 4 |       @toggle-add-task="toggleAddTask"
 5 |       title="Task Tracker"
 6 |       :showAddTask="showAddTask"
 7 |     />
 8 |     <router-view :showAddTask="showAddTask"></router-view>
 9 |     <Footer />
10 |   </div>
11 | </template>
12 | 
13 | <script>
14 | import { ref } from "vue";
15 | import Header from "./components/Header.vue";
16 | import Footer from "./components/Footer.vue";
17 | 
18 | export default {
19 |   name: "App",
20 |   components: { Header, Footer },
21 |   setup() {
22 |     const showAddTask = ref(false);
23 | 
24 |     const toggleAddTask = () => {
25 |       showAddTask.value = !showAddTask.value;
26 |     };
27 | 
28 |     return { showAddTask, toggleAddTask };
29 |   },
30 | };
31 | </script>
32 | 
33 | <style>
34 | @import url("@/styles/App.css");
35 | </style>
36 | 


--------------------------------------------------------------------------------
/src/components/AddTask.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit="onSubmit" class="add-form">
 3 |     <div class="form-control">
 4 |       <label for="text">Task</label>
 5 |       <input
 6 |         type="text"
 7 |         v-model="text"
 8 |         name="text"
 9 |         id="text"
10 |         placeholder="Add Task"
11 |       />
12 |     </div>
13 |     <div class="form-control">
14 |       <label for="day">Day & Time</label>
15 |       <input
16 |         type="text"
17 |         v-model="day"
18 |         name="day"
19 |         id="day"
20 |         placeholder="Add Day & Time"
21 |       />
22 |     </div>
23 |     <div class="form-control-check">
24 |       <label for="reminder">Set Reminder</label>
25 |       <input type="checkbox" v-model="reminder" name="reminder" id="reminder" />
26 |     </div>
27 | 
28 |     <input type="submit" value="Save Task" class="btn btn-block" />
29 |   </form>
30 | </template>
31 | 
32 | <script>
33 | import { ref } from "vue";
34 | 
35 | export default {
36 |   name: "AddTask",
37 |   setup(_, { emit }) {
38 |     const text = ref("");
39 |     const day = ref("");
40 |     const reminder = ref(false);
41 | 
42 |     const onSubmit = (e) => {
43 |       e.preventDefault();
44 | 
45 |       if (!text.value.trim()) {
46 |         alert("Please add a task");
47 |         return;
48 |       }
49 | 
50 |       const newTask = {
51 |         text: text.value,
52 |         day: day.value,
53 |         reminder: reminder.value,
54 |       };
55 | 
56 |       text.value = "";
57 |       day.value = "";
58 |       reminder.value = false;
59 | 
60 |       emit("add-task", newTask);
61 |     };
62 | 
63 |     return { text, day, reminder, onSubmit };
64 |   },
65 | };
66 | </script>
67 | 
68 | <style scoped>
69 | @import url("@/styles/AddTask.css");
70 | </style>
71 | 


--------------------------------------------------------------------------------
/src/components/Button.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button
 3 |     @click="$emit('btn-click')"
 4 |     :style="{ background: color }"
 5 |     class="btn"
 6 |   >
 7 |     {{ text }}
 8 |   </button>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "Button",
14 |   props: {
15 |     text: String,
16 |     color: String,
17 |   },
18 | };
19 | </script>
20 | 


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer>
 3 |     <p>Copyright &copy; {{ year }}</p>
 4 |     <router-link to="/about">About</router-link>
 5 |   </footer>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: "Footer",
11 |   setup() {
12 |     return { year: new Date().getFullYear() };
13 |   },
14 | };
15 | </script>
16 | 


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header v-show="HomePage">
 3 |     <h1>{{ title }}</h1>
 4 |     <Button
 5 |       @btn-click="$emit('toggle-add-task')"
 6 |       :text="!showAddTask ? 'Add Task' : 'Close'"
 7 |       :color="showAddTask ? 'red' : 'green'"
 8 |     />
 9 |   </header>
10 | </template>
11 | 
12 | <script>
13 | import { computed } from "vue";
14 | import { useRoute } from "vue-router";
15 | import Button from "./Button.vue";
16 | 
17 | export default {
18 |   name: "Header",
19 |   props: {
20 |     title: String,
21 |     showAddTask: Boolean,
22 |   },
23 |   components: { Button },
24 |   emits: ["toggle-add-task"],
25 |   setup() {
26 |     const route = useRoute();
27 | 
28 |     const HomePage = computed(() => route.path === "/");
29 | 
30 |     return { HomePage };
31 |   },
32 | };
33 | </script>
34 | 


--------------------------------------------------------------------------------
/src/components/Task.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     @dblclick="$emit('toggle-reminder', task.id)"
 4 |     :class="[task.reminder ? 'reminder' : '', 'task']"
 5 |   >
 6 |     <h3>
 7 |       {{ task.text }}
 8 |       <i @click="$emit('delete-task', task.id)" class="fas fa-times"></i>
 9 |     </h3>
10 |     <p>{{ task.day }}</p>
11 |   </div>
12 | </template>
13 | 
14 | <script>
15 | export default {
16 |   name: "Task",
17 |   props: { task: Object },
18 | };
19 | </script>
20 | 
21 | <style scoped>
22 | @import url("@/styles/Task.css");
23 | </style>
24 | 


--------------------------------------------------------------------------------
/src/components/Tasks.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :key="task.id" v-for="task in tasks">
 3 |     <Task
 4 |       @toggle-reminder="$emit('toggle-reminder', task.id)"
 5 |       @delete-task="$emit('delete-task', task.id)"
 6 |       :task="task"
 7 |     />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import Task from "./Task.vue";
13 | 
14 | export default {
15 |   name: "Tasks",
16 |   props: { tasks: Array },
17 |   components: { Task },
18 |   emits: ["toggle-reminder", "delete-task"],
19 | };
20 | </script>
21 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import { createApp } from "vue";
2 | import router from "./router";
3 | import App from "./App.vue";
4 | 
5 | createApp(App).use(router).mount("#app");
6 | 


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from "vue-router";
 2 | import Home from "../views/Home.vue";
 3 | import About from "../views/About.vue";
 4 | 
 5 | const routes = [
 6 |   {
 7 |     path: "/",
 8 |     name: "Home",
 9 |     component: Home,
10 |   },
11 |   {
12 |     path: "/about",
13 |     name: "About",
14 |     component: About,
15 |   },
16 | ];
17 | 
18 | const router = createRouter({
19 |   history: createWebHistory(process.env.BASE_URL),
20 |   routes,
21 | });
22 | 
23 | export default router;
24 | 


--------------------------------------------------------------------------------
/src/services/tasksServices.js:
--------------------------------------------------------------------------------
 1 | export const createTask = async (task) => {
 2 |   const response = await fetch("api/tasks", {
 3 |     method: "POST",
 4 |     headers: {
 5 |       "Content-Type": "application/json",
 6 |     },
 7 |     body: JSON.stringify(task),
 8 |   });
 9 | 
10 |   const newTask = await response.json();
11 | 
12 |   return newTask;
13 | };
14 | 
15 | export const fetchTasks = async () => {
16 |   const response = await fetch("api/tasks");
17 |   const data = await response.json();
18 |   return data;
19 | };
20 | 
21 | export const toggleTaskReminder = async (task) => {
22 |   await fetch(`api/tasks/${task.id}`, {
23 |     method: "PATCH",
24 |     headers: {
25 |       "Content-Type": "application/json",
26 |     },
27 |     body: JSON.stringify({
28 |       reminder: !task.reminder,
29 |     }),
30 |   });
31 | };
32 | 
33 | export const removeTask = async (taskId) => {
34 |   const response = await fetch(`api/tasks/${taskId}`, {
35 |     method: "DELETE",
36 |   });
37 | 
38 |   return response.status === 200;
39 | };
40 | 


--------------------------------------------------------------------------------
/src/styles/AddTask.css:
--------------------------------------------------------------------------------
 1 | .add-form {
 2 |     margin-bottom: 40px;
 3 | }
 4 | 
 5 | .form-control {
 6 |     margin: 20px 0;
 7 | }
 8 | 
 9 | .form-control label {
10 |     display: block;
11 | }
12 | 
13 | .form-control input {
14 |     width: 100%;
15 |     height: 40px;
16 |     margin: 5px;
17 |     padding: 3px 7px;
18 |     font-size: 17px;
19 | }
20 | 
21 | .form-control-check {
22 |     display: flex;
23 |     align-items: center;
24 |     justify-content: space-between;
25 | }
26 | 
27 | .form-control-check label {
28 |     flex: 1;
29 | }
30 | 
31 | .form-control-check input {
32 |     flex: 2;
33 |     height: 20px;
34 | }


--------------------------------------------------------------------------------
/src/styles/App.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap");
 2 | 
 3 | * {
 4 |     box-sizing: border-box;
 5 |     margin: 0;
 6 |     padding: 0;
 7 | }
 8 | 
 9 | body {
10 |     font-family: "Poppins", sans-serif;
11 | }
12 | 
13 | header {
14 |     display: flex;
15 |     justify-content: space-between;
16 |     align-items: center;
17 |     margin-bottom: 20px;
18 | }
19 | 
20 | a {
21 |     color: #333;
22 | }
23 | 
24 | footer {
25 |     margin-top: 30px;
26 |     text-align: center;
27 | }
28 | 
29 | .container {
30 |     max-width: 500px;
31 |     margin: 30px auto;
32 |     overflow: auto;
33 |     min-height: 300px;
34 |     border: 1px solid steelblue;
35 |     padding: 30px;
36 |     border-radius: 5px;
37 | }
38 | 
39 | .btn {
40 |     display: inline-block;
41 |     background: #000;
42 |     color: #fff;
43 |     border: none;
44 |     padding: 10px 20px;
45 |     margin: 5px;
46 |     border-radius: 5px;
47 |     cursor: pointer;
48 |     text-decoration: none;
49 |     font-size: 15px;
50 |     font-family: inherit;
51 | }
52 | 
53 | .btn:focus {
54 |     outline: none;
55 | }
56 | 
57 | .btn:active {
58 |     transform: scale(0.98);
59 | }
60 | 
61 | .btn-block {
62 |     display: block;
63 |     width: 100%;
64 | }
65 | 
66 | .tasks-message {
67 |     text-align: center;
68 |     margin: 50px 0;
69 |     font-size: 1.5rem;
70 | }


--------------------------------------------------------------------------------
/src/styles/Task.css:
--------------------------------------------------------------------------------
 1 | .fas {
 2 |     color: red;
 3 | }
 4 | 
 5 | .task {
 6 |     background: #dbdbdb;
 7 |     margin: 5px;
 8 |     padding: 10px 20px;
 9 |     cursor: pointer;
10 | }
11 | 
12 | .task.reminder {
13 |     border-left: 5px solid green;
14 | }
15 | 
16 | .task h3 {
17 |     display: flex;
18 |     align-items: center;
19 |     justify-content: space-between;
20 | }


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h1>About</h1>
 3 |   <h3>Version 2.0.0</h3>
 4 |   <p>This is a simple todo app built with Vue.js and Vue Router.</p>
 5 |   <router-link to="/">Go back</router-link>
 6 | </template>
 7 | 
 8 | <script>
 9 | export default {
10 |   name: "About",
11 |   inheritAttrs: false,
12 | };
13 | </script>
14 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AddTask v-show="showAddTask" @add-task="addTask" />
 3 |   <p v-if="loading" class="tasks-message">Loading...</p>
 4 |   <p v-else-if="!tasks.length" class="tasks-message">
 5 |     There are no tasks yet. Set some goals for yourself!
 6 |   </p>
 7 |   <Tasks
 8 |     v-else
 9 |     @toggle-reminder="toggleReminder"
10 |     @delete-task="deleteTask"
11 |     :tasks="tasks"
12 |   />
13 | </template>
14 | 
15 | <script>
16 | import { onMounted, ref } from "vue";
17 | import {
18 |   createTask,
19 |   fetchTasks,
20 |   removeTask,
21 |   toggleTaskReminder,
22 | } from "../services/tasksServices";
23 | import AddTask from "@/components/AddTask.vue";
24 | import Tasks from "@/components/Tasks.vue";
25 | 
26 | export default {
27 |   name: "Home",
28 |   components: { AddTask, Tasks },
29 |   props: { showAddTask: Boolean },
30 |   setup(props) {
31 |     const loading = ref(false);
32 |     const tasks = ref([]);
33 | 
34 |     const addTask = async (task) => {
35 |       const newTask = await createTask(task);
36 |       tasks.value.push(newTask);
37 |     };
38 | 
39 |     const toggleReminder = async (taskId) => {
40 |       const task = tasks.value.find((task) => task.id === taskId);
41 |       await toggleTaskReminder(task);
42 |       task.reminder = !task.reminder;
43 |     };
44 | 
45 |     const deleteTask = async (taskId) => {
46 |       if (confirm("Are you sure you want to delete this task?")) {
47 |         const success = await removeTask(taskId);
48 |         success
49 |           ? (tasks.value = tasks.value.filter((task) => task.id !== taskId))
50 |           : alert("Error deleting task");
51 |       }
52 |     };
53 | 
54 |     onMounted(async () => {
55 |       loading.value = true;
56 |       tasks.value = await fetchTasks();
57 |       loading.value = false;
58 |     });
59 | 
60 |     return {
61 |       loading,
62 |       tasks,
63 |       addTask,
64 |       toggleReminder,
65 |       deleteTask,
66 |       ...props,
67 |     };
68 |   },
69 | };
70 | </script>
71 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const { defineConfig } = require("@vue/cli-service");
 2 | module.exports = defineConfig({
 3 |   transpileDependencies: true,
 4 |   devServer: {
 5 |     proxy: {
 6 |       "^/api": {
 7 |         target: "http://localhost:4000",
 8 |         changeOrigin: true,
 9 |         logLevel: "debug",
10 |         pathRewrite: { "^/api": "" },
11 |       },
12 |     },
13 |   },
14 | });
15 | 


--------------------------------------------------------------------------------