A todo app created with Vue.js
A Pen by Christina Gorton on CodePen.
<title>Todo List App</title> | |
<body> | |
<div class="container"> | |
<div class="container col-sm-8 col-sm-offset-2"> | |
<div id="taskApp"> | |
<h1>Hobbit Todos</h1> | |
<!-- Add new task form --> | |
<div class="panel panel-default"> | |
<h2 class='text-center'>Add New Task</h2> | |
<form v-on:submit='addTask'> | |
<div class="col-sm-8"> | |
<input type="text" class='form-control' v-model='tasks.name'> | |
</div> | |
<div class="col-sm-4"> | |
<input type="submit" value='Add' class='btn btn-primary btn-block'> | |
</div> | |
</form> | |
| |
</div> | |
<table class="table"> | |
<thead> | |
<th>Done</th> | |
<th>Task</th> | |
<th>Delete</th> | |
</thead> | |
<tbody> | |
<tr v-for='task in tasks'> | |
<td> | |
<input type="checkbox" value="1" id="checkboxFourInput" name="" v-model="task.done" /> | |
</td> | |
<td><span :class="{ taskDone: task.done }">{{ task.name }}</span></td> | |
<td><button class="btn btn-danger btn-block" v-on:click="deleteTask(task)">Delete</button></td> | |
</tr> | |
</tbody> | |
</table> | |
</div> | |
</div> | |
</div> | |
</body> | |
</html> |
var taskApp = new Vue({ | |
el: '#taskApp', | |
data: { | |
tasks: [ | |
{ name: 'Take a Nap', done: false }, | |
{ name: 'Buy some Old Toby', done: false }, | |
{ name: 'Go on an Adventure', done: false }, | |
{ name: "Don't forget the handkerchief and pipe", done: false }, | |
] | |
}, | |
methods: { | |
addTask: function(e) { | |
e.preventDefault(); | |
this.tasks.push({ | |
name: this.tasks.name, | |
done: false | |
}); | |
}, | |
deleteTask: function(task) { | |
this.tasks.splice(this.tasks.indexOf(task), 1) | |
} | |
} | |
}); |
$delete: #B99E57; | |
$color1: rgba(176, 150, 111, 1); | |
$color2: rgba(73, 70, 47, 1); | |
$color3: rgba(96, 116, 78, 1); | |
$color4: rgba(34, 34, 18, 1); | |
$color5: rgba(171, 172, 87, 1); | |
body, .panel{ | |
background-color: $color2; | |
font-family: 'Eagle Lake', cursive; | |
text-align: center; | |
font-weight:400; | |
} | |
body{ | |
background-image: url("https://s-media-cache-ak0.pinimg.com/originals/55/fa/28/55fa28fe306504971788679138c458a6.jpg"); | |
background-size: 100%; | |
background-repeat: no-repeat; | |
} | |
.container { | |
position: relative; | |
margin: auto; | |
margin-top: 30px; | |
height: 500px; | |
width: 400px; | |
} | |
#taskApp{ | |
background:$color3; | |
border-radius:20px; | |
border:5px solid $color3; | |
border-bottom:1px; | |
} | |
.panel { | |
border-radius: 20px; | |
border: 1px solid $color3; | |
} | |
h1, h2, span, th{ | |
color:$delete; | |
} | |
.taskDone { | |
text-decoration: line-through; | |
} | |
.btn-primary { | |
text-align: center; | |
color: #fff; | |
background-color: $color1; | |
border-color: $color3; | |
border-radius: 15px; | |
margin-right: 5px; | |
text-align: center; | |
} | |
.btn-danger { | |
color: #fff; | |
background-color:$color5; | |
border-color: #B99E57; | |
border-radius: 20px; | |
text-align: center; | |
position: relative; | |
} | |
.btn-danger:hover{ | |
background: #FFF07C * .9; | |
border-color: #FFF07C; | |
} | |
th, span{ | |
text-align:center; | |
font-size:15px; | |
} | |
A todo app created with Vue.js
A Pen by Christina Gorton on CodePen.