-
Notifications
You must be signed in to change notification settings - Fork 0
/
listit.html
132 lines (108 loc) · 5.02 KB
/
listit.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
129
130
131
132
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>List It</title>
<!-- Reset -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<!-- Materialize -->
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css'>
<!-- Material Icons -->
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<!-- Custom Styles -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/todo.css">
</head>
<body>
<header>
<nav class="light-blue darken-4" role="navigation">
<div class="nav-wrapper container"><a id="logo-container" href="/experiments/" class="brand-logo center">From The Lab</a>
<ul id="nav-mobile" class="side-nav">
<li class="nav-intro light-blue valign-wrapper"><a href="/experiments" class="nav-title center">A Collection of Experiments</a></li>
<li><a href="/experiments/listit"><i class="material-icons logo">format_list_numbered</i>List It</a></li>
<li><a href="/experiments/stashit"><i class="material-icons logo">bookmark_border</i>Stash It</a></li>
<li><a href="/experiments/convertit"><i class="material-icons logo">cached</i>Convert It</a></li>
<li><a href="/experiments/rps"><i class="material-icons logo">content_cut</i>Rock, Paper, Scissors</a></li>
<li><a href="/experiments/now"><i class="material-icons logo">all_inclusive</i>Now</a></li>
<li><a href="/experiments/snake"><i class="material-icons logo">gesture</i>Snake</a></li>
</ul>
<a href="#" data-activates="nav-mobile" class="button-collapse"><i class="material-icons">menu</i></a>
</div>
</nav>
</header>
<main>
<section id="taskApp">
<div class="section no-pad-bot" id="index-banner">
<div class="container">
<h1 class="header center blue-grey-text">List It</h1>
</div>
</div>
<section id="createTasks">
<div class="container">
<div class="row">
<form v-on:submit='addTask'>
<div class="row">
<div class="input-field col s10 m9 offset-m1 l7 offset-l2 center">
<input type="text" class="task-input-field" v-model="tasks.name">
<label>Add A New Task</label>
</div>
<div class="col s1 center">
<button type="submit" class="btn-floating btn-large waves-effect waves-light light-blue"><i class="material-icons">add</i></button>
</div>
</div>
</form>
</div>
</div>
</section>
<section id="taskList" class="container">
<div class="row">
<ul class="collection">
<li class="collection-item" v-for="task in tasks" :class="{ taskDone: task.done }">
<label><input type="checkbox" v-model="task.done">{{ task.name }}</label>
<a class="secondary-content" href="#"><i class="material-icons delete" v-on:click="deleteTask(task)">delete</i></a>
</li>
</ul>
</div>
</section>
<section id="progressBar" class="container row" v-if="displayProgressBar">
<div class="completionProgressBar col s8 offset-s2">
<div class="completionProgressFill" :style="{ width: percentageOfTasksCompleted + '%' }">
<span class="tasksCompleted">{{ Math.round(percentageOfTasksCompleted) }}%</span>
</div>
</div>
</section>
</section>
</main>
<footer class="page-footer blue-grey">
<div class="container">
<div class="row">
<h5 class="white-text">About this Experiment</h5>
<p class="grey-text text-lighten-4">Built with <a class="blue-grey-text text-lighten-4" href="https://www.youtube.com/watch?v=QbLt7kud2rk&list=PLE-R8nHYxqN-42Ai-vxe6zsSZIwYsxdab">Vue.js</a>, this To-Do List app will hopefully inspire you to procrastinate a little bit less.</p>
</div>
</div>
<div class="footer-copyright">
<div class="container">
Made with ❤ by <a class="blue-grey-text text-lighten-3" href="http://melaniemagdalena.com">Melanie E Magdalena</a>
</div>
</div>
</footer>
<!-- Load Vue -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js'></script>
<!-- Load jQuery -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<!-- Load Materialize -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js'></script>
<!-- Init Todo.js -->
<script src="js/todo.js"></script>
<!-- Init Nav -->
<script>
(function($){
$(function(){
$('.button-collapse').sideNav();
}); // end of document ready
})(jQuery); // end of jQuery name space
</script>
</body>
</html>