-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
61 lines (54 loc) · 2.51 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>To Do List in Vue.js | Toma Nistor</title>
<meta name="description" content="A simple To Do List built with Vue.js.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@TomaNistor">
<meta name="twitter:creator" content="@TomaNistor">
<meta property="og:title" content="To Do List in Vue.js">
<meta property="og:type" content="website">
<meta property="og:url" content="https://tomanistor.com/to-do-list">
<meta property="og:image" content="https://tomanistor.com/to-do-list/images/to-do-list-screenshot.jpg">
<meta property="og:description" content="A simple To Do List built with Vue.js.">
<link rel="stylesheet" href="styles/style.css">
</head>
<body>
<header>
<h1>To Do List</h1>
</header>
<div class="container" id="todo">
<!-- Input panel -->
<section class="panel">
<input type="checkbox" id="mark-all" v-bind:checked="areAllChecked" v-on:click="checkAll">
<input type="text" placeholder="What do you need to do?" autofocus class="text-input" v-model="newTask" v-on:keyup.enter="addTask">
<button v-on:click="clearList">Clear List</button>
</section>
<!-- List of items -->
<ul class="list">
<li v-for="task in taskList" v-bind:class="{done: task.checked}">
<input type="checkbox" class="checkbox" v-model="task.checked">
<label for="checkbox" v-on:click="editTask(task)" v-show="task != activeEdit">{{ task.text }}</label>
<input type="text" class="text-input" v-model="task.text" @blur="doneEdit(task)" v-show="task == activeEdit" v-on:keyup.enter="doneEdit(task)">
<button class="delete" v-on:click="removeTask(task)">X</button>
</li>
</ul>
<!-- Code display -->
<section class="panel panel-bottom">
<div class="code">
<h2>Vue.js Data</h2>
<p>The code here demonstrates the two-way data binding of Vue.js. Interaction with the To Do List app above updates the data below instantaneously. That's pretty neat.</p>
<pre>{{ $data }}</pre>
</div>
</section>
</div>
<footer>
<!-- Use https://unpkg.com/vue for development and minified version for production -->
<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="scripts/script.js"></script>
</script>
</footer>
</body>
</html>