├── .browserslistrc
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── assets
    │   └── logo.png
    ├── main.js
    ├── views
    │   ├── About.vue
    │   └── Home.vue
    ├── components
    │   ├── Footer.vue
    │   ├── Button.vue
    │   ├── Tasks.vue
    │   ├── Task.vue
    │   ├── Header.vue
    │   └── AddTask.vue
    ├── router
    │   └── index.js
    └── App.vue
├── babel.config.js
├── vue.config.js
├── .gitignore
├── README.md
├── db.json
└── package.json


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


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/vue-crash-2021/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/bradtraversy/vue-crash-2021/HEAD/src/assets/logo.png


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


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


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <h3>Version 1.0.0</h3>
 3 |   <router-link to="/">Go Back</router-link>
 4 | </template>
 5 | 
 6 | <script>
 7 | export default {
 8 |   name: 'About',
 9 |   inheritAttrs: false, // disable 'non-props' warning
10 | };
11 | </script>
12 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   devServer: {
 3 |     proxy: {
 4 |       '^/api': {
 5 |         target: 'http://localhost:5000',
 6 |         changeOrigin: true,
 7 |         logLevel: 'debug',
 8 |         pathRewrite: { '^/api': '/' },
 9 |       },
10 |     },
11 |   },
12 | }
13 | 


--------------------------------------------------------------------------------
/src/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <footer>
 3 |     <p>Copyright &copy; 2021</p>
 4 |     <router-link to="/about">About</router-link>
 5 |   </footer>
 6 | </template>
 7 | 
 8 | <style scoped>
 9 | a {
10 |   color: #333;
11 | }
12 | 
13 | footer {
14 |   margin-top: 30px;
15 |   text-align: center;
16 | }
17 | </style>
18 | 


--------------------------------------------------------------------------------
/.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 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Vue Crash Course (Task Tracker)
 2 | 
 3 | > This is the project from the YouTube crash course
 4 | 
 5 | ## Project setup
 6 | 
 7 | ```
 8 | npm install
 9 | ```
10 | 
11 | ## Run the JSON-Server backend (http://localhost:5000)
12 | 
13 | ```
14 | npm run backend
15 | ```
16 | 
17 | ## Run the Vue dev server (http://localhost:8080)
18 | 
19 | ```
20 | npm run serve
21 | ```
22 | 
23 | ## Compiles and minifies for production
24 | 
25 | ```
26 | npm run build
27 | ```
28 | 


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "tasks": [
 3 |     {
 4 |       "id": "1",
 5 |       "text": "Doctors Appointment",
 6 |       "day": "March 5th at 2:30pm",
 7 |       "reminder": true
 8 |     },
 9 |     {
10 |       "id": "2",
11 |       "text": "Meeting with boss",
12 |       "day": "March 6th at 1:30pm",
13 |       "reminder": true
14 |     },
15 |     {
16 |       "id": "3",
17 |       "text": "Food shopping",
18 |       "day": "March 7th at 2:00pm",
19 |       "reminder": false
20 |     }
21 |   ]
22 | }


--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
 1 | import { createRouter, createWebHistory } from 'vue-router'
 2 | import Home from '../views/Home'
 3 | import About from '../views/About'
 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/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'
13 | 
14 | export default {
15 |   name: 'Tasks',
16 |   props: {
17 |     tasks: Array,
18 |   },
19 |   components: {
20 |     Task,
21 |   },
22 |   emits: ['delete-task', 'toggle-reminder'],
23 | }
24 | </script>
25 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-crash-2021",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "backend": "json-server --watch db.json --port 5000"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "json-server": "^0.16.3",
13 |     "vue": "^3.0.0",
14 |     "vue-router": "^4.0.4"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.5.0",
18 |     "@vue/cli-service": "~4.5.0",
19 |     "@vue/compiler-sfc": "^3.0.0"
20 |   }
21 | }
22 | 


--------------------------------------------------------------------------------
/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: {
18 |     task: Object,
19 |   },
20 | }
21 | </script>
22 | 
23 | <style scope>
24 | .fas {
25 |   color: red;
26 | }
27 | 
28 | .task {
29 |   background: #f4f4f4;
30 |   margin: 5px;
31 |   padding: 10px 20px;
32 |   cursor: pointer;
33 | }
34 | 
35 | .task.reminder {
36 |   border-left: 5px solid green;
37 | }
38 | 
39 | .task h3 {
40 |   display: flex;
41 |   align-items: center;
42 |   justify-content: space-between;
43 | }
44 | </style>
45 | 


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


