Skip to content

Commit 5b3dae5

Browse files
lulunac27alulunac27a
committed
Format code and add Netlify link to README
1 parent 408fe3f commit 5b3dae5

File tree

12 files changed

+958
-709
lines changed

12 files changed

+958
-709
lines changed

‎.gitignore‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,3 @@ pnpm-debug.log*
2121
*.njsproj
2222
*.sln
2323
*.sw?
24-
.vercel

‎README.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
# Vue gamification todo list app with Vuex, SCSS and TypeScript
1+
# Vue gamification todo list app with Vuex, SCSS, and TypeScript
22

33
This application is a todo list with task repetition with level and experience points,
44
and it stores to local storage using `vuex-persistedstate`.
5+
Try it on Netlify: https://gamification-todo-list-vue-typescript.netlify.app/
56

67
## Contents
78

8-
`src`: Source for Vue, SCSS and TypeScript files.
9-
`src/components`: Vue components to render as HTML with SCSS styles.
10-
`src/store`: Vuex store and store options.
9+
- `src`: Source for Vue, SCSS, and TypeScript files.
10+
- `src/components`: Vue components to render as HTML with SCSS styles.
11+
- `src/store`: Vuex store and store options.
12+
13+
Try it on Netlify: https://gamification-todo-list-vue-typescript.netlify.app/
1114

1215
## Features
1316

‎docs/index.md‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
1-
# Vue gamification todo list app with Vuex, SCSS and TypeScript
1+
# Vue gamification todo list app with Vuex, SCSS, and TypeScript
22

33
This application is a todo list with task repetition with level and experience points,
44
and it stores to local storage using `vuex-persistedstate`.
5+
Try it on Netlify: https://gamification-todo-list-vue-typescript.netlify.app/
56

67
## Contents
78

8-
`src`: Source for Vue, SCSS and TypeScript files.
9-
`src/components`: Vue components to render as HTML with SCSS styles.
10-
`src/store`: Vuex store and store options.
9+
- `src`: Source for Vue, SCSS, and TypeScript files.
10+
- `src/components`: Vue components to render as HTML with SCSS styles.
11+
- `src/store`: Vuex store and store options.
12+
13+
Try it on Netlify: https://gamification-todo-list-vue-typescript.netlify.app/
1114

1215
## Features
1316

‎public/index.html‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
33
<head>
44
<meta charset="utf-8" />
@@ -9,9 +9,11 @@
99
</head>
1010
<body>
1111
<noscript>
12-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
12+
<strong
13+
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
1314
properly without JavaScript enabled. Please enable it to
14-
continue.</strong>
15+
continue.</strong
16+
>
1517
</noscript>
1618
<div id="app"></div>
1719
<!-- built files will be auto injected -->

‎src/App.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,4 +5,4 @@
55
text-align: center;
66
color: #2c3e50;
77
margin-top: 60px;
8-
}
8+
}

‎src/App.vue‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
<template>
2-
<img alt="Vue logo" src="./assets/logo.png"/>
2+
<img alt="Vue logo" src="./assets/logo.png" />
33
<div>
44
<h1>Todo List Application using Vue, TypeScript and Vuex</h1>
55
<p>
6-
This is a task list application using Vue, TypeScript, and Vuex with SCSS styles. It supports gamification like levels and experience points (XP).
6+
This is a task list application using Vue, TypeScript, and Vuex with SCSS
7+
styles. It supports gamification like levels and experience points (XP).
78
</p>
8-
<NewTodo/>
9-
<TodoList/>
9+
<NewTodo />
10+
<TodoList />
1011
</div>
1112
</template>
1213

@@ -24,4 +25,4 @@ export default defineComponent({
2425
});
2526
</script>
2627

27-
<link rel="stylesheet" lang="scss" src="./App.scss"/>
28+
<link rel="stylesheet" lang="scss" src="./App.scss" />

‎src/components/NewTodo.vue‎

