Skip to content

Commit 408fe3f

Browse files
lulunac27alulunac27a
committed
Add Netlify link to README
1 parent 858a8e7 commit 408fe3f

File tree

8 files changed

+699
-943
lines changed

8 files changed

+699
-943
lines changed

‎public/index.html‎

Lines changed: 3 additions & 5 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,11 +9,9 @@
99
</head>
1010
<body>
1111
<noscript>
12-
<strong
13-
>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
12+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
1413
properly without JavaScript enabled. Please enable it to
15-
continue.</strong
16-
>
14+
continue.</strong>
1715
</noscript>
1816
<div id="app"></div>
1917
<!-- built files will be auto injected -->

‎src/App.vue‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
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
7-
styles. It supports gamification like levels and experience points (XP).
6+
This is a task list application using Vue, TypeScript, and Vuex with SCSS styles. It supports gamification like levels and experience points (XP).
87
</p>
9-
<NewTodo />
10-
<TodoList />
8+
<NewTodo/>
9+
<TodoList/>
1110
</div>
1211
</template>
1312

@@ -25,4 +24,4 @@ export default defineComponent({
2524
});
2625
</script>
2726

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

‎src/components/NewTodo.vue‎

Lines changed: 36 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,28 @@
11
<template>
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 />
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>
248
<select class="todo-input" id="priority" v-model="priority" required>
259
<option value="1">Low</option>
2610
<option value="2">Medium</option>
27-
<option value="3">High</option></select
28-
><br />
29-
Difficulty:<br />
11+
<option value="3">High</option></select><br>
12+
Difficulty:<br>
3013
<select class="todo-input" id="difficulty" v-model="difficulty" required>
3114
<option value="1">Easy</option>
3215
<option value="2">Medium</option>
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-
>
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>
5321
<option value="1">Daily</option>
5422
<option value="2">Weekly</option>
5523
<option value="3">Monthly</option>
5624
<option value="4">Yearly</option>
57-
<option value="5">Once</option></select
58-
><br />
25+
<option value="5">Once</option></select><br>
5926
<button type="submit">Add Task</button>
6027
</form>
6128
</template>
@@ -65,29 +32,23 @@ import store from "@/store";
6532
import { Difficulty, Priority, RepeatInterval } from "./TodoList.vue";
6633
import { defineComponent } from "vue";
6734
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
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
8147
}
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
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
8850
89-
export default defineComponent({
90-
//define component to default values when task is created
51+
export default defineComponent({//define component to default values when task is created
9152
data() {
9253
return {
9354
task: "",
@@ -98,18 +59,16 @@ export default defineComponent({
9859
repeatInterval: RepeatInterval?.Once, //set default task repetition interval to one-time
9960
newId: 0, //initial task id is 0
10061
isCompleted: false, //task not completed if a task is created
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
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
10768
};
10869
},
10970
mounted() {
110-
const dueDateInput = document.getElementById(
111-
"due-date",
112-
) as HTMLInputElement; //get due date value as input element
71+
const dueDateInput = document.getElementById("due-date") as HTMLInputElement;//get due date value as input element
11372
dueDateInput.min = currentLocalDate.toISOString().split("T")[0]; //task minimum due date must be today
11473
},
11574
methods: {

‎src/components/TodoList.scss‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,25 @@
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 {
19-
//overdue tasks
20-
color: red; //set text color to red for overdue tasks
21-
font-weight: bold; //bold text for overdue tasks
18+
.overdue {//overdue tasks
19+
color: red;//set text color to red for overdue tasks
20+
font-weight: bold;//bold text for overdue tasks
2221
}
2322

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

0 commit comments

Comments
 (0)