Skip to content

Instantly share code, notes, and snippets.

@danomanion

danomanion/index.html

Created March 22, 2018 09:21
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save danomanion/71f1aba4fdd8dd56b51b43f71f7b3e1f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save danomanion/71f1aba4fdd8dd56b51b43f71f7b3e1f to your computer and use it in GitHub Desktop.
Download ZIP
Vue.js Hobbit Todos
Raw
index.html
<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>
&nbsp;
</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>
Raw
script.js
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)
}
}
});
Raw
style.scss
$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;
}
Raw
vue-js-hobbit-todos.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment