Skip to content

Commit d0fa4fc

Browse files
lulunac27alulunac27a
committedJan 20, 2024
Format code
1 parent 857aecf commit d0fa4fc

12 files changed

+225
-156
lines changed
 

‎.eslintrc.js

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
module.exports = {
22
root: true,
33
env: {
4-
node: true
4+
node: true,
55
},
6-
'extends': [
7-
'plugin:vue/vue3-essential',
8-
'eslint:recommended',
9-
'@vue/typescript/recommended'
6+
extends: [
7+
"plugin:vue/vue3-essential",
8+
"eslint:recommended",
9+
"@vue/typescript/recommended",
1010
],
1111
parserOptions: {
12-
ecmaVersion: 2020
12+
ecmaVersion: 2020,
1313
},
1414
rules: {
15-
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
16-
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
17-
}
18-
}
15+
"no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
16+
"no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
17+
},
18+
};

‎README.md

+5
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,29 @@
11
# typescript-app
22

33
## Project setup
4+
45
```
56
npm install
67
```
78

89
### Compiles and hot-reloads for development
10+
911
```
1012
npm run serve
1113
```
1214

1315
### Compiles and minifies for production
16+
1417
```
1518
npm run build
1619
```
1720

1821
### Lints and fixes files
22+
1923
```
2024
npm run lint
2125
```
2226

2327
### Customize configuration
28+
2429
See [Configuration Reference](https://cli.vuejs.org/config/).

‎babel.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
module.exports = {
22
presets: [
3-
'@vue/cli-plugin-babel/preset'
3+
"@vue/cli-plugin-babel/preset"
44
]
55
}

‎lint-staged.config.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
module.exports = {
2-
'*.{js,jsx,vue,ts,tsx}': 'vue-cli-service lint'
3-
}
2+
"*.{js,jsx,vue,ts,tsx}": "vue-cli-service lint",
3+
};

‎public/index.html

+7-5
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<!DOCTYPE html>
22
<html lang="">
33
<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 rel="icon" href="<%= BASE_URL %>favicon.ico">
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 rel="icon" href="<%= BASE_URL %>favicon.ico" />
88
<title><%= htmlWebpackPlugin.options.title %></title>
99
</head>
1010
<body>
1111
<noscript>
12-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
13+
properly without JavaScript enabled. Please enable it to
14+
continue.</strong>
1315
</noscript>
1416
<div id="app"></div>
1517
<!-- built files will be auto injected -->

‎src/App.vue

+10-10
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,23 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png">
2+
<img alt="Vue logo" src="./assets/logo.png" />
33
<div>
4-
<NewTodo/>
5-
<TodoList/>
4+
<NewTodo />
5+
<TodoList />
66
</div>
77
</template>
88

99
<script lang="ts">
10-
import { defineComponent } from 'vue';
11-
import NewTodo from './components/NewTodo.vue';
12-
import TodoList from './components/TodoList.vue';
10+
import { defineComponent } from "vue";
11+
import NewTodo from "./components/NewTodo.vue";
12+
import TodoList from "./components/TodoList.vue";
1313
1414
export default defineComponent({
15-
name: 'App',
15+
name: "App",
1616
components: {
1717
NewTodo,
18-
TodoList
19-
}
18+
TodoList,
19+
},
2020
});
2121
</script>
2222

23-
<link lang="scss" src="./App.scss"/>
23+
<link lang="scss" src="./App.scss" />

‎src/components/NewTodo.vue

+102-62
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,115 @@
11
<template>
2-
<form @submit.prevent="addTodo">
3-
Name:<br/>
4-
<input class="todo-input" id="name" type="text" placeholder="Enter task name" v-model="task" required/><br/>
5-
Due date:<br/>
6-
<input class="todo-input" id="dueDate" type="date" placeholder="Enter due date" v-model="dueDate" required/><br/>
7-
Priority:<br/>
8-
<select class="todo-input" id="priority" v-model="priority" required>
9-
<option value="1">Low</option><option value="2">Medium</option><option value="3">High</option></select><br/>
10-
Difficulty:<br/>
11-
<select class="todo-input" id="difficulty" v-model="difficulty" required>
12-
<option value="1">Easy</option><option value="2">Medium</option><option value="3">Hard</option></select><br/>
13-
Repeat often:<br/>
14-
<input class="todo-input" id="repeat-often" type="number" placeholder="Enter number of days/weeks/months/years to repeat" v-model="repeatOften" required min="1"/><br/>
15-
Repeat frequency:<br/>
16-
<select class="todo-input" id="repeat-frequency" v-model="repeatFrequency" required>
17-
<option value="1">Daily</option><option value="2">Weekly</option><option value="3">Monthly</option><option value="4">Yearly</option><option value="5">Once</option></select><br/>
18-
<button type="submit">Add Todo</button>
19-
</form>
2+
<form @submit.prevent="addTodo">
3+
Name:<br />
4+
<input
5+
class="todo-input"
6+
id="name"
7+
type="text"
8+
placeholder="Enter task name"
9+
v-model="task"
10+
required
11+
/><br />
12+
Due date:<br />
13+
<input
14+
class="todo-input"
15+
id="dueDate"
16+
type="date"
17+
placeholder="Enter due date"
18+
v-model="dueDate"
19+
required
20+
/><br />
21+
Priority:<br />
22+
<select class="todo-input" id="priority" v-model="priority" required>
23+
<option value="1">Low</option>
24+
<option value="2">Medium</option>
25+
<option value="3">High</option></select
26+
><br />
27+
Difficulty:<br />
28+
<select class="todo-input" id="difficulty" v-model="difficulty" required>
29+
<option value="1">Easy</option>
30+
<option value="2">Medium</option>
31+
<option value="3">Hard</option></select
32+
><br />
33+
Repeat often:<br />
34+
<input
35+
class="todo-input"
36+
id="repeat-often"
37+
type="number"
38+
placeholder="Enter number of days/weeks/months/years to repeat"
39+
v-model="repeatOften"
40+
required
41+
min="1"
42+
/><br />
43+
Repeat frequency:<br />
44+
<select
45+
class="todo-input"
46+
id="repeat-frequency"
47+
v-model="repeatFrequency"
48+
required
49+
>
50+
<option value="1">Daily</option>
51+
<option value="2">Weekly</option>
52+
<option value="3">Monthly</option>
53+
<option value="4">Yearly</option>
54+
<option value="5">Once</option></select
55+
><br />
56+
<button type="submit">Add Todo</button>
57+
</form>
2058
</template>
2159