Lines changed: 77 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,61 @@
11
<template>
2-
<form @submit.prevent="addTodo"><!--all fields are required in order to add a task-->
3-
Name:<br><!--task name can be up to 255 characters in length-->
4-
<input class="todo-input" id="name" type="text" placeholder="Enter task name" maxlength="255" v-model="task" required/><br>
5-
Due date:<br><!--task due date must be on or after today date-->
6-
<input class="todo-input" id="due-date" type="date" placeholder="Enter due date" v-model="originalDueDate" required/><br>
7-
Priority:<br>
2+
<form @submit.prevent="addTodo">
3+
<!--all fields are required in order to add a task-->
4+
Name:<br /><!--task name can be up to 255 characters in length-->
5+
<input
6+
class="todo-input"
7+
id="name"
8+
type="text"
9+
placeholder="Enter task name"
10+
maxlength="255"
11+
v-model="task"
12+
required
13+
/><br />
14+
Due date:<br /><!--task due date must be on or after today date-->
15+
<input
16+
class="todo-input"
17+
id="due-date"
18+
type="date"
19+
placeholder="Enter due date"
20+
v-model="originalDueDate"
21+
required
22+
/><br />
23+
Priority:<br />
824
<select class="todo-input" id="priority" v-model="priority" required>
925
<option value="1">Low</option>
1026
<option value="2">Medium</option>
11-
<option value="3">High</option></select><br>
12-
Difficulty:<br>
27+
<option value="3">High</option></select
28+
><br />
29+
Difficulty:<br />
1330
<select class="todo-input" id="difficulty" v-model="difficulty" required>
1431
<option value="1">Easy</option>
1532
<option value="2">Medium</option>
16-
<option value="3">Hard</option></select><br>
17-
Repeat every:<br>
18-
<input class="todo-input" id="repeat-every" type="number" placeholder="Enter number of days/weeks/months/years to repeat" v-model="repeatEvery" required min="1" step="1"/><br>
19-
Repeat interval:<br>
20-
<select class="todo-input" id="repeat-interval" v-model="repeatInterval" required>
33+
<option value="3">Hard</option></select
34+
><br />
35+
Repeat every:<br />
36+
<input
37+
class="todo-input"
38+
id="repeat-every"
39+
type="number"
40+
placeholder="Enter number of days/weeks/months/years to repeat"
41+
v-model="repeatEvery"
42+
required
43+
min="1"
44+
step="1"
45+
/><br />
46+
Repeat interval:<br />
47+
<select
48+
class="todo-input"
49+
id="repeat-interval"
50+
v-model="repeatInterval"
51+
required
52+
>
2153
<option value="1">Daily</option>
2254
<option value="2">Weekly</option>
2355
<option value="3">Monthly</option>
2456
<option value="4">Yearly</option>
25-
<option value="5">Once</option></select><br>
57+
<option value="5">Once</option></select
58+
><br />
2659
<button type="submit">Add Task</button>
2760
</form>
2861
</template>
@@ -32,23 +65,29 @@ import store from "@/store";
3265
import { Difficulty, Priority, RepeatInterval } from "./TodoList.vue";
3366
import { defineComponent } from "vue";
3467
35-
export interface TodoTask {//todo task interface
36-
task: string;//task name
37-
dueDate: Date;//task due date
38-
priority: number;//task priority
39-
difficulty: number;//task difficulty
40-
repeatEvery: number;//task repetition number of days/weeks/months/years
41-
repeatInterval: number;//task repetition interval
42-
newId: number;//task id
43-
isCompleted: boolean;//task completed or not
44-
timesCompleted: number;//number of times tasks has been completed
45-
streak: number;//task completion streak
46-
originalDueDate: Date;//task original due date in YYYY-MM-DD string
68+
export interface TodoTask {
69+
//todo task interface
70+
task: string; //task name
71+
dueDate: Date; //task due date
72+
priority: number; //task priority
73+
difficulty: number; //task difficulty
74+
repeatEvery: number; //task repetition number of days/weeks/months/years
75+
repeatInterval: number; //task repetition interval
76+
newId: number; //task id
77+
isCompleted: boolean; //task completed or not
78+
timesCompleted: number; //number of times tasks has been completed
79+
streak: number; //task completion streak
80+
originalDueDate: Date; //task original due date in YYYY-MM-DD string
4781
}
48-
const currentUtcDate: Date = new Date();//current UTC date
49-
const currentLocalDate: Date = new Date(currentUtcDate.setMinutes(currentUtcDate.getMinutes() - currentUtcDate.getTimezoneOffset()));//currect date in local time zone
82+
const currentUtcDate: Date = new Date(); //current UTC date
83+
const currentLocalDate: Date = new Date(
84+
currentUtcDate.setMinutes(
85+
currentUtcDate.getMinutes() - currentUtcDate.getTimezoneOffset(),
86+
),
87+
); //currect date in local time zone
5088
51-
export default defineComponent({//define component to default values when task is created
89+
export default defineComponent({
90+
//define component to default values when task is created
5291
data() {
5392
return {
5493
task: "",
@@ -59,16 +98,18 @@ export default defineComponent({//define component to default values when task i
5998
repeatInterval: RepeatInterval?.Once, //set default task repetition interval to one-time
6099
newId: 0, //initial task id is 0
61100
isCompleted: false, //task not completed if a task is created
62-
timesCompleted: 0,//set default task times completed to 0
63-
streak: 0,//set default task streak to 0
64-
rank: 1,//set default task rank to 1
65-
rankXp: 0,//set default task rank XP to 0
66-
rankProgress: 0,//set default rank progress to 0
67-
originalDueDate: currentLocalDate.toISOString().split("T")[0] //set a default original task due date to today
101+
timesCompleted: 0, //set default task times completed to 0
102+
streak: 0, //set default task streak to 0
103+
rank: 1, //set default task rank to 1
104+
rankXp: 0, //set default task rank XP to 0
105+
rankProgress: 0, //set default rank progress to 0
106+
originalDueDate: currentLocalDate.toISOString().split("T")[0], //set a default original task due date to today
68107
};
69108
},
70109
mounted() {
71-
const dueDateInput = document.getElementById("due-date") as HTMLInputElement;//get due date value as input element
110+
const dueDateInput = document.getElementById(
111+
"due-date",
112+
) as HTMLInputElement; //get due date value as input element
72113
dueDateInput.min = currentLocalDate.toISOString().split("T")[0]; //task minimum due date must be today
73114
},
74115
methods: {

‎src/components/TodoList.scss‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,27 @@
1-
@use "sass:math";//use math functions
1+
@use "sass:math"; //use math functions
22

3-
$margin: 10px;//default margin value
3+
$margin: 10px; //default margin value
44
h3 {
5-
margin: $margin 0 0;//no left, right and bottom margins for displaying task list header
5+
margin: $margin 0 0; //no left, right and bottom margins for displaying task list header
66
}
77

88
ul {
9-
list-style-type: none;//no bullets for unordered lists
10-
padding: 0;//no padding for unordered lists
11-
line-height: 150%;//more line spacing for easier to read text
9+
list-style-type: none; //no bullets for unordered lists
10+
padding: 0; //no padding for unordered lists
11+
line-height: 150%; //more line spacing for easier to read text
1212
}
1313

1414
li {
15-
margin: #{math.div($margin, 2)} $margin;//add line spacing between tasks
15+
margin: #{math.div($margin, 2)} $margin; //add line spacing between tasks
1616
}
1717

18-
.overdue {//overdue tasks
19-
color: red;//set text color to red for overdue tasks
20-
font-weight: bold;//bold text for overdue tasks
18+
.overdue {
19+
//overdue tasks
20+
color: red; //set text color to red for overdue tasks
21+
font-weight: bold; //bold text for overdue tasks
2122
}
2223

23-
#text-numeric-display {//text output and numeric values display
24-
font-weight: bold;//bold text for output and numeric values
25-
}
24+
#text-numeric-display {
25+
//text output and numeric values display
26+
font-weight: bold; //bold text for output and numeric values
27+
}

0 commit comments

Comments
 (0)