-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
128 lines (112 loc) · 3.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!DOCTYPE html>
<html>
<head>
<title>Tasks</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style>
body{
margin-top: 6em;
}
.completed{
text-decoration: line-through;
}
.btn-width{
width: 182px;
}
.input-height{
width: 346px;
height: 30px;
}
.container{
width: 600px;
}
strong{
line-height: 2.2;
}
.completed{
width: 117px;
}
.info-message{
position: absolute;
top: 1.2em;
width: 569px;
}
</style>
</head>
<body>
<div class="container" id="tasks">
<div class="info-message alert alert-danger text-center" v-if="showError" role="alert">
Please provide a name for your new task!
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title clearfix">
{{ message }}
</h3>
</div>
<ul class="list-group">
<li class="list-group-item clearfix" v-for="task in tasklist" >
<strong v-if="!task.editing">{{ task.description }}</strong>
<input v-model="task.description" v-bind:placeholder="task.description" v-if="task.editing" @keyup.enter="editTask(task)" type="text" class="form-control input-height pull-left">
<div class="btn-group btn-group-sm pull-right" role="group" v-if="!task.completed">
<button type="button" class="btn btn-default" @click="completeTask(task)">Complete</button>
<button type="button" @click="task.editing = true" class="btn btn-default">Edit</button>
<button type="button" class="btn btn-default" @click="removeTask(task)">Remove</button>
</div>
<div class="btn-group btn-group-sm pull-right" role="group" v-else>
<button class="btn btn-default btn-sm completed text-muted disabled">Completed</button>
<button type="button" class="btn btn-default" @click="removeTask(task)">Remove</button>
</div>
</li>
<li class="list-group-item clearfix">
<input v-model="newTaskName" :placeholder="placeholderText" @keyup="showError = false" @keyup.enter="newTask" type="text" class="form-control input-height pull-left new-task-btn">
<button class="btn btn-success btn-sm pull-right btn-width" @click="newTask">Add Task</button>
</li>
</ul>
</div>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#tasks',
data: {
message: 'Tasks',
placeholderText: 'My new task',
completed: null,
newTaskName: '',
showError: false,
tasklist: [
{ description: 'Read', completed: true, editing: false },
{ description: 'Write', completed: true, editing: false },
{ description: 'Edit', completed: false, editing: false },
{ description: 'Publish', completed: false, editing: false }
]
},
methods: {
completeTask: function(task){
task.completed = true;
},
newTask: function(){
if (this.newTaskName) {
this.tasklist.push({description: this.newTaskName, completed: false, editing: false});
this.showError = false;
}
else {
console.log("This isnt happening");
this.showError = true;
}
},
removeTask: function(task){
this.tasklist.splice(this.tasklist.indexOf(task), 1);
console.log(task);
},
editTask: function(task){
task.editing = false;
console.log(task);
}
}
})
</script>
</body>
</html>