--------------------------------------------------------------------------------
/src/components/Header.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <header>
 3 |     <h1>{{ title }}</h1>
 4 |     <Button
 5 |       v-show="homePage"
 6 |       @btn-click="$emit('toggle-add-task')"
 7 |       :text="showAddTask ? 'Close' : 'Add Task'"
 8 |       :color="showAddTask ? 'red' : 'green'"
 9 |     />
10 |   </header>
11 | </template>
12 | 
13 | <script>
14 | import Button from './Button'
15 | 
16 | export default {
17 |   name: 'Header',
18 |   props: {
19 |     title: String,
20 |     showAddTask: Boolean,
21 |   },
22 |   components: {
23 |     Button,
24 |   },
25 |   computed: {
26 |     homePage() {
27 |       if (this.$route.path === '/') {
28 |         return true
29 |       } else {
30 |         return false
31 |       }
32 |     },
33 |   },
34 | }
35 | </script>
36 | 
37 | <style scoped>
38 | header {
39 |   display: flex;
40 |   justify-content: space-between;
41 |   align-items: center;
42 |   margin-bottom: 20px;
43 | }
44 | </style>
45 | 


--------------------------------------------------------------------------------
/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 Header from './components/Header'
15 | import Footer from './components/Footer'
16 | 
17 | export default {
18 |   name: 'App',
19 |   components: {
20 |     Header,
21 |     Footer,
22 |   },
23 |   data() {
24 |     return {
25 |       showAddTask: false,
26 |     }
27 |   },
28 |   methods: {
29 |     toggleAddTask() {
30 |       this.showAddTask = !this.showAddTask
31 |     },
32 |   },
33 | }
34 | </script>
35 | 
36 | <style>
37 | @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400&display=swap');
38 | 
39 | * {
40 |   box-sizing: border-box;
41 |   margin: 0;
42 |   padding: 0;
43 | }
44 | 
45 | body {
46 |   font-family: 'Poppins', sans-serif;
47 | }
48 | 
49 | .container {
50 |   max-width: 500px;
51 |   margin: 30px auto;
52 |   overflow: auto;
53 |   min-height: 300px;
54 |   border: 1px solid steelblue;
55 |   padding: 30px;
56 |   border-radius: 5px;
57 | }
58 | 
59 | .btn {
60 |   display: inline-block;
61 |   background: #000;
62 |   color: #fff;
63 |   border: none;
64 |   padding: 10px 20px;
65 |   margin: 5px;
66 |   border-radius: 5px;
67 |   cursor: pointer;
68 |   text-decoration: none;
69 |   font-size: 15px;
70 |   font-family: inherit;
71 | }
72 | 
73 | .btn:focus {
74 |   outline: none;
75 | }
76 | 
77 | .btn:active {
78 |   transform: scale(0.98);
79 | }
80 | 
81 | .btn-block {
82 |   display: block;
83 |   width: 100%;
84 | }
85 | </style>
86 | 


--------------------------------------------------------------------------------
/src/components/AddTask.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <form @submit="onSubmit" class="add-form">
 3 |     <div class="form-control">
 4 |       <label>Task</label>
 5 |       <input type="text" v-model="text" name="text" placeholder="Add Task" />
 6 |     </div>
 7 |     <div class="form-control">
 8 |       <label>Day & Time</label>
 9 |       <input