2260
<script lang="ts">
23-
import store from '@/store';
24-
import { difficulty, priority, repeatFrequency } from './TodoList.vue';
25-
import { defineComponent } from 'vue';
61+
import store from "@/store";
62+
import { difficulty, priority, repeatFrequency } from "./TodoList.vue";
63+
import { defineComponent } from "vue";
2664
2765
export interface todoTask {
28-
task: string;
29-
dueDate: Date;
30-
priority: number;
31-
difficulty: number;
32-
repeatOften: number;
33-
repeatFrequency: number;
34-
newId: number;
35-
completed: boolean;
66+
task: string;
67+
dueDate: Date;
68+
priority: number;
69+
difficulty: number;
70+
repeatOften: number;
71+
repeatFrequency: number;
72+
newId: number;
73+
completed: boolean;
3674
}
3775
const currentUtcDate: Date = new Date();
38-
const currentLocalDate: Date = new Date(currentUtcDate.setMinutes(currentUtcDate.getMinutes() - currentUtcDate.getTimezoneOffset()));
76+
const currentLocalDate: Date = new Date(
77+
currentUtcDate.setMinutes(
78+
currentUtcDate.getMinutes() - currentUtcDate.getTimezoneOffset()
79+
)
80+
);
3981
40-
export default defineComponent ({
41-
data() {
42-
return {
43-
task: "",
44-
dueDate: currentLocalDate.toISOString().split('T')[0],//set default due date to today
45-
priority: priority.Low,//set default priority is low
46-
difficulty: difficulty.Easy,//set default difficulty is easy
47-
repeatOften: 1,
48-
repeatFrequency: repeatFrequency.Once,//set default task repetition to one-time
49-
newId: 0,//initial id is 0
50-
completed: false
51-
};
82+
export default defineComponent({
83+
data() {
84+
return {
85+
task: "",
86+
dueDate: currentLocalDate.toISOString().split("T")[0], //set default due date to today
87+
priority: priority.Low, //set default priority is low
88+
difficulty: difficulty.Easy, //set default difficulty is easy
89+
repeatOften: 1,
90+
repeatFrequency: repeatFrequency.Once, //set default task repetition to one-time
91+
newId: 0, //initial id is 0
92+
completed: false,
93+
};
94+
},
95+
mounted() {
96+
const dueDateInput = document.getElementById("dueDate") as HTMLInputElement;
97+
dueDateInput.min = currentLocalDate.toISOString().split("T")[0]; //minimum due date must be today
98+
},
99+
methods: {
100+
addTodo: function (): void | todoTask[] {
101+
store.dispatch("createTask", this);
102+
this.newId++;
103+
this.task = "";
104+
this.dueDate = currentLocalDate.toISOString().split("T")[0];
105+
this.priority = priority.Low;
106+
this.difficulty = difficulty.Easy;
107+
this.repeatOften = 1;
108+
this.repeatFrequency = repeatFrequency.Once;
109+
this.completed = false;
52110
},
53-
mounted() {
54-
const dueDateInput = document.getElementById('dueDate') as HTMLInputElement;
55-
dueDateInput.min = currentLocalDate.toISOString().split('T')[0];//minimum due date must be today
56-
},
57-
methods: {
58-
addTodo: function(): void | todoTask[] {
59-
store.dispatch("createTask", this);
60-
this.newId++;
61-
this.task = "";
62-
this.dueDate = currentLocalDate.toISOString().split('T')[0];
63-
this.priority = priority.Low;
64-
this.difficulty = difficulty.Easy;
65-
this.repeatOften = 1;
66-
this.repeatFrequency = repeatFrequency.Once;
67-
this.completed = false;
68-
}
69-
}
111+
},
70112
});
71113
</script>
72114

73-
<style lang="scss">
74-
75-
</style>
115+
<style lang="scss"></style>

0 commit comments

Comments
 (0)