10 |         type="text"
11 |         v-model="day"
12 |         name="day"
13 |         placeholder="Add Day & Time"
14 |       />
15 |     </div>
16 |     <div class="form-control form-control-check">
17 |       <label>Set Reminder</label>
18 |       <input type="checkbox" v-model="reminder" name="reminder" />
19 |     </div>
20 | 
21 |     <input type="submit" value="Save Task" class="btn btn-block" />
22 |   </form>
23 | </template>
24 | 
25 | <script>
26 | export default {
27 |   name: 'AddTask',
28 |   data() {
29 |     return {
30 |       text: '',
31 |       day: '',
32 |       reminder: false,
33 |     }
34 |   },
35 |   methods: {
36 |     onSubmit(e) {
37 |       e.preventDefault()
38 | 
39 |       if (!this.text) {
40 |         alert('Please add a task')
41 |         return
42 |       }
43 | 
44 |       const newTask = {
45 |         // id: Math.floor(Math.random() * 100000),
46 |         text: this.text,
47 |         day: this.day,
48 |         reminder: this.reminder,
49 |       }
50 | 
51 |       this.$emit('add-task', newTask)
52 | 
53 |       this.text = ''
54 |       this.day = ''
55 |       this.reminder = false
56 |     },
57 |   },
58 | }
59 | </script>
60 | 
61 | <style scoped>
62 | .add-form {
63 |   margin-bottom: 40px;
64 | }
65 | 
66 | .form-control {
67 |   margin: 20px 0;
68 | }
69 | 
70 | .form-control label {
71 |   display: block;
72 | }
73 | 
74 | .form-control input {
75 |   width: 100%;
76 |   height: 40px;
77 |   margin: 5px;
78 |   padding: 3px 7px;
79 |   font-size: 17px;
80 | }
81 | 
82 | .form-control-check {
83 |   display: flex;
84 |   align-items: center;
85 |   justify-content: space-between;
86 | }
87 | 
88 | .form-control-check label {
89 |   flex: 1;
90 | }
91 | 
92 | .form-control-check input {
93 |   flex: 2;
94 |   height: 20px;
95 | }
96 | </style>
97 | 


--------------------------------------------------------------------------------
/src/views/Home.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <AddTask v-show="showAddTask" @add-task="addTask" />
 3 |   <Tasks
 4 |     @toggle-reminder="toggleReminder"
 5 |     @delete-task="deleteTask"
 6 |     :tasks="tasks"
 7 |   />
 8 | </template>
 9 | 
10 | <script>
11 | import Tasks from '../components/Tasks'
12 | import AddTask from '../components/AddTask'
13 | export default {
14 |   name: 'Home',
15 |   props: {
16 |     showAddTask: Boolean,
17 |   },
18 |   components: {
19 |     Tasks,
20 |     AddTask,
21 |   },
22 |   data() {
23 |     return {
24 |       tasks: [],
25 |     }
26 |   },
27 |   methods: {
28 |     async addTask(task) {
29 |       const res = await fetch('api/tasks', {
30 |         method: 'POST',
31 |         headers: {
32 |           'Content-type': 'application/json',
33 |         },
34 |         body: JSON.stringify(task),
35 |       })
36 | 
37 |       const data = await res.json()
38 | 
39 |       this.tasks = [...this.tasks, data]
40 |     },
41 |     async deleteTask(id) {
42 |       if (confirm('Are you sure?')) {
43 |         const res = await fetch(`api/tasks/${id}`, {
44 |           method: 'DELETE',
45 |         })
46 | 
47 |         res.status === 200
48 |           ? (this.tasks = this.tasks.filter((task) => task.id !== id))
49 |           : alert('Error deleting task')
50 |       }
51 |     },
52 |     async toggleReminder(id) {
53 |       const taskToToggle = await this.fetchTask(id)
54 |       const updTask = { ...taskToToggle, reminder: !taskToToggle.reminder }
55 | 
56 |       const res = await fetch(`api/tasks/${id}`, {
57 |         method: 'PUT',
58 |         headers: {
59 |           'Content-type': 'application/json',
60 |         },
61 |         body: JSON.stringify(updTask),
62 |       })
63 | 
64 |       const data = await res.json()
65 | 
66 |       this.tasks = this.tasks.map((task) =>
67 |         task.id === id ? { ...task, reminder: data.reminder } : task
68 |       )
69 |     },
70 |     async fetchTasks() {
71 |       const res = await fetch('api/tasks')
72 | 
73 |       const data = await res.json()
74 | 
75 |       return data
76 |     },
77 |     async fetchTask(id) {
78 |       const res = await fetch(`api/tasks/${id}`)
79 | 
80 |       const data = await res.json()
81 | 
82 |       return data
83 |     },
84 |   },
85 |   async created() {
86 |     this.tasks = await this.fetchTasks()
87 |   },
88 | }
89 | </script>
90 | 


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